feat: Ui update to frappe ui v1.0.0

[trufurs]

This pull request includes a version bump and clarifies how icons are handled in the CRM sidebar configuration. The main updates are to the documentation, specifying that sidebar group headers do not support custom icons and updating the package version.

Documentation updates:

• Updated the CRM sidebar documentation in README.md to clarify that the icon property is not supported for sidebar items of type group, and that FCRM section headers use a chevron and text only.
• Removed the icon property from the "Procurement" group example in the CRM sidebar configuration in README.md to match the documentation.

Version update:

• Bumped the package version in frappe_crm_xt/__init__.py from 1.1.1 to 1.2.0.

[Copilot]

Pull request overview

Updates the extension for frappe-ui 1.0 compatibility, primarily modernizing styling and sidebar integration.

Changes:

• Upgrades frontend dependencies and design tokens.
• Reworks injected sidebar rows using native CRM markup.
• Updates supporting metadata, assets, and custom fields.

Reviewed changes

Copilot reviewed 20 out of 22 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
.github/workflows/copilot-code-review.yml	Adds review setup workflow.
.gitignore	Ignores Ruff cache.
pyproject.toml	Revises Frappe/CRM compatibility ranges.
frontend/package.json	Upgrades frappe-ui dependencies.
frontend/yarn.lock	Locks upgraded dependency tree.
frontend/pnpm-workspace.yaml	Removes pnpm build settings.
frontend/src/utils/sidebarRow.js	Adds native sidebar-row cloning utilities.
frontend/src/styles/bundle.css	Adds cross-version design-token aliases.
frontend/src/lucideIcons.js	Adds sidebar icons.
frontend/src/components/App.vue	Integrates cloned sidebar rows and collapse behavior.
frontend/src/components/SearchDialog.vue	Updates surface tokens and spacing.
frontend/src/components/ListFilterLocal.vue	Updates popover and typography tokens.
frontend/src/components/InjectedEventsTab.vue	Modernizes event-tab styling.
frontend/src/components/InjectedEventModal.vue	Modernizes modal styling.
frontend/src/components/ExtListView.vue	Teleports list headers and updates styling.
frontend/src/components/ExtListRows.vue	Updates typography utility.
frontend/src/components/EventNotifications.vue	Updates notification surface token.
frontend/src/components/Attendee.vue	Updates combobox styling.
frappe_crm_xt/setup/custom_fields.json	Removes filters and descriptions.
frappe_crm_xt/public/js/style.css	Removes obsolete generated CSS.
frappe_crm_xt/public/js/search_bar.js	Removes legacy search implementation.
frappe_crm_xt/__init__.py	Bumps version to 1.1.0.

Suppressed comments (2)

frontend/src/utils/sidebarRow.js:156

• Removing href makes cloned anchors non-focusable, while role="button" does not add native keyboard behavior. In CRM versions whose sidebar row contains an anchor, these custom rows can no longer be reached or activated by keyboard; add a tab stop and Enter/Space activation.

  row.querySelectorAll('a').forEach((a) => {
    a.removeAttribute('href')
    a.removeAttribute('target')
    a.setAttribute('role', 'button')
  })

frontend/src/utils/sidebarRow.js:204

• The cloned modern section label is a clickable div, but it has neither button semantics nor keyboard activation. Consequently the new collapsible groups cannot be toggled without a pointer; expose the header as a keyboard-operable button.

  const header = template.cloneNode(true)
  header.removeAttribute('id')
  header.classList.add('crm-xt', 'cursor-pointer', 'select-none')
  header.setAttribute('aria-label', label)
  header.setAttribute('aria-expanded', 'false')

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

Pull request overview

Copilot reviewed 20 out of 22 changed files in this pull request and generated no new comments.

Suppressed comments (4)

frontend/package.json:32

• This resolution forces ECharts 6.1.0 into frappe-ui@1.0.0-beta.24, even though that package explicitly declares echarts: ^5.6.0; the resulting lockfile confirms the incompatible major override. Remove the override, or upgrade to a frappe-ui release that explicitly supports ECharts 6 before forcing the new major.

    "echarts": "6.1.0"

frappe_crm_xt/setup/custom_fields.json:448

• Restoring this static filter is required for Desk and other clients that do not execute the CRM form script. The form-script fixture explicitly relies on these static authorized/push-enabled conditions; without them, users can select a calendar that cannot receive events and calendar sync subsequently fails.

      "insert_after": "custom_event_participants",
      "depends_on": "eval:doc.custom_sync_with_calendar"

frontend/src/utils/sidebarRow.js:118

• Removing href turns a cloned Frappe UI sidebar link into a non-focusable anchor. Since activation is wired only through a click listener, keyboard users can no longer reach or activate custom sidebar entries. Preserve button keyboard semantics by adding a tab stop and handling Enter/Space.

  row.querySelectorAll('a').forEach((a) => {
    a.removeAttribute('href')
    a.removeAttribute('target')
    a.setAttribute('role', 'button')
  })

frontend/src/utils/sidebarRow.js:153

• In frappe-ui 1.0.0-beta.24, sidebar-label is a plain <div>. This clone is subsequently used as a clickable expand/collapse control, but aria-expanded alone does not make it focusable or keyboard-operable. Give it button semantics and activate it on Enter/Space.

  header.classList.add('crm-xt', 'cursor-pointer', 'select-none')
  header.setAttribute('aria-label', label)
  header.setAttribute('aria-expanded', 'false')

[Copilot]

Pull request overview

Copilot reviewed 22 out of 25 changed files in this pull request and generated no new comments.

Suppressed comments (7)

frontend/package.json:33

• frappe-ui@1.0.0-beta.24 declares echarts@^5.6.0, but this resolution forces it to use the incompatible 6.x major (as reflected by the combined lockfile entry). That bypasses the dependency's tested range and exposes Frappe UI charts to ECharts 6 behavior/default changes. Remove this override, or upgrade to a Frappe UI release that explicitly supports ECharts 6.

  "resolutions": {
    "echarts": "6.1.0"
  }

frappe_crm_xt/setup/custom_fields.json:448

• Removing the static filter leaves non-CRM clients and direct API writes able to select any Google Calendar. The updated form script claims this is enforced server-side, but doc_events/task.py only checks that the field is present, and calendar sync then saves an Event with that calendar using ignore_permissions=True. Validate that the selected calendar is push-enabled/authorized and belongs to the current user before syncing; client-side filtering alone cannot enforce this.

      "options": "Google Calendar",
      "insert_after": "custom_event_participants",
      "depends_on": "eval:doc.custom_sync_with_calendar"

frontend/src/utils/sidebarRow.js:136

• The Frappe UI 1.0 sidebar route template contains an <a>. Removing its href makes the cloned control unfocusable, and role="button" does not add Enter/Space activation, so keyboard users cannot open any cloned search or custom-sidebar row. Keep it in the tab order and handle button keyboard activation (or replace it with a real <button>).

  row.querySelectorAll('a').forEach((a) => {
    a.removeAttribute('href')
    a.removeAttribute('target')
    a.setAttribute('role', 'button')

frontend/src/utils/sidebarRow.js:172

• In Frappe UI 1.0, data-slot="sidebar-label" is a non-interactive <div>. This clone is later used as a clickable group toggle, but adding cursor styling and aria-expanded does not make it focusable or keyboard-operable. Give non-interactive clones button semantics, tabindex="0", and Enter/Space handling, or render a real button.

  header.classList.add('crm-xt', 'cursor-pointer', 'select-none')
  header.setAttribute('aria-label', label)
  header.setAttribute('aria-expanded', 'false')

frontend/src/components/App.vue:327

• On the target Frappe UI version, the native sidebar label contains only label/divider markup, so this branch never renders icon. Because findNativeSectionLabel() succeeds in the upgraded UI, every configured group icon—including this app's layout-grid icon—is silently ignored despite icon being part of the documented crm_sidebar contract. Pass the icon into the cloned label and render it, or keep using row-style markup for icon-bearing group headers.

      const icon = item.icon || 'folder'
      const nativeLabel = findNativeSectionLabel(document)
      let headerBtn
      if (nativeLabel) {
        headerBtn = cloneNativeSectionLabel(nativeLabel, { label: item.label })

frappe_crm_xt/setup/custom_fields.json:286

• Deleting link_filters from this fixture does not clear it on upgraded sites. install_custom_fields() calls create_custom_fields(..., update=True), which merges only keys present in each definition, so existing installations retain the old @rtcamp.com restriction while fresh installations do not. Explicitly set this property to null (or add a migration) so upgrades converge to the new definition.

      "options": "User",
      "insert_after": "custom_project_type"

frappe_crm_xt/setup/custom_fields.json:447

• This omission also fails to remove the old filter during migration: create_custom_fields(..., update=True) only updates supplied keys. Existing sites therefore keep querying custom_is_google_calendar_authorized—the optional field this change is trying to stop depending on—while fresh installs behave differently. Supply a portable replacement explicitly (or clear it in a migration).

      "options": "Google Calendar",
      "insert_after": "custom_event_participants",

[dpk404]

• pyproject.toml lowers the frappe floor from >=16.0.0-dev to >=15.0.0, a new claim of Frappe 15 compatibility.
• resolutions forces echarts 6.1.0 where frappe-ui declares ^5.6.0, a major version outside the declared range. The bundle imports no chart components, so it only affects audit output.
• The title says frappe-ui v1.0.0; package.json pins 1.0.0-beta.24.
• The PR description is empty.

[Copilot]

Pull request overview

Copilot reviewed 22 out of 25 changed files in this pull request and generated no new comments.

Suppressed comments (4)

Previously missed (3) — in code that hasn't changed since the last review.

frontend/src/utils/sidebarRow.js:152

• findNativeRow can return the <a> or <button> itself, but these descendant-only selectors skip that root. In that path, the clone retains the native href/aria-current and is not marked for collapse syncing, so middle-click can open the template route and the custom row can remain styled as current. Include the matching root in these lookups.

  row
    .querySelectorAll('[aria-current]')
    .forEach((el) => el.removeAttribute('aria-current'))
  row.querySelectorAll('a').forEach((a) => {
    a.removeAttribute('href')

frontend/src/utils/sidebarRow.js:183

• The Frappe UI SidebarLabel matched here is a plain <div>, so the cloned group header is clickable but cannot receive focus or be toggled by keyboard. Add button semantics and Enter/Space activation when the cloned root is not already interactive.

  header.classList.add('crm-xt', 'cursor-pointer', 'select-none')
  header.setAttribute('aria-label', label)
  header.setAttribute('aria-expanded', 'false')

frontend/src/components/App.vue:207

• Frappe UI v1 SidebarItem deliberately keeps pl-2 and the icon's natural size while collapsed. These unconditional toggles instead center and enlarge only the injected clones, so they no longer align with adjacent native rows during the sidebar animation. Apply the legacy transform only to rows that are not modern [data-slot="sidebar-item"] clones.

  document.querySelectorAll('[data-xt-link]').forEach((el) => {
    el.classList.toggle('pl-2', !collapsed)
    el.classList.toggle('justify-center', collapsed)
  })
  document.querySelectorAll('[data-xt-icon]').forEach((el) => {
    el.classList.toggle('size-7', collapsed)

frappe_crm_xt/setup/custom_fields.json:448

• Removing the static filter lets Desk users select calendars with push_to_google_calendar = 0; the CRM form script cannot protect Desk and explicitly states that this field should retain a static push-enabled filter. Such a selection passes server validation but will not be pushed, despite calendar sync being enabled. Keep the portable push-enabled filter while dropping only the optional authorization field.

      "options": "Google Calendar",
      "insert_after": "custom_event_participants",
      "depends_on": "eval:doc.custom_sync_with_calendar"

[Copilot]

Pull request overview

Copilot reviewed 22 out of 25 changed files in this pull request and generated 3 comments.

Suppressed comments (1)

frappe_crm_xt/setup/custom_fields.json:448

• The updated form script says Desk is still constrained by a static push_to_google_calendar filter, but this field now has no link_filters. Views that do not execute the CRM form script can therefore select calendars with Push disabled, despite calendar sync requiring a push-enabled calendar. Keep the portable push filter here while leaving the optional authorization field out.

      "fieldname": "custom_google_calendar_link",
      "fieldtype": "Link",
      "label": "Google Calendar",
      "options": "Google Calendar",
      "insert_after": "custom_event_participants",
      "depends_on": "eval:doc.custom_sync_with_calendar"

The merge-base changed after approval.