chore(release): Bumped to Version 1.30.1

chore(release): hotfix to main

.github/helpers/install.sh

@@ -9,7 +9,7 @@ sudo apt remove mysql-server mysql-client
 sudo apt install libcups2-dev redis-server mariadb-client libmariadb-dev
 
 pip install frappe-bench
-git clone "https://github.com/frappe/frappe" --branch "develop" --depth 1 
+git clone "https://github.com/frappe/frappe" --branch "version-15" --depth 1 
 bench init --skip-assets --frappe-path ~/frappe --python "$(which python)" frappe-bench
 
 mkdir ~/frappe-bench/sites/test_site
@@ -40,7 +40,7 @@ sed -i 's/schedule:/# schedule:/g' Procfile
 sed -i 's/socketio:/# socketio:/g' Procfile
 sed -i 's/redis_socketio:/# redis_socketio:/g' Procfile
 
-bench get-app erpnext --branch "develop"
+bench get-app erpnext --branch "version-15"
 bench get-app telephony
 bench get-app helpdesk "${GITHUB_WORKSPACE}"
 bench setup requirements --dev

.github/workflows/assets.yml

@@ -1,15 +0,0 @@
-name: Pre-build assets
-
-on:
-  push:
-    branches: [develop, main]
-
-jobs:
-  assets:
-    name: Pre-build assets
-    uses: frappe/pilot/.github/workflows/app-assets.yml@develop
-    with:
-      # main supports Frappe v15 and v16; Pilot benches run v16 or later.
-      frappe-branch: ${{ github.ref_name == 'main' && 'version-16' || 'develop' }}
-    permissions:
-      contents: write

.github/workflows/build.yml

@@ -13,15 +13,21 @@ jobs:
 
     runs-on: ubuntu-latest
 
-    permissions:
-      packages: write
+    strategy:
+      matrix:
+        arch: [amd64, arm64]
 
     steps:
       - name: Checkout Entire Repository
         uses: actions/checkout@v4
 
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
+        with:
+          platforms: linux/${{ matrix.arch }}
 
       - name: Login to GitHub Container Registry
         uses: docker/login-action@v2
@@ -32,7 +38,8 @@ jobs:
 
       - name: Set Branch
         run: |
-          echo '[{"url": "https://github.com/frappe/telephony","branch": "develop"},{"url": "https://github.com/frappe/helpdesk","branch": "main"}]' > apps.json
+          export APPS_JSON='[{"url": "https://github.com/frappe/telephony","branch": "develop"},{"url": "https://github.com/frappe/helpdesk","branch": "main"}]'
+          echo "APPS_JSON_BASE64=$(echo $APPS_JSON | base64 -w 0)" >> $GITHUB_ENV
           echo "FRAPPE_BRANCH=version-15" >> $GITHUB_ENV
 
       - name: Set Image Tag
@@ -44,10 +51,10 @@ jobs:
           repository: frappe/frappe_docker
           path: builds
 
-      - name: Build
+      - name: Build and push
         uses: docker/build-push-action@v6
         with:
-          load: true
+          push: true
           context: builds
           file: builds/images/layered/Containerfile
           tags: >
@@ -55,14 +62,4 @@ jobs:
             ghcr.io/${{ github.repository }}:${{ env.IMAGE_TAG }}
           build-args: |
             "FRAPPE_BRANCH=${{ env.FRAPPE_BRANCH }}"
-          secret-files: |
-            apps_json=apps.json
-
-      - name: Verify apps are installed
-        run: |
-          apps=$(docker run --rm --entrypoint ls ghcr.io/${{ github.repository }}:${{ env.IMAGE_TAG }} apps)
-          echo "$apps"
-          grep -qx helpdesk <<< "$apps" && grep -qx telephony <<< "$apps"
-
-      - name: Push
-        run: docker push --all-tags ghcr.io/${{ github.repository }}
+            "APPS_JSON_BASE64=${{ env.APPS_JSON_BASE64 }}"

.github/workflows/generate-pot-file.yml

@@ -25,12 +25,7 @@ jobs:
       - name: Setup Python
         uses: actions/setup-python@v5
         with:
-          python-version: "3.14"
-
-      - name: Setup Node
-        uses: actions/setup-node@v6
-        with:
-          node-version: 24
+          python-version: "3.12"
 
       - name: Run script to update POT file
         run: |

.github/workflows/lint.yml

@@ -35,7 +35,7 @@ jobs:
       - name: Set up Python 3.10
         uses: actions/setup-python@v2
         with:
-          python-version: '3.14'
+          python-version: '3.10'
 
       - name: Install and Run Pre-commit
         uses: pre-commit/action@v3.0.1

.github/workflows/server-tests.yml

@@ -40,7 +40,7 @@ jobs:
       - name: Setup Python
         uses: actions/setup-python@v5
         with:
-          python-version: '3.14'
+          python-version: '3.12'
 
       - name: Check for valid Python & Merge Conflicts
         if: github.event.pull_request.base.ref == 'develop'
@@ -104,32 +104,7 @@ jobs:
           FRAPPE_BRANCH: ${{ github.event.inputs.branch }}
 
       - name: Run Tests
-        run: 'cd ~/frappe-bench/ && bench --site test_site run-tests --app helpdesk --coverage'
+        run: 'cd ~/frappe-bench/ && bench --site test_site run-tests --app helpdesk'
         env:
           TYPE: server
           CI_BUILD_ID: ${{ github.run_id }}
-      
-      - name: Upload coverage data
-        uses: actions/upload-artifact@v4
-        with:
-          name: coverage-${{ matrix.container }}
-          path: /home/runner/frappe-bench/sites/coverage.xml
-
-  coverage:
-    name: Coverage Wrap Up
-    needs: tests
-    runs-on: ubuntu-latest
-    steps:
-      - name: Clone
-        uses: actions/checkout@v6
-
-      - name: Download artifacts
-        uses: actions/download-artifact@v4
-
-      - name: Upload coverage data
-        uses: codecov/codecov-action@v4
-        with:
-          name: MariaDB
-          token: ${{ secrets.CODECOV_TOKEN }}
-          fail_ci_if_error: true
-          verbose: true

.github/workflows/ui-tests.yml

@@ -1,187 +0,0 @@
-name: UI Tests
-
-on:
-  pull_request:
-    branches:
-      - develop
-    paths:
-      - "desk/**"
-      - "e2e/**"
-      - "playwright.config.ts"
-      - "package.json"
-      - "yarn.lock"
-      - ".github/workflows/ui-tests.yml"
-  workflow_dispatch:
-
-concurrency:
-  group: ui-tests-helpdesk-${{ github.event.number || github.ref }}
-  cancel-in-progress: true
-
-env:
-  FRAPPE_BRANCH: develop
-  SITE: helpdesk.test
-
-jobs:
-  ui-tests:
-    name: Playwright E2E Tests (${{ matrix.shard }}/2)
-    runs-on: ubuntu-latest
-    timeout-minutes: 60
-    strategy:
-      fail-fast: false
-      matrix:
-        shard: [1, 2]
-
-    services:
-      redis-cache:
-        image: redis/redis-stack-server:latest
-        ports:
-          - 13000:6379
-      redis-queue:
-        image: redis:alpine
-        ports:
-          - 11000:6379
-      mariadb:
-        image: mariadb:10.6
-        env:
-          MARIADB_ROOT_PASSWORD: root
-        ports:
-          - 3306:3306
-        options: --health-cmd="mariadb-admin ping" --health-interval=5s --health-timeout=2s --health-retries=3
-
-    steps:
-      - name: Clone
-        uses: actions/checkout@v4
-
-      - name: Setup Python
-        uses: actions/setup-python@v5
-        with:
-          python-version: "3.14"
-
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: 24
-          check-latest: true
-
-      - name: Cache pip
-        uses: actions/cache@v4
-        with:
-          path: ~/.cache/pip
-          key: ${{ runner.os }}-pip-${{ hashFiles('**/pyproject.toml') }}
-          restore-keys: ${{ runner.os }}-pip-
-
-      - name: Cache yarn
-        uses: actions/cache@v4
-        with:
-          path: ~/.cache/yarn
-          key: ${{ runner.os }}-yarn-ui-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: ${{ runner.os }}-yarn-ui-
-
-      - name: Cache Playwright browsers
-        uses: actions/cache@v4
-        with:
-          path: ~/.cache/ms-playwright
-          key: ${{ runner.os }}-playwright-${{ hashFiles('yarn.lock') }}
-
-      - name: Install MariaDB Client
-        run: |
-          sudo apt update
-          sudo apt install -y mariadb-client
-
-      - name: Setup Bench
-        run: |
-          pip install frappe-bench
-          bench init --skip-redis-config-generation --skip-assets --frappe-branch "$FRAPPE_BRANCH" --python "$(which python)" ~/frappe-bench
-          mariadb --host 127.0.0.1 --port 3306 -u root -proot -e "SET GLOBAL character_set_server = 'utf8mb4'"
-          mariadb --host 127.0.0.1 --port 3306 -u root -proot -e "SET GLOBAL collation_server = 'utf8mb4_unicode_ci'"
-
-      - name: Install Helpdesk
-        working-directory: /home/runner/frappe-bench
-        run: |
-          bench get-app telephony
-          bench get-app helpdesk $GITHUB_WORKSPACE
-          bench setup requirements --dev
-          bench new-site --db-root-password root --admin-password admin --install-app helpdesk $SITE
-          bench use $SITE
-          bench --site $SITE set-config host_name "http://localhost:8000"
-          bench build --apps frappe,helpdesk
-        env:
-          CI: "Yes"
-
-      - name: Start Frappe Server
-        working-directory: /home/runner/frappe-bench
-        run: |
-          sed -i 's/^watch:/# watch:/g' Procfile
-          sed -i 's/^schedule:/# schedule:/g' Procfile
-          bench start &> bench_start.log &
-          timeout 120 bash -c "until curl -s http://localhost:8000 > /dev/null; do sleep 2; done"
-
-      - name: Install Playwright
-        run: |
-          yarn install --frozen-lockfile --ignore-scripts
-          npx playwright install --with-deps chromium
-
-      - name: Run Playwright Tests
-        run: npx playwright test --shard=${{ matrix.shard }}/2
-        env:
-          # localhost is a secure context, which crypto.randomUUID in frappe/ui needs.
-          BASE_URL: http://localhost:8000
-          ADMIN_PASSWORD: admin
-
-      - name: Upload Blob Report
-        uses: actions/upload-artifact@v4
-        if: always()
-        with:
-          name: blob-report-${{ matrix.shard }}
-          path: blob-report/
-          retention-days: 1
-
-      - name: Upload Test Results
-        uses: actions/upload-artifact@v4
-        if: failure()
-        with:
-          name: test-results-${{ matrix.shard }}
-          path: test-results/
-          retention-days: 7
-
-      - name: Show Bench Logs on Failure
-        if: failure()
-        working-directory: /home/runner/frappe-bench
-        run: |
-          cat bench_start.log || true
-          cat logs/*.log || true
-
-  merge-reports:
-    name: Merge Playwright Reports
-    needs: ui-tests
-    if: always()
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Clone
-        uses: actions/checkout@v4
-
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: 24
-
-      - name: Install Playwright
-        run: yarn install --frozen-lockfile --ignore-scripts
-
-      - name: Download Blob Reports
-        uses: actions/download-artifact@v4
-        with:
-          path: all-blob-reports
-          pattern: blob-report-*
-          merge-multiple: true
-
-      - name: Merge Into HTML Report
-        run: npx playwright merge-reports --reporter html ./all-blob-reports
-
-      - name: Upload Playwright Report
-        uses: actions/upload-artifact@v4
-        with:
-          name: playwright-report
-          path: playwright-report/
-          retention-days: 7

.gitignore

@@ -42,8 +42,4 @@ helpdesk/public/frontend
 helpdesk/public/node_modules
 helpdesk/www/helpdesk/index.html
 desk/components.d.ts
-desk/stats.html
-# Playwright
-e2e/.auth
-playwright-report
-test-results
+desk/stats.html

.pre-commit-config.yaml

@@ -4,19 +4,19 @@ fail_fast: false
 
 repos:
   - repo: https://github.com/psf/black
-    rev: 25.11.0
+    rev: 22.6.0
     hooks:
       - id: black
         types_or: [python, pyi]
 
   - repo: https://github.com/PyCQA/flake8
-    rev: 7.3.0
+    rev: 5.0.4
     hooks:
       - id: flake8
         additional_dependencies:
           - flake8-bugbear
           - flake8-comprehensions
-          - flake8-simplify==0.30.0
+          - flake8-simplify
         args: ['--config', '.github/helpers/.flake8_strict']
 
   - repo: https://github.com/pre-commit/mirrors-prettier

AGENTS.md

@@ -1,18 +1,5 @@
 # Copilot Instructions for Frappe Helpdesk
 
-## Skills
-
-For Frappe development tasks, reference the frappe-dev skill:
-- **Location**: `~/.agents/skills/frappe-dev/`
-- **Usage**: When working on DocType, controllers, whitelisted APIs, background jobs, permissions, or frontend tasks, read the relevant skill reference files:
-  - `doctype.md` — Creating/modifying DocTypes and fields
-  - `controllers.md` — Document lifecycle and server logic
-  - `api.md` — REST endpoints with `@frappe.whitelist()`
-  - `database.md` — `frappe.db`, queries, raw SQL
-  - `background-jobs.md` — `frappe.enqueue`, scheduled jobs
-  - `permissions.md` — Roles, DocType permissions
-  - `frontend-desk.md`, `frontend-vue.md`, `frontend-portal.md` — Frontend references
-
 ## Project Overview
 
 Frappe Helpdesk is an open-source ticket management tool built on the [Frappe Framework](https://github.com/frappe/frappe) (Python backend) and [Frappe UI](https://github.com/frappe/frappe-ui) (Vue.js frontend). It provides agent/customer portals, SLAs, assignment rules, a knowledge base, and saved replies.
@@ -215,9 +202,7 @@ apiCall.submit({ ticket_id: "<id>", agent_id: "<agent>" });
 
 **Data Query Patterns**:
 
-- Always prefer `frappe.get_list()` over `frappe.get_all()` for new code. It handles perms out of the box and is more flexible.
-- `frappe.get_all()` is fine for child tables (e.g. `Has Role`, `HD Customer Member`), which have no permissions of their own.
-- When `frappe.get_all()` is used on a parent DocType, make sure the caller may see the result some other way, for example a `frappe.has_permission(...)` check first, or `@agent_only` / `@agent_manager_only` (`helpdesk/utils.py`) on the endpoint.
+- Always prefer `frappe.qb.get_query()` over `frappe.db.get_all()` for new code
 - Use `frappe.qb.get_query(..., ignore_permissions=False)` when permission checks are needed
 - Example query patterns from helpdesk context
 
@@ -267,7 +252,6 @@ class HDFoo(Document):
 - Methods that mutate a related document (e.g. an Assignment Rule) receive that doc as an argument and mutate it in memory. The **caller** is responsible for the final `doc.save()` — this keeps saves to a minimum (one save per hook).
 - Never fetch the same document twice in one hook. Fetch once, pass the doc through the call chain.
 - `@staticmethod` is allowed for pure transformations (e.g. building a condition string) that don't touch `self` or any Frappe doc.
-- If there is an issue in framework/ui or frappe-ui or frappe framework, dont do a workaround. Instead, raise a blocker in the spec and wait for a fix. Do not implement workarounds that will be removed later. If possible, raise a PR to fix the issue in the framework instead of implementing a workaround in helpdesk.
 
 **Save discipline:**
 
@@ -374,7 +358,7 @@ const ticket = createDocumentResource({
 - Use ESLint with Vue 3 recommended rules and Prettier for consistency
 - Write meaningful commit messages and maintain clean git history
 - Document complex logic with JSDoc/TSDoc comments
-- Keep a comment to 2 lines at most. If it needs more to explain, simplify the code instead
+- Only add comments that explain why something is done, not what is done
 - Keep dependencies updated and audit for security vulnerabilities
 
 ## References

desk/package.json

@@ -21,13 +21,11 @@
     "@tiptap/starter-kit": "^3.26.0",
     "@twilio/voice-sdk": "^2.15.0",
     "@vee-validate/zod": "^4.8.2",
-    "@vitejs/plugin-vue": "^4.6.2",
-    "@vueuse/core": "^14.1.0",
-    "@vueuse/integrations": "^14.1.0",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vueuse/core": "^13.8.0",
+    "@vueuse/integrations": "^13.8.0",
     "dayjs": "^1.11.7",
-    "echarts": "^6.1.0",
-    "grid-layout-plus": "^1.1.0",
-    "frappe-ui": "1.0.0-rc.1",
+    "frappe-ui": "1.0.0-beta.24",
     "mime": "^3.0.0",
     "pinia": "^2.0.33",
     "sanitize-html": "^2.10.0",
@@ -39,7 +37,7 @@
     "zod": "^3.21.4"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.1",
     "autoprefixer": "^10.4.13",
     "patch-package": "^8.0.1",
     "postcss": "^8.4.5",
@@ -47,15 +45,11 @@
     "prettier": "2.8.4",
     "tailwindcss": "^3.4.15",
     "typescript": "^5.0.2",
-    "unplugin-icons": "^22.1.0",
-    "vite": "^5.4.21",
-    "vite-plugin-pwa": "0.17.5"
+    "vite": "^4.4.9",
+    "vite-plugin-pwa": "0.15.0"
   },
   "resolutions": {
     "cheerio": "1.0.0-rc.12",
-    "prosemirror-model": "1.25.9",
-    "prosemirror-state": "1.4.4",
-    "prosemirror-view": "1.41.9",
-    "prosemirror-transform": "1.12.0"
+    "prosemirror-model": "1.25.4"
   }
-}
+}

desk/patches/frappe-ui+1.0.0-beta.24.patch

@@ -0,0 +1,119 @@
+diff --git a/node_modules/frappe-ui/src/components/MultiSelect/MultiSelect.vue b/node_modules/frappe-ui/src/components/MultiSelect/MultiSelect.vue
+index b8d1d2b..56d6e3c 100644
+--- a/node_modules/frappe-ui/src/components/MultiSelect/MultiSelect.vue
++++ b/node_modules/frappe-ui/src/components/MultiSelect/MultiSelect.vue
+@@ -428,6 +428,7 @@ defineSlots<MultiSelectSlots>()
+                   v-if="loading"
+                   class="size-4 shrink-0 text-ink-gray-5"
+                 />
++                <slot name="suffix" v-bind="slotProps" />
+               </div>
+ 
+               <MultiSelectResults
+diff --git a/node_modules/frappe-ui/src/molecules/editor/SuggestionExtension.ts b/node_modules/frappe-ui/src/molecules/editor/SuggestionExtension.ts
+index 0b7069a..de2a3df 100644
+--- a/node_modules/frappe-ui/src/molecules/editor/SuggestionExtension.ts
++++ b/node_modules/frappe-ui/src/molecules/editor/SuggestionExtension.ts
+@@ -16,6 +16,7 @@ export type SuggestionExtensionOptions<TItem = any> = {
+   items: TItem[] | ((query: string) => TItem[] | Promise<TItem[]>)
+   component?: Component
+   floatingOptions?: SuggestionFloatingOptions
++  allowSpaces?: boolean
+   command: (props: { editor: Editor; item: TItem; range: SuggestionRange }) => void
+ }
+ 
+@@ -26,6 +27,7 @@ function buildSuggestionExtension<TItem = any>(options: SuggestionExtensionOptio
+       return {
+         suggestion: {
+           char: options.trigger,
++          allowSpaces: options.allowSpaces,
+           pluginKey: new PluginKey(options.name),
+           items: ({ query }: { query: string }) =>
+             typeof options.items === 'function' ? options.items(query) : options.items,
+diff --git a/node_modules/frappe-ui/src/molecules/editor/extensions/link/link-extension.ts b/node_modules/frappe-ui/src/molecules/editor/extensions/link/link-extension.ts
+index 1447ba9..b6aad68 100644
+--- a/node_modules/frappe-ui/src/molecules/editor/extensions/link/link-extension.ts
++++ b/node_modules/frappe-ui/src/molecules/editor/extensions/link/link-extension.ts
+@@ -45,6 +45,14 @@ export const LinkExtension = Link.extend({
+     }
+   },
+ 
++  // tiptap's Link mark is inclusive whenever `autolink` is on, so typing right
++  // after a link extends the mark onto the new text. Keep autolink (URL
++  // detection as you type) but make the mark non-inclusive so the link stops at
++  // its boundary.
++  inclusive() {
++    return false
++  },
++
+   addCommands() {
+     return {
+       ...this.parent?.(),
+diff --git a/node_modules/frappe-ui/src/molecules/editor/extensions/shared/suggestion-renderer.ts b/node_modules/frappe-ui/src/molecules/editor/extensions/shared/suggestion-renderer.ts
+index 8363502..07f4551 100644
+--- a/node_modules/frappe-ui/src/molecules/editor/extensions/shared/suggestion-renderer.ts
++++ b/node_modules/frappe-ui/src/molecules/editor/extensions/shared/suggestion-renderer.ts
+@@ -82,6 +82,25 @@ export function createSuggestionRenderer(
+     })
+   }
+ 
++  // Attach the VueRenderer's mount wrapper (`el`), not `renderer.element` —
++  // FocusScope-based popups have no synchronous first element child.
++  function getWrapper(): HTMLElement | null {
++    return (renderer as unknown as { el: HTMLElement | null } | null)?.el ?? null
++  }
++
++  function attach(props: SuggestionProps, token: number): void {
++    if (!isActive || token !== renderToken || !renderer) return
++    if (floatingEl) return
++    const wrapper = getWrapper()
++    if (!props.clientRect || !wrapper) return
++
++    floatingEl = wrapper
++    floatingEl.style.position = 'absolute'
++    document.body.appendChild(floatingEl)
++    getReferenceClientRect = props.clientRect as () => DOMRect | null
++    updatePosition()
++  }
++
+   return {
+     onStart(props: SuggestionProps) {
+       isActive = true
+@@ -92,15 +111,7 @@ export function createSuggestionRenderer(
+         props,
+       })
+ 
+-      if (!props.clientRect || !renderer.element) return
+-      // A newer query already superseded this start before mount completed.
+-      if (token !== renderToken || !isActive) return
+-
+-      floatingEl = renderer.element as HTMLElement
+-      floatingEl.style.position = 'absolute'
+-      document.body.appendChild(floatingEl)
+-      getReferenceClientRect = props.clientRect as () => DOMRect | null
+-      updatePosition()
++      attach(props, token)
+     },
+ 
+     onUpdate(props: SuggestionProps) {
+@@ -108,14 +119,18 @@ export function createSuggestionRenderer(
+       if (!isActive || !renderer) return
+       const token = ++renderToken
+ 
+-      renderer.updateProps(props)
++      // Skip the plugin's transient `loading` dispatch (empty items) so the
++      // popover doesn't unmount/remount on every keystroke.
++      const loading = (props as SuggestionProps & { loading?: boolean }).loading
++      if (!loading) renderer.updateProps(props)
+ 
+       if (!props.clientRect) return
+       // Fix 2: a newer query bumped the token between updateProps and now.
+       if (token !== renderToken) return
+ 
+       getReferenceClientRect = props.clientRect as () => DOMRect | null
+-      updatePosition()
++      if (!floatingEl) attach(props, token)
++      else updatePosition()
+     },
+ 
+     onKeyDown(props: SuggestionKeyDownProps): boolean {

desk/patches/frappe-ui+1.0.0-rc.1.patch

@@ -1,70 +0,0 @@
-diff --git a/node_modules/frappe-ui/src/molecules/editor/extensions/shared/suggestion-renderer.ts b/node_modules/frappe-ui/src/molecules/editor/extensions/shared/suggestion-renderer.ts
-index 91c8dc4..2883b93 100644
---- a/node_modules/frappe-ui/src/molecules/editor/extensions/shared/suggestion-renderer.ts
-+++ b/node_modules/frappe-ui/src/molecules/editor/extensions/shared/suggestion-renderer.ts
-@@ -5,6 +5,7 @@ import type {
- } from '@tiptap/suggestion'
- import type { Component } from 'vue'
- import {
-+  autoUpdate,
-   computePosition,
-   flip,
-   offset,
-@@ -40,6 +41,9 @@ export function createSuggestionRenderer(
-   let isActive = false
-   // Monotonic token; a stale onUpdate from a superseded query bails.
-   let renderToken = 0
-+  // Monotonic token; a stale computePosition settling later bails.
-+  let positionToken = 0
-+  let cleanupAutoUpdate: (() => void) | null = null
- 
-   function getListExpose(): SuggestionListExpose | null {
-     const ref = renderer?.ref as SuggestionListExpose | null | undefined
-@@ -52,6 +56,7 @@ export function createSuggestionRenderer(
-     const rect = getReferenceClientRect()
-     if (!rect) return
-     const reference = { getBoundingClientRect: () => rect }
-+    const token = ++positionToken
-     void computePosition(reference, floatingEl, {
-       placement: floatingOptions?.placement ?? 'bottom-start',
-       middleware: [
-@@ -60,7 +65,7 @@ export function createSuggestionRenderer(
-         shift({ padding: 8 }),
-       ],
-     }).then(({ x, y }) => {
--      if (!floatingEl) return
-+      if (!floatingEl || token !== positionToken) return
-       Object.assign(floatingEl.style, {
-         position: 'absolute',
-         left: `${x}px`,
-@@ -93,7 +98,19 @@ export function createSuggestionRenderer(
-     floatingEl.style.position = 'absolute'
-     document.body.appendChild(floatingEl)
-     getReferenceClientRect = props.clientRect as () => DOMRect | null
--    updatePosition()
-+
-+    // Positions once, then keeps the popup on the caret through scroll, window
-+    // resize and its own height changes (`flip()` measures a height that async
-+    // rows and late fonts change after the fact).
-+    cleanupAutoUpdate = autoUpdate(
-+      {
-+        getBoundingClientRect: () =>
-+          getReferenceClientRect?.() ?? new DOMRect(),
-+        contextElement: props.editor?.view?.dom as HTMLElement | undefined,
-+      },
-+      floatingEl,
-+      updatePosition,
-+    )
-   }
- 
-   return {
-@@ -139,6 +156,9 @@ export function createSuggestionRenderer(
-     onExit() {
-       isActive = false
-       renderToken++
-+      positionToken++
-+      cleanupAutoUpdate?.()
-+      cleanupAutoUpdate = null
-       floatingEl?.remove()
-       renderer?.destroy()
-       floatingEl = null

desk/src/App.vue

@@ -9,13 +9,13 @@
 import { Dialogs } from "@/components/dialogs";
 import { useConfigStore } from "@/stores/config";
 import { useFavicon } from "@vueuse/core";
-import { FrappeUIProvider, setConfig, toast, useColorScheme } from "frappe-ui";
+import { FrappeUIProvider, setConfig, toast, useTheme } from "frappe-ui";
 import { storeToRefs } from "pinia";
 import { h, onMounted } from "vue";
 import Wifi from "~icons/lucide/wifi";
 import WifiOff from "~icons/lucide/wifi-off";
 import { __ } from "./translation";
-import { isCustomerPortal } from "./utils";
+import { isCustomerPortal, getBrowserTimezone } from "./utils";
 
 const configStore = useConfigStore();
 const { favicon } = storeToRefs(configStore);
@@ -25,18 +25,20 @@ useFavicon(favicon);
 if (!localStorage.getItem("theme")) {
   localStorage.setItem("theme", "light");
 }
-useColorScheme();
+useTheme();
 
 onMounted(() => {
   window.addEventListener("online", () => {
-    toast(__("You are now online."), {
-      icon: () => h(Wifi, { class: "text-ink-base" }),
+    toast.create({
+      message: __("You are now online."),
+      icon: h(Wifi, { class: "text-ink-base" }),
     });
   });
 
   window.addEventListener("offline", () => {
-    toast(__("You are now offline."), {
-      icon: () => h(WifiOff, { class: "text-ink-base" }),
+    toast.create({
+      message: __("You are now offline."),
+      icon: h(WifiOff, { class: "text-ink-base" }),
     });
   });
   !isCustomerPortal.value && setConfig("localTimezone", window.timezone?.user);

desk/src/components/AttachmentItem.vue

@@ -26,13 +26,13 @@
         <img
           v-if="preview === 'image'"
           :src="url"
-          class="m-auto rounded-4 border"
+          class="m-auto rounded border"
         />
         <video
           v-if="preview === 'video'"
           :src="url"
           controls
-          class="m-auto max-h-[70vh] rounded-4 border"
+          class="m-auto max-h-[70vh] rounded border"
         />
       </template>
     </Dialog>

desk/src/components/AttachmentList.vue

@@ -9,7 +9,7 @@
       <template #suffix>
         <LucideX
           class="size-3.5 cursor-pointer text-ink-gray-6 transition-colors hover:text-ink-gray-9"
-          @click.stop.prevent="emit('remove', attachment)"
+          @click.stop="emit('remove', attachment)"
         />
       </template>
     </AttachmentItem>

desk/src/components/Autocomplete.vue

@@ -0,0 +1,288 @@
+<template>
+  <Combobox v-slot="{ open: isComboboxOpen }" v-model="selectedValue" nullable>
+    <Popover v-model:show="showOptions">
+      <template #target="{ open: openPopover, togglePopover }">
+        <slot name="target" v-bind="{ open: openPopover, togglePopover }">
+          <div class="w-full -ms-0.5">
+            <button
+              class="flex w-full items-center justify-between focus:outline-none"
+              :class="inputClasses"
+              @click="
+                () => {
+                  !disabled && togglePopover();
+                }
+              "
+            >
+              <div class="flex items-center truncate">
+                <slot name="prefix" />
+                <span
+                  v-if="selectedValue"
+                  class="overflow-hidden text-ellipsis whitespace-nowrap text-base leading-5"
+                >
+                  {{ displayValue(selectedValue) }}
+                </span>
+                <span v-else class="text-base leading-5 text-ink-gray-4">
+                  {{ placeholder || "" }}
+                </span>
+              </div>
+              <FeatherIcon
+                name="chevron-down"
+                class="h-4 w-4 text-ink-gray-7"
+                aria-hidden="true"
+              />
+            </button>
+          </div>
+        </slot>
+      </template>
+      <template #body="{ isOpen }">
+        <div v-show="isOpen">
+          <div
+            class="mt-1 rounded-lg bg-surface-base py-1 text-base shadow-2xl"
+          >
+            <div class="relative px-1.5 pt-0.5">
+              <ComboboxInput
+                ref="search"
+                class="form-input w-full pe-6 bg-transparent"
+                type="text"
+                :value="query"
+                autocomplete="off"
+                placeholder="Search"
+                @change="
+                  (e) => {
+                    query = e.target.value;
+                  }
+                "
+              />
+              <button
+                class="absolute inset-y-0 end-3 top-px flex items-center"
+                @click="selectedValue = null"
+              >
+                <FeatherIcon name="x" class="size-4" />
+              </button>
+            </div>
+            <ComboboxOptions
+              class="my-1 max-h-[12rem] overflow-y-auto px-1.5"
+              static
+            >
+              <div
+                v-for="group in groups"
+                v-show="group.items.length > 0"
+                :key="group.key"
+                class="mt-1.5"
+              >
+                <div
+                  v-if="group.group && !group.hideLabel"
+                  class="px-2.5 py-1.5 text-sm-medium text-ink-gray-4"
+                >
+                  {{ group.group }}
+                </div>
+                <ComboboxOption
+                  v-for="option in group.items"
+                  :key="option.value"
+                  v-slot="{ active, selected }"
+                  as="template"
+                  :value="option"
+                >
+                  <li
+                    :class="[
+                      'flex items-center rounded px-2.5 py-1.5 text-base',
+                      { 'bg-surface-gray-2': active },
+                    ]"
+                  >
+                    <slot
+                      name="item-prefix"
+                      v-bind="{ active, selected, option }"
+                    />
+                    <slot
+                      name="item-label"
+                      v-bind="{ active, selected, option }"
+                    >
+                      {{ option.label }}
+                    </slot>
+                  </li>
+                </ComboboxOption>
+              </div>
+              <li
+                v-if="groups.length == 0"
+                class="mt-1.5 rounded-md px-2.5 py-1.5 text-base text-ink-gray-5"
+              >
+                No results found
+              </li>
+            </ComboboxOptions>
+            <div v-if="slots.footer" class="border-t p-1.5 pb-0.5">
+              <slot
+                name="footer"
+                v-bind="{ value: search?.el._value, close }"
+              ></slot>
+            </div>
+          </div>
+        </div>
+      </template>
+    </Popover>
+  </Combobox>
+</template>
+
+<script setup>
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxOptions,
+  ComboboxOption,
+} from "@headlessui/vue";
+import { Popover, Button, FeatherIcon } from "frappe-ui";
+import { ref, computed, useAttrs, useSlots, watch, nextTick } from "vue";
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: "",
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  size: {
+    type: String,
+    default: "md",
+  },
+  variant: {
+    type: String,
+    default: "subtle",
+  },
+  placeholder: {
+    type: String,
+    default: "",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  filterable: {
+    type: Boolean,
+    default: true,
+  },
+});
+const emit = defineEmits(["update:modelValue", "update:query", "change"]);
+
+const query = ref("");
+const showOptions = ref(false);
+const search = ref(null);
+
+const attrs = useAttrs();
+const slots = useSlots();
+
+const valuePropPassed = computed(() => "value" in attrs);
+
+const selectedValue = computed({
+  get() {
+    return valuePropPassed.value ? attrs.value : props.modelValue;
+  },
+  set(val) {
+    query.value = "";
+    if (val) {
+      showOptions.value = false;
+    }
+    emit(valuePropPassed.value ? "change" : "update:modelValue", val);
+  },
+});
+
+function close() {
+  showOptions.value = false;
+}
+
+const groups = computed(() => {
+  if (!props.options || props.options.length == 0) return [];
+
+  let groups = props.options[0]?.group
+    ? props.options
+    : [{ group: "", items: props.options }];
+
+  return groups
+    .map((group, i) => {
+      return {
+        key: i,
+        group: group.group,
+        hideLabel: group.hideLabel || false,
+        items: props.filterable ? filterOptions(group.items) : group.items,
+      };
+    })
+    .filter((group) => group.items.length > 0);
+});
+
+function filterOptions(options) {
+  if (!query.value) {
+    return options;
+  }
+  return options.filter((option) => {
+    let searchTexts = [option.label, option.value];
+    return searchTexts.some((text) =>
+      (text || "").toString().toLowerCase().includes(query.value.toLowerCase())
+    );
+  });
+}
+
+function displayValue(option) {
+  if (typeof option === "string") {
+    let allOptions = groups.value.flatMap((group) => group.items);
+    let selectedOption = allOptions.find((o) => o.value === option);
+    return selectedOption?.label || option;
+  }
+  return option?.label;
+}
+
+watch(query, (q) => {
+  emit("update:query", q);
+});
+
+watch(showOptions, (val) => {
+  if (val) {
+    nextTick(() => {
+      search.value.el.focus();
+    });
+  }
+});
+
+const textColor = computed(() => {
+  return props.disabled ? "text-ink-gray-5" : "text-ink-gray-8";
+});
+
+const inputClasses = computed(() => {
+  let sizeClasses = {
+    sm: "text-base rounded h-7",
+    md: "text-base rounded h-8",
+    lg: "text-lg rounded-md h-10",
+    xl: "text-2xl rounded-md h-10",
+  }[props.size];
+
+  let paddingClasses = {
+    sm: "py-1.5 px-2",
+    md: "py-1.5 px-2.5",
+    lg: "py-1.5 px-3",
+    xl: "py-1.5 px-3",
+  }[props.size];
+
+  let variant = props.disabled ? "disabled" : props.variant;
+  let variantClasses = {
+    subtle:
+      "border border-outline-gray-1 bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-elevation-2 hover:bg-surface-gray-3 focus:bg-surface-base focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3",
+    outline:
+      "border border-outline-gray-2 bg-surface-base placeholder-ink-gray-4 hover:border-outline-gray-3 hover:shadow-sm focus:bg-surface-base focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3",
+    disabled: [
+      "border bg-surface-sidebar placeholder-ink-gray-3",
+      props.variant === "outline"
+        ? "border-outline-gray-2"
+        : "border-transparent",
+    ],
+  }[variant];
+
+  return [
+    sizeClasses,
+    paddingClasses,
+    variantClasses,
+    textColor.value,
+    "transition-colors w-full",
+  ];
+});
+
+defineExpose({ query });
+</script>

desk/src/components/AvailabilityMenu.vue

@@ -6,10 +6,10 @@
     variant="subtle"
     @update:model-value="agentStatusStore.setMyStatus"
   >
-    <template #item-prefix="{ item }">
+    <template #item-prefix="{ option }">
       <div
         class="size-2 rounded-full flex-shrink-0"
-        :class="agentStatusStore.statusColor(item.value)"
+        :class="agentStatusStore.statusColor(option.value)"
       />
     </template>
   </Select>

desk/src/components/BarChartCard.vue

@@ -76,8 +76,7 @@ const props = defineProps({
   },
 });
 
-// the untranslated key: it is lowercased straight into the API period
-const currentDuration = ref("Last month");
+const currentDuration = ref(__("Last month"));
 
 const chartData = computed(() => {
   const isDataFetched = resource.fetched;

desk/src/components/BrandLogo.vue

@@ -5,7 +5,7 @@
     alt="Brand Logo"
     class="h-8 w-8 shrink-0 object-cover"
   />
-  <HDLogo v-else class="h-8 w-8 shrink-0 rounded-4" />
+  <HDLogo v-else class="h-8 w-8 shrink-0 rounded" />
 </template>
 
 <script setup lang="ts">

desk/src/components/CallArea.vue

@@ -26,7 +26,7 @@
     </div>
     <div
       @click="showCallLogDetailModal = true"
-      class="flex flex-col gap-2 cursor-pointer border-transparent shadow rounded-5 bg-surface-elevation-1 px-3 py-2.5 text-ink-gray-9"
+      class="flex flex-col gap-2 cursor-pointer border-transparent shadow rounded-md bg-surface-elevation-1 px-3 py-2.5 text-ink-gray-9"
     >
       <div class="flex items-center justify-between">
         <div class="inline-flex gap-2 items-center text-base-medium">

desk/src/components/ChartCardBase.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col w-full h-full rounded-5 p-4"
+    class="flex flex-col w-full h-full rounded-md p-4"
     :class="[orientation == 'horizontal' && 'pt-3']"
   >
     <slot name="title">
@@ -15,7 +15,7 @@
       <div class="flex items-end w-full gap-2">
         <slot name="text">
           <div
-            class="text-2xl-medium text-center text-ink-gray-8 whitespace-nowrap"
+            class="text-3xl-medium text-center text-ink-gray-8 whitespace-nowrap"
           >
             {{ text }}
           </div>
@@ -33,15 +33,14 @@
             <div
               class="flex items-center gap-0.5 text-ink-gray-5 hover:text-ink-gray-6 cursor-pointer shrink-0"
             >
-              <div class="flex gap-1">
-                <span>vs</span>
-                <span>{{ __(currentDuration).toLowerCase() }}</span>
+              <div class="rtl:flex rtl:gap-1">
+                <span>vs</span> <span>{{ currentDuration.toLowerCase() }}</span>
               </div>
-              <LucideChevronDown class="size-4" />
+              <FeatherIcon name="chevron-down" class="size-4" />
             </div>
             <template #item-label="{ item }">
               <div
-                class="data-[disabled]:cursor-not-allowed group flex w-full items-center rounded-4 px-2 text-base focus:outline-none focus:bg-surface-gray-3 data-[highlighted]:bg-surface-gray-3 data-[state=open]:bg-surface-gray-3 whitespace-nowrap text-ink-gray-7 cursor-pointer justify-between"
+                class="data-[disabled]:cursor-not-allowed group flex w-full items-center rounded px-2 text-base focus:outline-none focus:bg-surface-gray-3 data-[highlighted]:bg-surface-gray-3 data-[state=open]:bg-surface-gray-3 whitespace-nowrap text-ink-gray-7 cursor-pointer justify-between"
               >
                 <span>
                   {{ item.label }}
@@ -49,8 +48,9 @@
               </div>
             </template>
             <template #item-suffix="{ item }">
-              <LucideCheck
+              <FeatherIcon
                 v-if="item.label == __(currentDuration)"
+                name="check"
                 class="size-4"
               />
             </template>
@@ -67,7 +67,7 @@
       <div class="flex items-end w-full gap-2 justify-between flex-1">
         <slot name="text">
           <span
-            class="text-2xl-medium text-center text-ink-gray-8 whitespace-nowrap"
+            class="text-3xl-medium text-center text-ink-gray-8 whitespace-nowrap"
           >
             {{ text }}
           </span>
@@ -91,12 +91,12 @@
           <div
             class="flex items-center gap-0.5 text-ink-gray-5 hover:text-ink-gray-6 cursor-pointer shrink-0"
           >
-            vs {{ __(currentDuration).toLowerCase() }}
-            <LucideChevronDown class="size-4" />
+            vs {{ currentDuration.toLowerCase() }}
+            <FeatherIcon name="chevron-down" class="size-4" />
           </div>
           <template #item-label="{ item }">
             <div
-              class="data-[disabled]:cursor-not-allowed group flex w-full items-center rounded-4 px-2 text-base focus:outline-none focus:bg-surface-gray-3 data-[highlighted]:bg-surface-gray-3 data-[state=open]:bg-surface-gray-3 whitespace-nowrap text-ink-gray-7 cursor-pointer justify-between"
+              class="data-[disabled]:cursor-not-allowed group flex w-full items-center rounded px-2 text-base focus:outline-none focus:bg-surface-gray-3 data-[highlighted]:bg-surface-gray-3 data-[state=open]:bg-surface-gray-3 whitespace-nowrap text-ink-gray-7 cursor-pointer justify-between"
             >
               <span>
                 {{ item.label }}
@@ -104,8 +104,9 @@
             </div>
           </template>
           <template #item-suffix="{ item }">
-            <LucideCheck
+            <FeatherIcon
               v-if="item.label == __(currentDuration)"
+              name="check"
               class="size-4"
             />
           </template>
@@ -116,12 +117,9 @@
 </template>
 
 <script setup lang="ts">
-import LucideCheck from "~icons/lucide/check";
-import LucideChevronDown from "~icons/lucide/chevron-down";
 import { __ } from "@/translation";
 import { EChartsOption } from "echarts";
-import { Dropdown } from "frappe-ui";
-import { ECharts } from "frappe-ui/experimental";
+import { Dropdown, ECharts, FeatherIcon } from "frappe-ui";
 import { computed, type PropType } from "vue";
 
 const props = defineProps({
@@ -160,14 +158,27 @@ const currentDuration = computed(() => props.currentDuration);
 
 const emit = defineEmits(["changeDuration"]);
 
-// the emitted value is the untranslated key: it travels to the API as the
-// period, so only the label goes through __()
-const DURATIONS = ["Last week", "Last month", "Last 3 months"];
-
-const durationOptions = DURATIONS.map((duration) => ({
-  label: __(duration),
-  onClick: () => {
-    if (currentDuration.value !== duration) emit("changeDuration", duration);
+const durationOptions = [
+  {
+    label: __("Last week"),
+    onClick: () => {
+      if (currentDuration.value == __("Last week")) return;
+      emit("changeDuration", __("Last week"));
+    },
   },
-}));
+  {
+    label: __("Last month"),
+    onClick: () => {
+      if (currentDuration.value == __("Last month")) return;
+      emit("changeDuration", __("Last month"));
+    },
+  },
+  {
+    label: __("Last 3 months"),
+    onClick: () => {
+      if (currentDuration.value == __("Last 3 months")) return;
+      emit("changeDuration", __("Last 3 months"));
+    },
+  },
+];
 </script>

desk/src/components/CommentBox.vue

@@ -0,0 +1,351 @@
+<template>
+  <div class="flex-col text-base flex-1" ref="commentBoxRef">
+    <div class="mb-1 ml-0.5 flex items-center justify-between">
+      <div class="text-ink-gray-5 flex items-center gap-2">
+        <Avatar
+          size="md"
+          :label="commenter"
+          :image="getUser(commentedBy).user_image"
+        />
+        <p>
+          <span class="font-medium text-ink-gray-8">
+            {{ commenter }}
+          </span>
+          <span> {{ __(" commented") }}</span>
+        </p>
+      </div>
+      <div class="flex items-center gap-1">
+        <Tooltip :text="dateFormat(creation, dateTooltipFormat)">
+          <span class="ps-0.5 text-sm text-ink-gray-5">
+            {{ timeAgo(creation) }}
+          </span>
+        </Tooltip>
+        <div v-if="authStore.userId === commentedBy && !editable">
+          <Dropdown
+            :placement="'right'"
+            :options="dropdownOptions"
+            @click="isConfirmingDelete = false"
+          >
+            <Button
+              icon="lucide-more-horizontal"
+              class="text-ink-gray-5"
+              variant="ghost"
+            />
+          </Dropdown>
+        </div>
+      </div>
+    </div>
+    <div
+      :id="`comment-${name}`"
+      class="rounded-md bg-surface-gray-1 transition-colors px-3 py-[6px] pt-1"
+      @keydown.ctrl.enter.capture.stop="handleSaveComment"
+      @keydown.meta.enter.capture.stop="handleSaveComment"
+    >
+      <Editor
+        :key="editable ? 'edit' : 'view'"
+        v-model="_content"
+        :extensions="extensions"
+        :editable="editable"
+        :upload-function="(file:any) => uploadFunction(file, 'HD Ticket', ticketId)"
+      >
+        <template #default>
+          <EditorBubbleMenu :items="fullToolbar" />
+          <EditorContent
+            :class="[
+              'prose-f shrink text-p-sm transition-all duration-300 ease-in-out block w-full content',
+              getFontFamily(_content),
+            ]"
+          />
+        </template>
+      </Editor>
+      <div v-if="editable" class="flex flex-row-reverse gap-2">
+        <div>
+          <Button
+            :label="
+              isMobileView ? 'Save' : isMac ? 'Save (⌘ + ⏎)' : 'Save (Ctrl + ⏎)'
+            "
+            @click="handleSaveComment"
+            variant="solid"
+          />
+        </div>
+        <Button label="Discard" @click="handleDiscard" />
+      </div>
+      <div
+        class="flex flex-wrap gap-2"
+        v-if="!editable && Boolean(attachments.length)"
+      >
+        <AttachmentItem
+          v-for="a in attachments"
+          :key="a.file_url"
+          :label="a.file_name"
+          :url="a.file_url"
+        />
+      </div>
+      <div
+        class="flex items-center gap-2 mt-2"
+        v-if="!editable && enableCommentReactions"
+      >
+        <Popover>
+          <template #target="{ togglePopover }">
+            <button
+              class="flex h-full items-center justify-center rounded-full bg-surface-gray-2 px-1 py-1 text-ink-gray-6 transition hover:bg-surface-gray-3"
+              @click="togglePopover()"
+            >
+              <ReactionIcon class="w-4 h-4" />
+            </button>
+          </template>
+          <template #body>
+            <div
+              class="bg-surface-base rounded-lg shadow-lg p-2 border border-outline-gray-2"
+            >
+              <div class="grid grid-cols-6 gap-2">
+                <button
+                  v-for="emoji in emojiList"
+                  :key="emoji"
+                  class="size-6 flex items-center justify-center rounded hover:bg-surface-gray-2 text-lg transition-colors"
+                  @click="handleReaction(emoji)"
+                >
+                  {{ emoji }}
+                </button>
+              </div>
+            </div>
+          </template>
+        </Popover>
+
+        <template v-for="reaction in reactionsList" :key="reaction.emoji">
+          <Tooltip>
+            <template #body>
+              <div
+                class="bg-surface-gray-10 px-2 py-1 text-center text-p-xs text-ink-base shadow-xl rounded"
+              >
+                <span v-for="(user, idx) in reaction.users" :key="user.user"
+                  >{{ user.full_name
+                  }}<span v-if="idx < reaction.users.length - 1">, </span></span
+                >
+              </div>
+            </template>
+            <button
+              class="flex items-center gap-1 px-2 py-1 rounded-full text-sm transition-colors"
+              :class="
+                reaction.current_user_reacted
+                  ? 'bg-surface-blue-2 text-ink-blue-6 hover:bg-surface-blue-3'
+                  : 'bg-surface-gray-3 text-ink-gray-6 hover:bg-surface-gray-4'
+              "
+              v-if="reaction.count !== 0"
+              @click="handleReaction(reaction.emoji)"
+            >
+              <span>{{ reaction.emoji }}</span>
+              <span class="font-medium">{{ reaction.count }}</span>
+            </button>
+          </Tooltip>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { AttachmentItem } from "@/components";
+import ReactionIcon from "@/components/icons/ReactionIcon.vue";
+import { useDevice } from "@/composables";
+import { useScreenSize } from "@/composables/screen";
+import { useAgentStore } from "@/stores/agent";
+import { useAuthStore } from "@/stores/auth";
+import { useConfigStore } from "@/stores/config";
+import { updateRes as updateComment } from "@/stores/knowledgeBase";
+import { useUserStore } from "@/stores/user";
+import { __ } from "@/translation";
+import { CommentActivity } from "@/types";
+import {
+  ConfirmDelete,
+  dateFormat,
+  dateTooltipFormat,
+  getFontFamily,
+  isContentEmpty,
+  timeAgo,
+  uploadFunction,
+} from "@/utils";
+import { buildEditorExtensions, fullToolbar } from "@/components/editor/config";
+import {
+  Avatar,
+  Dropdown,
+  Popover,
+  Tooltip,
+  createResource,
+  toast,
+} from "frappe-ui";
+import { Editor, EditorBubbleMenu, EditorContent } from "frappe-ui/editor";
+import { PropType, computed, onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
+
+const authStore = useAuthStore();
+const ticketId = useRoute().params.ticketId as string;
+const props = defineProps({
+  activity: {
+    type: Object as PropType<CommentActivity>,
+    required: true,
+  },
+});
+const { getUser } = useUserStore();
+const { enableCommentReactions } = useConfigStore();
+
+const { name, creation, content, commenter, commentedBy, attachments } =
+  props.activity;
+
+const { isMac } = useDevice();
+const { isMobileView } = useScreenSize();
+const isTicketMergedComment = computed(() => {
+  const regex = /has been merged with ticket #\d+/;
+  return regex.test(content);
+});
+const agentStore = useAgentStore();
+const extensions = buildEditorExtensions({
+  mentions: () =>
+    (agentStore.dropdown ?? []).map((a: { label: string; value: string }) => ({
+      id: a.value,
+      label: a.label,
+    })),
+});
+
+const emit = defineEmits(["update"]);
+const isConfirmingDelete = ref(false);
+const editable = ref(false);
+const _content = ref(content);
+
+const emojiList = ["👍", "👎", "❤️", "🎉", "👀", "✅"];
+
+const dropdownOptions = computed(() => [
+  {
+    label: "Edit",
+    onClick: () => handleEditMode(),
+    icon: "lucide-edit-2",
+    condition: () => !isTicketMergedComment.value,
+  },
+  ...ConfirmDelete({
+    onConfirmDelete: () => deleteComment.submit(),
+    isConfirmingDelete,
+  }),
+]);
+// editor.commands.focus('end')
+
+const reactions = ref<
+  Array<{
+    emoji: string;
+    count: number;
+    users: Array<{ user: string; full_name: string }>;
+    current_user_reacted: boolean;
+  }>
+>([]);
+
+const reactionsList = computed(() => reactions.value || []);
+
+const fetchReactions = createResource({
+  url: "helpdesk.helpdesk.doctype.hd_ticket_comment.hd_ticket_comment.get_reactions",
+  makeParams: () => ({ comment: name }),
+  auto: true,
+  onSuccess(data) {
+    reactions.value = data || [];
+  },
+});
+
+const toggleReaction = createResource({
+  url: "helpdesk.helpdesk.doctype.hd_ticket_comment.hd_ticket_comment.toggle_reaction",
+  makeParams: (emoji: string) => ({ comment: name, emoji }),
+  onSuccess() {
+    fetchReactions.reload();
+  },
+});
+
+function handleReaction(emoji: string) {
+  const previousReaction = reactions.value.find(
+    (r) => r.current_user_reacted && r.emoji !== emoji
+  );
+  if (previousReaction) {
+    previousReaction.count = Math.max(0, previousReaction.count - 1);
+    previousReaction.current_user_reacted = false;
+  }
+
+  const existingReaction = reactions.value.find((r) => r.emoji === emoji);
+  if (existingReaction) {
+    if (existingReaction.current_user_reacted) {
+      existingReaction.count = Math.max(0, existingReaction.count - 1);
+      existingReaction.current_user_reacted = false;
+    } else {
+      existingReaction.count += 1;
+      existingReaction.current_user_reacted = true;
+    }
+  } else {
+    reactions.value.push({
+      emoji,
+      count: 1,
+      current_user_reacted: true,
+      users: [
+        {
+          user: authStore.userId,
+          full_name: getUser(authStore.userId).full_name,
+        },
+      ],
+    });
+  }
+
+  toggleReaction.submit(emoji);
+}
+
+const commentBoxRef = ref(null);
+const lastSavedContent = ref(content);
+const commentBoxState = ref(content);
+
+function handleEditMode() {
+  editable.value = true;
+  commentBoxState.value = _content.value;
+}
+
+function handleDiscard() {
+  _content.value = commentBoxState.value;
+  editable.value = false;
+}
+
+const deleteComment = createResource({
+  url: "frappe.client.delete",
+  makeParams: () => ({
+    doctype: "HD Ticket Comment",
+    name: name,
+  }),
+  onSuccess() {
+    emit("update");
+    toast.success(__("Comment deleted successfully."));
+  },
+});
+
+function handleSaveComment() {
+  if (lastSavedContent.value === _content.value) {
+    editable.value = false;
+    return;
+  }
+  if (isContentEmpty(_content.value)) {
+    toast.error(__("Comment cannot be empty."));
+    return;
+  }
+
+  updateComment.submit(
+    {
+      doctype: "HD Ticket Comment",
+      name: name,
+      fieldname: "content",
+      value: _content.value,
+    },
+    {
+      onSuccess: () => {
+        editable.value = false;
+        lastSavedContent.value = _content.value;
+        emit("update");
+        toast.success(__("Comment updated successfully."));
+      },
+    }
+  );
+}
+
+onMounted(() => {
+  commentBoxRef.value.style.width = "0px";
+});
+</script>

desk/src/components/CommentTextEditor.vue

@@ -5,22 +5,17 @@
     :extensions="extensions"
     :editable="editable"
     :placeholder="placeholder"
-    :upload-function="
-      (file: any, options: any) =>
-        track(uploadFunction(file, doctype, ticketId, true, options))
-    "
+    :upload-function="(file:any)=>uploadFunction(file, doctype, ticketId)"
   >
     <template #default="{ isEmpty }">
-      <!-- Scroll here so selected nodes aren't clipped. -->
-      <div :class="editable && 'max-h-[44vh] overflow-y-auto'">
-        <EditorContent
-          :class="[
-            'prose-sm max-w-none',
-            editable && 'min-h-[7rem] mx-5 border-t py-3',
-            getFontFamily(newComment),
-          ]"
-        />
-      </div>
+      <EditorContent
+        :class="[
+          'prose-sm max-w-none',
+          editable &&
+            'min-h-[7rem] mx-5 max-h-[44vh] overflow-y-auto border-t py-3',
+          getFontFamily(newComment),
+        ]"
+      />
       <!-- Attachments -->
       <AttachmentList
         class="my-2 ms-5"
@@ -30,19 +25,21 @@
       <div v-if="editable" class="flex flex-col gap-2 border-t">
         <div class="px-4">
           <!-- Fixed Menu -->
-          <div class="flex justify-between gap-2 overflow-hidden py-2.5">
-            <div class="flex min-w-0 flex-1 items-center overflow-x-auto">
+          <div class="flex justify-between overflow-hidden py-2.5">
+            <div class="flex items-center overflow-x-auto w-[60%]">
               <div class="inline-flex items-center gap-1.5 p-1">
                 <FileUploader
-                  :doctype="doctype"
-                  :docname="ticketId"
-                  private
+                  :upload-args="{
+                    doctype: doctype,
+                    docname: ticketId,
+                    private: true,
+                  }"
                   @success="(f) => attachments.push(f)"
                 >
                   <template #default="{ openFileSelector, uploading }">
                     {{ void (loading = uploading) }}
                     <button
-                      class="flex rounded-4 p-1 text-ink-gray-8 transition-colors focus-within:ring-0 hover:bg-surface-gray-3"
+                      class="flex rounded p-1 text-ink-gray-8 transition-colors focus-within:ring-0 hover:bg-surface-gray-2"
                       @click="openFileSelector()"
                       :disabled="uploading"
                     >
@@ -55,38 +52,34 @@
                     </button>
                   </template>
                 </FileUploader>
-                <div class="h-4 w-[2px] border-s ml-1" />
+                <div class="h-4 w-[2px] border-s ms-1" />
               </div>
               <EditorFixedMenu :items="fullToolbar" />
-              <EditorTableMenu />
             </div>
-            <div class="flex shrink-0 items-center justify-end gap-x-2">
+            <div class="flex items-center justify-end gap-x-2 w-[40%]">
               <Button
                 label="Discard"
                 @click="
                   () => {
                     newComment = '';
                     attachments = [];
-                    dropUnused(null);
                     emit('discard');
                   }
                 "
               />
-              <!-- A disabled button fires no pointer events, so the span
-                   carries the hover for the tooltip -->
-              <Tooltip
-                :text="isUploading ? __('Please wait, media is uploading') : ''"
-              >
-                <span class="inline-flex">
-                  <Button
-                    variant="solid"
-                    :label="label"
-                    :disabled="isDisabled"
-                    :loading="loading"
-                    @click="submitComment()"
-                  />
-                </span>
-              </Tooltip>
+              <Button
+                variant="solid"
+                :label="label"
+                :disabled="isDisabled"
+                :loading="loading"
+                @click="
+                  () => {
+                    loading = true;
+                    submitComment();
+                    newComment = '';
+                  }
+                "
+              />
             </div>
           </div>
         </div>
@@ -95,34 +88,17 @@
   </Editor>
 </template>
 <script setup lang="ts">
-import {
-  FileUploader,
-  LoadingIndicator,
-  Tooltip,
-  createResource,
-  dayjs,
-  toast,
-} from "frappe-ui";
-import {
-  Editor,
-  EditorContent,
-  EditorFixedMenu,
-  EditorTableMenu,
-} from "frappe-ui/editor";
-import { addPendingActivity } from "@framework/ui/ActivityTimeline";
-import { useOnboarding } from "@framework/ui";
+import { FileUploader, LoadingIndicator, createResource } from "frappe-ui";
+import { Editor, EditorContent, EditorFixedMenu } from "frappe-ui/editor";
+import { useOnboarding } from "frappe-ui/frappe";
 import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import { AttachmentList } from "@/components/";
 import { buildEditorExtensions, fullToolbar } from "@/components/editor/config";
 import { AttachmentIcon } from "@/components/icons/";
 import { useTyping } from "@/composables/realtime";
-import { useUploadTracker } from "@/composables/useUploadTracker";
 import { useAgentStore } from "@/stores/agent";
 import { useAuthStore } from "@/stores/auth";
-import { useUserStore } from "@/stores/user";
-import { __ } from "@/translation";
-import { capture } from "@/telemetry";
 import {
   getFontFamily,
   isContentEmpty,
@@ -132,11 +108,9 @@ import {
 import { useStorage } from "@vueuse/core";
 import { storeToRefs } from "pinia";
 
-const { updateOnboardingStep } = useOnboarding("helpdesk") ?? {};
+const { updateOnboardingStep } = useOnboarding("helpdesk");
 const { agents: agentsList, dropdown } = storeToRefs(useAgentStore());
-const authStore = useAuthStore();
-const { isManager } = authStore;
-const { getUser } = useUserStore();
+const { isManager } = useAuthStore();
 
 const props = defineProps({
   ticketId: {
@@ -161,22 +135,25 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["submit", "discard", "sending", "restore"]);
+const emit = defineEmits(["submit", "discard"]);
 
 const newComment = useStorage("commentBoxContent" + props.ticketId, null);
 
 // Mentions as a reactive getter so the `@` list stays in sync as agents load.
 const extensions = buildEditorExtensions({
-  mentions: () => dropdown.value ?? [],
+  mentions: () =>
+    (dropdown.value ?? []).map((a: { label: string; value: string }) => ({
+      id: a.value,
+      label: a.label,
+    })),
 });
 
 // Initialize typing composable
 const { onUserType, cleanup } = useTyping(props.ticketId);
 
 const attachments = ref([]);
-const { isUploading, track, dropUnused } = useUploadTracker();
 const isDisabled = computed(() => {
-  return isContentEmpty(newComment.value) || loading.value || isUploading.value;
+  return isContentEmpty(newComment.value) || loading.value;
 });
 const loading = ref(false);
 
@@ -189,58 +166,28 @@ async function submitComment() {
   if (isContentEmpty(newComment.value)) {
     return false;
   }
-  // The keyboard shortcut reaches here without passing the disabled button
-  if (isUploading.value || loading.value) return false;
-
-  const content = newComment.value;
-  const sentAttachments = attachments.value;
-  const pendingRow = addPendingActivity(props.doctype, props.ticketId, {
-    type: "comment",
-    timestamp: dayjs().format("YYYY-MM-DD HH:mm:ss"),
-    author: {
-      email: getUser(authStore.userId).email,
-      // the users list may still be a stub with a guessed name and no avatar
-      fullname: authStore.userName,
-      image: authStore.userImage,
-    },
-    data: { name: "", content, attachments: sentAttachments },
-  });
-
-  // drop before clearing, or an unmount mid-send deletes what the comment carries
-  dropUnused(content);
-  newComment.value = null;
-  attachments.value = [];
-  loading.value = true;
-  emit("sending");
-
   const comment = createResource({
     url: "run_doc_method",
     makeParams: () => ({
       dt: props.doctype,
       dn: props.ticketId,
       method: "new_comment",
-      args: { content, attachments: sentAttachments },
+      args: {
+        content: newComment.value,
+        attachments: attachments.value,
+      },
     }),
-    onSuccess: (res: { message?: string } | string) => {
-      // run_doc_method answers with the whole body, since it always carries `docs`
-      const name = typeof res === "string" ? res : res?.message;
-      // the real row replaces the pending one the moment it arrives; unkeyed,
-      // it would outlive it
-      name ? pendingRow.resolve(`comment:${name}`) : pendingRow.drop();
-      capture("comment_added");
+    onSuccess: () => {
       if (isManager) {
-        updateOnboardingStep?.("comment_on_ticket");
+        updateOnboardingStep("comment_on_ticket");
       }
       emit("submit");
       loading.value = false;
+      attachments.value = [];
+      newComment.value = null;
     },
     onError: () => {
-      toast.error(__("Could not add the comment"));
-      pendingRow.drop();
-      newComment.value = content;
-      attachments.value = sentAttachments;
       loading.value = false;
-      emit("restore");
     },
   });
 
@@ -270,8 +217,6 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   cleanup();
-  // the saved draft still references what it shows, so only what it dropped goes
-  dropUnused(newComment.value);
   if (isContentEmpty(newComment.value)) {
     localStorage.removeItem("commentBoxContent" + props.ticketId);
   }

desk/src/components/CommunicationArea.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="comm-area" resizable="true">
+  <div class="comm-area">
     <div
       class="flex justify-between gap-3 border-t px-6 md:px-5 py-4 md:py-2.5"
     >
@@ -51,15 +51,10 @@
             :to-emails="toEmails"
             :cc-emails="ccEmails"
             :bcc-emails="bccEmails"
-            @sending="
+            @submit="
               () => {
                 showEmailBox = false;
-              }
-            "
-            @submit="() => emit('update')"
-            @restore="
-              () => {
-                showEmailBox = true;
+                emit('update');
               }
             "
             @discard="
@@ -93,15 +88,10 @@
             :editable="showCommentBox"
             :doctype="doctype"
             placeholder="@John could you please look into this?"
-            @sending="
+            @submit="
               () => {
                 showCommentBox = false;
-              }
-            "
-            @submit="() => emit('update')"
-            @restore="
-              () => {
-                showCommentBox = true;
+                emit('update');
               }
             "
             @discard="
@@ -151,14 +141,16 @@ function toggleCommentBox() {
   showCommentBox.value = !showCommentBox.value;
 }
 
-// the editors emit `submit` once the write lands; reloading here too would
-// fetch twice, and the guards' `false` never reaches this side anyway
 function submitEmail() {
-  emailEditorRef.value.submitMail();
+  if (emailEditorRef.value.submitMail()) {
+    emit("update");
+  }
 }
 
 function submitComment() {
-  commentTextEditorRef.value.submitComment();
+  if (commentTextEditorRef.value.submitComment()) {
+    emit("update");
+  }
 }
 
 function splitIfString(str: string | string[]) {

desk/src/components/CompactEditor.vue

@@ -10,17 +10,20 @@
       <template #default>
         <EditorBubbleMenu :items="commentToolbar" />
         <div
-          class="flex items-center overflow-x-auto rounded-t-4 border border-b-0 border-outline-gray-1 bg-surface-gray-1 px-1 py-1"
+          class="flex items-center overflow-x-auto rounded-t border border-b-0 border-[--surface-gray-2] px-1 py-1"
         >
           <div
             v-if="showAttachments"
             class="inline-flex items-center gap-1.5 pe-1"
           >
-            <FileUploader private @success="addAttachment">
+            <FileUploader
+              :upload-args="{ private: true }"
+              @success="addAttachment"
+            >
               <template #default="{ openFileSelector, uploading }">
                 {{ syncUploadingState(uploading) }}
                 <button
-                  class="flex rounded-4 p-1 text-ink-gray-8 transition-colors hover:bg-surface-gray-3 disabled:opacity-40"
+                  class="flex rounded p-1 text-ink-gray-8 transition-colors hover:bg-surface-gray-3 disabled:opacity-40"
                   :disabled="uploading"
                   @click="openFileSelector()"
                 >
@@ -33,10 +36,9 @@
                 </button>
               </template>
             </FileUploader>
-            <div class="h-4 w-[2px] border-s ml-1" />
+            <div class="h-4 w-[2px] border-s ms-1" />
           </div>
           <EditorFixedMenu :items="fullToolbar" />
-          <EditorTableMenu />
         </div>
         <EditorContent :class="editorClass" />
       </template>
@@ -66,7 +68,6 @@ import {
   EditorBubbleMenu,
   EditorContent,
   EditorFixedMenu,
-  EditorTableMenu,
 } from "frappe-ui/editor";
 import { computed, nextTick, onMounted, ref, watch } from "vue";
 
@@ -79,6 +80,7 @@ const props = withDefaults(
     maxHeight?: string;
     extensions?: any[];
     showSignature?: boolean;
+    type?: "Saved Reply" | "Email";
     showAttachments?: boolean;
     uploadFn?: UploadFunction;
   }>(),
@@ -88,6 +90,7 @@ const props = withDefaults(
     maxHeight: "max-h-80",
     extensions: () => [],
     showSignature: false,
+    type: "Saved Reply",
     showAttachments: false,
   }
 );
@@ -102,14 +105,25 @@ const isUploading = ref(false);
 
 const extensions = buildEditorExtensions({ extra: props.extensions });
 
-const contentClass = [
+const savedReplyClass = [
   "!prose-sm max-w-full overflow-auto py-1.5 px-3",
-  "rounded-b-4 border border-outline-gray-1 bg-surface-base",
-  "placeholder-ink-gray-4 text-ink-gray-8 -mt-0.5",
+  "rounded-b border border-[--surface-gray-2] bg-surface-gray-2",
+  "placeholder-ink-gray-4",
+  "hover:border-outline-elevation-2 hover:shadow-sm",
+  "focus:bg-surface-base focus:border-outline-gray-4 focus:shadow-sm focus:ring-0",
+  "focus-visible:ring-2 focus-visible:ring-outline-gray-3",
+  "text-ink-gray-8 transition-colors -mt-0.5",
+];
+
+const emailClass = [
+  "!prose-sm max-w-full overflow-auto py-1.5 px-3",
+  "rounded-b border border-[--surface-gray-2] bg-surface-base",
+  "placeholder-ink-gray-4",
+  "text-ink-gray-8 transition-colors -mt-0.5",
 ];
 
 const editorClass = computed(() => [
-  ...contentClass,
+  ...(props.type === "Email" ? emailClass : savedReplyClass),
   props.minHeight,
   props.maxHeight,
 ]);

desk/src/components/CustomActions.vue

@@ -1,14 +1,14 @@
 <template>
   <div v-if="normalActions.length" class="flex gap-2">
-    <!-- onClick rides along in `action`; binding it twice would run it twice -->
     <Button
       v-for="action in normalActions"
       :key="action.label"
       :label="action.label"
+      @click="action.onClick()"
       v-bind="action"
     >
       <template v-if="action.icon" #prefix>
-        <Icon :icon="action.icon" class="h-4 w-4" />
+        <FeatherIcon :name="action.icon" class="h-4 w-4" />
       </template>
     </Button>
   </div>
@@ -17,8 +17,8 @@
       <Dropdown v-slot="{ open }" :options="g.action">
         <Button :label="g.label">
           <template #suffix>
-            <component
-              :is="open ? LucideChevronUp : LucideChevronDown"
+            <FeatherIcon
+              :name="open ? 'chevron-up' : 'chevron-down'"
               class="h-4"
             />
           </template>
@@ -32,9 +32,6 @@
 </template>
 
 <script setup>
-import LucideChevronUp from "~icons/lucide/chevron-up";
-import LucideChevronDown from "~icons/lucide/chevron-down";
-import Icon from "@/components/Icon.vue";
 import { Dropdown } from "frappe-ui";
 import { computed } from "vue";
 

desk/src/components/DeleteWithTicketsDialog.vue

@@ -16,7 +16,7 @@
         <Button
           variant="solid"
           theme="red"
-          icon-left="lucide-trash-2"
+          icon-left="trash-2"
           :label="__('Delete')"
           :loading="isDeleting"
           @click="confirmDelete"
@@ -28,7 +28,7 @@
 
 <script setup lang="ts">
 import { __ } from "@/translation";
-import { Button, Checkbox, createResource, Dialog } from "frappe-ui";
+import { Button, Checkbox, createListResource, Dialog } from "frappe-ui";
 import { computed, ref, watch } from "vue";
 
 const props = defineProps<{
@@ -45,18 +45,16 @@ const props = defineProps<{
 
 const open = defineModel<boolean>({ default: false });
 
-const resource = createResource({
-  url: "frappe.client.get_count",
-  params: {
-    doctype: "HD Ticket",
-    filters: { [props.linkField]: props.name },
-  },
-  auto: true,
+const resource = createListResource({
+  doctype: "HD Ticket",
+  filters: { [props.linkField]: props.name },
+  fields: ["name"],
+  limit: 99999, // We just want the count
 });
 
 const count = computed<number>(() => {
   if (resource.loading) return 0;
-  return resource.data ?? 0;
+  return resource.data?.length ?? 0;
 });
 
 const deleteLinkedTickets = ref(false);

desk/src/components/DiscardButton.vue

@@ -36,9 +36,9 @@ function handleDiscard() {
       {
         label: "Delete",
         theme: "red",
-        iconLeft: "lucide-trash-2",
+        iconLeft: "trash-2",
         variant: "solid",
-        onClick({ close }: { close: () => void }) {
+        onClick(close: Function) {
           emit("discard");
           close();
         },

desk/src/components/EmailArea.vue

@@ -0,0 +1,300 @@
+<template>
+  <div
+    :id="`communication-${name}`"
+    v-bind="$attrs"
+    class="grow cursor-pointer bg-surface-base rounded-md text-base leading-6 transition-all duration-300 ease-in-out border border-outline-gray-2"
+  >
+    <div
+      class="flex items-center justify-between gap-2"
+      :class="isMobileView && 'items-start'"
+    >
+      <!-- email design for mobile -->
+      <div v-if="isMobileView" class="flex items-center gap-2 text-sm">
+        <div class="leading-tight">
+          <p>{{ sender.full_name || "Guest" }}</p>
+          <Tooltip :text="dateFormat(creation, dateTooltipFormat)">
+            <p class="text-xs md:text-sm text-ink-gray-5">
+              {{ timeAgo(creation) }}
+            </p>
+          </Tooltip>
+          <p class="sm:flex hidden text-sm text-ink-gray-5" v-if="sender.name">
+            {{ "<" + sender.name + ">" }}
+          </p>
+        </div>
+      </div>
+      <!-- email design for desktop -->
+      <div v-else class="flex items-center gap-1">
+        <span>{{ sender.full_name || "Guest" }}</span>
+        <span
+          class="sm:flex hidden text-sm text-ink-gray-5"
+          v-if="sender.name"
+          >{{ "<" + sender.name + ">" }}</span
+        >
+      </div>
+
+      <div class="flex gap-2 items-center">
+        <div class="gap-0.5 flex items-center">
+          <Badge
+            v-if="status.label && !ticket?.doc?.via_customer_portal"
+            :label="__(status.label)"
+            variant="subtle"
+            :theme="status.color"
+            class="me-1.5"
+          />
+          <Tooltip
+            :text="dateFormat(creation, dateTooltipFormat)"
+            v-if="!isMobileView"
+          >
+            <p class="text-xs md:text-sm text-ink-gray-5">
+              {{ timeAgo(creation) }}
+            </p>
+          </Tooltip>
+        </div>
+        <div class="flex items-center gap-1">
+          <Button :tooltip="__('Reply')" variant="ghost" @click="reply">
+            <template #icon>
+              <ReplyIcon class="text-ink-gray-7" />
+            </template>
+          </Button>
+          <Button :tooltip="__('Reply All')" variant="ghost" @click="replyAll">
+            <template #icon>
+              <ReplyAllIcon class="text-ink-gray-7" />
+            </template>
+          </Button>
+          <Dropdown
+            v-if="showSplitOption"
+            :placement="'right'"
+            :options="[
+              {
+                label: 'Split Ticket',
+                icon: LucideSplit,
+                onClick: () => (showSplitModal = true),
+              },
+            ]"
+          >
+            <Button
+              icon="lucide-more-horizontal"
+              class="!text-ink-gray-7"
+              variant="ghost"
+            />
+          </Dropdown>
+        </div>
+      </div>
+    </div>
+    <!-- <div class="text-sm leading-5 text-ink-gray-5">
+      {{ subject }}
+    </div> -->
+    <div class="text-p-sm text-ink-gray-5">
+      <template
+        v-for="(val, label) in { To: to, cc: cc, bcc: bcc }"
+        :key="label"
+      >
+        <span v-if="val" class="me-1.5">
+          <span class="me-1 text-ink-gray-7">{{ label }}:</span>
+          <span> {{ normalizeAndFilter(val).join(", ") }}</span>
+        </span>
+      </template>
+    </div>
+    <div class="border-0 border-t my-3 border-outline-elevation-2 !-mx-3" />
+    <EmailContent :content="content" />
+    <div class="flex flex-wrap gap-2">
+      <AttachmentItem
+        v-for="a in attachments"
+        :key="a.file_url"
+        :label="a.file_name"
+        :url="a.file_url"
+      />
+    </div>
+  </div>
+  <TicketSplitModal
+    v-model="showSplitModal"
+    :ticket_id="name"
+    :communication_id="name"
+  />
+</template>
+
+<script setup lang="ts">
+import { AttachmentItem } from "@/components";
+import { useScreenSize } from "@/composables/screen";
+import { useAuthStore } from "@/stores/auth";
+import { TicketSymbol } from "@/types";
+import { dateFormat, dateTooltipFormat, timeAgo } from "@/utils";
+import { Dropdown } from "frappe-ui";
+import { storeToRefs } from "pinia";
+import { computed, inject, ref } from "vue";
+import LucideSplit from "~icons/lucide/split";
+import { ReplyAllIcon, ReplyIcon } from "./icons";
+import TicketSplitModal from "./ticket/TicketSplitModal.vue";
+
+const props = defineProps({
+  activity: {
+    type: Object,
+    required: true,
+  },
+  showSplitOption: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const {
+  sender,
+  to,
+  cc,
+  bcc,
+  creation,
+  subject,
+  attachments,
+  content,
+  name,
+  deliveryStatus,
+} = props.activity;
+
+const emit = defineEmits(["reply"]);
+const ticket = inject(TicketSymbol)!;
+
+const auth = storeToRefs(useAuthStore());
+
+const { isMobileView } = useScreenSize();
+
+const showSplitModal = ref(false);
+
+const status = computed(() => {
+  let _status = deliveryStatus;
+  let indicator_color = "red";
+  if (["Sent", "Clicked"].includes(_status)) {
+    indicator_color = "green";
+  } else if (["Sending", "Scheduled"].includes(_status)) {
+    indicator_color = "orange";
+  } else if (["Opened", "Read"].includes(_status)) {
+    indicator_color = "blue";
+  } else if (_status == "Error") {
+    indicator_color = "red";
+  }
+  return { label: _status, color: indicator_color };
+});
+
+const normalizeAndFilter = (
+  field: string | string[],
+  valuesToExclude: string[] = []
+) => {
+  let arr = [];
+  let current = "";
+  let inQuotes = false;
+  if (typeof field === "string") {
+    for (let char of field) {
+      if (char === '"') {
+        inQuotes = !inQuotes;
+        current += char;
+      } else if (char === "," && !inQuotes) {
+        arr.push(current.trim());
+        current = "";
+      } else {
+        current += char;
+      }
+    }
+    if (current) arr.push(current.trim());
+  } else {
+    arr = field || [];
+  }
+  return arr.filter(Boolean).filter((item) => !valuesToExclude.includes(item));
+};
+
+const reply = () => {
+  const user = auth.user.value;
+  emit("reply", {
+    content: content,
+    to: user === sender.name ? to : sender.name,
+  });
+};
+
+const replyAll = () => {
+  const user = auth.user.value;
+  const exclude = [user, sender.name];
+  const filteredTo = normalizeAndFilter(to, exclude);
+  const filteredCc = normalizeAndFilter(cc, exclude);
+  const filteredBcc = normalizeAndFilter(bcc, exclude);
+
+  let _to, _cc, _bcc;
+
+  if (user === sender.name) {
+    // User is the sender, reply to all original recipients
+    _to = filteredTo.join(", ");
+    _cc = filteredCc;
+    _bcc = filteredBcc;
+  } else {
+    // User is a recipient, reply to sender with all other recipients in cc
+    _to = sender.name;
+    _cc = [...filteredTo, ...filteredCc];
+    _bcc = filteredBcc;
+  }
+
+  emit("reply", {
+    content: content,
+    to: _to,
+    cc: _cc.filter(Boolean),
+    bcc: _bcc.filter(Boolean),
+  });
+};
+
+// TODO: Implement reply functionality using this way instead of emit drillup
+// function reply(email, reply_all = false) {
+//   emailBox.toggleEmailBox();
+//   let editor = emailBox.editor;
+//   let message = email.content;
+//   let recipients = sender.name;
+//   editor.toEmails = [email.sender];
+//   editor.cc = editor.bcc = false;
+//   editor.ccEmails = [];
+//   editor.bccEmails = [];
+//   console.log(recipients);
+
+//   if (!email.subject.startsWith("Re:")) {
+//     editor.subject = `Re: ${email.subject}`;
+//   } else {
+//     editor.subject = email.subject;
+//   }
+
+//   if (reply_all) {
+//     let cc = email.cc?.split(",").map((r) => r.trim());
+//     let bcc = email.bcc?.split(",").map((r) => r.trim());
+
+//     if (cc?.length) {
+//       recipients = recipients.filter((r) => !cc?.includes(r));
+//       cc.push(...recipients);
+//     } else {
+//       cc = recipients;
+//     }
+
+//     editor.cc = cc ? true : false;
+//     editor.bcc = bcc ? true : false;
+
+//     editor.ccEmails = cc;
+//     editor.bccEmails = bcc;
+//   }
+
+//   let repliedMessage = `<blockquote>${message}</blockquote>`;
+
+//   editor.editor
+//     .chain()
+//     .clearContent()
+//     .insertContent("<p>.</p>")
+//     .updateAttributes("paragraph", { class: "reply-to-content" })
+//     .insertContent(repliedMessage)
+//     .focus("all")
+//     .insertContentAt(0, { type: "paragraph" })
+//     .focus("start")
+//     .run();
+// }
+</script>
+
+<style>
+.email-content {
+  max-width: 100%;
+}
+.email-content > * {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+}
+</style>

desk/src/components/EmailContent.vue

@@ -18,11 +18,7 @@ const props = defineProps({
 });
 
 const iframeRef = ref<HTMLIFrameElement | null>(null);
-const _content = ref(props.content);
-
-const themedContent = computed(() =>
-  dataTheme.value === "dark" ? stripEmailColors(_content.value) : _content.value
-);
+const _content = ref(stripEmailColors(props.content));
 
 // Get CSS path - in dev Vite serves it directly, in prod we need the built path
 const cssHref = computed(() => {
@@ -187,8 +183,6 @@ const htmlContent = computed(
       .email-content {
         word-break: break-word;
       }
-      
-          
       .email-content :is(:where(img):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
         border-width: 0;
       }
@@ -201,11 +195,10 @@ const htmlContent = computed(
       .email-content :where(blockquote p:last-of-type):not(:where([class~='not-prose'], [class~='not-prose'] *))::after {
         content: none;
       }
-
     </style>
   </head>
   <body>
-    <div class="email-content prose-f">${themedContent.value}</div>
+    <div class="email-content prose-f">${_content.value}</div>
   </body>
   </html>
   `

desk/src/components/EmailEditor.vue

@@ -5,10 +5,7 @@
     :placeholder="placeholder"
     :editable="editable"
     :extensions="extensions"
-    :upload-function="
-      (file: any, options: any) =>
-        track(uploadFunction(file, doctype, ticketId, true, options))
-    "
+    :upload-function="(file:any)=>uploadFunction(file, doctype, ticketId)"
   >
     <template #default>
       <div @keydown.capture="handleKeydown">
@@ -145,14 +142,16 @@
         />
         <!-- Fixed Menu -->
         <div
-          class="flex justify-between gap-2 overflow-scroll px-4 py-2.5 items-center border-t"
+          class="flex justify-between overflow-scroll px-4 py-2.5 items-center border-t"
         >
-          <div class="flex min-w-0 flex-1 items-center overflow-x-auto">
+          <div class="flex items-center overflow-x-auto w-[60%]">
             <div class="inline-flex items-center gap-1.5 p-1">
               <FileUploader
-                :doctype="doctype"
-                :docname="ticketId"
-                private
+                :upload-args="{
+                  doctype: doctype,
+                  docname: ticketId,
+                  private: true,
+                }"
                 @success="
                   (f) => {
                     attachments.push(f);
@@ -160,10 +159,10 @@
                 "
               >
                 <template #default="{ openFileSelector, uploading }">
-                  {{ void (attachmentUploading = uploading) }}
+                  {{ void (isUploading = uploading) }}
                   <Tooltip :text="__('Attach file')">
                     <button
-                      class="flex rounded-4 p-1 text-ink-gray-8 transition-colors focus-within:ring-0 hover:bg-surface-gray-3"
+                      class="flex rounded p-1 text-ink-gray-8 transition-colors focus-within:ring-0 hover:bg-surface-gray-3"
                       @click="openFileSelector()"
                       :disabled="uploading"
                     >
@@ -179,7 +178,7 @@
               </FileUploader>
               <Tooltip :text="__('Saved replies')">
                 <button
-                  class="flex rounded-4 p-1 text-ink-gray-8 transition-colors focus-within:ring-0 hover:bg-surface-gray-3"
+                  class="flex rounded p-1 text-ink-gray-8 transition-colors focus-within:ring-0 hover:bg-surface-gray-3"
                   @click="showSavedRepliesSelectorModal = true"
                 >
                   <ZapIcon class="h-4 w-4" />
@@ -188,29 +187,20 @@
               <div class="h-4 w-[2px] border-s ml-1" />
             </div>
             <EditorFixedMenu :items="fullToolbar" />
-            <EditorTableMenu />
           </div>
-          <div class="flex shrink-0 items-center justify-end gap-x-2">
+          <div class="flex items-center justify-end gap-x-2 sm:mt-0 w-[40%]">
             <Button label="Discard" @click="handleDiscard" />
-            <!-- A disabled button fires no pointer events, so the span
-                 carries the hover for the tooltip -->
-            <Tooltip
-              :text="isUploading ? __('Please wait, media is uploading') : ''"
-            >
-              <span class="inline-flex">
-                <Button
-                  variant="solid"
-                  :disabled="isDisabled"
-                  :loading="sendMail.loading"
-                  :label="label"
-                  @click="
-                    () => {
-                      submitMail();
-                    }
-                  "
-                />
-              </span>
-            </Tooltip>
+            <Button
+              variant="solid"
+              :disabled="isDisabled"
+              :loading="sendMail.loading"
+              :label="label"
+              @click="
+                () => {
+                  submitMail();
+                }
+              "
+            />
           </div>
         </div>
       </div>
@@ -233,10 +223,8 @@ import { AttachmentIcon } from "@/components/icons";
 import SavedReplyActions from "@/components/SavedReplyActions/SavedReplyActions.vue";
 import { useTyping } from "@/composables/realtime";
 import { getUserEmailInfo } from "@/composables/useUserEmailInfo";
-import { useUploadTracker } from "@/composables/useUploadTracker";
 import { replyComposer } from "@/pages/ticket/modalStates";
 import { useAuthStore } from "@/stores/auth";
-import { useUserStore } from "@/stores/user";
 import { __ } from "@/translation";
 import { RenderedSavedReply } from "@/types";
 import {
@@ -253,17 +241,10 @@ import {
   LoadingIndicator,
   Tooltip,
   createResource,
-  dayjs,
   toast,
 } from "frappe-ui";
-import {
-  Editor,
-  EditorContent,
-  EditorFixedMenu,
-  EditorTableMenu,
-} from "frappe-ui/editor";
-import { addPendingActivity } from "@framework/ui/ActivityTimeline";
-import { useOnboarding } from "@framework/ui";
+import { Editor, EditorContent, EditorFixedMenu } from "frappe-ui/editor";
+import { useOnboarding } from "frappe-ui/frappe";
 import {
   computed,
   nextTick,
@@ -310,12 +291,10 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["submit", "discard", "sending", "restore"]);
+const emit = defineEmits(["submit", "discard"]);
 
-const { updateOnboardingStep } = useOnboarding("helpdesk") ?? {};
-const authStore = useAuthStore();
-const { isManager } = authStore;
-const { getUser } = useUserStore();
+const { updateOnboardingStep } = useOnboarding("helpdesk");
+const { isManager } = useAuthStore();
 const { onUserType, cleanup } = useTyping(props.ticketId);
 
 const extensions = buildEditorExtensions();
@@ -411,13 +390,7 @@ const from = computed(() => {
 const hasMultipleSenders = computed(() => (from?.value.length ?? 0) > 1);
 
 const attachments = ref([]);
-const attachmentUploading = ref(false);
-const { isUploading: editorUploading, track, dropUnused } = useUploadTracker();
-
-// The paperclip and the editor's own media buttons upload by different routes
-const isUploading = computed(
-  () => attachmentUploading.value || editorUploading.value
-);
+const isUploading = ref(false);
 
 async function removeAttachment(attachment) {
   attachments.value = attachments.value.filter((a) => a !== attachment);
@@ -469,46 +442,34 @@ function replaceSavedReply(reply: RenderedSavedReply) {
   focusEditorAtStart();
 }
 
-/** Set by submitMail, so the composer can be cleared before the request goes out. */
-let pendingRow: ReturnType<typeof addPendingActivity> | null = null;
-let sentDraft: {
-  content: string | null;
-  attachments: any[];
-  quoted: string | null;
-  quoteExpanded: boolean;
-} | null = null;
-
 const sendMail = createResource({
   url: "run_doc_method",
-  makeParams: (params) => params,
-  onSuccess: (res: { message?: string } | string) => {
-    // run_doc_method answers with the whole body, since it always carries `docs`
-    const name = typeof res === "string" ? res : res?.message;
-    // the real row replaces the pending one the moment it arrives; unkeyed,
-    // it would outlive it
-    name ? pendingRow?.resolve(`email:${name}`) : pendingRow?.drop();
-    pendingRow = null;
-    sentDraft = null;
+  makeParams: () => ({
+    dt: props.doctype,
+    dn: props.ticketId,
+    method: "reply_via_agent",
+    args: {
+      attachments: attachments.value.map((x) => x.name),
+      from_email: selectedFromEmail.value,
+      to: toEmailsClone.value.join(","),
+      cc: ccEmailsClone.value?.join(","),
+      bcc: bccEmailsClone.value?.join(","),
+      message:
+        newEmail.value +
+        (quotedContentRef.value
+          ? `<p class="reply-to-content"></p><blockquote>${quotedContentRef.value.innerHTML}</blockquote>`
+          : ""),
+    },
+  }),
+  onSuccess: () => {
     savedReplyActionsRef.value?.submit();
+    resetState();
     emit("submit");
 
     if (isManager) {
-      updateOnboardingStep?.("reply_on_ticket");
+      updateOnboardingStep("reply_on_ticket");
     }
   },
-  onError: () => {
-    toast.error(__("Could not send the reply"));
-    pendingRow?.drop();
-    pendingRow = null;
-    if (sentDraft) {
-      newEmail.value = sentDraft.content;
-      attachments.value = sentDraft.attachments;
-      quotedContent.value = sentDraft.quoted;
-      isQuoteExpanded.value = sentDraft.quoteExpanded;
-      sentDraft = null;
-    }
-    emit("restore");
-  },
   debounce: 300,
 });
 
@@ -525,8 +486,6 @@ function submitMail() {
   if (isContentEmpty(newEmail.value) && isContentEmpty(quotedContent.value)) {
     return false;
   }
-  // The keyboard shortcut reaches here without passing the disabled button
-  if (isUploading.value || sendMail.loading) return false;
   if (
     !toEmailsClone.value.length &&
     !ccEmailsClone.value.length &&
@@ -538,64 +497,7 @@ function submitMail() {
     return false;
   }
 
-  const message =
-    newEmail.value +
-    (quotedContentRef.value
-      ? `<p class="reply-to-content"></p><blockquote>${quotedContentRef.value.innerHTML}</blockquote>`
-      : "");
-  const sender = selectedFromEmail.value?.email_id ?? authStore.userId;
-  const ownEmail = getUser(authStore.userId).email;
-
-  pendingRow?.drop();
-  pendingRow = addPendingActivity(props.doctype, props.ticketId, {
-    type: "email",
-    timestamp: dayjs().format("YYYY-MM-DD HH:mm:ss"),
-    author: {
-      email: sender,
-      // the users list may still be a stub with a guessed name and no avatar
-      fullname: authStore.userName,
-      image: sender === ownEmail ? authStore.userImage : undefined,
-    },
-    data: {
-      name: "",
-      sender,
-      to: toEmailsClone.value.join(", "),
-      cc: ccEmailsClone.value?.join(", "),
-      bcc: bccEmailsClone.value?.join(", "),
-      content: message,
-      attachments: attachments.value.map((a) => ({
-        file_url: a.file_url,
-        file_name: a.file_name,
-        is_private: a.is_private,
-      })),
-    },
-  });
-  sentDraft = {
-    content: newEmail.value,
-    attachments: attachments.value,
-    quoted: quotedContent.value,
-    quoteExpanded: isQuoteExpanded.value,
-  };
-
-  const params = {
-    dt: props.doctype,
-    dn: props.ticketId,
-    method: "reply_via_agent",
-    args: {
-      attachments: attachments.value.map((x) => x.name),
-      from_email: selectedFromEmail.value,
-      to: toEmailsClone.value.join(","),
-      cc: ccEmailsClone.value?.join(","),
-      bcc: bccEmailsClone.value?.join(","),
-      message,
-    },
-  };
-
-  // drop before resetState clears, or an unmount mid-send deletes what it carries
-  dropUnused(message);
-  resetState();
-  emit("sending");
-  sendMail.submit(params);
+  sendMail.submit();
 }
 
 function getInitialContent() {
@@ -654,7 +556,6 @@ function handleDiscard() {
   showBCC.value = false;
   isQuoteExpanded.value = false;
 
-  dropUnused(null);
   focusEditorAtStart();
   emit("discard");
 }
@@ -669,9 +570,6 @@ function handleSelectAll(e: KeyboardEvent) {
   if (!editorDom.contains(active) && !(quotedEl && quotedEl.contains(active))) {
     return;
   }
-  // after the focus check: select-all from a recipient field must not unfold
-  // the quoted reply
-  isQuoteExpanded.value = true;
   e.preventDefault();
   editorContext?.commands.selectAll();
   sel.removeAllRanges();
@@ -713,6 +611,7 @@ function handleKeydown(e: KeyboardEvent) {
   const key = e.key.toLowerCase();
 
   if ((e.metaKey || e.ctrlKey) && key === "a") {
+    isQuoteExpanded.value = true;
     handleSelectAll(e);
     return;
   }
@@ -789,14 +688,11 @@ onMounted(() => {
 onBeforeUnmount(() => {
   replyComposer.value = null;
   cleanup();
-  // the saved draft still references what it shows, so only what it dropped goes
-  dropUnused(`${newEmail.value ?? ""}${quotedContent.value ?? ""}`);
 });
 
 defineExpose({
   addToReply,
   editor,
-  isUploading,
   submitMail,
 });
 </script>

desk/src/components/EmailMultiSelect.vue

@@ -1,7 +1,8 @@
 <template>
   <div>
-    <div ref="pills" class="flex flex-wrap gap-1">
+    <div class="flex flex-wrap gap-1">
       <Button
+        ref="emails"
         v-for="value in values"
         :key="value"
         :label="value"
@@ -10,7 +11,7 @@
         :tooltip="copyOnClick ? __('Click to copy') : undefined"
         :class="[
           {
-            'rounded-4 !bg-surface-base hover:!bg-surface-gray-1 focus-visible:ring-outline-gray-4':
+            'rounded !bg-surface-base hover:!bg-surface-gray-1 focus-visible:ring-outline-gray-4':
               variant === 'subtle',
           },
           copyOnClick
@@ -21,7 +22,11 @@
         @keydown.delete.capture.stop="removeLastValue"
       >
         <template #suffix>
-          <LucideX class="size-3.5" @click.stop="removeValue(value)" />
+          <FeatherIcon
+            class="h-3.5"
+            name="x"
+            @click.stop="removeValue(value)"
+          />
         </template>
       </Button>
       <div class="flex-1 min-w-32">
@@ -34,7 +39,7 @@
           highlight-on-hover
         >
           <ComboboxAnchor
-            class="flex h-7 max-w-full w-auto items-center gap-2 rounded-4 px-2 py-1 border border-transparent"
+            class="flex h-7 max-w-full w-auto items-center gap-2 rounded px-2 py-1 border border-transparent"
             :class="[
               variant == 'ghost'
                 ? 'bg-surface-base hover:bg-surface-base'
@@ -57,7 +62,7 @@
           </ComboboxAnchor>
           <ComboboxPortal>
             <ComboboxContent
-              class="z-[100] mt-1 min-w-48 w-auto max-w-96 bg-surface-elevation-2 overflow-hidden rounded-6 shadow-2xl ring-1 ring-black ring-opacity-5"
+              class="z-10 mt-1 min-w-48 w-auto max-w-96 bg-surface-elevation-2 overflow-hidden rounded-lg shadow-2xl ring-1 ring-black ring-opacity-5"
               position="popper"
               :align="'start'"
               @openAutoFocus.prevent
@@ -65,16 +70,16 @@
             >
               <ComboboxViewport class="max-h-60 overflow-auto p-1.5">
                 <ComboboxEmpty
-                  class="flex gap-2 rounded-4 px-2 py-1 text-base text-ink-gray-5"
+                  class="flex gap-2 rounded px-2 py-1 text-base text-ink-gray-5"
                 >
-                  <LucideSearch class="size-4" />
+                  <FeatherIcon name="search" class="h-4" />
                   {{ __(emptyPlaceholder) }}
                 </ComboboxEmpty>
                 <ComboboxItem
                   v-for="option in options"
                   :key="option.value"
                   :value="option.value"
-                  class="text-base leading-none text-ink-gray-7 rounded-4 flex items-center px-2 py-1 relative select-none data-[highlighted]:outline-none data-[highlighted]:bg-surface-gray-3 cursor-pointer"
+                  class="text-base leading-none text-ink-gray-7 rounded flex items-center px-2 py-1 relative select-none data-[highlighted]:outline-none data-[highlighted]:bg-surface-gray-3 cursor-pointer"
                   @mousedown.prevent="onSelect(option.value)"
                 >
                   <UserAvatar
@@ -108,8 +113,6 @@
 </template>
 
 <script setup>
-import LucideSearch from "~icons/lucide/search";
-import LucideX from "~icons/lucide/x";
 import UserAvatar from "@/components/UserAvatar.vue";
 import { useUserStore } from "@/stores/user";
 import { copy } from "@/utils";
@@ -148,7 +151,7 @@ const errorMessage = (value) => __("{0} is an Invalid Email Address", [value]);
 const values = defineModel();
 
 // Common state
-const pills = ref(null);
+const emails = ref([]);
 const search = ref(null);
 const error = ref(null);
 const info = ref(null);
@@ -168,7 +171,6 @@ const filterContacts = createResource({
       label: full_name || email_id || name,
       value: email_id || name,
       email: email_id,
-      name,
     })),
 });
 
@@ -203,12 +205,19 @@ const options = computed(() => {
     if (props.existingUsers?.length) {
       list = list.filter((o) => !props.existingUsers.includes(o.value));
     }
-    return list.filter(matchesQuery);
+    if (query.value) {
+      const q = query.value.toLowerCase();
+      list = list.filter(
+        (o) =>
+          o.label?.toLowerCase().includes(q) ||
+          o.value?.toLowerCase().includes(q)
+      );
+    }
+    return list;
   }
 
-  // contacts mode; the search is debounced, so narrow the last results to the
-  // typed text, or a quick Enter picks a contact that no longer matches
-  let list = (filterContacts.data || []).filter(matchesQuery);
+  // contacts mode
+  let list = filterContacts.data || [];
   if (values.value?.length) {
     list = list.filter((o) => !values.value.includes(o.value));
   }
@@ -227,13 +236,6 @@ const options = computed(() => {
   return list;
 });
 
-function matchesQuery(option) {
-  const q = query.value.toLowerCase();
-  return [option.label, option.value, option.name].some((field) =>
-    field?.toLowerCase().includes(q)
-  );
-}
-
 function isExistingUser(email) {
   if (!email) return false;
   return props.existingUsers?.some(
@@ -308,32 +310,24 @@ function removeValue(value) {
   values.value = values.value.filter((v) => v !== value);
 }
 
-// Read the pills from the DOM: a Button with a tooltip renders extra root
-// nodes, so its `$el` is not the <button>.
-function lastPill() {
-  const buttons = pills.value?.querySelectorAll(":scope > button");
-  return buttons?.[buttons.length - 1] ?? null;
-}
-
 function removeLastValue() {
   if (query.value) return;
-  const pill = lastPill();
-  if (document.activeElement === pill) {
+  let emailRef = emails.value[emails.value.length - 1]?.rootRef;
+  if (document.activeElement === emailRef) {
     values.value.pop();
     nextTick(() => {
       if (values.value.length) {
-        lastPill()?.focus();
+        emailRef = emails.value[emails.value.length - 1].rootRef;
+        emailRef?.focus();
       } else {
         setFocus();
       }
     });
   } else {
-    pill?.focus();
+    emailRef?.focus();
   }
 }
 
-// TODO: use single contact component. This refocus also fires when focus has
-// already moved on, so a click elsewhere within 200ms is pulled back here.
 function setFocus() {
   setTimeout(() => {
     search.value?.$el?.focus();

desk/src/components/EmptyState.vue

@@ -25,7 +25,7 @@
     class="flex h-full items-center justify-center absolute inset-x-0 top-0 pointer-events-none"
   >
     <div
-      class="flex flex-col items-center gap-2 text-xl-medium text-ink-gray-4 w-9/12 md:w-4/12"
+      class="flex flex-col items-center gap-2 text-2xl-medium text-ink-gray-4 w-9/12 md:w-4/12"
     >
       <!-- overlay variant (for charts) -->
       <div
@@ -44,7 +44,7 @@
           :class="{
             'text-sm font-medium text-ink-gray-8': text === 'sm',
             'text-base font-medium text-ink-gray-8': text === 'md' || !text,
-            'text-md font-medium text-ink-gray-8': text === 'lg',
+            'text-lg font-medium text-ink-gray-8': text === 'lg',
           }"
         >
           {{ __(title) }}

desk/src/components/FieldLabel.vue

@@ -12,7 +12,6 @@ import { Tooltip } from "frappe-ui";
 
 defineProps<{
   label: string;
-  // Frappe fields carry 1 / 0, not true / false
-  required?: boolean | number;
+  required?: boolean;
 }>();
 </script>

desk/src/components/HistoryBox.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="flex-1">
+    <div
+      class="mt-0.5 flex justify-between text-base items-start md:items-center"
+    >
+      <div
+        v-if="relatedActivities.length > 1"
+        class="inline-flex flex-wrap gap-1.5 text-ink-gray-8 font-medium w-4/5"
+      >
+        <span>{{ `${show_others ? __("Hide ") : __("Show ")}` }}</span>
+        <span>+{{ relatedActivities.length }} </span>
+        <span>{{ __("changes from") }} </span>
+        <span>{{ user }}</span>
+
+        <Button
+          class="!size-4"
+          variant="ghost"
+          @click="show_others = !show_others"
+        >
+          <template #icon>
+            <SelectIcon />
+          </template>
+        </Button>
+      </div>
+      <div class="text-ink-gray-5 w-4/6 text-p-base" v-else>
+        <span class="font-medium text-ink-gray-8">
+          {{ user }}
+        </span>
+        <span> {{ content }}</span>
+      </div>
+
+      <div class="text-ink-gray-5 text-sm w-2/6 flex justify-end">
+        <Tooltip :text="dateFormat(creation, dateTooltipFormat)">
+          <span>{{ timeAgo(creation) }}</span>
+        </Tooltip>
+      </div>
+    </div>
+    <div v-if="show_others">
+      <div
+        v-for="relatedActivity in relatedActivities"
+        :key="relatedActivity.creation"
+        class="mt-2 flex justify-between text-base"
+      >
+        <div class="text-ink-gray-5 w-4/6">
+          <span class="font-medium text-ink-gray-8">
+            {{ relatedActivity.user }}
+          </span>
+          <span> {{ relatedActivity.content }}</span>
+        </div>
+        <Tooltip
+          :text="dateFormat(relatedActivity.creation, dateTooltipFormat)"
+        >
+          <div class="text-ink-gray-5 text-sm w-2/6 flex justify-end">
+            {{ timeAgo(relatedActivity.creation) }}
+          </div>
+        </Tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SelectIcon } from "@/components/icons";
+import { dateFormat, dateTooltipFormat, timeAgo } from "@/utils";
+import { computed, ref } from "vue";
+const props = defineProps({
+  activity: {
+    type: Object,
+    required: true,
+  },
+});
+
+const { user, content, creation } = props.activity;
+const relatedActivities = computed(() => props.activity.relatedActivities);
+
+let show_others = ref(false);
+</script>

desk/src/components/Icon.vue

@@ -2,18 +2,20 @@
   <div v-if="isEmoji(icon)" v-bind="$attrs">
     {{ icon }}
   </div>
-  <SpriteIcon
+  <span
+    v-else-if="typeof icon == 'string' && icon.startsWith('lucide-')"
+    :class="icon"
+    v-bind="$attrs"
+  />
+  <FeatherIcon
     v-else-if="typeof icon == 'string'"
-    :name="icon.replace('lucide-', '')"
+    :name="icon"
     v-bind="$attrs"
   />
   <component v-else :is="icon" v-bind="$attrs" />
 </template>
 <script setup>
 import { isEmoji } from "@/utils";
-// Sprite, not a `lucide-*` class: these names come from stored view icons, and
-// Tailwind only emits CSS for class names it can see in source.
-import { Icon as SpriteIcon } from "frappe-ui/experimental";
 
 const props = defineProps({
   icon: {

desk/src/components/ImageAvatar.vue

@@ -21,7 +21,7 @@
           </button>
           <button
             type="button"
-            class="absolute -right-2.5 -top-2.5 flex size-4.5 cursor-pointer items-center justify-center rounded-full bg-surface-base text-ink-gray-4 opacity-0 outline outline-black-overlay-50 duration-300 ease-in-out focus:outline-none focus-visible:outline-none hover:bg-surface-gray-2 group-hover:opacity-100 [@media(hover:none)]:opacity-100"
+            class="absolute -right-2.5 -top-2.5 flex size-4.5 cursor-pointer items-center justify-center rounded-full bg-surface-base text-ink-gray-4 opacity-0 outline outline-black-overlay-50 duration-300 ease-in-out focus:outline-none focus-visible:outline-none hover:bg-surface-gray-2 group-hover:opacity-100"
             :aria-label="__('Remove image')"
             @click.prevent="image = ''"
           >

desk/src/components/LineChartCard.vue

@@ -71,8 +71,7 @@ const props = defineProps({
   },
 });
 
-// the untranslated key: it is lowercased straight into the API period
-const currentDuration = ref("Last month");
+const currentDuration = ref(__("Last month"));
 
 const chartData = computed(() => {
   const isDataFetched = resource.fetched;

desk/src/components/ListRows.vue

@@ -57,13 +57,14 @@
 </template>
 
 <script setup>
-import { Button, Dropdown } from "frappe-ui";
 import {
+  Button,
+  Dropdown,
   ListGroupHeader,
   ListGroupRows,
   ListRow,
   ListRows,
-} from "frappe-ui/experimental";
+} from "frappe-ui";
 import { computed, ref, watch } from "vue";
 
 import IconMoreHorizontal from "~icons/lucide/more-horizontal";

desk/src/components/ListViewBuilder.vue

@@ -2,8 +2,8 @@
   <!-- View Controls -->
   <div
     :class="[
-      'flex items-center justify-between gap-2 px-5 pb-4 pt-4',
-      list?.data?.data?.length > 0 ? 'relative' : 'absolute inset-x-0',
+      'flex items-center justify-between gap-2 px-5 pb-4 pt-3 ',
+      list?.data?.data?.length > 0 ? 'relative' : 'absolute w-[stretch]',
     ]"
     v-if="showViewControls"
   >
@@ -40,7 +40,7 @@
     v-if="list.loading && !list.data?.data?.length"
     class="flex items-center justify-center h-full w-full absolute top-0 z-100"
   >
-    <LoadingIndicator class="size-6 text-ink-gray-4" />
+    <LoadingIndicator :scale="8" />
   </div>
   <!-- List View -->
   <ListView
@@ -121,17 +121,7 @@
           handlePageLength(count);
         }
       "
-    >
-      <!-- frappe-ui's ListFooter still feeds TabButtons the removed `buttons`
-           prop, so its own page-length picker renders nothing. -->
-      <template #left>
-        <TabButtons
-          :model-value="defaultParams.page_length_count"
-          :options="[20, 50, 100].map((o) => ({ label: String(o), value: o }))"
-          @update:model-value="(count) => handlePageLength(count)"
-        />
-      </template>
-    </ListFooter>
+    />
   </div>
   <!-- Empty State -->
   <EmptyState
@@ -159,30 +149,27 @@ import {
 } from "@/composables/useView";
 import { useAuthStore } from "@/stores/auth";
 import { globalStore } from "@/stores/globalStore";
-import { useTicketStatusStore } from "@/stores/ticketStatus";
 import { capture } from "@/telemetry";
-import { __ } from "@/translation";
 import { View, ViewType } from "@/types";
-import { getIcon } from "@/utils";
+import { formatTimeShort, getIcon } from "@/utils";
 import { useStorage } from "@vueuse/core";
+import { useTicketStatusStore } from "@/stores/ticketStatus";
+import { __ } from "@/translation";
 import {
   createResource,
-  dayjsLocal,
   Dropdown,
+  FeatherIcon,
   frappeRequest,
-  LoadingIndicator,
-  TabButtons,
-  toast,
-} from "frappe-ui";
-import {
-  Icon as SpriteIcon,
   ListFooter,
   ListHeader,
   ListHeaderItem,
   ListRowItem,
   ListSelectBanner,
   ListView,
-} from "frappe-ui/experimental";
+  LoadingIndicator,
+  dayjs,
+  toast,
+} from "frappe-ui";
 import {
   computed,
   h,
@@ -268,7 +255,7 @@ const defaultOptions = reactive({
               label: __("Delete"),
               variant: "solid",
               theme: "red",
-              iconLeft: "lucide-trash-2",
+              iconLeft: "trash-2",
               onClick({ close }) {
                 handleBulkDelete(close, selections);
               },
@@ -478,7 +465,7 @@ function getGroupedByRows(listRows, groupByField) {
       group: option || " ",
       collapsed: false,
       rows: filteredRows,
-      icon: h(SpriteIcon, {
+      icon: h(FeatherIcon, {
         name: "folder",
         class: "h-4 w-4 flex-shrink-0 text-ink-gray-6",
       }),
@@ -561,8 +548,8 @@ function listCell(column: any, row: any, item: any, idx: number) {
   }
   if (column.type === "Datetime") {
     return h("span", {
-      class: "text-base",
-      textContent: dayjsLocal(item).fromNow(),
+      class: "text-p-xs",
+      textContent: formatTimeShort(item),
     });
   }
   if (column.type === "MultipleAvatar") {
@@ -601,11 +588,16 @@ function handleFieldClick(e: MouseEvent, column, row, item) {
   }
 
   if (column.type === "MultipleAvatar") {
-    const avatar = (e.target as HTMLElement).closest(".user-avatar");
-    // the gap between the faces, and the "+n" chip, name nobody to filter by
-    const name = avatar?.getAttribute("data-name");
-    if (!name) return;
-    applyColumnFilter(column.key, "LIKE", `%${name}%`);
+    if (item.length > 1) {
+      let target = e.target as HTMLElement;
+      target = target.closest(".user-avatar");
+      if (target) {
+        item = target.getAttribute("data-name");
+      }
+    } else {
+      item = item[0].name;
+    }
+    applyColumnFilter(column.key, "LIKE", `%${item}%`);
     return;
   }
   applyColumnFilter(column.key, "=", item);

desk/src/components/MultiSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-wrap gap-2 rounded-6 bg-surface-gray-2 p-2">
+  <div class="flex flex-wrap gap-2 rounded-lg bg-surface-gray-2 p-2">
     <Pill
       v-for="item in items"
       :key="item.value"

desk/src/components/MultipleAvatar.vue

@@ -5,8 +5,7 @@
   >
     <div
       v-if="_avatars?.length == 1"
-      class="user-avatar flex min-w-0 items-center gap-2 text-base line-clamp-1"
-      :data-name="_avatars[0].name"
+      class="flex min-w-0 items-center gap-2 text-base line-clamp-1"
     >
       <Tooltip :text="_avatars[0].name">
         <Avatar
@@ -51,10 +50,8 @@ import { Avatar, Tooltip } from "frappe-ui";
 import { computed } from "vue";
 
 const props = defineProps({
-  // Frappe hands `_assign` over as a JSON string; callers with the list
-  // already parsed pass the array itself.
   avatars: {
-    type: [String, Array],
+    type: String,
   },
   size: {
     type: String,

desk/src/components/NestedPopover.vue

@@ -0,0 +1,60 @@
+<template>
+  <Popover v-slot="{ open }">
+    <PopoverButton
+      ref="reference"
+      v-slot="{ open: o }"
+      as="div"
+      @click="updatePosition"
+      @focusin="updatePosition"
+      @keydown="updatePosition"
+    >
+      <slot name="target" :open="o" />
+    </PopoverButton>
+    <div v-show="open">
+      <PopoverPanel
+        v-slot="{ open: o, close }"
+        ref="popover"
+        static
+        class="z-[100]"
+      >
+        <slot name="body" :open="o" :close="close" />
+      </PopoverPanel>
+    </div>
+  </Popover>
+</template>
+
+<script setup>
+import { nextTick, ref, onBeforeUnmount } from "vue";
+import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
+import { createPopper } from "@popperjs/core";
+
+const props = defineProps({
+  placement: {
+    type: String,
+    default: "bottom-start",
+  },
+});
+
+const reference = ref(null);
+const popover = ref(null);
+
+let popper = ref(null);
+
+function setupPopper() {
+  if (!popper.value) {
+    popper.value = createPopper(reference.value.el, popover.value.el, {
+      placement: props.placement,
+    });
+  } else {
+    popper.value.update();
+  }
+}
+
+function updatePosition() {
+  nextTick(() => setupPopper());
+}
+
+onBeforeUnmount(() => {
+  popper.value?.destroy();
+});
+</script>

desk/src/components/PageInfo.vue

@@ -15,11 +15,11 @@
         ]"
       >
         <div class="flex gap-2 items-center">
-          <p class="text-ink-gray-8 text-xl-medium">
+          <p class="text-ink-gray-8 text-2xl-medium">
             {{ avatar.label }}
           </p>
           <Tooltip v-if="badge" :text="badge.tooltip ?? ''">
-            <Badge :label="badge.label" :theme="badge.theme ?? 'amber'" />
+            <Badge :label="badge.label" :theme="badge.theme ?? 'orange'" />
           </Tooltip>
         </div>
         <div v-if="!isMobileView" class="flex items-center gap-x-1.5">
@@ -69,7 +69,7 @@ interface DocInfoItem {
 
 interface BadgeInfo {
   label: string;
-  theme?: "gray" | "blue" | "green" | "amber" | "red";
+  theme?: "gray" | "blue" | "green" | "orange" | "red";
   tooltip?: string;
 }
 

desk/src/components/PageTitle.vue

@@ -2,7 +2,7 @@
   <header class="border-b px-5 py-2.5">
     <div class="flex items-center justify-between">
       <slot name="title">
-        <div v-if="title" class="text-md-medium text-ink-gray-9">
+        <div v-if="title" class="text-lg-medium text-ink-gray-9">
           {{ title }}
         </div>
       </slot>

desk/src/components/Password.vue

@@ -10,10 +10,10 @@
       <slot name="prefix" />
     </template>
     <template #suffix>
-      <Tooltip bare>
-        <template #content>
+      <Tooltip>
+        <template #body>
           <div
-            class="rounded-4 bg-surface-gray-10 py-1.5 px-2 text-xs text-ink-base shadow-xl"
+            class="rounded bg-surface-gray-10 py-1.5 px-2 text-xs text-ink-base shadow-xl"
           >
             <span class="flex items-center gap-1">
               {{ show ? "Hide Password" : "Show Password" }}

desk/src/components/Pill.vue

@@ -38,6 +38,6 @@ const handleClick = (label) => {
 };
 
 defineExpose({
-  rootRef: computed(() => buttonRef.value?.$el),
+  rootRef: computed(() => buttonRef.value?.rootRef),
 });
 </script>

desk/src/components/Questionnaire.vue

@@ -8,7 +8,7 @@
         v-if="current > 0"
         variant="ghost"
         icon="lucide-chevron-left"
-        class="!size-7 shrink-0 !rounded-5 absolute -left-11 mt-4"
+        class="!size-7 shrink-0 !rounded-md absolute -left-11 mt-4"
         @click="back"
       />
       <div
@@ -16,7 +16,7 @@
         class="mx-0 min-w-0 border-0 p-0 flex gap-5 flex-col"
       >
         <div>
-          <p class="p-0 text-p-xl font-bold text-ink-gray-9">
+          <p class="p-0 text-p-2xl font-bold text-ink-gray-9">
             {{ question.title
             }}<span v-if="titleRequired" class="ms-0.5 text-ink-red-6">*</span>
           </p>
@@ -81,7 +81,7 @@
               :label="option.label"
               :variant="isSelected(option) ? 'subtle' : 'outline'"
               size="sm"
-              class="!rounded-5 border border-solid"
+              class="!rounded-md border border-solid"
               :class="
                 isSelected(option)
                   ? '!bg-surface-gray-3 hover:!bg-surface-gray-4 !border-outline-gray-3'
@@ -247,7 +247,7 @@ function select(option: Option) {
   if (!isOtherSelected.value) {
     delete answers[otherKey.value];
   } else if (option.value === "other") {
-    nextTick(() => otherInput.value?.focus({ preventScroll: true }));
+    nextTick(() => otherInput.value?.el?.focus({ preventScroll: true }));
   }
 }
 
@@ -264,7 +264,7 @@ function proceed() {
   // "Other" stays selectable with Next enabled; the ask happens on click.
   if (isOtherSelected.value && !isOtherFilled.value) {
     otherError.value = __("Add a few words so we can continue");
-    otherInput.value?.focus({ preventScroll: true });
+    otherInput.value?.el?.focus({ preventScroll: true });
     return;
   }
   if (isLast.value) finish();

desk/src/components/SavedRepliesSelectorModal.vue

@@ -3,7 +3,7 @@
     <template #default>
       <div class="max-h-[575px]" :style="{ height: 'calc(100vh - 8rem)' }">
         <div class="flex items-center justify-between w-full p-4 pb-2">
-          <div class="text-2xl-semibold">{{ __("Saved Replies") }}</div>
+          <div class="text-3xl-semibold">{{ __("Saved Replies") }}</div>
           <Button
             icon-left="lucide-plus"
             :label="__('New')"
@@ -35,7 +35,7 @@
                 class="absolute end-1 top-1/2 -translate-y-1/2"
               />
             </div>
-            <Dropdown :options="filters" align="end">
+            <Dropdown :options="filters" placement="right">
               <Button :label="activeFilterLabel">
                 <template #prefix><FilterIcon class="h-4" /></template>
               </Button>
@@ -59,7 +59,7 @@
             <div
               v-for="template in savedReplyListResource?.data"
               :key="template.name"
-              class="flex h-56 cursor-pointer flex-col gap-2 rounded-6 border border-outline-gray-1 bg-surface-base p-3 hover:border-outline-gray-3 relative"
+              class="flex h-56 cursor-pointer flex-col gap-2 rounded-lg border border-outline-gray-1 bg-surface-base p-3 hover:border-outline-gray-3 relative"
               @click="onTemplateSelect(template)"
             >
               <div class="flex items-center gap-2 border-b pb-2">
@@ -99,7 +99,7 @@
                   selectedTemplate.name === template.name &&
                   selectedTemplate.isLoading
                 "
-                class="flex items-center justify-center absolute top-0 start-0 w-full h-full rounded-6"
+                class="flex items-center justify-center absolute top-0 start-0 w-full h-full rounded-lg"
               >
                 <LoadingIndicator class="size-4" />
               </div>
@@ -366,7 +366,10 @@ watch(
     }
     // Counts don't move with the selected scope, so this is the only refetch
     scopeCounts.reload();
-    nextTick(() => searchInput.value?.focus());
+    nextTick(() => {
+      const inputEl = searchInput.value?.$el?.querySelector("input");
+      inputEl?.focus();
+    });
   },
   { immediate: true }
 );

desk/src/components/SavedReplyActions/SavedReplyActionChip.vue

@@ -1,11 +1,12 @@
 <template>
-  <component
-    :is="config.doctype ? Link : Combobox"
-    v-bind="controlProps"
+  <Combobox
+    trigger="button"
     :disabled="!isEditable"
     :model-value="action.value"
+    :options="pickerOptions"
     :placeholder="__('Select {0}', label.toLowerCase())"
-    @update:model-value="pick(($event ?? '') as string)"
+    @update:model-value="pick($event as string)"
+    @update:query="search(action.action_type, $event)"
   >
     <template #trigger="{ setOpen }">
       <!-- The anchor forwards its click to this element, so it has to be a plain
@@ -43,7 +44,7 @@
               <button
                 type="button"
                 :aria-label="__('Remove {0}', label)"
-                class="flex items-center rounded-1 text-ink-gray-6 transition-colors hover:text-ink-gray-9 focus-visible:ring-2 focus-visible:ring-outline-gray-3 mt-[1px]"
+                class="flex items-center rounded-sm text-ink-gray-6 transition-colors hover:text-ink-gray-9 focus-visible:ring-2 focus-visible:ring-outline-gray-3 mt-[1px]"
                 @click.stop="emit('remove')"
                 @pointerdown.stop
               >
@@ -54,13 +55,12 @@
         </Tooltip>
       </div>
     </template>
-  </component>
+  </Combobox>
 </template>
 
 <script setup lang="ts">
 import { ACTION_TYPES } from "@/components/Settings/SavedReplies/components/actionTypes";
 import { useSavedReplyActionOptions } from "@/composables/useSavedReplyActionOptions";
-import { Link } from "@framework/ui";
 import { __ } from "@/translation";
 import { SavedReplyAction } from "@/types";
 import { Badge, Combobox, Tooltip } from "frappe-ui";
@@ -78,19 +78,17 @@ const emit = defineEmits<{
   remove: [];
 }>();
 
-const { valueOptions, linkFilters } = useSavedReplyActionOptions();
+const { valueOptions, search } = useSavedReplyActionOptions();
 
 const config = computed(() => ACTION_TYPES[props.action.action_type]);
 const label = computed(() => config.value.chipLabel);
 // Empty for no-value actions like "Assign to Me"; the noun then stands alone
 const value = computed(() => props.action.label || props.action.value);
 
-// A tag chip holds one tag, so it picks like the rest. Excluded rather than
-// listed, so a new control type is editable by default instead of silently
-// read-only: no-value actions have nothing to pick, and a comment is too long
-// for a chip.
-const isEditable = computed(
-  () => !["none", "editor"].includes(config.value.control)
+// A tag chip holds one tag, so it picks like the rest; no-value actions have
+// nothing to pick
+const isEditable = computed(() =>
+  ["select", "combobox", "multiselect"].includes(config.value.control)
 );
 
 // Combobox takes string values; the shared options allow numbers too
@@ -103,26 +101,8 @@ const pickerOptions = computed(() =>
     }))
 );
 
-// A #trigger slot puts Combobox in button mode, and Link forwards that slot,
-// so the badge below serves both controls.
-const controlProps = computed(() =>
-  config.value.doctype
-    ? {
-        doctype: config.value.doctype,
-        filters: linkFilters(props.action.action_type),
-        title: value.value,
-      }
-    : { options: pickerOptions.value }
-);
-
 /** `label` carries the display name (an agent's, not their id), so both move. */
 function pick(picked: string) {
-  // A link picker offers no option list to read a label from; for these
-  // doctypes the record name is the label.
-  if (config.value.doctype) {
-    emit("update", { ...props.action, value: picked, label: picked });
-    return;
-  }
   const option = pickerOptions.value.find(
     (candidate) => candidate.value === picked
   );

desk/src/components/SavedReplyActions/SavedReplyActionComment.vue

@@ -75,6 +75,10 @@ const isEdited = computed(
 // Same editor the Comment tab uses: rich text with @-mentions
 const { dropdown: agentDropdown } = storeToRefs(useAgentStore());
 const extensions = buildEditorExtensions({
-  mentions: () => agentDropdown.value ?? [],
+  mentions: () =>
+    (agentDropdown.value ?? []).map((a: { label: string; value: string }) => ({
+      id: a.value,
+      label: a.label,
+    })),
 });
 </script>

desk/src/components/SavedReplyActions/SavedReplyActions.vue

@@ -2,7 +2,7 @@
   <div
     v-if="pendingActions.length"
     ref="container"
-    class="overflow-hidden rounded-6 border border-outline-gray-1 bg-surface-gray-1"
+    class="overflow-hidden rounded-lg border border-outline-gray-1 bg-surface-gray-1"
   >
     <div class="flex h-8 items-center gap-1.5 ps-3.5 pe-1.5">
       <LucideInfo class="size-3 shrink-0 text-ink-gray-6" />
@@ -67,7 +67,7 @@
 
 <script setup lang="ts">
 import { isTagAction } from "@/components/Settings/SavedReplies/components/actionTypes";
-import { reloadTicket, reloadTicketFeed } from "@/composables/useTicket";
+import { reloadTicket } from "@/composables/useTicket";
 import { userStorage } from "@/composables/userStorage";
 import { __ } from "@/translation";
 import { RenderedSavedReply, SavedReplyAction } from "@/types";
@@ -194,11 +194,6 @@ function setNoteValue(value: string) {
   if (noteAction.value) noteAction.value.value = value;
 }
 
-function reloadFeed() {
-  reloadTicket(props.ticketId);
-  reloadTicketFeed(props.ticketId);
-}
-
 const applyActions = createResource({
   url: "helpdesk.api.saved_replies.apply_saved_reply_actions",
   onSuccess: (result: {
@@ -219,7 +214,7 @@ const applyActions = createResource({
       );
     }
     pendingActions.value = [];
-    reloadFeed();
+    reloadTicket(props.ticketId);
   },
   onError: (error: { status?: number }) => {
     const failed = [...pendingActions.value];
@@ -233,7 +228,7 @@ const applyActions = createResource({
         ? { action: { label: __("Retry"), onClick: () => retry(failed) } }
         : { description: __("Please apply the actions manually") }),
     });
-    reloadFeed();
+    reloadTicket(props.ticketId);
   },
 });
 

desk/src/components/SearchArticles.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="Boolean(articles.data?.length) && query.length > 2"
-    class="rounded-4 border p-4 text-base"
+    class="rounded border p-4 text-base"
   >
     <div class="mb-2 font-medium ps-2" v-if="!hideViewAll">
       These articles may already cover what you are looking for
@@ -22,7 +22,7 @@
       <div
         v-for="a in articles.data"
         :key="a.id"
-        class="rounded-5 border-2 p-2 border-hidden hover:bg-surface-gray-2"
+        class="rounded-md border-2 p-2 border-hidden hover:bg-surface-gray-2"
       >
         <RouterLink
           class="group cursor-pointer hover:text-ink-gray-9 flex flex-col gap-1"
@@ -50,7 +50,7 @@
     v-else-if="
       !articles.loading && articles.data?.length === 0 && query.length > 2
     "
-    class="flex flex-col items-center justify-center h-[240px] gap-2 rounded-4 border"
+    class="flex flex-col items-center justify-center h-[240px] gap-2 rounded border"
   >
     <LucideSearch class="size-8 text-ink-gray-3" />
     <div class="flex items-center flex-col justify-center">
@@ -62,7 +62,7 @@
   </div>
   <div
     v-else-if="articles.loading"
-    class="flex flex-col items-center justify-center h-[240px] gap-2 rounded-4 border"
+    class="flex flex-col items-center justify-center h-[240px] gap-2 rounded border"
   >
     <LucideSearch class="size-8 text-ink-gray-3" />
     <div class="flex items-center flex-col justify-center">
@@ -99,9 +99,7 @@ watch(
       },
     });
     articles.reload();
-  },
-  // Mounted after the third character is typed.
-  { immediate: true }
+  }
 );
 
 function handleSearchArticleClick(article) {

desk/src/components/SearchComplete.vue

@@ -0,0 +1,101 @@
+<template>
+  <Autocomplete
+    placeholder="Select an option"
+    :options="options"
+    :value="selection"
+    @update:query="(q) => onUpdateQuery(q)"
+    @change="
+      (v) => {
+        if (!resetInput) {
+          selection = v;
+        }
+        emit('change', v);
+      }
+    "
+  />
+</template>
+
+<script setup lang="ts">
+import { Autocomplete } from "@/components";
+import { createListResource } from "frappe-ui";
+import { computed, ref } from "vue";
+
+const emit = defineEmits(["change"]);
+
+const props = defineProps({
+  value: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  doctype: {
+    type: String,
+    required: true,
+  },
+  searchField: {
+    type: String,
+    required: false,
+    default: "name",
+  },
+  labelField: {
+    type: String,
+    required: false,
+    default: "name",
+  },
+  valueField: {
+    type: String,
+    required: false,
+    default: "name",
+  },
+  pageLength: {
+    type: Number,
+    required: false,
+    default: 100,
+  },
+  resetInput: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  customFilters: {
+    type: Object,
+    required: false,
+    default: {},
+  },
+});
+
+const r = createListResource({
+  doctype: props.doctype,
+  pageLength: props.pageLength,
+  auto: true,
+  fields: [props.labelField, props.searchField, props.valueField],
+  filters: {
+    [props.searchField]: ["like", `%${props.value}%`],
+    ...props.customFilters,
+  },
+  onSuccess: () => {
+    selection.value = props.value
+      ? options.value.find((o) => o.value === props.value)
+      : null;
+  },
+});
+const options = computed(
+  () =>
+    r.data?.map((result) => ({
+      label: result[props.labelField],
+      value: result[props.valueField],
+    })) || []
+);
+const selection = ref(null);
+
+function onUpdateQuery(query: string) {
+  r.update({
+    filters: {
+      [props.searchField]: ["like", `%${query}%`],
+      ...props.customFilters,
+    },
+  });
+
+  r.reload();
+}
+</script>

desk/src/components/SearchMultiSelect.vue

@@ -50,7 +50,7 @@
 
     <div
       v-if="isOpen"
-      class="absolute z-50 mt-2 w-64 divide-y divide-outline-elevation-2 rounded-6 bg-surface-elevation-2 shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none start-0 origin-top-left"
+      class="absolute z-50 mt-2 w-64 divide-y divide-outline-elevation-2 rounded-lg bg-surface-elevation-2 shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none start-0 origin-top-left"
     >
       <!-- Header -->
       <div class="py-1.5 px-1.5">
@@ -85,13 +85,13 @@
           <button
             v-for="option in filteredIndividualOptions"
             :key="`individual-${option.value}`"
-            class="group flex h-7 w-full items-center rounded-4 px-2 text-base hover:bg-surface-gray-3 text-ink-gray-6"
+            class="group flex h-7 w-full items-center rounded px-2 text-base hover:bg-surface-gray-3 text-ink-gray-6"
             :class="{ 'bg-surface-gray-2': isHighlighted(option) }"
             @click="toggleOption(option)"
           >
             <Checkbox
               :modelValue="props.modelValue.includes(option.value)"
-              class="me-4 flex-shrink-0"
+              class="me-2 flex-shrink-0"
             />
 
             <component v-if="option.icon" :is="renderIcon(option.icon)" />
@@ -130,13 +130,13 @@
           <button
             v-for="option in group.items"
             :key="`grouped-${option.value}`"
-            class="group flex h-7 w-full items-center rounded-4 px-2 text-base hover:bg-surface-gray-3 text-ink-gray-6"
+            class="group flex h-7 w-full items-center rounded px-2 text-base hover:bg-surface-gray-3 text-ink-gray-6"
             :class="{ 'bg-surface-gray-2': isHighlighted(option) }"
             @click="toggleOption(option)"
           >
             <Checkbox
               :modelValue="props.modelValue.includes(option.value)"
-              class="me-4 flex-shrink-0"
+              class="me-2 flex-shrink-0"
             />
 
             <component v-if="option.icon" :is="renderIcon(option.icon)" />

desk/src/components/SearchPopover.vue

@@ -1,41 +1,35 @@
 <template>
-  <Popover>
-    <template #trigger="{ close, setOpen }">
-      <!--
-        Typing opens this, not clicking. reka turns the trigger's root into the
-        toggle, so the field stops its own click before it reaches that root.
-      -->
-      <div>
-        <div class="flex flex-col gap-1 w-full" @click.stop>
-          <slot name="label"></slot>
-          <FormControl
-            type="text"
-            class="w-full focus:outline-none outline-none border-inherit shadow-none"
-            v-bind="$attrs"
-            v-model="query"
-            @update:model-value="
-              (e: string) => {
-                if (e.length >= 3) {
-                  setOpen(true);
-                } else {
-                  close();
-                }
+  <Popover
+    :popover-class="popoverClass.length > 0 ? popoverClass : ''"
+    class="flex w-full"
+  >
+    <template #target="{ open, close }">
+      <div class="flex flex-col gap-1 w-full">
+        <slot name="label"></slot>
+        <FormControl
+          type="text"
+          class="w-full focus:outline-none outline-none border-inherit shadow-none"
+          v-bind="$attrs"
+          v-model="query"
+          @update:model-value="
+            (e: string) => {
+              if (e.length >= 3) {
+                open();
+              } else {
+                close();
               }
-            "
-          >
-            <template #prefix>
-              <LucideSearch class="size-4 text-ink-gray-4" />
-            </template>
-          </FormControl>
-        </div>
+            }
+          "
+        >
+          <template #prefix>
+            <LucideSearch class="size-4 text-ink-gray-4" />
+          </template>
+        </FormControl>
       </div>
     </template>
-    <template #default>
+    <template #body-main>
       <!-- Searched Articles -->
-      <div
-        class="max-h-[320px] md:max-h-[420px] overflow-scroll flex flex-col"
-        :class="popoverClass"
-      >
+      <div class="max-h-[320px] md:max-h-[420px] overflow-scroll flex flex-col">
         <SearchArticles
           :query="query"
           :hideViewAll="true"

desk/src/components/SelectDropdown.vue

@@ -1,12 +1,9 @@
 <template>
-  <Popover
-    bare
-    :side="splitPlacement(props.placement).side"
-    :align="splitPlacement(props.placement).align"
-  >
-    <template #trigger>
+  <Popover :placement="props.placement">
+    <template #target="{ togglePopover }">
       <Button
         class="flex items-center justify-between min-w-36"
+        @click="togglePopover()"
         :class="targetClass"
         icon-right="lucide-chevron-down"
       >
@@ -17,27 +14,31 @@
         </div>
       </Button>
     </template>
-    <template #default="{ close: closePopover }">
+    <template #body="{ togglePopover }">
       <div
-        class="mt-1 p-1 text-ink-gray-6 w-[--reka-popper-anchor-width] bg-surface-base shadow-2xl rounded-4"
+        class="p-1 text-ink-gray-6 top-1 absolute w-[--reka-popper-anchor-width] bg-surface-base shadow-2xl rounded"
         :class="bodyClass"
       >
         <div class="max-h-52 overflow-y-auto">
           <div
             v-for="option in options"
             :key="option.value"
-            class="p-2 cursor-pointer hover:bg-surface-gray-3 text-base flex items-center justify-between rounded-4"
+            class="p-2 cursor-pointer hover:bg-surface-gray-3 text-base flex items-center justify-between rounded"
             @click="
               () => {
                 onChange(option.value);
-                closePopover();
+                togglePopover();
               }
             "
           >
             <div class="w-full truncate">
               {{ option.label }}
             </div>
-            <LucideCheck v-if="model == option.value" class="size-4 ms-2" />
+            <FeatherIcon
+              v-if="model == option.value"
+              name="check"
+              class="size-4 ms-2"
+            />
           </div>
         </div>
         <hr class="my-1" />
@@ -46,7 +47,7 @@
           :label="__('Reset')"
           icon-left="lucide-refresh-ccw"
           class="w-full focus-visible:ring-0"
-          @click="onReset(closePopover)"
+          @click="onReset(togglePopover)"
         />
       </div>
     </template>
@@ -54,9 +55,7 @@
 </template>
 
 <script setup lang="ts">
-import { splitPlacement } from "@/utils";
-import LucideCheck from "~icons/lucide/check";
-import { Button, Popover } from "frappe-ui";
+import { Button, FeatherIcon, Popover } from "frappe-ui";
 
 const model = defineModel();
 
@@ -73,9 +72,9 @@ const props = withDefaults(defineProps<Props>(), {
   defaultValue: undefined,
 });
 
-const onReset = (closePopover: () => void) => {
+const onReset = (togglePopover: () => void) => {
   model.value = props.defaultValue !== undefined ? props.defaultValue : null;
-  closePopover();
+  togglePopover();
 };
 
 const onChange = (value: string) => {

desk/src/components/Settings/Agents.vue

@@ -38,12 +38,12 @@
             class="absolute end-1 top-1/2 -translate-y-1/2"
           />
         </div>
-        <Dropdown :options="dropdownOptions" align="end">
+        <Dropdown :options="dropdownOptions" placement="right">
           <template #default="{ open }">
             <Button :label="activeFilter">
               <template #suffix>
-                <component
-                  :is="open ? LucideChevronUp : LucideChevronDown"
+                <FeatherIcon
+                  :name="open ? 'chevron-up' : 'chevron-down'"
                   class="h-4"
                 />
               </template>
@@ -51,15 +51,16 @@
           </template>
           <template #item-label="{ item }">
             <button
-              class="group flex text-ink-gray-6 gap-4 w-full justify-between items-center rounded-4 text-base"
+              class="group flex text-ink-gray-6 gap-4 w-full justify-between items-center rounded text-base"
               @click="item.onClick"
             >
               <div class="flex items-center justify-between flex-1">
                 <span class="whitespace-nowrap">
                   {{ item.label }}
                 </span>
-                <LucideCheck
+                <FeatherIcon
                   v-if="activeFilter === item.label"
+                  name="check"
                   class="size-4 text-ink-gray-7"
                 />
               </div>
@@ -79,7 +80,7 @@
             :loading="agents.loading"
             variant="ghost"
             class="w-full"
-            size="lg"
+            size="2xl"
           />
         </div>
         <!-- Empty State -->
@@ -106,7 +107,7 @@
           </div>
           <hr class="mt-2" />
           <div v-for="(agent, index) in agents.data" :key="agent.agent_name">
-            <div class="flex items-center justify-between h-14 group rounded-4">
+            <div class="flex items-center justify-between h-14 group rounded">
               <div class="flex items-center gap-x-3 grow">
                 <Avatar
                   :image="agent.user_image"
@@ -138,17 +139,22 @@
                   :label="getUserRole(agent.name)"
                   :button="{
                     label: getUserRole(agent.name),
-                    iconRight: 'lucide-chevron-down',
+                    iconRight: 'chevron-down',
                     iconLeft:
                       getUserRole(agent.name) === 'Agent'
-                        ? 'lucide-user'
+                        ? 'user'
                         : getUserRole(agent.name) === 'Manager'
-                        ? 'lucide-briefcase'
+                        ? 'briefcase'
                         : null,
                   }"
-                  align="end"
+                  placement="right"
                 />
-                <Dropdown :options="getOptions(agent)" :key="agent" align="end">
+                <Dropdown
+                  :options="getOptions(agent)"
+                  :key="agent"
+                  class="ms-2"
+                  placement="right"
+                >
                   <Button icon="lucide-more-horizontal" variant="ghost" />
                 </Dropdown>
               </div>
@@ -173,16 +179,15 @@
 </template>
 
 <script setup lang="ts">
-import LucideChevronUp from "~icons/lucide/chevron-up";
-import LucideChevronDown from "~icons/lucide/chevron-down";
-import LucideCheck from "~icons/lucide/check";
 import EmptyState from "@/components/EmptyState.vue";
 import SettingsLayoutBase from "@/components/layouts/SettingsLayoutBase.vue";
 import { useAuthStore } from "@/stores/auth";
 import { useUserStore } from "@/stores/user";
 import { __ } from "@/translation";
-import { Avatar, Button, call, Dropdown, toast } from "frappe-ui";
+import { renderOptionIcon } from "@/utils";
+import { Avatar, Button, call, Dropdown, FeatherIcon, toast } from "frappe-ui";
 import { h, onUnmounted } from "vue";
+import LucideCheck from "~icons/lucide/check";
 import AgentIcon from "../icons/AgentIcon.vue";
 import { activeFilter, useAgents } from "./agents";
 import { setActiveSettingsTab } from "./settingsModal";
@@ -196,20 +201,65 @@ const agents = agentStore.agents;
 
 function getRoles(agent: string) {
   const agentRole = getUserRole(agent);
-  const role = (label: string, icon: string) => ({
-    label,
-    icon,
-    selected: agentRole === label,
-    onClick: () => updateRole(agent, label),
-  });
-  const roles = [role("Agent", "lucide-user")];
+  const roles = [
+    {
+      label: "Agent",
+      component: (props) =>
+        RoleOption({
+          role: "Agent",
+          active: props.active,
+          selected: agentRole === "Agent",
+          icon: "lucide-user",
+          onClick: () => {
+            updateRole(agent, "Agent");
+          },
+        }),
+    },
+  ];
   if (isManager) {
-    roles.unshift(role("Manager", "lucide-briefcase"));
+    roles.unshift({
+      label: "Manager",
+      component: (props) =>
+        RoleOption({
+          role: "Manager",
+          active: props.active,
+          selected: agentRole === "Manager",
+          icon: "lucide-briefcase",
+          onClick: () => {
+            updateRole(agent, "Manager");
+          },
+        }),
+    });
   }
 
   return roles;
 }
 
+function RoleOption({ active, role, onClick, selected, icon = null }) {
+  return h(
+    "button",
+    {
+      class: [
+        active ? "bg-surface-gray-2" : "text-ink-gray-7",
+
+        "group flex w-full text-ink-gray-8 justify-between items-center rounded-md px-2 py-2 text-sm hover:bg-surface-gray-3",
+      ],
+      onClick: !selected ? onClick : null,
+    },
+    [
+      h("div", { class: "flex gap-2" }, [
+        renderOptionIcon(icon),
+        h("span", { class: "whitespace-nowrap" }, role),
+      ]),
+      selected
+        ? h(LucideCheck, {
+            class: ["h-4 w-4 shrink-0 text-ink-gray-7"],
+            "aria-hidden": true,
+          })
+        : null,
+    ]
+  );
+}
 function updateRole(agent: string, newRole: string) {
   const currentRole = getUserRole(agent);
   if (currentRole === newRole) {

desk/src/components/Settings/Assignment Rules/AssigneeRules.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="flex flex-col gap-1">
-      <span class="text-md-semibold text-ink-gray-8">{{
+      <span class="text-lg-semibold text-ink-gray-8">{{
         __("Assignee Rules")
       }}</span>
       <span class="text-p-sm text-ink-gray-6">
@@ -24,10 +24,11 @@
         </div>
       </div>
       <div>
-        <Popover bare side="bottom" align="end">
-          <template #trigger>
+        <Popover placement="bottom-end">
+          <template #target="{ togglePopover }">
             <div
-              class="flex items-center justify-between text-base rounded-4 h-7 py-1.5 ps-2 pe-2 border border-[--surface-gray-2] bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-elevation-2 hover:bg-surface-gray-3 focus:bg-surface-base focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-8 transition-colors w-full dark:[color-scheme:dark] select-none min-w-44"
+              class="flex items-center justify-between text-base rounded h-7 py-1.5 ps-2 pe-2 border border-[--surface-gray-2] bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-elevation-2 hover:bg-surface-gray-3 focus:bg-surface-base focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-8 transition-colors w-full dark:[color-scheme:dark] select-none min-w-44"
+              @click="togglePopover()"
             >
               <div>
                 {{
@@ -36,29 +37,30 @@
                   )?.label
                 }}
               </div>
-              <LucideChevronDown class="size-4" />
+              <FeatherIcon name="chevron-down" class="size-4" />
             </div>
           </template>
-          <template #default="{ close: closePopover }">
+          <template #body="{ togglePopover }">
             <div
-              class="p-1 text-ink-gray-7 mt-1 bg-surface-base shadow-xl rounded-4 w-[--reka-popper-anchor-width]"
+              class="p-1 text-ink-gray-7 mt-1 bg-surface-base shadow-xl rounded w-[--reka-popper-anchor-width]"
             >
               <div
                 v-for="option in ticketRoutingOptions"
                 :key="option.value"
-                class="p-2 cursor-pointer hover:bg-surface-gray-3 text-sm flex items-center justify-between rounded-4"
+                class="p-2 cursor-pointer hover:bg-surface-gray-3 text-sm flex items-center justify-between rounded"
                 @click="
                   () => {
                     assignmentRuleData.rule = option.value;
-                    closePopover();
+                    togglePopover();
                   }
                 "
               >
                 <span>
                   {{ option.label }}
                 </span>
-                <LucideCheck
+                <FeatherIcon
                   v-if="assignmentRuleData.rule == option.value"
+                  name="check"
                   class="size-4"
                 />
               </div>
@@ -79,56 +81,48 @@
       <AssigneeSearch @addAssignee="validateAssignmentRule('users')" />
     </div>
     <div class="mt-4 flex flex-wrap gap-2">
-      <Button
+      <div
         v-for="user in users"
         :key="user.name"
-        variant="outline"
-        size="sm"
-        :label="user.full_name"
+        class="flex items-center gap-2 text-sm bg-surface-gray-2 rounded-md p-1 w-max px-2 select-none"
       >
-        <template #prefix>
-          <Avatar :image="user.user_image" :label="user.full_name" size="sm" />
-        </template>
-        <template #suffix>
-          <Tooltip
-            v-if="user.email == assignmentRuleData.lastUser"
-            :text="__('Last user assigned by this rule')"
-            :hover-delay="350"
-            side="top"
+        <Avatar :image="user.user_image" :label="user.full_name" size="sm" />
+        <div class="text-ink-gray-7">
+          {{ user.full_name }}
+        </div>
+        <Tooltip
+          v-if="user.email == assignmentRuleData.lastUser"
+          :text="__('Last user assigned by this rule')"
+          :hover-delay="0.35"
+          :placement="'top'"
+        >
+          <div
+            class="text-xs rounded-full select-none bg-surface-blue-3 text-ink-base p-0.5 px-2"
           >
-            <Badge theme="blue" variant="solid" :label="__('Last')" />
-          </Tooltip>
-          <LucideX
-            class="size-4 text-ink-gray-4 transition-colors hover:text-ink-gray-7"
-            @click.stop="removeAssignedUser(user)"
-          />
-        </template>
-      </Button>
+            {{ __("Last") }}
+          </div>
+        </Tooltip>
+        <Button
+          variant="ghost"
+          icon="lucide-x"
+          @click="removeAssignedUser(user)"
+        />
+      </div>
     </div>
     <ErrorMessage :message="assignmentRulesErrors.users" />
   </div>
 </template>
 
 <script setup lang="ts">
-import LucideCheck from "~icons/lucide/check";
-import LucideChevronDown from "~icons/lucide/chevron-down";
+import { Avatar, Button, ErrorMessage, Popover, Tooltip } from "frappe-ui";
 import {
   assignmentRuleData,
   assignmentRulesErrors,
   validateAssignmentRule,
 } from "@/stores/assignmentRules";
-import { useUserStore } from "@/stores/user";
-import {
-  Avatar,
-  Badge,
-  Button,
-  ErrorMessage,
-  Popover,
-  Tooltip,
-} from "frappe-ui";
-import LucideX from "~icons/lucide/x";
-import { computed } from "vue";
 import AssigneeSearch from "./AssigneeSearch.vue";
+import { computed } from "vue";
+import { useUserStore } from "@/stores/user";
 
 const { getUser } = useUserStore();
 

desk/src/components/Settings/Assignment Rules/AssigneeSearch.vue

@@ -1,17 +1,18 @@
 <template>
   <Combobox :multiple="true">
-    <Popover bare side="bottom" align="end">
-      <template #trigger>
+    <Popover placement="bottom-end">
+      <template #target="{ togglePopover }">
         <Button
           variant="subtle"
           icon-left="lucide-plus"
+          @click="togglePopover()"
           :label="__('Add Assignee')"
           class="rtl:flex-row-reverse"
         />
       </template>
-      <template #default>
+      <template #body="{ togglePopover }">
         <div
-          class="mt-1 rounded-6 bg-surface-base py-1 text-base shadow-2xl w-60"
+          class="mt-1 rounded-lg bg-surface-base py-1 text-base shadow-2xl w-60"
         >
           <div class="relative px-1.5 pt-0.5">
             <ComboboxInput
@@ -31,7 +32,7 @@
               class="absolute end-1.5 inline-flex h-7 w-7 items-center justify-center"
               @click="query = ''"
             >
-              <LucideX class="w-4" />
+              <FeatherIcon name="x" class="w-4" />
             </button>
           </div>
           <ComboboxOptions class="my-2 max-h-64 overflow-y-auto px-1.5" static>
@@ -50,7 +51,7 @@
               "
             >
               <li
-                class="flex items-center rounded-4 p-1.5 w-full text-base"
+                class="flex items-center rounded p-1.5 w-full text-base"
                 :class="{ 'bg-surface-gray-2': active }"
               >
                 <div class="flex gap-2 items-center w-full select-none">
@@ -73,7 +74,7 @@
             </ComboboxOption>
             <li
               v-if="users.length == 0"
-              class="mt-1.5 rounded-5 p-1.5 text-base text-ink-gray-5"
+              class="mt-1.5 rounded-md p-1.5 text-base text-ink-gray-5"
             >
               {{ __("No results found") }}
             </li>
@@ -100,7 +101,6 @@
 </template>
 
 <script setup lang="ts">
-import LucideX from "~icons/lucide/x";
 import { assignmentRuleData } from "@/stores/assignmentRules";
 import {
   Combobox,

desk/src/components/Settings/Assignment Rules/AssignmentRuleListItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="grid grid-cols-12 items-center gap-4 cursor-pointer hover:bg-surface-sidebar rounded-4"
+    class="grid grid-cols-12 items-center gap-4 cursor-pointer hover:bg-surface-sidebar rounded"
   >
     <div
       @click="assignmentRulesActiveScreen = { screen: 'view', data: data }"
@@ -16,7 +16,7 @@
     </div>
     <div class="col-span-3">
       <select
-        class="w-full h-7 text-base hover:bg-surface-gray-3 rounded-5 p-0 ps-2 pe-5 bg-transparent -ms-2 border-0 text-ink-gray-8 focus-visible:!ring-0 bg-none truncate"
+        class="w-full h-7 text-base hover:bg-surface-gray-3 rounded-md p-0 ps-2 pe-5 bg-transparent -ms-2 border-0 text-ink-gray-8 focus-visible:!ring-0 bg-none truncate"
         v-model="data.priority"
         @update:modelValue="onPriorityChange"
         @change="onPriorityChange"
@@ -39,12 +39,12 @@
         />
       </div>
       <div>
-        <Dropdown
-          align="end"
-          :options="dropdownOptions"
-          @update:open="(open) => open && (isConfirmingDelete = false)"
-        >
-          <Button icon="lucide-more-horizontal" variant="ghost" />
+        <Dropdown placement="right" :options="dropdownOptions">
+          <Button
+            icon="lucide-more-horizontal"
+            variant="ghost"
+            @click="isConfirmingDelete = false"
+          />
         </Dropdown>
       </div>
     </div>

desk/src/components/Settings/Assignment Rules/AssignmentRuleView.vue

@@ -56,11 +56,12 @@
             />
           </div>
           <div class="flex flex-col gap-1.5">
-            <FormLabel :label="__('Priority')" />
-            <Popover bare>
-              <template #trigger>
+            <FormLabel :label="__('Priority')" size="md" />
+            <Popover>
+              <template #target="{ togglePopover }">
                 <div
-                  class="flex items-center justify-between text-base rounded-4 h-7 py-1.5 ps-2 pe-2 border border-[--surface-gray-2] bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-elevation-2 hover:bg-surface-gray-3 focus:bg-surface-base focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-8 transition-colors w-full dark:[color-scheme:dark] cursor-default"
+                  class="flex items-center justify-between text-base rounded h-7 py-1.5 ps-2 pe-2 border border-[--surface-gray-2] bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-elevation-2 hover:bg-surface-gray-3 focus:bg-surface-base focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-8 transition-colors w-full dark:[color-scheme:dark] cursor-default"
+                  @click="togglePopover()"
                 >
                   <div>
                     {{
@@ -69,25 +70,26 @@
                       )?.label
                     }}
                   </div>
-                  <LucideChevronDown class="size-4" />
+                  <FeatherIcon name="chevron-down" class="size-4" />
                 </div>
               </template>
-              <template #default="{ close: closePopover }">
+              <template #body="{ togglePopover }">
                 <div
-                  class="p-1 text-ink-gray-6 top-1 absolute bg-surface-base shadow-2xl rounded-4 w-[--reka-popper-anchor-width]"
+                  class="p-1 text-ink-gray-6 top-1 absolute bg-surface-base shadow-2xl rounded w-[--reka-popper-anchor-width]"
                 >
                   <div
                     v-for="option in priorityOptions"
                     :key="option.value"
-                    class="p-2 cursor-pointer hover:bg-surface-sidebar text-base flex items-center justify-between rounded-4"
+                    class="p-2 cursor-pointer hover:bg-surface-sidebar text-base flex items-center justify-between rounded"
                     @click="
                       assignmentRuleData.priority = option.value;
-                      closePopover();
+                      togglePopover();
                     "
                   >
                     {{ option.label }}
-                    <LucideCheck
+                    <FeatherIcon
                       v-if="assignmentRuleData.priority == option.value"
+                      name="check"
                       class="size-4"
                     />
                   </div>
@@ -116,7 +118,7 @@
         <hr class="my-8" />
         <div>
           <div class="flex flex-col gap-1">
-            <span class="text-md-semibold text-ink-gray-8">{{
+            <span class="text-lg-semibold text-ink-gray-8">{{
               __("Assignment Condition")
             }}</span>
             <div class="flex items-center justify-between gap-6">
@@ -136,29 +138,29 @@
               <div
                 v-if="isAssignConditionOld && assignmentRulesActiveScreen.data"
               >
-                <HoverCard :hoverDelay="250" side="top" align="end">
-                  <template #trigger>
+                <Popover trigger="hover" :hoverDelay="0.25" placement="top-end">
+                  <template #target>
                     <div
                       class="text-sm text-ink-gray-6 flex gap-1 cursor-default text-nowrap flex items-center"
                     >
                       <span>{{ __("Old Condition") }}</span>
-                      <LucideInfo class="size-4" />
+                      <FeatherIcon name="info" class="size-4" />
                     </div>
                   </template>
-                  <template #default>
+                  <template #body-main>
                     <div
-                      class="text-sm text-ink-gray-6 p-2 bg-surface-base rounded-5 max-w-96 text-wrap whitespace-pre-wrap leading-5"
+                      class="text-sm text-ink-gray-6 p-2 bg-surface-base rounded-md max-w-96 text-wrap whitespace-pre-wrap leading-5"
                     >
                       <code>{{ assignmentRuleData.assignCondition }}</code>
                     </div>
                   </template>
-                </HoverCard>
+                </Popover>
               </div>
             </div>
           </div>
           <div class="mt-5">
             <div
-              class="flex flex-col gap-3 items-center text-center text-ink-gray-7 text-sm mb-2 border border-outline-gray-2 rounded-5 p-3 py-4"
+              class="flex flex-col gap-3 items-center text-center text-ink-gray-7 text-sm mb-2 border border-outline-gray-2 rounded-md p-3 py-4"
               v-if="
                 !useNewUIForAssignCondition &&
                 assignmentRuleData.assignCondition
@@ -193,7 +195,7 @@
         <hr class="my-8" />
         <div>
           <div class="flex flex-col gap-1">
-            <span class="text-md-semibold text-ink-gray-8">{{
+            <span class="text-lg-semibold text-ink-gray-8">{{
               __("Unassignment Condition")
             }}</span>
             <div class="flex items-center justify-between gap-6">
@@ -217,29 +219,29 @@
                   assignmentRuleData.unassignCondition
                 "
               >
-                <HoverCard :hoverDelay="250" side="top" align="end">
-                  <template #trigger>
+                <Popover trigger="hover" :hoverDelay="0.25" placement="top-end">
+                  <template #target>
                     <div
                       class="text-sm text-ink-gray-6 flex gap-1 cursor-default text-nowrap flex items-center"
                     >
                       <span> {{ __("Old Condition") }} </span>
-                      <LucideInfo class="size-4" />
+                      <FeatherIcon name="info" class="size-4" />
                     </div>
                   </template>
-                  <template #default>
+                  <template #body-main>
                     <div
-                      class="text-sm text-ink-gray-6 p-2 bg-surface-base rounded-5 max-w-96 text-wrap whitespace-pre-wrap leading-5"
+                      class="text-sm text-ink-gray-6 p-2 bg-surface-base rounded-md max-w-96 text-wrap whitespace-pre-wrap leading-5"
                     >
                       <code>{{ assignmentRuleData.unassignCondition }}</code>
                     </div>
                   </template>
-                </HoverCard>
+                </Popover>
               </div>
             </div>
           </div>
           <div class="mt-5">
             <div
-              class="flex flex-col gap-3 items-center text-center text-ink-gray-7 text-sm mb-2 border border-outline-gray-2 rounded-5 p-3 py-4"
+              class="flex flex-col gap-3 items-center text-center text-ink-gray-7 text-sm mb-2 border border-outline-gray-2 rounded-md p-3 py-4"
               v-if="
                 !useNewUIForUnassignCondition &&
                 assignmentRuleData.unassignCondition
@@ -270,7 +272,7 @@
         <hr class="my-8" />
         <div>
           <div class="flex flex-col gap-1">
-            <span class="text-md-semibold text-ink-gray-8">{{
+            <span class="text-lg-semibold text-ink-gray-8">{{
               __("Assignment Schedule")
             }}</span>
             <span class="text-p-sm text-ink-gray-6">
@@ -309,9 +311,6 @@
 </template>
 
 <script setup lang="ts">
-import LucideCheck from "~icons/lucide/check";
-import LucideChevronDown from "~icons/lucide/chevron-down";
-import LucideInfo from "~icons/lucide/info";
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
 import {
   Badge,
@@ -321,7 +320,6 @@ import {
   ErrorMessage,
   FormControl,
   FormLabel,
-  HoverCard,
   LoadingIndicator,
   Popover,
   Switch,

desk/src/components/Settings/Assignment Rules/AssignmentRulesList.vue

@@ -1,7 +1,7 @@
 <template>
   <SettingsLayoutBase>
     <template #title>
-      <h1 class="text-md-semibold text-ink-gray-8">
+      <h1 class="text-lg-semibold text-ink-gray-8">
         {{ __("Assignment Rules") }}
       </h1>
     </template>

desk/src/components/Settings/Assignment Rules/AssignmentRulesSection.vue

@@ -7,13 +7,13 @@
   />
   <div
     v-if="props.conditions.length == 0"
-    class="flex p-4 items-center cursor-pointer justify-center gap-2 text-sm border border-outline-gray-2 text-ink-gray-5 rounded-5"
+    class="flex p-4 items-center cursor-pointer justify-center gap-2 text-sm border border-outline-gray-2 text-ink-gray-5 rounded-md"
     @click="
       props.conditions.push(['', '', '']);
       validateAssignmentRule(props.name);
     "
   >
-    <LucidePlus class="size-4" />
+    <FeatherIcon name="plus" class="h-4" />
     {{ __("Add a condition") }}
   </div>
   <div class="flex items-center justify-between mt-2">
@@ -38,11 +38,10 @@
 </template>
 
 <script setup lang="ts">
-import LucidePlus from "~icons/lucide/plus";
 import CFConditions from "@/components/conditions-filter/CFConditions.vue";
 import { validateConditions } from "@/utils";
 import { watchDebounced } from "@vueuse/core";
-import { Button, Dropdown, ErrorMessage } from "frappe-ui";
+import { Button, Dropdown, ErrorMessage, FeatherIcon } from "frappe-ui";
 import { validateAssignmentRule } from "@/stores/assignmentRules";
 import { __ } from "@/translation";
 

desk/src/components/Settings/Assignment Rules/AssignmentSchedule.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-5 border px-2 border-outline-gray-2 text-sm">
+  <div class="rounded-md border px-2 border-outline-gray-2 text-sm">
     <div
       class="grid p-2 px-4 items-center"
       style="grid-template-columns: 3fr 1fr"

desk/src/components/Settings/Assignment Rules/AssignmentScheduleItem.vue

@@ -5,15 +5,7 @@
   >
     <div class="text-ink-gray-7 font-medium">{{ data.day }}</div>
     <div class="flex justify-start">
-      <Switch
-        :model-value="Boolean(data.active)"
-        @update:model-value="
-          (value) => {
-            data.active = value;
-            toggleDay(value);
-          }
-        "
-      />
+      <Switch v-model="data.active" @update:model-value="toggleDay" />
     </div>
   </div>
   <hr v-if="!isLast" />

desk/src/components/Settings/EmailAccountCard.vue

@@ -1,13 +1,13 @@
 <template>
   <div
-    class="flex justify-between items-center border-outline-elevation-2 p-2 cursor-pointer hover:bg-surface-sidebar rounded-4 h-14"
+    class="flex justify-between items-center border-outline-elevation-2 p-2 cursor-pointer hover:bg-surface-sidebar rounded h-14"
   >
     <!-- avatar and name -->
     <div class="flex justify-between items-center gap-2">
       <EmailProviderIcon :logo="emailIcon[emailAccount.service]" />
       <div class="rtl:text-right">
-        <p class="text-p-base-medium text-ink-gray-7">
-          {{ __(emailAccount.email_account_name) }}
+        <p class="text-base-medium text-ink-gray-7">
+          {{ emailAccount.email_account_name }}
         </p>
         <div class="text-p-sm w-full text-ink-gray-5 mt-1">
           {{ __(emailAccount.email_id) }}

desk/src/components/Settings/EmailAdd.vue

@@ -27,7 +27,7 @@
             <!-- email service provider info -->
             <div>
               <div
-                class="flex items-center gap-2 rounded-5 p-2 ring-1 ring-outline-elevation-2"
+                class="flex items-center gap-2 rounded-md p-2 ring-1 ring-outline-elevation-2"
               >
                 <CircleAlert
                   class="h-6 w-5 w-min-5 w-max-5 min-h-5 max-w-5 text-ink-blue-5"
@@ -39,7 +39,8 @@
                     target="_blank"
                     class="text-ink-blue-5 underline"
                     >here</a
-                  >.
+                  >
+                  .
                 </div>
               </div>
             </div>
@@ -164,10 +165,9 @@
 import { Link } from "@/components";
 import SettingsLayoutBase from "@/components/layouts/SettingsLayoutBase.vue";
 import { capture } from "@/telemetry";
-import { __ } from "@/translation";
 import { EmailAccount, EmailService, EmailStep } from "@/types";
 import { call, createResource, toast } from "frappe-ui";
-import { useOnboarding } from "@framework/ui";
+import { useOnboarding } from "frappe-ui/frappe";
 import { computed, reactive, Ref, ref, watch } from "vue";
 import CircleAlert from "~icons/lucide/circle-alert";
 import {
@@ -181,6 +181,11 @@ import {
   validateInputs,
 } from "./emailConfig";
 import EmailProviderIcon from "./EmailProviderIcon.vue";
+import { __ } from "@/translation";
+
+interface E {
+  (event: "update:step", value: EmailStep): void;
+}
 
 interface EmailAccountBaseState {
   email_account_name: string;
@@ -216,13 +221,9 @@ type CustomEmailAccountState = {
   sent_folder_name?: string;
 };
 
-interface E {
-  (event: "update:step", value: EmailStep): void;
-}
-
 const emit = defineEmits<E>();
 
-const { updateOnboardingStep } = useOnboarding("helpdesk") ?? {};
+const { updateOnboardingStep } = useOnboarding("helpdesk");
 
 const state = reactive<EmailAccountProviderAuthState>({
   service: "",
@@ -261,7 +262,7 @@ function resetCustomState() {
   Object.assign(customState, getDefaultCustomState());
 }
 
-const selectedService: Ref<EmailService> = ref(null);
+const selectedService: Ref<EmailService | null> = ref(null);
 const fields = computed(() => {
   if (!selectedService.value) return [];
   if (selectedService.value.name === "Frappe Mail") {
@@ -305,10 +306,11 @@ function handleSelect(service: EmailService) {
 const addEmailRes = createResource({
   url: "helpdesk.api.settings.email.create_email_account",
   makeParams: (val: EmailAccount) => ({ ...val }),
+
   onSuccess: () => {
     toast.success(__("Email account created"));
     emit("update:step", "email-list");
-    updateOnboardingStep?.("setup_email_account");
+    updateOnboardingStep("setup_email_account");
     capture("email_account_created", { data: { service: state.service } });
   },
   onError: () => {

desk/src/components/Settings/EmailEdit.vue

@@ -12,8 +12,9 @@
               :service-name="state.service || accountData.service"
             />
           </div>
+          <!-- banner for setting up email account -->
           <div
-            class="flex items-center gap-2 rounded-5 p-2 ring-1 ring-outline-elevation-2"
+            class="flex items-center gap-2 rounded-md p-2 ring-1 ring-outline-elevation-2"
           >
             <CircleAlert
               class="h-6 w-5 w-min-5 w-max-5 min-h-5 max-w-5 text-ink-blue-5"
@@ -39,7 +40,7 @@
               </span>
             </div>
           </div>
-
+          <!-- fields -->
           <div class="flex flex-col gap-4">
             <div class="grid grid-cols-1 gap-4">
               <div
@@ -129,6 +130,7 @@
           </div>
         </div>
 
+        <!-- action buttons -->
         <div class="mt-auto flex justify-between -mb-8">
           <Button
             :label="__('Back')"
@@ -161,15 +163,13 @@
 </template>
 
 <script setup lang="ts">
-import { Link } from "@/components";
-import SettingsLayoutBase from "@/components/layouts/SettingsLayoutBase.vue";
-import { __ } from "@/translation";
 import { EmailAccount, EmailStep } from "@/types";
 import { useStorage } from "@vueuse/core";
 import { call, toast } from "frappe-ui";
 import { computed, h, reactive, ref, watch } from "vue";
 import CircleAlert from "~icons/lucide/circle-alert";
 import EmailProviderIcon from "./EmailProviderIcon.vue";
+import { Link } from "@/components";
 import {
   customIncomingFields,
   customOutgoingFields,
@@ -181,6 +181,8 @@ import {
   services,
   validateInputs,
 } from "./emailConfig";
+import { __ } from "@/translation";
+import SettingsLayoutBase from "@/components/layouts/SettingsLayoutBase.vue";
 
 interface EmailAccountBaseState {
   email_account_name: string;
@@ -200,6 +202,7 @@ interface EmailAccountProviderAuthState extends EmailAccountBaseState {
 }
 
 type CustomEmailAccountState = {
+  [key: string]: string | number | boolean | undefined;
   domain?: string;
   email_server?: string;
   smtp_server?: string;
@@ -323,7 +326,6 @@ const loadingPull = useStorage(
   `loading-emails-${state.email_account_name}`,
   false
 );
-
 async function updateAccount() {
   const validationState = { ...state, ...customState };
   const validationService = isCustomProvider.value
@@ -388,8 +390,9 @@ function buildUpdatePayload() {
 function pullEmails() {
   loadingPull.value = true;
 
-  toast(__("Pulling emails, this may take a few minutes."), {
-    icon: () => h(CircleAlert, { class: "text-ink-blue-5" }),
+  toast.create({
+    message: __("Pulling emails, this may take a few minutes."),
+    icon: h(CircleAlert, { class: "text-ink-blue-5" }),
   });
 
   call("frappe.email.doctype.email_account.email_account.pull_emails", {
@@ -540,5 +543,3 @@ function handleEditDomainClick() {
   );
 }
 </script>
-
-<style scoped></style>

desk/src/components/Settings/EmailNotifications/Notification.vue

@@ -13,7 +13,7 @@
             <span class="sr-only">{{ __("back to email event list") }}</span>
             <LucideChevronLeft class="w-4.5 h-4.5 rtl:rotate-180" />
           </button>
-          <h1 class="text-xl-semibold">
+          <h1 class="text-2xl-semibold">
             {{ props.title }}
           </h1>
         </div>
@@ -62,9 +62,7 @@
               :required="true"
               :rows="10"
               v-model="content"
-              @update:model-value="
-                (value) => setUnsavedChanges(undefined, value)
-              "
+              :oninput="() => setUnsavedChanges()"
             />
             <div class="flex gap-x-1 items-start justify-between">
               <p class="text-sm text-ink-gray-7 leading-5">
@@ -153,7 +151,6 @@ const content = defineModel<string>("content", { required: true });
 const enabled = defineModel<boolean>("enabled", { required: true });
 
 const unsavedChanges = ref(false);
-const slotFieldChanged = ref(false);
 const showUnsavedConfirm = ref(false);
 const showContentChangeConfirm = ref(false);
 
@@ -172,25 +169,15 @@ function setUnsavedChanges(
   newContent = content.value
 ) {
   unsavedChanges.value =
-    slotFieldChanged.value ||
     newEnabled !== notificationDataResource.data.enabled ||
     newContent !== notificationDataResource.data.content;
 }
-
-/** For fields a notification adds through `#formFields`, which this component
- *  cannot diff itself. */
-function markUnsavedChanges() {
-  slotFieldChanged.value = true;
-  unsavedChanges.value = true;
-}
-
 function resetUnsavedChanges() {
   notificationDataResource.data = {
     ...notificationDataResource.data,
     enabled: enabled.value,
     content: content.value,
   };
-  slotFieldChanged.value = false;
   unsavedChanges.value = false;
 }
 function resetContent() {
@@ -222,7 +209,6 @@ watch(
 
 defineExpose({
   setUnsavedChanges,
-  markUnsavedChanges,
   resetUnsavedChanges,
 });
 </script>

desk/src/components/Settings/EmailNotifications/NotificationList.vue

@@ -13,7 +13,7 @@
           v-for="(notification, index) in notifications"
           :key="notification.name"
         >
-          <li class="flex items-center justify-between p-3 rounded-4 relative">
+          <li class="flex items-center justify-between p-3 rounded relative">
             <div class="flex flex-col gap-1">
               <h2
                 class="text-base-medium text-ink-gray-7 relative z-10 pointer-events-none"
@@ -26,7 +26,8 @@
                 {{ __(notification.description) }}
               </p>
             </div>
-            <LucideChevronRight
+            <FeatherIcon
+              name="chevron-right"
               class="text-ink-gray-7 size-4 relative z-10 pointer-events-none rtl:rotate-180"
             />
             <div
@@ -50,7 +51,6 @@
 </template>
 
 <script setup lang="ts">
-import LucideChevronRight from "~icons/lucide/chevron-right";
 import { __ } from "@/translation";
 import type { AtLeastOneNotifcation, Notification } from "./types";
 import SettingsLayoutBase from "@/components/layouts/SettingsLayoutBase.vue";

desk/src/components/Settings/EmailNotifications/ShareFeedback.vue

@@ -15,17 +15,16 @@
   >
     <template #formFields>
       <FormControl
-        type="combobox"
+        type="autocomplete"
         size="sm"
         :label="__('On ticket status')"
         :options="statusOptions"
         :required="true"
-        :model-value="ticketStatus?.value ?? null"
+        :model-value="ticketStatus"
         @update:model-value="
-          (value) => {
-            ticketStatus =
-              statusOptions.find((option) => option.value === value) ?? null;
-            compRef.markUnsavedChanges();
+          (val) => {
+            ticketStatus = val;
+            compRef.setUnsavedChanges();
           }
         "
       />

desk/src/components/Settings/EmailProviderIcon.vue

@@ -14,7 +14,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import LucideMail from "~icons/lucide/mail";
-
 interface P {
   serviceName?: string;
   logo?: string;

desk/src/components/Settings/FieldDependency/FieldDependency.vue

@@ -8,11 +8,7 @@
       <div class="flex gap-4">
         <!-- Switch -->
         <div class="flex gap-2 items-center">
-          <Switch
-            class="!w-fit"
-            :model-value="Boolean(state.enabled)"
-            @update:model-value="(value) => (state.enabled = value)"
-          />
+          <Switch v-model="state.enabled" class="!w-fit" />
           <span class="text-p-base text-ink-gray-6">
             {{ __("Enabled") }}
           </span>

desk/src/components/Settings/FieldDependency/FieldDependencyCriteria.vue

@@ -20,14 +20,15 @@
             />
           </div>
         </div>
-        <MultiSelect
-          class="min-w-[120px] max-w-[120px]"
-          side="top"
+        <MultiSelectCombobox
           :disabled="!fieldCriteriaState.display.enabled"
+          class="min-w-[120px] max-w-[120px]"
           :options="fieldCriteriaOptions"
-          :model-value="selectedValues('display')"
-          :placeholder="__('Select Child Field values')"
+          :model-value="fieldCriteriaState.display.value"
           @update:model-value="handleCriteriaSelection($event, 'display')"
+          :multiple="true"
+          placeholder="Select Child Field values"
+          placement="top"
         />
       </div>
       <!-- Mandatory Criteria -->
@@ -45,14 +46,15 @@
             />
           </div>
         </div>
-        <MultiSelect
-          class="min-w-[120px] max-w-[120px]"
-          side="top"
+        <MultiSelectCombobox
           :disabled="!fieldCriteriaState.mandatory.enabled"
+          class="min-w-[120px] max-w-[120px]"
           :options="fieldCriteriaOptions"
-          :model-value="selectedValues('mandatory')"
-          :placeholder="__('Select Child Field values')"
+          :model-value="fieldCriteriaState.mandatory.value"
           @update:model-value="handleCriteriaSelection($event, 'mandatory')"
+          :multiple="true"
+          placeholder="Select Child Field values"
+          placement="top"
         />
       </div>
     </div>
@@ -61,9 +63,9 @@
 
 <script setup lang="ts">
 import DocumentationButton from "@/components/DocumentationButton.vue";
+import MultiSelectCombobox from "@/components/frappe-ui/MultiSelectCombobox.vue";
 import { getMeta } from "@/stores/meta";
-import { __ } from "@/translation";
-import { MultiSelect, Switch } from "frappe-ui";
+import { Switch } from "frappe-ui";
 import { computed } from "vue";
 
 const props = defineProps<{
@@ -96,25 +98,21 @@ const fieldCriteriaOptions = computed(() => {
   return _options;
 });
 
-function selectedValues(stateKey: "display" | "mandatory") {
-  return fieldCriteriaState.value[stateKey].value.map((v) => v.value);
-}
-
 function handleCriteriaSelection(
-  values: string[],
+  values: { label: string; value: string }[],
   stateKey: "display" | "mandatory"
 ) {
-  // "Any" is exclusive: picking it drops the rest, picking anything else drops it
-  const wasAnySelected = selectedValues(stateKey).includes("Any");
-  let selected =
-    values.includes("Any") && !wasAnySelected
-      ? ["Any"]
-      : values.filter((value) => value !== "Any");
-  if (!selected.length) selected = ["Any"];
-  fieldCriteriaState.value[stateKey].value = selected.map((value) => ({
-    label: value,
-    value,
-  }));
+  const _values = values.map((v) => v.value);
+  fieldCriteriaState.value[stateKey].value = values;
+  if (_values.length === 0) {
+    fieldCriteriaState.value[stateKey].value = [{ label: "Any", value: "Any" }];
+  } else if (_values[0] === "Any" && _values.length > 1) {
+    fieldCriteriaState.value[stateKey].value = _values
+      .filter((value) => value !== "Any")
+      .map((value) => ({ label: value, value }));
+  } else if (_values.at(-1) === "Any" && _values.length > 1) {
+    fieldCriteriaState.value[stateKey].value = [{ label: "Any", value: "Any" }];
+  }
 }
 </script>
 

desk/src/components/Settings/FieldDependency/FieldDependencyList.vue

@@ -2,7 +2,7 @@
   <SettingsLayoutBase>
     <template #title>
       <div class="flex items-center gap-2">
-        <h1 class="text-md-semibold text-ink-gray-8">
+        <h1 class="text-lg-semibold text-ink-gray-8">
           {{ __("Field Dependencies") }}
         </h1>
       </div>
@@ -39,7 +39,7 @@
           v-if="fieldDependenciesList.loading"
           class="flex items-center justify-center py-4"
         >
-          <LoadingIndicator class="size-5" />
+          <LoadingIndicator :scale="5" />
         </div>
 
         <!-- Empty State -->
@@ -75,7 +75,7 @@
               :key="row.name"
             >
               <div
-                class="grid grid-cols-11 items-center gap-4 cursor-pointer hover:bg-surface-sidebar rounded-4 h-12.5"
+                class="grid grid-cols-11 items-center gap-4 cursor-pointer hover:bg-surface-sidebar rounded h-12.5"
               >
                 <div
                   @click.stop="$emit('update:step', 'fd', row.name)"
@@ -100,13 +100,7 @@
                     />
                   </div>
                   <div>
-                    <Dropdown
-                      align="end"
-                      :options="getOptions(row.name)"
-                      @update:open="
-                        (open) => open && (isConfirmingDelete = false)
-                      "
-                    >
+                    <Dropdown placement="right" :options="getOptions(row.name)">
                       <Button
                         variant="ghost"
                         @click.stop="

desk/src/components/Settings/FieldDependency/FieldDependencyValueSelection.vue

@@ -7,9 +7,7 @@
       <span class="block text-xs text-ink-gray-5">
         Select parent field value
       </span>
-      <div
-        class="border border-outline-elevation-2 flex-1 border-e-0 rounded-s-4 p-2 flex flex-col gap-2"
-      >
+      <div class="border flex-1 border-e-0 rounded-s p-2 flex flex-col gap-2">
         <template v-if="state.selectedParentField">
           <FormControl
             v-model="state.parentSearch"
@@ -26,7 +24,7 @@
               <li
                 v-for="value in filteredParentFieldValues"
                 :key="value"
-                class="py-2 mb-1 px-2.5 cursor-pointer rounded-4 flex justify-between items-center hover:bg-surface-gray-1 overflow-hidden max-w-full"
+                class="py-2 mb-1 px-2.5 cursor-pointer rounded flex justify-between items-center hover:bg-surface-gray-1 overflow-hidden max-w-full"
                 :class="{
                   'bg-surface-gray-2 hover:bg-surface-gray-3':
                     state.currentParentSelection === value,
@@ -68,9 +66,7 @@
       <span class="block text-xs text-ink-gray-5 ps-1.5">
         Select child field value
       </span>
-      <div
-        class="border border-outline-elevation-2 flex-1 rounded-e-4 p-2 flex flex-col gap-2"
-      >
+      <div class="border flex-1 rounded-e p-2 flex flex-col gap-2">
         <template
           v-if="state.selectedChildField && state.currentParentSelection"
         >
@@ -87,13 +83,13 @@
           <div class="flex-1 overflow-y-auto hide-scrollbar basis-0">
             <!-- Master Check box -->
             <li
-              class="py-2 mb-1 px-2.5 cursor-pointer rounded-4 flex items-center bg-surface-gray-1 hover:bg-surface-gray-2"
+              class="py-2 mb-1 px-2.5 cursor-pointer rounded flex items-center bg-surface-gray-1 hover:bg-surface-gray-2"
               @click="handleSelectAllChildValues(!toggleAllChildValues)"
             >
               <FormControl
                 type="checkbox"
                 :model-value="toggleAllChildValues"
-                class="me-4"
+                class="me-2"
               />
               <span class="text-base-medium text-ink-gray-8">
                 {{ toggleCheckboxLabel }}
@@ -103,13 +99,13 @@
               <li
                 v-for="value in filteredChildFieldValues"
                 :key="value"
-                class="py-2 mb-1 px-2.5 cursor-pointer rounded-4 flex items-center hover:bg-surface-gray-1 max-w-full truncate"
+                class="py-2 mb-1 px-2.5 cursor-pointer rounded flex items-center hover:bg-surface-gray-1 max-w-full truncate"
                 @click="handleChildValueClick(value)"
               >
                 <FormControl
                   type="checkbox"
                   :model-value="isChildValueSelected(value)"
-                  class="me-4"
+                  class="me-2"
                 />
                 <span class="text-base text-ink-gray-6">{{ value }}</span>
               </li>

desk/src/components/Settings/General/General.vue

@@ -2,7 +2,7 @@
   <SettingsLayoutBase :description="__('Manage general settings of your app.')">
     <template #title>
       <div class="flex items-center gap-2">
-        <h1 class="text-md-semibold text-ink-gray-8">
+        <h1 class="text-lg-semibold text-ink-gray-8">
           {{ __("General") }}
         </h1>
         <UnsavedBadge :show="isDirty" />
@@ -74,7 +74,6 @@ import {
   toast,
 } from "frappe-ui";
 import { computed, provide, ref, watch } from "vue";
-import { disableSettingModalOutsideClick } from "../settingsModal";
 import Branding from "./components/Branding.vue";
 import TicketSettings from "./components/TicketSettings.vue";
 import WorkflowKnowledgebaseSettings from "./components/WorkflowKnowledgebaseSettings.vue";
@@ -156,7 +155,6 @@ const saveSettingsResource = createResource({
         skip_email_workflow: settingsData.value.skipEmailWorkflow,
         disable_saved_replies_global_scope:
           settingsData.value.disableSavedRepliesGlobalScope,
-
         enable_outside_hours_banner:
           settingsData.value.enableOutsideHoursBanner,
         outside_working_hours_message:
@@ -254,61 +252,14 @@ const saveSettings = async () => {
   });
 };
 
-const toggleFieldnames = {
-  isFeedbackMandatory: "is_feedback_mandatory",
-  enableCommentReactions: "enable_comment_reactions",
-  disableSavedRepliesGlobalScope: "disable_saved_replies_global_scope",
-  allowAnyoneToCreateTickets: "allow_anyone_to_create_tickets",
-  preferKnowledgeBase: "prefer_knowledge_base",
-  skipEmailWorkflow: "skip_email_workflow",
-} as const;
-const toggleFields = Object.keys(toggleFieldnames) as Array<
-  keyof typeof toggleFieldnames
->;
-
-// Toggles save on their own, so they never carry unsaved text fields along.
-const saveTogglesResource = createResource({
-  url: "frappe.client.set_value",
-  makeParams: (values: Record<string, unknown>) => ({
-    doctype: "HD Settings",
-    name: "HD Settings",
-    fieldname: Object.fromEntries(
-      toggleFields.map((f) => [toggleFieldnames[f], values[f]])
-    ),
-  }),
-});
-let pendingToggleSave = Promise.resolve();
-
-function currentToggles() {
-  return Object.fromEntries(
-    toggleFields.map((f) => [f, settingsData.value[f]])
-  );
-}
-
-async function saveToggles(sent: Record<string, unknown>) {
-  try {
-    await saveTogglesResource.submit(sent);
-    markTogglesSaved(sent);
-    toast.success(__("Settings updated"));
-  } catch {
-    revertToggles(sent);
-  }
-}
-
-function markTogglesSaved(sent: Record<string, unknown>) {
-  const initial = JSON.parse(initialData.value!);
-  toggleFields.forEach((f) => (initial[f] = sent[f]));
-  initialData.value = JSON.stringify(initial);
-  configStore.configResource.reload();
-}
-
-// Undo only what the failed request sent; a toggle changed since keeps its queued save.
-function revertToggles(sent: Record<string, unknown>) {
-  const initial = JSON.parse(initialData.value!);
-  toggleFields
-    .filter((f) => settingsData.value[f] === sent[f])
-    .forEach((f) => (settingsData.value[f] = initial[f]));
-}
+const toggleFields = [
+  "isFeedbackMandatory",
+  "enableCommentReactions",
+  "disableSavedRepliesGlobalScope",
+  "allowAnyoneToCreateTickets",
+  "preferKnowledgeBase",
+  "skipEmailWorkflow",
+] as const;
 
 // Track dirty state for non-toggle fields only
 watch(
@@ -318,7 +269,7 @@ watch(
     const initial = JSON.parse(initialData.value);
     isDirty.value = Object.keys(data).some(
       (key) =>
-        !(toggleFields as string[]).includes(key) &&
+        !(toggleFields as readonly string[]).includes(key) &&
         JSON.stringify(data[key as keyof typeof data]) !==
           JSON.stringify(initial[key])
     );
@@ -327,16 +278,16 @@ watch(
   { deep: true }
 );
 
-// Queue toggle saves: parallel writes to the single doc fail with a 417.
+// auto save when any toggle field changes
 watch(
   () => toggleFields.map((f) => settingsData.value[f]),
-  (newVals) => {
+  async (newVals) => {
     if (!initialData.value) return;
     const initial = JSON.parse(initialData.value);
-    if (!newVals.some((v, i) => v !== initial[toggleFields[i]])) return;
-    pendingToggleSave = pendingToggleSave.then(() =>
-      saveToggles(currentToggles())
-    );
+    if (newVals.some((v, i) => v !== initial[toggleFields[i]])) {
+      await saveSettingsResource.submit();
+      toast.success(__("Settings updated"));
+    }
   }
 );
 

desk/src/components/Settings/General/components/LogoUpload.vue

@@ -4,7 +4,7 @@
   >
     <div class="flex flex-col sm:flex-row items-center gap-3.5">
       <div
-        class="flex items-center justify-center min-w-16 min-h-16 rounded-6 overflow-hidden border border-outline-gray-1"
+        class="flex items-center justify-center min-w-16 min-h-16 rounded-lg overflow-hidden border border-outline-gray-1"
       >
         <Avatar
           v-if="props.image"
@@ -12,7 +12,7 @@
           :image="props.image"
           :label="props.title"
         />
-        <LucideImage v-else class="size-6 text-ink-gray-4" />
+        <FeatherIcon v-else name="image" class="size-6 text-ink-gray-4" />
       </div>
       <div class="flex flex-col gap-1 max-w-sm items-start">
         <span class="text-base-medium text-ink-gray-8">{{ title }}</span>
@@ -57,8 +57,7 @@
 </template>
 
 <script setup lang="ts">
-import LucideImage from "~icons/lucide/image";
-import { Avatar, Button, FileUploader } from "frappe-ui";
+import { Avatar, Button, FeatherIcon, FileUploader } from "frappe-ui";
 import ImageUpIcon from "~icons/lucide/image-up";
 
 const emit = defineEmits(["onUpload", "onRemove"]);

desk/src/components/Settings/General/components/TicketSettings.vue

@@ -133,7 +133,7 @@
           }}</span>
         </div>
         <SelectDropdown
-          :options="ticketTypeList.data || []"
+          :options="ticketTypeList.data"
           v-model="settingsData.defaultTicketType"
           target-class="max-w-40"
           placement="bottom-start"
@@ -152,7 +152,7 @@
         </div>
         <div class="grid grid-cols-2 gap-4 mt-3">
           <div class="flex flex-col gap-1.5">
-            <FormLabel :label="__('Ticket status')" />
+            <FormLabel :label="__('Ticket status')" size="md" />
             <SelectDropdown
               :options="autoCloseTicketStatusList"
               :model-value="settingsData.autoCloseStatus"
@@ -275,6 +275,7 @@ import {
 import { computed, inject } from "vue";
 
 const settingsData = inject(HDSettingsSymbol);
+
 const { statuses } = useTicketStatusStore();
 
 const bannerMsg = createResource({
@@ -294,8 +295,7 @@ function resetBannerContent() {
 }
 
 function handleShowBannerToggle(value: boolean) {
-  // the switch is live before the message resource lands
-  if (!bannerMsg.data?.current) {
+  if (!bannerMsg.data.current) {
     if (value) {
       settingsData.value.outsideWorkingHoursBannerMessage =
         bannerMsg.data?.default;

desk/src/components/Settings/Holiday/HLCalender.vue

@@ -3,7 +3,7 @@
     <div class="text-base-medium mb-2 text-ink-gray-8 ms-2.5">
       {{ formattedMonth }}
     </div>
-    <div class="rounded-5 text-sm">
+    <div class="rounded-md text-sm">
       <div class="flex items-center text-xs uppercase">
         <div
           class="flex size-7.5 items-center justify-center text-center text-ink-gray-5"
@@ -16,51 +16,37 @@
       <div class="flex items-center" v-for="(week, i) in datesAsWeeks" :key="i">
         <div v-for="date in week" :key="getFormattedDate(date)">
           <Popover v-if="isHoliday(date)">
-            <template #trigger="{ close, setOpen }">
-              <!--
-                Hover opens this one. reka turns the whole trigger subtree into
-                the toggle, so the cell stops its click before it gets there.
-              -->
-              <div>
-                <div
-                  class="flex size-7 cursor-pointer text-ink-orange-6 bg-surface-yellow-2 items-center justify-center rounded-4 hover:bg-surface-yellow-2 select-none m-[1px]"
-                  :class="{
-                    '!text-ink-gray-4 !bg-surface-gray-2': isWeekOff(date),
-                  }"
-                  @mouseover="
-                    handleMouseEnter(getFormattedDate(date), () =>
-                      setOpen(true)
-                    )
-                  "
-                  @mouseleave="handleMouseLeave(getFormattedDate(date), close)"
-                  @click.stop="
-                    () => {
-                      if (isWeekOff(date)) return;
-                      close();
-                      editHoliday(date);
-                    }
-                  "
-                >
-                  {{ date.getDate() }}
-                </div>
+            <template #target="{ open, close }">
+              <div
+                class="flex size-7 cursor-pointer text-ink-orange-6 bg-surface-yellow-2 items-center justify-center rounded hover:bg-surface-yellow-2 select-none m-[1px]"
+                :class="{
+                  '!text-ink-gray-4 !bg-surface-gray-2': isWeekOff(date),
+                }"
+                @mouseover="handleMouseEnter(getFormattedDate(date), open)"
+                @mouseleave="handleMouseLeave(getFormattedDate(date), close)"
+                @click="
+                  () => {
+                    if (isWeekOff(date)) return;
+                    close();
+                    editHoliday(date);
+                  }
+                "
+              >
+                {{ date.getDate() }}
               </div>
             </template>
-            <template
-              #default="{ close: closePopover, setOpen: setPopoverOpen }"
-            >
+            <template #body-main="{ close: closePopover, open: openPopover }">
               <div
-                class="p-3 flex gap-2.5 text-ink-gray-9 w-80 border border-outline-gray-1 rounded-5"
+                class="p-3 flex gap-2.5 text-ink-gray-9 w-80 border border-outline-gray-1 rounded-md"
                 @mouseover="
-                  handleMouseEnter(getFormattedDate(date), () =>
-                    setPopoverOpen(true)
-                  )
+                  handleMouseEnter(getFormattedDate(date), openPopover)
                 "
                 @mouseleave="
                   handleMouseLeave(getFormattedDate(date), closePopover)
                 "
               >
                 <div class="w-[5%]">
-                  <div class="size-3.5 bg-surface-orange-5 rounded-1 mt-1" />
+                  <div class="size-3.5 bg-surface-orange-5 rounded-sm mt-1" />
                 </div>
                 <div class="grow">
                   <div class="text-sm-semibold">
@@ -74,10 +60,11 @@
                   v-if="!isWeekOff(date)"
                   @close="isConfirmingDelete = false"
                 >
-                  <template #trigger="{ close }">
+                  <template #target="{ open, close }">
                     <Button
                       icon="lucide-more-horizontal"
                       variant="ghost"
+                      @click="open"
                       @mouseleave="
                         handleMouseLeave(
                           getFormattedDate(date) + 'dropdown',
@@ -87,20 +74,15 @@
                     />
                   </template>
                   <template
-                    #default="{
-                      close: closeDropdown,
-                      setOpen: setDropdownOpen,
-                    }"
+                    #body-main="{ close: closeDropdown, open: openDropdown }"
                   >
                     <div
-                      class="p-2 flex flex-col gap-1 w-40 text-ink-gray-9 border border-outline-gray-1 rounded-5"
+                      class="p-2 flex flex-col gap-1 w-40 text-ink-gray-9 border border-outline-gray-1 rounded-md"
                       @mouseover="
-                        handleMouseEnter(getFormattedDate(date), () =>
-                          setPopoverOpen(true)
-                        );
+                        handleMouseEnter(getFormattedDate(date), openPopover);
                         handleMouseEnter(
                           getFormattedDate(date) + 'dropdown',
-                          () => setDropdownOpen(true)
+                          openDropdown
                         );
                       "
                       @mouseleave="
@@ -149,7 +131,7 @@
           </Popover>
           <div
             v-else
-            class="flex size-7 items-center justify-center rounded-4 m-[1px] select-none"
+            class="flex size-7 items-center justify-center rounded m-[1px] select-none"
             :class="{
               'cursor-pointer hover:bg-surface-gray-2': isDateInRange(date),
               'text-ink-gray-3':
@@ -173,8 +155,7 @@
 <script setup lang="ts">
 import { holidayData } from "@/stores/holidayList";
 import { getFormattedDate, htmlToText } from "@/utils";
-import { dayjs, Popover } from "frappe-ui";
-import { useDatePicker } from "@/composables/useDatePicker";
+import { dayjs, Popover, useDatePicker } from "frappe-ui";
 import { ref, watch } from "vue";
 import AddHolidayModal from "./Modals/AddHolidayModal.vue";
 

desk/src/components/Settings/Holiday/HolidayListItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex items-center cursor-pointer hover:bg-surface-sidebar rounded-4"
+    class="flex items-center cursor-pointer hover:bg-surface-sidebar rounded"
   >
     <div
       class="w-full ps-2 flex flex-col justify-center h-14"
@@ -16,12 +16,12 @@
     </div>
     <div class="flex justify-between items-center pe-2">
       <div>
-        <Dropdown
-          align="end"
-          :options="dropdownOptions"
-          @update:open="(open) => open && (isConfirmingDelete = false)"
-        >
-          <Button icon="lucide-more-horizontal" variant="ghost" />
+        <Dropdown placement="right" :options="dropdownOptions">
+          <Button
+            icon="lucide-more-horizontal"
+            variant="ghost"
+            @click="isConfirmingDelete = false"
+          />
         </Dropdown>
       </div>
     </div>

desk/src/components/Settings/Holiday/HolidayView.vue

@@ -59,7 +59,7 @@
         <hr class="my-8" />
         <div>
           <div class="flex flex-col gap-1">
-            <span class="text-md-semibold text-ink-gray-8">{{
+            <span class="text-lg-semibold text-ink-gray-8">{{
               __("Valid From")
             }}</span>
             <span class="text-p-sm text-ink-gray-6">
@@ -68,7 +68,12 @@
           </div>
           <div class="mt-3.5 flex gap-5 flex-col md:flex-row">
             <div class="w-full space-y-1.5">
-              <FormLabel :label="__('From date')" for="from_date" required />
+              <FormLabel
+                :label="__('From date')"
+                for="from_date"
+                required
+                size="md"
+              />
               <DatePicker
                 v-model="holidayData.from_date"
                 variant="subtle"
@@ -89,7 +94,12 @@
               />
             </div>
             <div class="w-full space-y-1.5">
-              <FormLabel :label="__('To date')" for="to_date" required />
+              <FormLabel
+                :label="__('To date')"
+                for="to_date"
+                required
+                size="md"
+              />
               <DatePicker
                 v-model="holidayData.to_date"
                 variant="subtle"
@@ -110,7 +120,7 @@
         <hr class="my-8" />
         <div>
           <div class="flex flex-col gap-1">
-            <div class="text-md-semibold text-ink-gray-8">
+            <div class="text-lg-semibold text-ink-gray-8">
               {{ __("Recurring Holidays") }}
             </div>
             <div class="text-p-sm text-ink-gray-6">
@@ -128,7 +138,7 @@
         <div>
           <div class="flex justify-between items-center">
             <div class="flex justify-between flex-col gap-1">
-              <span class="text-md-semibold text-ink-gray-8">
+              <span class="text-lg-semibold text-ink-gray-8">
                 {{ __("Holidays") }}
               </span>
               <div class="text-p-sm text-ink-gray-6">
@@ -140,15 +150,13 @@
               </div>
             </div>
             <TabButtons
-              :options="[
+              :buttons="[
                 {
                   value: 'calendar',
-                  label: __('Calendar'),
                   icon: 'lucide-calendar',
                 },
                 {
                   value: 'list',
-                  label: __('List'),
                   icon: 'lucide-list',
                 },
               ]"
@@ -169,13 +177,13 @@
             <!-- Indicators -->
             <div class="flex gap-4" v-if="holidayListView === 'calendar'">
               <div class="gap-1 flex items-center">
-                <span class="bg-surface-yellow-2 size-4 rounded-1" />
+                <span class="bg-surface-yellow-2 size-4 rounded-sm" />
                 <span class="text-sm text-ink-gray-6">{{
                   __("Holidays")
                 }}</span>
               </div>
               <div class="gap-1 flex items-center">
-                <span class="bg-surface-gray-2 size-4 rounded-1" />
+                <span class="bg-surface-gray-2 size-4 rounded-sm" />
                 <span class="text-sm text-ink-gray-6">{{
                   __("Recurring holidays")
                 }}</span>

desk/src/components/Settings/Holiday/Holidays.vue

@@ -74,8 +74,10 @@ watch(holidaySearchRef, (newValue) => {
   holidayList.filters = {
     name: ["like", `%${newValue}%`],
   };
-  // no pager on this list, so a shrunken pageLength would hide the rest for good
-  if (!newValue) holidayList.start = 0;
+  if (!newValue) {
+    holidayList.start = 0;
+    holidayList.pageLength = 10;
+  }
   holidayList.reload();
 });
 </script>

desk/src/components/Settings/Holiday/HolidaysCalendarView.vue

@@ -1,17 +1,18 @@
 <template>
-  <div class="p-6.5 px-5 rounded-7 border border-outline-gray-2">
+  <div class="p-6.5 px-5 rounded-xl border border-outline-gray-2">
     <div class="mb-6.5 flex justify-between items-center">
       <div class="ms-1">
         <Popover v-if="startYear !== endYear">
-          <template #trigger>
+          <template #target="{ togglePopover }">
             <Button
-              class="flex items-center gap-2 text-xl-semibold cursor-pointer select-none"
+              class="flex items-center gap-2 text-2xl-semibold cursor-pointer select-none"
               variant="ghost"
+              @click="togglePopover"
               :label="currentYear + ''"
               icon-right="lucide-chevron-down"
             />
           </template>
-          <template #default="{ close: closePopover }">
+          <template #body-main="{ togglePopover }">
             <div class="w-24">
               <div ref="yearsContainer" class="max-h-60 overflow-y-auto py-1">
                 <div
@@ -19,10 +20,14 @@
                   :key="year"
                   ref="yearItems"
                   class="cursor-pointer px-3 py-1.5 text-sm hover:bg-surface-gray-2 flex items-center justify-between"
-                  @click="onYearChange(closePopover, year)"
+                  @click="onYearChange(togglePopover, year)"
                 >
                   {{ year }}
-                  <LucideCheck class="size-4" v-if="year === currentYear" />
+                  <FeatherIcon
+                    name="check"
+                    class="size-4"
+                    v-if="year === currentYear"
+                  />
                 </div>
               </div>
             </div>
@@ -30,7 +35,7 @@
         </Popover>
         <div
           v-else
-          class="flex items-center gap-2 px-2 text-xl-semibold select-none"
+          class="flex items-center gap-2 px-2 text-2xl-semibold select-none"
         >
           {{ startYear }}
         </div>
@@ -100,8 +105,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import LucideCheck from "~icons/lucide/check";
-import { computed, ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import HLCalender from "./HLCalender.vue";
 import { holidayData } from "@/stores/holidayList";
 import { Button, dayjs, Popover } from "frappe-ui";
@@ -121,7 +125,7 @@ const yearsList = computed(() => {
   return yearList;
 });
 
-const onYearChange = (closePopover: () => void, year: number) => {
+const onYearChange = (togglePopover: () => void, year: number) => {
   currentYear.value = year;
   if (year === dayjs(holidayData.value.from_date).year()) {
     if (dayjs(holidayData.value.from_date).month() >= 6) {
@@ -134,7 +138,7 @@ const onYearChange = (closePopover: () => void, year: number) => {
   } else {
     visibleMonths.value = "first-half";
   }
-  closePopover();
+  togglePopover();
 };
 
 const goToToday = () => {
@@ -146,14 +150,17 @@ const goToToday = () => {
 watch(
   () => [holidayData.value.from_date, holidayData.value.to_date],
   ([fromDate, toDate]) => {
-    fromDate = dayjs(fromDate || dayjs());
-    toDate = dayjs(toDate || dayjs());
+    fromDate = dayjs(fromDate);
+    toDate = dayjs(toDate);
     startYear.value = fromDate.year();
     endYear.value = toDate.year();
     currentYear.value = fromDate.year();
     visibleMonths.value = fromDate.month() >= 6 ? "second-half" : "first-half";
-  },
-  // The list is loaded before this view mounts, so a change-only watch never fires.
-  { immediate: true }
+  }
 );
+
+onMounted(() => {
+  const fromDate = dayjs(holidayData.value.from_date || dayjs());
+  visibleMonths.value = fromDate.month() >= 6 ? "second-half" : "first-half";
+});
 </script>

desk/src/components/Settings/Holiday/HolidaysTableView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-5 border px-2 border-outline-gray-2 text-sm">
+  <div class="rounded-md border px-2 border-outline-gray-2 text-sm">
     <div
       class="grid p-2 px-4 items-center gap-2"
       :style="{
@@ -37,12 +37,12 @@
           </div>
         </div>
         <div class="flex justify-end">
-          <Dropdown
-            align="end"
-            :options="dropdownOptions(holiday)"
-            @update:open="(open) => open && (isConfirmingDelete = false)"
-          >
-            <Button icon="lucide-more-horizontal" variant="ghost" />
+          <Dropdown placement="right" :options="dropdownOptions(holiday)">
+            <Button
+              icon="lucide-more-horizontal"
+              variant="ghost"
+              @click="isConfirmingDelete = false"
+            />
           </Dropdown>
         </div>
       </div>

desk/src/components/Settings/Holiday/Modals/AddHolidayModal.vue

@@ -8,7 +8,7 @@
     <template #default>
       <div class="flex flex-col gap-4 mt-4">
         <div class="flex flex-col gap-1.5">
-          <FormLabel label="Date" required />
+          <FormLabel label="Date" required size="md" />
           <DatePicker
             :model-value="dayjs(dialog.holiday_date).format('YYYY-MM-DD')"
             @update:model-value="

desk/src/components/Settings/Holiday/RecurringHolidaysList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-5 border p-1 border-outline-gray-2 text-sm">
+  <div class="rounded-md border p-1 border-outline-gray-2 text-sm">
     <div
       class="grid p-2 items-center"
       :style="{
@@ -32,12 +32,12 @@
           <div v-else>{{ holiday[column.key] }}</div>
         </div>
         <div class="flex justify-end">
-          <Dropdown
-            align="end"
-            :options="dropdownOptions(holiday)"
-            @update:open="(open) => open && (isConfirmingDelete = false)"
-          >
-            <Button icon="lucide-more-horizontal" variant="ghost" />
+          <Dropdown placement="right" :options="dropdownOptions(holiday)">
+            <Button
+              icon="lucide-more-horizontal"
+              variant="ghost"
+              @click="isConfirmingDelete = false"
+            />
           </Dropdown>
         </div>
       </div>
@@ -71,7 +71,7 @@
       </div>
       <div v-else class="flex flex-col gap-4">
         <div class="flex flex-col gap-1.5">
-          <FormLabel label="Day" required />
+          <FormLabel label="Day" required size="md" />
           <Select
             :options="availableWorkDays"
             v-model="recurringHolidayData.day"
@@ -79,7 +79,7 @@
           />
         </div>
         <div class="flex flex-col gap-1.5">
-          <FormLabel label="Repetition" required />
+          <FormLabel label="Repetition" required size="md" />
           <div class="grid grid-cols-2 gap-2 mt-2">
             <Checkbox
               v-model="recurringHolidayData.repetition.all"

desk/src/components/Settings/InviteAgents.vue

@@ -45,7 +45,7 @@
           <li
             v-for="invite in pendingInvitesResource.data"
             :key="invite.name"
-            class="flex items-center justify-between px-3 py-1 rounded-6 bg-surface-gray-2"
+            class="flex items-center justify-between px-3 py-1 rounded-lg bg-surface-gray-2"
           >
             <div class="text-base">
               <span class="text-ink-gray-8">
@@ -116,7 +116,7 @@ import {
   createResource,
   toast,
 } from "frappe-ui";
-import { useOnboarding } from "@framework/ui";
+import { useOnboarding } from "frappe-ui/frappe";
 import { computed, ref } from "vue";
 import LucideChevronDown from "~icons/lucide/chevron-down";
 
@@ -124,7 +124,7 @@ const authStore = useAuthStore();
 const { isAdmin, isManager } = authStore;
 
 // @ts-expect-error
-const { updateOnboardingStep } = useOnboarding("helpdesk") ?? {};
+const { updateOnboardingStep } = useOnboarding("helpdesk");
 
 const emails = ref("");
 
@@ -215,7 +215,7 @@ const inviteByEmailResource = createResource({
     resetInputValues();
     handleInviteUserSuccess(data);
     pendingInvitesResource.reload();
-    updateOnboardingStep?.("invite_agents");
+    updateOnboardingStep("invite_your_team");
     capture("agents_invited", {
       data: {
         role: role.value,

desk/src/components/Settings/Preferences/Preferences.vue

@@ -2,7 +2,7 @@
   <SettingsLayoutBase :description="__('Manage your personal preferences.')">
     <template #title>
       <div class="flex items-center gap-2">
-        <h1 class="text-md-semibold text-ink-gray-8">
+        <h1 class="text-lg-semibold text-ink-gray-8">
           {{ __("Preferences") }}
         </h1>
         <UnsavedBadge :show="isDirty" />

desk/src/components/Settings/Preferences/components/LanguageTimezoneSetting.vue

@@ -13,10 +13,6 @@
         :model-value="user.doc?.language"
         doctype="Language"
         class="w-40"
-        side="top"
-        align="end"
-        :placeholder="__('Select language')"
-        hide-clear-button
         @update:model-value="updateLanguage"
       />
     </div>
@@ -29,8 +25,11 @@
           {{ __("Change timezone of the application.") }}
         </span>
       </div>
-      <TimezoneControl
+      <Autocomplete
         :model-value="user.doc?.time_zone"
+        :options="timezoneOptions"
+        :placeholder="__('Select Timezone')"
+        size="sm"
         class="w-40"
         @update:model-value="updateTimezone"
       />
@@ -39,8 +38,8 @@
 </template>
 
 <script setup lang="ts">
-import Link from "@/components/frappe-ui/Link.vue";
-import TimezoneControl from "@/components/TimezoneControl.vue";
+import { ref } from "vue";
+import { createResource } from "frappe-ui";
 import { __ } from "@/translation";
 
 const props = defineProps<{ user: any }>();
@@ -50,8 +49,20 @@ function updateLanguage(value: string | null) {
   props.user.doc.language = value || props.user.originalDoc?.language;
 }
 
-function updateTimezone(value: string | null) {
+function updateTimezone(value: { label: string; value: string } | null) {
   if (!props.user.doc) return;
-  props.user.doc.time_zone = value || props.user.originalDoc?.time_zone;
+  props.user.doc.time_zone = value?.value || props.user.originalDoc?.time_zone;
 }
+
+const timezoneOptions = ref<{ label: string; value: string }[]>([]);
+createResource({
+  url: "frappe.core.doctype.user.user.get_timezones",
+  auto: true,
+  onSuccess(data: { timezones: string[] }) {
+    timezoneOptions.value = data.timezones.map((tz) => ({
+      label: tz,
+      value: tz,
+    }));
+  },
+});
 </script>

desk/src/components/Settings/Preferences/components/ThemeSwitcher.vue

@@ -16,7 +16,7 @@
           <div
             v-for="option in themeOptions"
             :key="option.value"
-            class="flex-1 rounded-6 border cursor-pointer min-h-[42px]"
+            class="flex-1 rounded-lg border cursor-pointer min-h-[42px]"
             :class="
               theme === option.value
                 ? 'border-outline-gray-7'
@@ -57,7 +57,7 @@
                       <component
                         :is="logo"
                         v-else-if="logo"
-                        class="size-5 shrink-0 rounded-4"
+                        class="size-5 shrink-0 rounded"
                       />
                       <div>{{ __(name) }}</div>
                     </div>
@@ -100,7 +100,7 @@
 
 <script setup lang="ts">
 import { __ } from "@/translation";
-import { useColorScheme, type ColorScheme } from "frappe-ui";
+import { useTheme, type Theme } from "frappe-ui";
 import { computed, type Component } from "vue";
 
 type Pane = {
@@ -112,7 +112,7 @@ type Pane = {
 const props = withDefaults(
   defineProps<{
     /** Controlled value. When omitted the global frappe-ui theme is used. */
-    modelValue?: ColorScheme;
+    modelValue?: Theme;
     /** Brand logo shown in the previews: image URL or component. */
     logo?: string | Component;
     /** Brand name shown in the previews. */
@@ -121,12 +121,12 @@ const props = withDefaults(
   { logo: "", name: "" }
 );
 
-const emit = defineEmits<{ "update:modelValue": [theme: ColorScheme] }>();
+const emit = defineEmits<{ "update:modelValue": [theme: Theme] }>();
 
-const { colorScheme, setColorScheme } = useColorScheme();
+const { currentTheme, setTheme } = useTheme();
 
 const themeOptions: {
-  value: ColorScheme;
+  value: Theme;
   label: string;
   panes: Pane[];
   bars: boolean;
@@ -139,7 +139,7 @@ const themeOptions: {
       {
         tone: "light",
         containerClass: "pl-5 pt-3.5 bg-surface-gray-2 rounded-t-[10.5px]",
-        screenClass: "bg-white rounded-tl-1",
+        screenClass: "bg-white rounded-tl-sm",
       },
     ],
   },
@@ -151,7 +151,7 @@ const themeOptions: {
       {
         tone: "dark",
         containerClass: "pl-5 pt-3.5 bg-surface-gray-2 rounded-t-[10.5px]",
-        screenClass: "bg-gray-900 rounded-tl-1",
+        screenClass: "bg-gray-900 rounded-tl-sm",
       },
     ],
   },
@@ -164,13 +164,13 @@ const themeOptions: {
         tone: "light",
         containerClass:
           "flex flex-1 pl-5 pt-3.5 bg-surface-gray-2 rounded-tl-[10.5px]",
-        screenClass: "bg-white rounded-tl-1 w-full",
+        screenClass: "bg-white rounded-tl-sm w-full",
       },
       {
         tone: "dark",
         containerClass:
           "flex flex-1 pl-5 pt-3.5 bg-surface-gray-3 rounded-tr-[10.5px]",
-        screenClass: "bg-gray-900 rounded-tl-1 w-full",
+        screenClass: "bg-gray-900 rounded-tl-sm w-full",
       },
     ],
   },
@@ -180,15 +180,15 @@ const logoIsImage = computed(
   () => typeof props.logo === "string" && props.logo.length > 0
 );
 
-const theme = computed<ColorScheme>({
+const theme = computed<Theme>({
   get() {
-    const value = props.modelValue ?? colorScheme.value;
+    const value = props.modelValue ?? currentTheme.value;
     if (value === "light") return "light";
     if (value === "dark") return "dark";
     return "system";
   },
   set(value) {
-    setColorScheme(value);
+    setTheme(value);
     emit("update:modelValue", value);
   },
 });

desk/src/components/Settings/Profile/Profile.vue

@@ -23,7 +23,7 @@
                 />
                 <div
                   v-if="agentStatusStore.myStatus"
-                  class="absolute -bottom-0.5 end-0 rounded-full bg-surface-elevation-2 p-1"
+                  class="absolute bottom-0.5 right-0.5 rounded-full bg-surface-elevation-2 p-1"
                 >
                   <div
                     class="size-3.5 rounded-full"
@@ -32,24 +32,26 @@
                     "
                   />
                 </div>
-                <!-- one Tooltip each: it wires only its first child -->
-                <Tooltip :hoverDelay="0" side="bottom" :text="uploadTooltip">
+                <Tooltip
+                  :hoverDelay="0"
+                  placement="bottom"
+                  :text="profileTooltipText"
+                >
                   <div
                     class="z-1 absolute top-0 left-0 flex h-9 cursor-pointer items-center justify-center rounded-full !size-16"
                     @click.stop="openFileSelector"
                   />
-                </Tooltip>
-                <Tooltip
-                  v-if="user.doc?.user_image"
-                  :hoverDelay="0"
-                  side="bottom"
-                  :text="__('Remove Photo')"
-                >
                   <div
-                    class="z-1 size-4 absolute -top-1 -right-1 flex cursor-pointer items-center justify-center rounded-full bg-surface-base opacity-0 duration-300 ease-in-out group-hover:opacity-100 [@media(hover:none)]:opacity-100 hover:bg-surface-gray-2 outline outline-black-overlay-50"
+                    v-if="user.doc?.user_image"
+                    class="z-1 size-4 absolute -top-1 -right-1 flex cursor-pointer items-center justify-center rounded-full bg-surface-base opacity-0 duration-300 ease-in-out group-hover:opacity-100 hover:bg-surface-gray-2 outline outline-black-overlay-50"
                     @click.stop="updateImage()"
+                    @mouseenter="isHoveringRemove = true"
+                    @mouseleave="isHoveringRemove = false"
                   >
-                    <LucideX class="size-3.5 cursor-pointer text-ink-gray-4" />
+                    <FeatherIcon
+                      name="x"
+                      class="size-3.5 cursor-pointer text-ink-gray-4"
+                    />
                   </div>
                 </Tooltip>
                 <div
@@ -59,39 +61,10 @@
                   <LoadingIndicator class="size-4" />
                 </div>
               </div>
-              <div class="flex flex-col gap-1">
-                <div class="flex flex-col gap-1">
-                  <div v-if="!editName" class="flex items-end gap-1">
-                    <span
-                      class="text-md sm:text-xl !font-semibold text-ink-gray-8"
-                    >
-                      {{ user?.doc?.full_name }}
-                    </span>
-                    <Button
-                      class="!px-1 !h-5"
-                      variant="ghost"
-                      @click="editFullName"
-                    >
-                      <EditIcon class="size-3.5" />
-                    </Button>
-                  </div>
-                  <div v-else class="flex items-center gap-1">
-                    <TextInput
-                      ref="fullNameRef"
-                      v-model="fullName"
-                      @keydown.enter="isNameDirty ? save() : (editName = false)"
-                      @keydown.esc.stop="editName = false"
-                    />
-                    <Button
-                      variant="outline"
-                      icon="lucide-check"
-                      :loading="user?.save?.loading"
-                      :disabled="user?.save?.loading"
-                      @click="isNameDirty ? save() : (editName = false)"
-                    />
-                  </div>
-                  <span class="text-p-sm text-ink-gray-6">
-                    {{ user?.doc?.email }}
+              <div class="flex flex-col gap-0.5 min-w-0">
+                <div v-if="!editName" class="flex items-center gap-1">
+                  <span class="text-lg font-semibold text-ink-gray-9 truncate">
+                    {{ user?.doc?.full_name }}
                   </span>
                 </div>
               </div>
@@ -166,7 +139,6 @@
 </template>
 
 <script setup lang="ts">
-import LucideX from "~icons/lucide/x";
 import {
   Avatar,
   Button,
@@ -184,6 +156,7 @@ const emit = defineEmits(["updateStep"]);
 
 import AvailabilityMenu from "@/components/AvailabilityMenu.vue";
 import SettingsLayoutBase from "@/components/layouts/SettingsLayoutBase.vue";
+import { useAvailability } from "@/composables/useAvailability";
 import { useAgentStatusStore } from "@/stores/agentStatus";
 import ChangePasswordModal from "./components/ChangePasswordModal.vue";
 
@@ -193,11 +166,13 @@ const showChangePasswordModal = ref(false);
 const { userId, hasAgentRecord } = useAuthStore();
 const user = createDocumentResource({ doctype: "User", name: userId });
 
+const isHoveringRemove = ref(false);
 const editName = ref(false);
 
-const uploadTooltip = computed(() =>
-  user.doc?.user_image ? __("Change Photo") : __("Upload Photo")
-);
+const profileTooltipText = computed(() => {
+  if (isHoveringRemove.value) return __("Remove Photo");
+  return user.doc?.user_image ? __("Change Photo") : __("Upload Photo");
+});
 
 const fullNameRef = useTemplateRef("fullNameRef");
 const fullName = computed({
@@ -212,7 +187,7 @@ const fullName = computed({
 
 function editFullName() {
   editName.value = true;
-  nextTick(() => fullNameRef.value?.focus());
+  nextTick(() => fullNameRef.value?.el?.focus());
 }
 
 const isNameDirty = computed(() => {
@@ -235,6 +210,7 @@ function save() {
 }
 
 function updateImage(fileUrl = "") {
+  isHoveringRemove.value = false;
   user.doc.user_image = fileUrl;
   save();
 }

desk/src/components/Settings/Profile/UserEmailSettings.vue

@@ -10,7 +10,7 @@
           <Button
             variant="solid"
             :label="__('Update')"
-            :loading="user.save.loading || saveEmailAccountsResource.loading"
+            :loading="user?.save?.loading"
             @click="update"
           /></div
       ></Transition>
@@ -28,10 +28,6 @@
         <div>
           <CompactEditor
             v-model="user.doc.email_signature"
-            :upload-fn="
-              (file: any, options: any) =>
-                uploadFunction(file, 'User', userId, false, options)
-            "
             :placeholder="__('Write your email signature here.')"
           />
         </div>
@@ -51,8 +47,8 @@
         </div>
         <div>
           <div
-            v-if="linkedEmails.length"
-            class="w-full border rounded-5 mb-2 border-outline-elevation-2"
+            v-if="user.doc.user_emails?.length"
+            class="w-full border rounded-md mb-2 border-outline-elevation-2"
           >
             <div
               class="grid grid-cols-[4fr_4fr_0.3fr] gap-2 px-4 py-3 text-sm-medium text-ink-gray-5 border-b border-outline-elevation-2"
@@ -62,50 +58,48 @@
               <span></span>
             </div>
             <div
-              v-for="e in linkedEmails"
-              :key="e.email_account"
+              v-for="e in user.doc.user_emails"
+              :key="e.name"
               class="grid grid-cols-[4fr_4fr_0.3fr] gap-2 group items-center px-4 py-2.5 text-base border-b border-outline-elevation-2 last:border-b-0"
             >
               <span class="text-ink-gray-8 font-medium truncate">
                 {{ e.email_account }}
               </span>
               <span class="text-ink-gray-6 truncate">{{ e.email_id }}</span>
-              <div
-                class="group-hover:opacity-100 opacity-0 transition-opacity [@media(hover:none)]:opacity-100"
-              >
+              <div class="group-hover:opacity-100 opacity-0 transition-opacity">
                 <Button
                   class="w-10"
                   variant="ghost"
                   :tooltip="__('Remove')"
-                  :aria-label="__('Remove')"
                   icon="lucide-x"
                   @click.prevent="removeEmail(e)"
                 />
               </div>
             </div>
           </div>
-          <Combobox
-            :model-value="null"
+          <Autocomplete
+            value=""
             :options="filteredEmails"
-            @update:selected-option="(option) => option && addEmail(option)"
+            @change="(e) => addEmail(e)"
           >
-            <template #trigger>
+            <template #target="{ togglePopover }">
               <Button
                 class="!bg-surface-elevation-2"
                 variant="outline"
                 :label="__('Add Email')"
                 iconLeft="lucide-plus"
+                @click="togglePopover()"
               />
             </template>
-            <template #item-label="{ item }">
+            <template #item-label="{ option }">
               <div class="flex flex-col gap-1 text-ink-gray-9">
-                <div>{{ item.label }}</div>
+                <div>{{ option.label }}</div>
                 <div class="text-ink-gray-4 text-sm">
-                  {{ item.email }}
+                  {{ option.email }}
                 </div>
               </div>
             </template>
-          </Combobox>
+          </Autocomplete>
         </div>
       </div>
     </template>
@@ -129,18 +123,13 @@
 <script setup>
 import CompactEditor from "@/components/CompactEditor.vue";
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
+import Autocomplete from "@/components/frappe-ui/Autocomplete.vue";
 import SettingsLayoutBase from "@/components/layouts/SettingsLayoutBase.vue";
 import { getUserEmailInfo } from "@/composables/useUserEmailInfo";
 import { useAuthStore } from "@/stores/auth";
 import { __ } from "@/translation";
-import { normalize, uploadFunction } from "@/utils";
-import {
-  Button,
-  Combobox,
-  createDocumentResource,
-  createResource,
-  toast,
-} from "frappe-ui";
+import { normalize } from "@/utils";
+import { Badge, Button, createDocumentResource, toast } from "frappe-ui";
 import { computed, ref, watch } from "vue";
 import { disableSettingModalOutsideClick } from "../settingsModal";
 
@@ -150,41 +139,16 @@ const emit = defineEmits(["updateStep"]);
 
 const currentUserEmailInfo = getUserEmailInfo();
 
-// user_emails is System Manager-only, so the User doc never carries it for
-// agents; the list comes from the email info API and is saved through it
-const linkedEmails = ref([]);
-watch(
-  () => currentUserEmailInfo.data?.outgoing_emails,
-  (emails, previousEmails) => {
-    // the info is shared with the composer; a reload from there must not
-    // wipe unsaved edits here
-    if (
-      sortedAccountNames(linkedEmails.value) !==
-      sortedAccountNames(previousEmails)
-    )
-      return;
-    linkedEmails.value = [...(emails || [])];
-  },
-  { immediate: true }
-);
-
-const saveEmailAccountsResource = createResource({
-  url: "helpdesk.api.auth.set_user_email_accounts",
-  makeParams: () => ({
-    email_accounts: linkedAccountNames(linkedEmails.value),
-  }),
-});
-
 const filteredEmails = computed(() => {
   if (!currentUserEmailInfo.data?.available_emails) return [];
-  const linkedAccounts = linkedAccountNames(linkedEmails.value);
+  const linkedEmails = user.doc.user_emails?.map((e) => e.email_id) || [];
   return currentUserEmailInfo.data.available_emails
     .map((doc) => ({
       label: doc.name,
       value: doc.name,
       email: doc.email_id,
     }))
-    .filter((e) => !linkedAccounts.includes(e.value));
+    .filter((e) => !linkedEmails.includes(e.email));
 });
 
 const isSignatureDirty = computed(() => {
@@ -195,9 +159,10 @@ const isSignatureDirty = computed(() => {
 });
 
 const isUserEmailListDirty = computed(() => {
+  const emailIds = (list = []) => list.map((e) => e.email_id).sort();
   return (
-    sortedAccountNames(currentUserEmailInfo.data?.outgoing_emails) !==
-    sortedAccountNames(linkedEmails.value)
+    JSON.stringify(emailIds(currentUserEmailInfo.data?.outgoing_emails)) !==
+    JSON.stringify(emailIds(user.doc.user_emails))
   );
 });
 
@@ -211,39 +176,28 @@ if (isDirty.value) {
   disableSettingModalOutsideClick.value = false;
 }
 
-function linkedAccountNames(list = []) {
-  return list.map((e) => e.email_account);
-}
-
-function sortedAccountNames(list) {
-  return linkedAccountNames(list).sort().join();
-}
-
 function addEmail(email) {
-  linkedEmails.value.push({
-    email_account: email.value,
+  if (!user.doc.user_emails) user.doc.user_emails = [];
+  user.doc.user_emails.push({
+    email_account: email.label,
     email_id: email.email,
   });
 }
 
 function removeEmail(email) {
-  linkedEmails.value = linkedEmails.value.filter(
-    (e) => e.email_account !== email.email_account
+  user.doc.user_emails = user.doc.user_emails.filter(
+    (e) => e.email_id !== email.email_id
   );
 }
 
-async function update() {
-  // one after the other, since both save the same User doc
-  try {
-    if (isSignatureDirty.value) await user.save.submit();
-    if (isUserEmailListDirty.value) await saveEmailAccountsResource.submit();
-  } catch {
-    return; // the fallback error handler already showed a toast
-  }
-  toast.success(__("Email settings updated successfully."));
-  user.reload();
-  await currentUserEmailInfo.reload();
-  linkedEmails.value = [...currentUserEmailInfo.data.outgoing_emails];
+function update() {
+  user.save.submit(null, {
+    onSuccess: () => {
+      toast.success(__("Email settings updated successfully."));
+      currentUserEmailInfo.reload();
+      user.reload();
+    },
+  });
 }
 
 watch(isDirty, (val) => {

desk/src/components/Settings/Profile/components/ChangePasswordModal.vue

@@ -60,7 +60,7 @@
 </template>
 <script setup lang="ts">
 import LockKeyhole from "~icons/lucide/lock-keyhole";
-import { createResource, Dialog, Password, toast } from "frappe-ui";
+import { Dialog, toast, createResource } from "frappe-ui";
 import { ref, watch } from "vue";
 import { __ } from "@/translation";
 import { useAuthStore } from "@/stores/auth";

desk/src/components/Settings/SavedReplies/SavedRepliesList.vue

@@ -39,16 +39,12 @@
             class="absolute end-1 top-1/2 -translate-y-1/2"
           />
         </div>
-        <Dropdown
-          :options="filterOptions"
-          align="end"
-          @update:open="(open) => open && (isConfirmingDelete = false)"
-        >
+        <Dropdown :options="filterOptions" placement="right">
           <template #default="{ open }">
             <Button :label="activeFilterLabel">
               <template #suffix>
-                <component
-                  :is="open ? LucideChevronUp : LucideChevronDown"
+                <FeatherIcon
+                  :name="open ? 'chevron-up' : 'chevron-down'"
                   class="h-4"
                 />
               </template>
@@ -60,11 +56,11 @@
     <template #content>
       <div
         v-if="savedRepliesListResource?.list?.loading"
-        class="flex items-center justify-center absolute inset-x-0 top-5.5 bottom-0"
+        class="flex items-center justify-center my-auto"
       >
         <LoadingIndicator class="w-4" />
       </div>
-      <EmptyState
+      <div
         v-if="
           !savedRepliesListResource?.list?.loading &&
           !savedRepliesListResource?.data?.length
@@ -94,7 +90,7 @@
           :key="savedReply.name"
         >
           <div
-            class="grid grid-cols-12 items-center gap-4 cursor-pointer hover:bg-surface-sidebar rounded-4"
+            class="grid grid-cols-12 items-center gap-4 cursor-pointer hover:bg-surface-sidebar rounded"
           >
             <div
               @click="
@@ -134,15 +130,14 @@
                 />
                 {{ savedReply.scope }}
               </div>
-              <!-- the confirm state is shared, so each menu clears it on open -->
               <Dropdown
-                align="end"
+                placement="right"
                 :options="dropdownOptions(savedReply)"
-                @update:open="(open) => open && (isConfirmingDelete = false)"
               >
                 <Button
                   icon="lucide-more-horizontal"
                   variant="ghost"
+                  @click="isConfirmingDelete = false"
                   class="me-2"
                 />
               </Dropdown>
@@ -183,9 +178,6 @@
 </template>
 
 <script setup lang="ts">
-import LucideChevronUp from "~icons/lucide/chevron-up";
-import LucideChevronDown from "~icons/lucide/chevron-down";
-import EmptyState from "@/components/EmptyState.vue";
 import { useConfigStore } from "@/stores/config";
 import { __ } from "@/translation";
 import { ConfirmDelete } from "@/utils";
@@ -194,12 +186,14 @@ import {
   Button,
   call,
   Dropdown,
+  FeatherIcon,
   LoadingIndicator,
   TextInput,
   toast,
 } from "frappe-ui";
 import { storeToRefs } from "pinia";
 import { computed, inject, ref, Ref, watch } from "vue";
+import EmptyState from "@/components/EmptyState.vue";
 import GlobeIcon from "~icons/lucide/globe";
 import UserIcon from "~icons/lucide/user";
 import UsersIcon from "~icons/lucide/users";

desk/src/components/Settings/SavedReplies/SavedReplyView.vue

@@ -55,7 +55,7 @@
           </div>
           <div class="space-y-1.5">
             <Select
-              :label="__('Visibility')"
+              label="Scope"
               v-model="savedReplyData.scope"
               :options="scopeDropdownOptions"
               required
@@ -67,11 +67,12 @@
             </Select>
             <FormLabel
               :label="__('Choose who can view and use this response.')"
+              size="md"
             />
           </div>
         </div>
         <div v-if="savedReplyData.scope === 'Team'" class="space-y-1.5">
-          <FormLabel :label="__('Teams')" required />
+          <FormLabel :label="__('Teams')" required size="md" />
           <MultiSelect
             :options="teamsList"
             v-model="savedReplyData.teams"
@@ -86,7 +87,7 @@
         </div>
         <div class="space-y-1.5">
           <div class="flex items-center justify-between">
-            <FormLabel :label="__('Response')" required />
+            <FormLabel :label="__('Response')" required size="md" />
             <DocumentationButton
               url="https://docs.frappe.io/helpdesk/saved-replies"
             />
@@ -95,16 +96,6 @@
           <CompactEditor
             ref="content"
             v-model="savedReplyData.message"
-            :upload-fn="
-              (file: any, options: any) =>
-                uploadFunction(
-                  file,
-                  'HD Saved Reply',
-                  savedReplyData.name,
-                  false,
-                  options
-                )
-            "
             :extensions="[FieldAutocomplete]"
             :placeholder="
               __(
@@ -138,7 +129,6 @@ import DocumentationButton from "@/components/DocumentationButton.vue";
 import { useAuthStore } from "@/stores/auth";
 import { useConfigStore } from "@/stores/config";
 import { __ } from "@/translation";
-import { uploadFunction } from "@/utils";
 import {
   Button,
   createListResource,
@@ -152,6 +142,7 @@ import {
   toast,
 } from "frappe-ui";
 import { storeToRefs } from "pinia";
+import UnsavedBadge from "@/components/UnsavedBadge.vue";
 import { computed, inject, onUnmounted, ref, watch } from "vue";
 import GlobeIcon from "~icons/lucide/globe";
 import UserIcon from "~icons/lucide/user";
@@ -230,11 +221,9 @@ const scopeDropdownOptions = computed(() => {
 
 const getSavedReplyData = createResource({
   url: "frappe.client.get",
-  makeParams() {
-    return {
-      doctype: "HD Saved Reply",
-      name: savedRepliesActiveScreen.value.data?.name,
-    };
+  params: {
+    doctype: "HD Saved Reply",
+    name: savedRepliesActiveScreen.value.data?.name,
   },
   auto: false,
   onSuccess: (data: SavedReply) => {

desk/src/components/Settings/SavedReplies/components/ActionValue.vue

@@ -8,17 +8,6 @@
     :placeholder="placeholder"
     @update:model-value="emit('update:modelValue', $event as string)"
   />
-  <Link
-    v-else-if="config.control === 'link'"
-    class="w-full"
-    variant="ghost"
-    :doctype="config.doctype!"
-    :filters="linkFilters(type)"
-    :model-value="(modelValue as string)"
-    :placeholder="placeholder"
-    :title="(modelValue as string)"
-    @update:model-value="emit('update:modelValue', ($event ?? '') as string)"
-  />
   <Combobox
     v-else-if="config.control === 'combobox'"
     class="w-full"
@@ -28,6 +17,7 @@
     :options="options"
     :placeholder="placeholder"
     @update:model-value="emit('update:modelValue', $event as string)"
+    @update:query="emit('search', $event)"
   >
     <template v-if="type === 'Assign Agent'" #item-prefix="{ item }">
       <Avatar size="xs" :image="item.image" :label="item.label" />
@@ -95,15 +85,13 @@
 <script setup lang="ts">
 import { buildEditorExtensions } from "@/components/editor/config";
 import TagChip from "@/components/tag/TagChip.vue";
-import { useSavedReplyActionOptions } from "@/composables/useSavedReplyActionOptions";
 import { colorToken } from "@/composables/useTags";
 import { __ } from "@/translation";
 import { SavedReplyActionType } from "@/types";
-import { Link } from "@framework/ui";
 import { Avatar, Combobox, MultiSelect, Select } from "frappe-ui";
 import { Editor, EditorContent } from "frappe-ui/editor";
 import { computed } from "vue";
-import { ACTION_TYPES } from "./actionTypes";
+import { ACTION_TYPES, type ActionOption } from "./actionTypes";
 
 const props = defineProps<{
   type: SavedReplyActionType;
@@ -113,10 +101,9 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   "update:modelValue": [value: string | string[]];
+  search: [query: string];
 }>();
 
-const { linkFilters } = useSavedReplyActionOptions();
-
 const config = computed(() => ACTION_TYPES[props.type]);
 const placeholder = computed(() =>
   __("Select {0}", (config.value.fieldname || __("a value")).toLowerCase())

desk/src/components/Settings/SavedReplies/components/ActionsEditor.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="space-y-3">
     <div class="flex flex-col gap-1">
-      <span class="text-md-medium text-ink-gray-8">{{ __("Actions") }}</span>
+      <span class="text-lg-medium text-ink-gray-8">{{ __("Actions") }}</span>
       <span class="text-p-base text-ink-gray-6">
         {{ __("Applied to the ticket when this reply is sent") }}
       </span>
     </div>
-    <div class="rounded-5 border border-outline-gray-2 px-1 text-sm">
+    <div class="rounded-md border border-outline-gray-2 px-1 text-sm">
       <template v-if="rows.length">
         <div
           class="grid items-center gap-6 p-2"
@@ -47,11 +47,12 @@
                 :model-value="row.value"
                 :options="valueOptions(row.action_type)"
                 @update:model-value="row.value = $event"
+                @search="search(row.action_type, $event)"
               />
             </div>
             <div class="flex min-h-8 items-center justify-end">
               <Dropdown
-                align="end"
+                placement="right"
                 :options="[
                   {
                     label: __('Delete'),
@@ -121,8 +122,11 @@ defineProps<{
 
 const actions = defineModel<SavedReplyAction[]>({ required: true });
 
-const { valueOptions: sharedValueOptions, tagOptions } =
-  useSavedReplyActionOptions();
+const {
+  valueOptions: sharedValueOptions,
+  tagOptions,
+  search,
+} = useSavedReplyActionOptions();
 
 const columns = [
   { key: "action_type", label: __("Action"), width: "190px" },