From 3537a556138d3b4c5c04b817e051263422939cd7 Mon Sep 17 00:00:00 2001
From: Javenn0 <cavidanmurad144@gmail.com>
Date: Wed, 15 Apr 2026 13:18:33 +0400
Subject: [PATCH 01/11] feat(home): enable reordering and toggling home page
 widgets

---
 ui/src/components/layout/PageHeader.tsx |   3 +
 ui/src/pages/WorkspaceHomePage.tsx      | 233 +++++++++++++++++++++---
 2 files changed, 215 insertions(+), 21 deletions(-)

diff --git a/ui/src/components/layout/PageHeader.tsx b/ui/src/components/layout/PageHeader.tsx
index 5993114..93ab2a5 100644
--- a/ui/src/components/layout/PageHeader.tsx
+++ b/ui/src/components/layout/PageHeader.tsx
@@ -753,6 +753,9 @@ function HomeHeader() {
           variant="ghost"
           size="sm"
           className="gap-1.5 text-[13px] font-medium text-(--txt-secondary)"
+          onClick={() => {
+            window.dispatchEvent(new Event('devlane:open-home-widgets'));
+          }}
         >
           <IconGrid />
           Manage widgets
diff --git a/ui/src/pages/WorkspaceHomePage.tsx b/ui/src/pages/WorkspaceHomePage.tsx
index 88bf73a..282a620 100644
--- a/ui/src/pages/WorkspaceHomePage.tsx
+++ b/ui/src/pages/WorkspaceHomePage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, type ReactNode } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import { Card, CardContent, Button, Modal, Input } from '../components/ui';
 import { useAuth } from '../contexts/AuthContext';
@@ -230,6 +230,70 @@ const IconChain = () => (
     <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
   </svg>
 );
+const IconGripVertical = () => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden
+  >
+    <circle cx="9" cy="5" r="1" />
+    <circle cx="9" cy="12" r="1" />
+    <circle cx="9" cy="19" r="1" />
+    <circle cx="15" cy="5" r="1" />
+    <circle cx="15" cy="12" r="1" />
+    <circle cx="15" cy="19" r="1" />
+  </svg>
+);
+
+type HomeWidgetId = 'quicklinks' | 'recents' | 'stickies';
+
+type HomeWidget = {
+  id: HomeWidgetId;
+  label: string;
+  enabled: boolean;
+};
+
+const DEFAULT_HOME_WIDGETS: HomeWidget[] = [
+  { id: 'quicklinks', label: 'Quicklinks', enabled: true },
+  { id: 'recents', label: 'Recents', enabled: true },
+  { id: 'stickies', label: 'Your stickies', enabled: true },
+];
+
+function normalizeWidgets(raw: unknown): HomeWidget[] {
+  if (!Array.isArray(raw)) return [...DEFAULT_HOME_WIDGETS];
+  const byId = new Map<HomeWidgetId, HomeWidget>();
+  const ordered: HomeWidget[] = [];
+  for (const item of raw) {
+    if (!item || typeof item !== 'object') continue;
+    const id = (item as { id?: unknown }).id;
+    const enabled = (item as { enabled?: unknown }).enabled;
+    if (id === 'quicklinks' || id === 'recents' || id === 'stickies') {
+      if (byId.has(id)) continue;
+      const fallbackLabel = DEFAULT_HOME_WIDGETS.find((widget) => widget.id === id)?.label ?? id;
+      const rawLabel = (item as { label?: unknown }).label;
+      const label =
+        typeof rawLabel === 'string' && rawLabel.trim().length > 0 ? rawLabel : fallbackLabel;
+      const normalized: HomeWidget = {
+        id,
+        label,
+        enabled: typeof enabled === 'boolean' ? enabled : true,
+      };
+      byId.set(id, normalized);
+      ordered.push(normalized);
+    }
+  }
+  const merged: HomeWidget[] = [...ordered];
+  for (const widget of DEFAULT_HOME_WIDGETS) {
+    if (!byId.has(widget.id)) merged.push(widget);
+  }
+  return merged;
+}
 
 // ---------------------------------------------------------------------------
 // Helpers
@@ -531,6 +595,43 @@ export function WorkspaceHomePage() {
       typeof document !== 'undefined' &&
       document.documentElement.getAttribute('data-theme') === 'dark',
   );
+  const [manageWidgetsOpen, setManageWidgetsOpen] = useState(false);
+  const [widgets, setWidgets] = useState<HomeWidget[]>(DEFAULT_HOME_WIDGETS);
+  const [draggingWidgetId, setDraggingWidgetId] = useState<HomeWidgetId | null>(null);
+  const [widgetsHydrated, setWidgetsHydrated] = useState(false);
+
+  const widgetsStorageKey = workspaceSlug ? `devlane:home-widgets:${workspaceSlug}` : '';
+
+  useEffect(() => {
+    setWidgetsHydrated(false);
+    if (!widgetsStorageKey) {
+      setWidgets(DEFAULT_HOME_WIDGETS);
+      setWidgetsHydrated(true);
+      return;
+    }
+    try {
+      const raw = localStorage.getItem(widgetsStorageKey);
+      if (!raw) {
+        setWidgets(DEFAULT_HOME_WIDGETS);
+        setWidgetsHydrated(true);
+        return;
+      }
+      setWidgets(normalizeWidgets(JSON.parse(raw)));
+    } catch {
+      setWidgets(DEFAULT_HOME_WIDGETS);
+    }
+    setWidgetsHydrated(true);
+  }, [widgetsStorageKey]);
+
+  useEffect(() => {
+    if (!widgetsStorageKey || !widgetsHydrated) return;
+    localStorage.setItem(widgetsStorageKey, JSON.stringify(widgets));
+  }, [widgetsStorageKey, widgets, widgetsHydrated]);
+  useEffect(() => {
+    const openFromHeader = () => setManageWidgetsOpen(true);
+    window.addEventListener('devlane:open-home-widgets', openFromHeader);
+    return () => window.removeEventListener('devlane:open-home-widgets', openFromHeader);
+  }, []);
   useEffect(() => {
     const el = document.documentElement;
     const sync = () => setStickiesDarkTheme(el.getAttribute('data-theme') === 'dark');
@@ -668,6 +769,24 @@ export function WorkspaceHomePage() {
       // already handled by interceptor
     }
   };
+  const handleWidgetEnabledChange = (id: HomeWidgetId, enabled: boolean) => {
+    setWidgets((prev) => prev.map((widget) => (widget.id === id ? { ...widget, enabled } : widget)));
+  };
+
+  const handleWidgetDrop = (targetId: HomeWidgetId) => {
+    if (!draggingWidgetId || draggingWidgetId === targetId) return;
+    setWidgets((prev) => {
+      const fromIndex = prev.findIndex((widget) => widget.id === draggingWidgetId);
+      const targetIndex = prev.findIndex((widget) => widget.id === targetId);
+      if (fromIndex < 0 || targetIndex < 0 || fromIndex === targetIndex) return prev;
+      const reordered = [...prev];
+      const [moved] = reordered.splice(fromIndex, 1);
+      const insertIndex = fromIndex < targetIndex ? targetIndex - 1 : targetIndex;
+      reordered.splice(insertIndex, 0, moved);
+      return reordered;
+    });
+    setDraggingWidgetId(null);
+  };
 
   useEffect(() => {
     if (!recentsFilterOpen) return;
@@ -706,22 +825,8 @@ export function WorkspaceHomePage() {
           ? recents.filter((r) => r.entity_name === 'page')
           : recents.filter((r) => r.entity_name === 'project');
 
-  return (
-    <div className="mx-auto max-w-4xl space-y-8 pb-8">
-      {/* Welcome */}
-      <section className="text-center">
-        <h1 className="text-2xl font-bold tracking-tight text-(--txt-primary)">
-          {getGreeting()}, {user?.name ?? 'User'}
-        </h1>
-        <p className="mt-1 flex items-center justify-center gap-2 text-sm text-(--txt-tertiary)">
-          <span className="text-(--txt-icon-tertiary)">
-            <IconMoon />
-          </span>
-          {formatDateTime(new Date())}
-        </p>
-      </section>
-
-      {/* Quicklinks */}
+  const sectionByWidgetId: Record<HomeWidgetId, ReactNode> = {
+    quicklinks: (
       <section>
         <div className="mb-3 flex items-center justify-between">
           <h2 className="text-base font-semibold text-(--txt-primary)">Quicklinks</h2>
@@ -850,8 +955,8 @@ export function WorkspaceHomePage() {
           </Card>
         )}
       </section>
-
-      {/* Recents */}
+    ),
+    recents: (
       <section>
         <div className="mb-3 flex items-center justify-between">
           <h2 className="text-base font-semibold text-(--txt-primary)">Recents</h2>
@@ -947,8 +1052,8 @@ export function WorkspaceHomePage() {
           </CardContent>
         </Card>
       </section>
-
-      {/* Your stickies */}
+    ),
+    stickies: (
       <section>
         <div className="mb-3 flex items-center justify-between gap-2">
           <h2 className="text-base font-semibold text-(--txt-primary)">Your stickies</h2>
@@ -1089,6 +1194,92 @@ export function WorkspaceHomePage() {
           );
         })()}
       </section>
+    ),
+  };
+
+  return (
+    <div className="mx-auto max-w-4xl space-y-8 pb-8">
+      <Modal
+        open={manageWidgetsOpen}
+        onClose={() => {
+          setManageWidgetsOpen(false);
+          setDraggingWidgetId(null);
+        }}
+        title="Manage widgets"
+        footer={
+          <Button
+            variant="secondary"
+            onClick={() => {
+              setManageWidgetsOpen(false);
+              setDraggingWidgetId(null);
+            }}
+          >
+            Close
+          </Button>
+        }
+      >
+        <div className="space-y-2">
+          {widgets.map((widget) => (
+            <div
+              key={widget.id}
+              draggable
+              onDragStart={() => setDraggingWidgetId(widget.id)}
+              onDragEnd={() => setDraggingWidgetId(null)}
+              onDragOver={(e) => e.preventDefault()}
+              onDrop={() => handleWidgetDrop(widget.id)}
+              className={`flex items-center justify-between rounded-(--radius-md) border px-3 py-2 ${
+                draggingWidgetId === widget.id
+                  ? 'border-(--border-strong) bg-(--bg-layer-1)'
+                  : 'border-(--border-subtle) bg-(--bg-surface-1)'
+              }`}
+            >
+              <div className="flex items-center gap-2 text-(--txt-secondary)">
+                <span className="cursor-grab text-(--txt-icon-tertiary)">
+                  <IconGripVertical />
+                </span>
+                <span className="text-sm font-medium text-(--txt-primary)">{widget.label}</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <button
+                  type="button"
+                  role="switch"
+                  aria-checked={widget.enabled}
+                  onClick={() => handleWidgetEnabledChange(widget.id, !widget.enabled)}
+                  className={`relative inline-flex h-6 w-11 items-center rounded-full border transition-colors ${
+                    widget.enabled
+                      ? 'border-blue-600 bg-blue-600'
+                      : 'border-(--border-subtle) bg-(--bg-layer-2)'
+                  }`}
+                >
+                  <span
+                    className={`inline-block size-4 transform rounded-full bg-white shadow-sm transition-transform ${
+                      widget.enabled ? 'translate-x-6' : 'translate-x-1'
+                    }`}
+                  />
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </Modal>
+      {/* Welcome */}
+      <section className="text-center">
+        <h1 className="text-2xl font-bold tracking-tight text-(--txt-primary)">
+          {getGreeting()}, {user?.name ?? 'User'}
+        </h1>
+        <p className="mt-1 flex items-center justify-center gap-2 text-sm text-(--txt-tertiary)">
+          <span className="text-(--txt-icon-tertiary)">
+            <IconMoon />
+          </span>
+          {formatDateTime(new Date())}
+        </p>
+      </section>
+
+      {widgets
+        .filter((widget) => widget.enabled)
+        .map((widget) => (
+          <div key={widget.id}>{sectionByWidgetId[widget.id]}</div>
+        ))}
     </div>
   );
 }

From a66f17df4ff6ccb0b8722bb3efcf4b02231b4da4 Mon Sep 17 00:00:00 2001
From: Javenn0 <cavidanmurad144@gmail.com>
Date: Wed, 15 Apr 2026 13:47:18 +0400
Subject: [PATCH 02/11] style(homepage): format widget enabled change handler

---
 ui/src/pages/WorkspaceHomePage.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/ui/src/pages/WorkspaceHomePage.tsx b/ui/src/pages/WorkspaceHomePage.tsx
index 282a620..f1f982a 100644
--- a/ui/src/pages/WorkspaceHomePage.tsx
+++ b/ui/src/pages/WorkspaceHomePage.tsx
@@ -770,7 +770,9 @@ export function WorkspaceHomePage() {
     }
   };
   const handleWidgetEnabledChange = (id: HomeWidgetId, enabled: boolean) => {
-    setWidgets((prev) => prev.map((widget) => (widget.id === id ? { ...widget, enabled } : widget)));
+    setWidgets((prev) =>
+      prev.map((widget) => (widget.id === id ? { ...widget, enabled } : widget)),
+    );
   };
 
   const handleWidgetDrop = (targetId: HomeWidgetId) => {

From e2d5e4bd1ff932bc0fe62167651f8f4cc871b81f Mon Sep 17 00:00:00 2001
From: Javenn0 <cavidanmurad144@gmail.com>
Date: Fri, 17 Apr 2026 09:43:05 +0400
Subject: [PATCH 03/11] refactor(a11y): add aria-labelledby to role=\

---
 ui/src/pages/SettingsPage.tsx      | 18 ++++++++++++------
 ui/src/pages/WorkspaceHomePage.tsx |  5 ++++-
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/ui/src/pages/SettingsPage.tsx b/ui/src/pages/SettingsPage.tsx
index ddab8be..3dd8867 100644
--- a/ui/src/pages/SettingsPage.tsx
+++ b/ui/src/pages/SettingsPage.tsx
@@ -1808,13 +1808,14 @@ export function SettingsPage() {
                     className="flex items-start justify-between gap-4 rounded-(--radius-md) border border-(--border-subtle) px-4 py-3"
                   >
                     <div>
-                      <p className="text-sm font-medium text-(--txt-primary)">{label}</p>
+                      <p id={`notif-toggle-label-${id}`} className="text-sm font-medium text-(--txt-primary)">{label}</p>
                       <p className="mt-0.5 text-sm text-(--txt-secondary)">{desc}</p>
                     </div>
                     <button
                       type="button"
                       role="switch"
                       aria-checked={value}
+                      aria-labelledby={`notif-toggle-label-${id}`}
                       disabled={!notifPrefsLoaded}
                       onClick={async () => {
                         const next = !value;
@@ -2546,7 +2547,7 @@ export function SettingsPage() {
                 </div>
                 <div className="flex flex-wrap items-start justify-between gap-4 rounded-(--radius-md) border border-(--border-subtle) px-4 py-3">
                   <div>
-                    <p className="text-sm font-medium text-(--txt-primary)">Guest access</p>
+                    <p id={`guest-toggle-label-${selectedProjectId ?? 'project'}`} className="text-sm font-medium text-(--txt-primary)">Guest access</p>
                     <p className="mt-0.5 text-sm text-(--txt-secondary)">
                       This will allow guests to have view access to all the project work items.
                     </p>
@@ -2555,6 +2556,7 @@ export function SettingsPage() {
                     type="button"
                     role="switch"
                     aria-checked={guestAccess}
+                    aria-labelledby={`guest-toggle-label-${selectedProjectId ?? 'project'}`}
                     onClick={async () => {
                       const next = !guestAccess;
                       setGuestAccess(next);
@@ -2796,7 +2798,7 @@ export function SettingsPage() {
                         {id === 'intake' && <IconInbox />}
                       </span>
                       <div>
-                        <p className="text-sm font-medium text-(--txt-primary)">{label}</p>
+                        <p id={`feature-toggle-label-${id}-${selectedProjectId ?? 'project'}`} className="text-sm font-medium text-(--txt-primary)">{label}</p>
                         <p className="mt-0.5 text-sm text-(--txt-secondary)">{desc}</p>
                       </div>
                     </div>
@@ -2804,6 +2806,7 @@ export function SettingsPage() {
                       type="button"
                       role="switch"
                       aria-checked={value}
+                      aria-labelledby={`feature-toggle-label-${id}-${selectedProjectId ?? 'project'}`}
                       onClick={async () => {
                         const next = !value;
                         set(next);
@@ -2842,7 +2845,7 @@ export function SettingsPage() {
                     <IconClock />
                   </span>
                   <div>
-                    <p className="text-sm font-medium text-(--txt-primary)">Time Tracking</p>
+                    <p id={`feature-toggle-label-time-tracking-${selectedProjectId ?? 'project'}`} className="text-sm font-medium text-(--txt-primary)">Time Tracking</p>
                     <p className="mt-0.5 text-sm text-(--txt-secondary)">
                       Log time spent on work items and projects.
                     </p>
@@ -2852,6 +2855,7 @@ export function SettingsPage() {
                   type="button"
                   role="switch"
                   aria-checked={featureTimeTracking}
+                  aria-labelledby={`feature-toggle-label-time-tracking-${selectedProjectId ?? 'project'}`}
                   onClick={async () => {
                     const next = !featureTimeTracking;
                     setFeatureTimeTracking(next);
@@ -3155,7 +3159,7 @@ export function SettingsPage() {
                       <IconArchive />
                     </span>
                     <div>
-                      <p className="text-sm font-medium text-(--txt-primary)">
+                      <p id={`auto-archive-toggle-${selectedProjectId ?? 'project'}`} className="text-sm font-medium text-(--txt-primary)">
                         Auto-archive closed work items
                       </p>
                       <p className="mt-0.5 text-sm text-(--txt-secondary)">
@@ -3167,6 +3171,7 @@ export function SettingsPage() {
                     type="button"
                     role="switch"
                     aria-checked={autoArchive}
+                    aria-labelledby={`auto-archive-toggle-${selectedProjectId ?? 'project'}`}
                     onClick={() => setAutoArchive(!autoArchive)}
                     className={`relative h-6 w-10 shrink-0 rounded-full transition-colors ${autoArchive ? 'bg-(--brand-default)' : 'bg-(--neutral-400)'}`}
                   >
@@ -3181,7 +3186,7 @@ export function SettingsPage() {
                       <IconTrash />
                     </span>
                     <div>
-                      <p className="text-sm font-medium text-(--txt-primary)">
+                      <p id={`auto-close-toggle-${selectedProjectId ?? 'project'}`} className="text-sm font-medium text-(--txt-primary)">
                         Auto-close work items
                       </p>
                       <p className="mt-0.5 text-sm text-(--txt-secondary)">
@@ -3194,6 +3199,7 @@ export function SettingsPage() {
                     type="button"
                     role="switch"
                     aria-checked={autoClose}
+                    aria-labelledby={`auto-close-toggle-${selectedProjectId ?? 'project'}`}
                     onClick={() => setAutoClose(!autoClose)}
                     className={`relative h-6 w-10 shrink-0 rounded-full transition-colors ${autoClose ? 'bg-(--brand-default)' : 'bg-(--neutral-400)'}`}
                   >
diff --git a/ui/src/pages/WorkspaceHomePage.tsx b/ui/src/pages/WorkspaceHomePage.tsx
index f1f982a..d9c5793 100644
--- a/ui/src/pages/WorkspaceHomePage.tsx
+++ b/ui/src/pages/WorkspaceHomePage.tsx
@@ -1239,13 +1239,16 @@ export function WorkspaceHomePage() {
                 <span className="cursor-grab text-(--txt-icon-tertiary)">
                   <IconGripVertical />
                 </span>
-                <span className="text-sm font-medium text-(--txt-primary)">{widget.label}</span>
+                <span id={`widget-toggle-label-${widget.id}`} className="text-sm font-medium text-(--txt-primary)">
+                  {widget.label}
+                </span>
               </div>
               <div className="flex items-center gap-2">
                 <button
                   type="button"
                   role="switch"
                   aria-checked={widget.enabled}
+                  aria-labelledby={`widget-toggle-label-${widget.id}`}
                   onClick={() => handleWidgetEnabledChange(widget.id, !widget.enabled)}
                   className={`relative inline-flex h-6 w-11 items-center rounded-full border transition-colors ${
                     widget.enabled

From 4cde0928999f2df61ca5780a5eadda7028a31a51 Mon Sep 17 00:00:00 2001
From: Javenn0 <cavidanmurad144@gmail.com>
Date: Fri, 17 Apr 2026 09:55:14 +0400
Subject: [PATCH 04/11] fix(widgets): correct drag and drop reordering logic
 and set data transfer

---
 ui/src/pages/WorkspaceHomePage.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/ui/src/pages/WorkspaceHomePage.tsx b/ui/src/pages/WorkspaceHomePage.tsx
index d9c5793..3a1a3c7 100644
--- a/ui/src/pages/WorkspaceHomePage.tsx
+++ b/ui/src/pages/WorkspaceHomePage.tsx
@@ -783,8 +783,10 @@ export function WorkspaceHomePage() {
       if (fromIndex < 0 || targetIndex < 0 || fromIndex === targetIndex) return prev;
       const reordered = [...prev];
       const [moved] = reordered.splice(fromIndex, 1);
-      const insertIndex = fromIndex < targetIndex ? targetIndex - 1 : targetIndex;
-      reordered.splice(insertIndex, 0, moved);
+      // Insert using the original target index after removal:
+      // - moving upward inserts before the target row
+      // - moving downward inserts after the target row
+      reordered.splice(targetIndex, 0, moved);
       return reordered;
     });
     setDraggingWidgetId(null);
@@ -1225,7 +1227,11 @@ export function WorkspaceHomePage() {
             <div
               key={widget.id}
               draggable
-              onDragStart={() => setDraggingWidgetId(widget.id)}
+              onDragStart={(e) => {
+                e.dataTransfer.setData('text/plain', widget.id);
+                e.dataTransfer.effectAllowed = 'move';
+                setDraggingWidgetId(widget.id);
+              }}
               onDragEnd={() => setDraggingWidgetId(null)}
               onDragOver={(e) => e.preventDefault()}
               onDrop={() => handleWidgetDrop(widget.id)}

From de284f1d737106d53ed6e444a4bad92fe068d2df Mon Sep 17 00:00:00 2001
From: Javenn0 <cavidanmurad144@gmail.com>
Date: Fri, 17 Apr 2026 10:11:38 +0400
Subject: [PATCH 05/11] fix(workspace): correct widget reordering logic on
 homepage

---
 ui/src/pages/SettingsPage.tsx      | 38 +++++++++++++++++++++++++-----
 ui/src/pages/WorkspaceHomePage.tsx |  5 +++-
 2 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/ui/src/pages/SettingsPage.tsx b/ui/src/pages/SettingsPage.tsx
index 3dd8867..a47cbb1 100644
--- a/ui/src/pages/SettingsPage.tsx
+++ b/ui/src/pages/SettingsPage.tsx
@@ -1808,7 +1808,12 @@ export function SettingsPage() {
                     className="flex items-start justify-between gap-4 rounded-(--radius-md) border border-(--border-subtle) px-4 py-3"
                   >
                     <div>
-                      <p id={`notif-toggle-label-${id}`} className="text-sm font-medium text-(--txt-primary)">{label}</p>
+                      <p
+                        id={`notif-toggle-label-${id}`}
+                        className="text-sm font-medium text-(--txt-primary)"
+                      >
+                        {label}
+                      </p>
                       <p className="mt-0.5 text-sm text-(--txt-secondary)">{desc}</p>
                     </div>
                     <button
@@ -2547,7 +2552,12 @@ export function SettingsPage() {
                 </div>
                 <div className="flex flex-wrap items-start justify-between gap-4 rounded-(--radius-md) border border-(--border-subtle) px-4 py-3">
                   <div>
-                    <p id={`guest-toggle-label-${selectedProjectId ?? 'project'}`} className="text-sm font-medium text-(--txt-primary)">Guest access</p>
+                    <p
+                      id={`guest-toggle-label-${selectedProjectId ?? 'project'}`}
+                      className="text-sm font-medium text-(--txt-primary)"
+                    >
+                      Guest access
+                    </p>
                     <p className="mt-0.5 text-sm text-(--txt-secondary)">
                       This will allow guests to have view access to all the project work items.
                     </p>
@@ -2798,7 +2808,12 @@ export function SettingsPage() {
                         {id === 'intake' && <IconInbox />}
                       </span>
                       <div>
-                        <p id={`feature-toggle-label-${id}-${selectedProjectId ?? 'project'}`} className="text-sm font-medium text-(--txt-primary)">{label}</p>
+                        <p
+                          id={`feature-toggle-label-${id}-${selectedProjectId ?? 'project'}`}
+                          className="text-sm font-medium text-(--txt-primary)"
+                        >
+                          {label}
+                        </p>
                         <p className="mt-0.5 text-sm text-(--txt-secondary)">{desc}</p>
                       </div>
                     </div>
@@ -2845,7 +2860,12 @@ export function SettingsPage() {
                     <IconClock />
                   </span>
                   <div>
-                    <p id={`feature-toggle-label-time-tracking-${selectedProjectId ?? 'project'}`} className="text-sm font-medium text-(--txt-primary)">Time Tracking</p>
+                    <p
+                      id={`feature-toggle-label-time-tracking-${selectedProjectId ?? 'project'}`}
+                      className="text-sm font-medium text-(--txt-primary)"
+                    >
+                      Time Tracking
+                    </p>
                     <p className="mt-0.5 text-sm text-(--txt-secondary)">
                       Log time spent on work items and projects.
                     </p>
@@ -3159,7 +3179,10 @@ export function SettingsPage() {
                       <IconArchive />
                     </span>
                     <div>
-                      <p id={`auto-archive-toggle-${selectedProjectId ?? 'project'}`} className="text-sm font-medium text-(--txt-primary)">
+                      <p
+                        id={`auto-archive-toggle-${selectedProjectId ?? 'project'}`}
+                        className="text-sm font-medium text-(--txt-primary)"
+                      >
                         Auto-archive closed work items
                       </p>
                       <p className="mt-0.5 text-sm text-(--txt-secondary)">
@@ -3186,7 +3209,10 @@ export function SettingsPage() {
                       <IconTrash />
                     </span>
                     <div>
-                      <p id={`auto-close-toggle-${selectedProjectId ?? 'project'}`} className="text-sm font-medium text-(--txt-primary)">
+                      <p
+                        id={`auto-close-toggle-${selectedProjectId ?? 'project'}`}
+                        className="text-sm font-medium text-(--txt-primary)"
+                      >
                         Auto-close work items
                       </p>
                       <p className="mt-0.5 text-sm text-(--txt-secondary)">
diff --git a/ui/src/pages/WorkspaceHomePage.tsx b/ui/src/pages/WorkspaceHomePage.tsx
index 3a1a3c7..edb27f8 100644
--- a/ui/src/pages/WorkspaceHomePage.tsx
+++ b/ui/src/pages/WorkspaceHomePage.tsx
@@ -1245,7 +1245,10 @@ export function WorkspaceHomePage() {
                 <span className="cursor-grab text-(--txt-icon-tertiary)">
                   <IconGripVertical />
                 </span>
-                <span id={`widget-toggle-label-${widget.id}`} className="text-sm font-medium text-(--txt-primary)">
+                <span
+                  id={`widget-toggle-label-${widget.id}`}
+                  className="text-sm font-medium text-(--txt-primary)"
+                >
                   {widget.label}
                 </span>
               </div>

From 4fb43700663255bc817d8c257aaa0ce52b7cfb3f Mon Sep 17 00:00:00 2001
From: Javenn0 <cavidanmurad144@gmail.com>
Date: Fri, 17 Apr 2026 10:56:02 +0400
Subject: [PATCH 06/11] feat(home-widgets): extract event constant and dispatch
 function

---
 ui/src/components/layout/PageHeader.tsx | 5 ++---
 ui/src/lib/homeWidgetsEvents.ts         | 8 ++++++++
 ui/src/pages/WorkspaceHomePage.tsx      | 5 +++--
 3 files changed, 13 insertions(+), 5 deletions(-)
 create mode 100644 ui/src/lib/homeWidgetsEvents.ts

diff --git a/ui/src/components/layout/PageHeader.tsx b/ui/src/components/layout/PageHeader.tsx
index 93ab2a5..50975f4 100644
--- a/ui/src/components/layout/PageHeader.tsx
+++ b/ui/src/components/layout/PageHeader.tsx
@@ -40,6 +40,7 @@ import {
   PROJECT_CYCLES_FILTER_EVENT,
   PROJECT_CYCLES_REFRESH_EVENT,
 } from '../../lib/projectCyclesEvents';
+import { dispatchOpenHomeWidgets } from '../../lib/homeWidgetsEvents';
 import {
   DEFAULT_PROJECT_ISSUES_FILTERS,
   PROJECT_ISSUES_DISPLAY_EVENT,
@@ -753,9 +754,7 @@ function HomeHeader() {
           variant="ghost"
           size="sm"
           className="gap-1.5 text-[13px] font-medium text-(--txt-secondary)"
-          onClick={() => {
-            window.dispatchEvent(new Event('devlane:open-home-widgets'));
-          }}
+          onClick={() => dispatchOpenHomeWidgets()}
         >
           <IconGrid />
           Manage widgets
diff --git a/ui/src/lib/homeWidgetsEvents.ts b/ui/src/lib/homeWidgetsEvents.ts
new file mode 100644
index 0000000..885529d
--- /dev/null
+++ b/ui/src/lib/homeWidgetsEvents.ts
@@ -0,0 +1,8 @@
+export const OPEN_HOME_WIDGETS = 'devlane:open-home-widgets';
+
+export type OpenHomeWidgetsPayload = unknown;
+
+export function dispatchOpenHomeWidgets(payload?: OpenHomeWidgetsPayload) {
+  if (typeof window === 'undefined') return;
+  window.dispatchEvent(new CustomEvent(OPEN_HOME_WIDGETS, { detail: payload }));
+}
diff --git a/ui/src/pages/WorkspaceHomePage.tsx b/ui/src/pages/WorkspaceHomePage.tsx
index edb27f8..89452ff 100644
--- a/ui/src/pages/WorkspaceHomePage.tsx
+++ b/ui/src/pages/WorkspaceHomePage.tsx
@@ -8,6 +8,7 @@ import { quickLinksService } from '../services/quickLinksService';
 import { stickiesService } from '../services/stickiesService';
 import { StickyNoteCard } from '../components/stickies/StickyNoteCard';
 import { pickRandomStickyBackground } from '../components/stickies/stickyPalette';
+import { OPEN_HOME_WIDGETS } from '../lib/homeWidgetsEvents';
 import { recentsService } from '../services/recentsService';
 import type {
   WorkspaceApiResponse,
@@ -629,8 +630,8 @@ export function WorkspaceHomePage() {
   }, [widgetsStorageKey, widgets, widgetsHydrated]);
   useEffect(() => {
     const openFromHeader = () => setManageWidgetsOpen(true);
-    window.addEventListener('devlane:open-home-widgets', openFromHeader);
-    return () => window.removeEventListener('devlane:open-home-widgets', openFromHeader);
+    window.addEventListener(OPEN_HOME_WIDGETS, openFromHeader as EventListener);
+    return () => window.removeEventListener(OPEN_HOME_WIDGETS, openFromHeader as EventListener);
   }, []);
   useEffect(() => {
     const el = document.documentElement;

From 7ff68a9214013e71101fb2547bd8a3227ba69497 Mon Sep 17 00:00:00 2001
From: Javenn0 <cavidanmurad144@gmail.com>
Date: Fri, 17 Apr 2026 11:06:27 +0400
Subject: [PATCH 07/11] refactor(ui): update pages for ui

---
 ui/src/pages/WorkspaceHomePage.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/ui/src/pages/WorkspaceHomePage.tsx b/ui/src/pages/WorkspaceHomePage.tsx
index 89452ff..3e370be 100644
--- a/ui/src/pages/WorkspaceHomePage.tsx
+++ b/ui/src/pages/WorkspaceHomePage.tsx
@@ -276,13 +276,13 @@ function normalizeWidgets(raw: unknown): HomeWidget[] {
     const enabled = (item as { enabled?: unknown }).enabled;
     if (id === 'quicklinks' || id === 'recents' || id === 'stickies') {
       if (byId.has(id)) continue;
+      // Derive the visible label from the canonical DEFAULT_HOME_WIDGETS mapping
+      // Do NOT trust or re-use any stored `label` value — persist only stable fields
+      // (id, enabled, order). This ensures label changes or localization propagate.
       const fallbackLabel = DEFAULT_HOME_WIDGETS.find((widget) => widget.id === id)?.label ?? id;
-      const rawLabel = (item as { label?: unknown }).label;
-      const label =
-        typeof rawLabel === 'string' && rawLabel.trim().length > 0 ? rawLabel : fallbackLabel;
       const normalized: HomeWidget = {
         id,
-        label,
+        label: fallbackLabel,
         enabled: typeof enabled === 'boolean' ? enabled : true,
       };
       byId.set(id, normalized);
@@ -626,7 +626,11 @@ export function WorkspaceHomePage() {
 
   useEffect(() => {
     if (!widgetsStorageKey || !widgetsHydrated) return;
-    localStorage.setItem(widgetsStorageKey, JSON.stringify(widgets));
+    // Persist only stable widget state (id + enabled + order). Do not persist
+    // the visible `label` so that future label updates or localization changes
+    // are applied automatically for existing users.
+    const payload = widgets.map((w) => ({ id: w.id, enabled: w.enabled }));
+    localStorage.setItem(widgetsStorageKey, JSON.stringify(payload));
   }, [widgetsStorageKey, widgets, widgetsHydrated]);
   useEffect(() => {
     const openFromHeader = () => setManageWidgetsOpen(true);

From 8dcc335f0becc9ce04e3f2342be610b4a023cd76 Mon Sep 17 00:00:00 2001
From: Javenn0 <cavidanmurad144@gmail.com>
Date: Fri, 17 Apr 2026 11:33:29 +0400
Subject: [PATCH 08/11] fix(workspace): improve widget persistence,
 drag-and-drop validation, and toggle accessibility

---
 ui/src/pages/WorkspaceHomePage.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/ui/src/pages/WorkspaceHomePage.tsx b/ui/src/pages/WorkspaceHomePage.tsx
index 3e370be..7358ce0 100644
--- a/ui/src/pages/WorkspaceHomePage.tsx
+++ b/ui/src/pages/WorkspaceHomePage.tsx
@@ -630,7 +630,11 @@ export function WorkspaceHomePage() {
     // the visible `label` so that future label updates or localization changes
     // are applied automatically for existing users.
     const payload = widgets.map((w) => ({ id: w.id, enabled: w.enabled }));
-    localStorage.setItem(widgetsStorageKey, JSON.stringify(payload));
+    try {
+      localStorage.setItem(widgetsStorageKey, JSON.stringify(payload));
+    } catch {
+      // Ignore persistence failures (e.g. quota exceeded / private mode).
+    }
   }, [widgetsStorageKey, widgets, widgetsHydrated]);
   useEffect(() => {
     const openFromHeader = () => setManageWidgetsOpen(true);
@@ -1239,7 +1243,14 @@ export function WorkspaceHomePage() {
               }}
               onDragEnd={() => setDraggingWidgetId(null)}
               onDragOver={(e) => e.preventDefault()}
-              onDrop={() => handleWidgetDrop(widget.id)}
+              onDrop={(e) => {
+                e.preventDefault();
+                const draggedWidgetId = e.dataTransfer.getData('text/plain');
+                if (draggedWidgetId && !widgets.some((candidate) => candidate.id === draggedWidgetId)) {
+                  return;
+                }
+                handleWidgetDrop(widget.id);
+              }}
               className={`flex items-center justify-between rounded-(--radius-md) border px-3 py-2 ${
                 draggingWidgetId === widget.id
                   ? 'border-(--border-strong) bg-(--bg-layer-1)'
@@ -1262,6 +1273,7 @@ export function WorkspaceHomePage() {
                   type="button"
                   role="switch"
                   aria-checked={widget.enabled}
+                  aria-label={`Toggle ${widget.label}`}
                   aria-labelledby={`widget-toggle-label-${widget.id}`}
                   onClick={() => handleWidgetEnabledChange(widget.id, !widget.enabled)}
                   className={`relative inline-flex h-6 w-11 items-center rounded-full border transition-colors ${

From a08abc42c720d6ecb2f7ac1a92c7da8109262f81 Mon Sep 17 00:00:00 2001
From: Javenn0 <cavidanmurad144@gmail.com>
Date: Fri, 17 Apr 2026 11:53:56 +0400
Subject: [PATCH 09/11] refactor(ui): update pages for ui

---
 ui/src/pages/WorkspaceHomePage.tsx | 48 +++++++++++++++++++-----------
 1 file changed, 31 insertions(+), 17 deletions(-)

diff --git a/ui/src/pages/WorkspaceHomePage.tsx b/ui/src/pages/WorkspaceHomePage.tsx
index 7358ce0..0a801aa 100644
--- a/ui/src/pages/WorkspaceHomePage.tsx
+++ b/ui/src/pages/WorkspaceHomePage.tsx
@@ -268,31 +268,42 @@ const DEFAULT_HOME_WIDGETS: HomeWidget[] = [
 
 function normalizeWidgets(raw: unknown): HomeWidget[] {
   if (!Array.isArray(raw)) return [...DEFAULT_HOME_WIDGETS];
+
+  // Build a quick lookup of canonical labels so we always derive the visible
+  // label from code (not from persisted data).
+  const defaultLabelById: Record<string, string> = {};
+  for (const w of DEFAULT_HOME_WIDGETS) defaultLabelById[w.id] = w.label;
+
   const byId = new Map<HomeWidgetId, HomeWidget>();
   const ordered: HomeWidget[] = [];
+
   for (const item of raw) {
     if (!item || typeof item !== 'object') continue;
-    const id = (item as { id?: unknown }).id;
-    const enabled = (item as { enabled?: unknown }).enabled;
-    if (id === 'quicklinks' || id === 'recents' || id === 'stickies') {
-      if (byId.has(id)) continue;
-      // Derive the visible label from the canonical DEFAULT_HOME_WIDGETS mapping
-      // Do NOT trust or re-use any stored `label` value — persist only stable fields
-      // (id, enabled, order). This ensures label changes or localization propagate.
-      const fallbackLabel = DEFAULT_HOME_WIDGETS.find((widget) => widget.id === id)?.label ?? id;
-      const normalized: HomeWidget = {
-        id,
-        label: fallbackLabel,
-        enabled: typeof enabled === 'boolean' ? enabled : true,
-      };
-      byId.set(id, normalized);
-      ordered.push(normalized);
-    }
+    const maybeId = (item as { id?: unknown }).id;
+    const maybeEnabled = (item as { enabled?: unknown }).enabled;
+    if (maybeId !== 'quicklinks' && maybeId !== 'recents' && maybeId !== 'stickies') continue;
+    const id = maybeId as HomeWidgetId;
+    if (byId.has(id)) continue;
+
+    const enabled = typeof maybeEnabled === 'boolean' ? maybeEnabled : true;
+
+    const normalized: HomeWidget = {
+      id,
+      // ALWAYS derive label from the canonical defaults so persisted labels
+      // or older formats cannot freeze the visible text.
+      label: defaultLabelById[id] ?? id,
+      enabled,
+    };
+
+    byId.set(id, normalized);
+    ordered.push(normalized);
   }
+
   const merged: HomeWidget[] = [...ordered];
   for (const widget of DEFAULT_HOME_WIDGETS) {
     if (!byId.has(widget.id)) merged.push(widget);
   }
+
   return merged;
 }
 
@@ -1246,7 +1257,10 @@ export function WorkspaceHomePage() {
               onDrop={(e) => {
                 e.preventDefault();
                 const draggedWidgetId = e.dataTransfer.getData('text/plain');
-                if (draggedWidgetId && !widgets.some((candidate) => candidate.id === draggedWidgetId)) {
+                if (
+                  draggedWidgetId &&
+                  !widgets.some((candidate) => candidate.id === draggedWidgetId)
+                ) {
                   return;
                 }
                 handleWidgetDrop(widget.id);

From 807ae7f8b9aaddc6df1fec5fd6d1637b897c6d15 Mon Sep 17 00:00:00 2001
From: Javenn0 <cavidanmurad144@gmail.com>
Date: Fri, 17 Apr 2026 12:11:10 +0400
Subject: [PATCH 10/11] fix(homepage): improve widget reordering by
 prioritizing dataTransfer for dragged ID

---
 ui/src/pages/WorkspaceHomePage.tsx | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/ui/src/pages/WorkspaceHomePage.tsx b/ui/src/pages/WorkspaceHomePage.tsx
index 0a801aa..633fc07 100644
--- a/ui/src/pages/WorkspaceHomePage.tsx
+++ b/ui/src/pages/WorkspaceHomePage.tsx
@@ -269,10 +269,12 @@ const DEFAULT_HOME_WIDGETS: HomeWidget[] = [
 function normalizeWidgets(raw: unknown): HomeWidget[] {
   if (!Array.isArray(raw)) return [...DEFAULT_HOME_WIDGETS];
 
-  // Build a quick lookup of canonical labels so we always derive the visible
-  // label from code (not from persisted data).
-  const defaultLabelById: Record<string, string> = {};
-  for (const w of DEFAULT_HOME_WIDGETS) defaultLabelById[w.id] = w.label;
+  // Build a typed lookup of canonical labels so we always derive the visible
+  // label from code (not from persisted data). Use `HomeWidgetId` keys so
+  // the map only contains known widget ids and is properly type-checked.
+  const defaultLabelById: Record<HomeWidgetId, string> = Object.fromEntries(
+    DEFAULT_HOME_WIDGETS.map((w) => [w.id, w.label]),
+  ) as Record<HomeWidgetId, string>;
 
   const byId = new Map<HomeWidgetId, HomeWidget>();
   const ordered: HomeWidget[] = [];
@@ -795,10 +797,14 @@ export function WorkspaceHomePage() {
     );
   };
 
-  const handleWidgetDrop = (targetId: HomeWidgetId) => {
-    if (!draggingWidgetId || draggingWidgetId === targetId) return;
+  // Accept an optional `draggedId` (from dataTransfer) to ensure the drop
+  // reorder uses a single source of truth. If not provided, fall back to
+  // `draggingWidgetId` state for compatibility with existing drag flows.
+  const handleWidgetDrop = (targetId: HomeWidgetId, draggedId?: HomeWidgetId) => {
+    const fromId = draggedId ?? draggingWidgetId;
+    if (!fromId || fromId === targetId) return;
     setWidgets((prev) => {
-      const fromIndex = prev.findIndex((widget) => widget.id === draggingWidgetId);
+      const fromIndex = prev.findIndex((widget) => widget.id === fromId);
       const targetIndex = prev.findIndex((widget) => widget.id === targetId);
       if (fromIndex < 0 || targetIndex < 0 || fromIndex === targetIndex) return prev;
       const reordered = [...prev];
@@ -1256,14 +1262,17 @@ export function WorkspaceHomePage() {
               onDragOver={(e) => e.preventDefault()}
               onDrop={(e) => {
                 e.preventDefault();
-                const draggedWidgetId = e.dataTransfer.getData('text/plain');
+                const draggedWidgetId = e.dataTransfer.getData('text/plain') as string;
                 if (
                   draggedWidgetId &&
-                  !widgets.some((candidate) => candidate.id === draggedWidgetId)
+                  !widgets.some((candidate) => candidate.id === (draggedWidgetId as HomeWidgetId))
                 ) {
                   return;
                 }
-                handleWidgetDrop(widget.id);
+                // Pass the dragged id to handleWidgetDrop so reordering is driven
+                // by the drag source (dataTransfer) rather than relying on state
+                // which can be out-of-sync due to timing.
+                handleWidgetDrop(widget.id, (draggedWidgetId as HomeWidgetId) || undefined);
               }}
               className={`flex items-center justify-between rounded-(--radius-md) border px-3 py-2 ${
                 draggingWidgetId === widget.id
@@ -1287,7 +1296,6 @@ export function WorkspaceHomePage() {
                   type="button"
                   role="switch"
                   aria-checked={widget.enabled}
-                  aria-label={`Toggle ${widget.label}`}
                   aria-labelledby={`widget-toggle-label-${widget.id}`}
                   onClick={() => handleWidgetEnabledChange(widget.id, !widget.enabled)}
                   className={`relative inline-flex h-6 w-11 items-center rounded-full border transition-colors ${

From cbfd2bc9e7ee44ed8da2ecf16cc11bf018e34b22 Mon Sep 17 00:00:00 2001
From: Javenn0 <cavidanmurad144@gmail.com>
Date: Fri, 17 Apr 2026 12:26:33 +0400
Subject: [PATCH 11/11] style(ui): use brand default colors for widget toggle
 switch

---
 ui/src/pages/WorkspaceHomePage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/pages/WorkspaceHomePage.tsx b/ui/src/pages/WorkspaceHomePage.tsx
index 633fc07..83e74f1 100644
--- a/ui/src/pages/WorkspaceHomePage.tsx
+++ b/ui/src/pages/WorkspaceHomePage.tsx
@@ -1300,7 +1300,7 @@ export function WorkspaceHomePage() {
                   onClick={() => handleWidgetEnabledChange(widget.id, !widget.enabled)}
                   className={`relative inline-flex h-6 w-11 items-center rounded-full border transition-colors ${
                     widget.enabled
-                      ? 'border-blue-600 bg-blue-600'
+                      ? 'border-(--brand-default) bg-(--brand-default)'
                       : 'border-(--border-subtle) bg-(--bg-layer-2)'
                   }`}
                 >