feat(home): enable reordering and toggling home page widgets by Javenn0 · Pull Request #91 · Devlaner/devlane

Javenn0 · 2026-04-15T09:27:08Z

closes #85

This pull request introduces a customizable widget system for the workspace home page, allowing users to manage which home page widgets are visible and in what order. The changes include the ability to enable/disable widgets, reorder them via drag-and-drop, and persist these preferences per workspace using local storage. The home page UI is refactored to render widgets dynamically based on user preferences.

Home Page Widget Customization:

Added a widget management modal (Manage widgets) that allows users to enable/disable widgets and reorder them via drag-and-drop, with a new icon and UI for reordering (IconGripVertical, modal implementation, drag-and-drop logic) [1] [2] [3].
User widget preferences (enabled state and order) are persisted per workspace using localStorage, and are loaded and normalized on page load [1] [2].
The home page now renders widgets dynamically based on the enabled/ordered list from user preferences, instead of hardcoding the order and visibility [1] [2] [3] [4].

Integration and UI Enhancements:

Added a "Manage widgets" button in the HomeHeader that triggers the widget management modal via a custom event.
Refactored imports and added type annotations to support new widget management logic.

Copilot

Pull request overview

Adds end-user customization for the workspace home page by allowing widgets to be reordered and toggled on/off (via a “Manage widgets” modal), with persistence per workspace.

Changes:

Introduces a home widget model (HomeWidgetId/HomeWidget) with normalization + localStorage persistence keyed by workspace slug.
Adds a “Manage widgets” modal supporting drag-and-drop reordering and enable/disable toggles.
Wires the PageHeader “Manage widgets” button to open the modal via a window event.

Reviewed changes

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

File	Description
ui/src/pages/WorkspaceHomePage.tsx	Implements widget state, persistence/normalization, modal UI, DnD reorder, and enabled filtering for rendered home sections.
ui/src/components/layout/PageHeader.tsx	Adds a header button click handler to open the home widgets modal via a dispatched window event.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-15T09:30:39Z

+                <button
+                  type="button"
+                  role="switch"
+                  aria-checked={widget.enabled}


The switch control has role="switch"/aria-checked but no accessible name. Screen readers will announce an unlabeled switch. Add an aria-label (e.g., including the widget label) or link it via aria-labelledby to the visible widget label text.

Suggested change

aria-checked={widget.enabled}

aria-checked={widget.enabled}

aria-label={`Toggle ${widget.label}`}

Copilot

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

nazarli-shabnam

@Javenn0 consider copilot warnings.

…nsfer

Copilot

Pull request overview

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

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot

Pull request overview

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

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

… and toggle accessibility

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-17T08:00:17Z

+  const sectionByWidgetId: Record<HomeWidgetId, ReactNode> = {
+    quicklinks: (


sectionByWidgetId is built as Record<HomeWidgetId, ReactNode>, which eagerly evaluates all widget JSX every render (including the stickies filter/sort IIFE), even when a widget is disabled. Consider storing render functions/components (e.g. Record<HomeWidgetId, () => ReactNode>) or rendering the section inline in the .map() so disabled widgets avoid the extra work.

Suggested change

const sectionByWidgetId: Record<HomeWidgetId, ReactNode> = {

quicklinks: (

const sectionByWidgetId: Record<HomeWidgetId, () => ReactNode> = {

quicklinks: () => (

Copilot · 2026-04-17T08:00:18Z

+              onDrop={(e) => {
+                e.preventDefault();
+                const draggedWidgetId = e.dataTransfer.getData('text/plain');
+                if (
+                  draggedWidgetId &&
+                  !widgets.some((candidate) => candidate.id === draggedWidgetId)
+                ) {
+                  return;
+                }
+                handleWidgetDrop(widget.id);
+              }}


The drop handler reads draggedWidgetId from dataTransfer but handleWidgetDrop reorders based on the draggingWidgetId state. This can get out of sync (e.g., state update timing) and makes the dataTransfer validation effectively unused. Consider passing the dragged id into handleWidgetDrop (or deriving it solely from dataTransfer) so reordering is driven by a single source of truth.

… for dragged ID

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-17T08:16:41Z

+                  id={`widget-toggle-label-${widget.id}`}
+                  className="text-sm font-medium text-(--txt-primary)"
+                >
+                  {widget.label}
+                </span>


The manage-widgets switch sets both aria-label and aria-labelledby. This can result in duplicate/competing accessible names and is inconsistent with the other switches in the codebase (which use aria-labelledby). Prefer keeping just aria-labelledby (or just aria-label) so the computed name is unambiguous.

Copilot · 2026-04-17T08:16:41Z

+              </div>
+              <div className="flex items-center gap-2">
+                <button
+                  type="button"
+                  role="switch"


The switch styling uses hard-coded Tailwind blues (border-blue-600 bg-blue-600). Elsewhere (e.g., SettingsPage switches) the app uses design tokens like bg-(--brand-default)/bg-(--neutral-400). Using the token classes here will keep the control consistent with theming (including dark mode) and future palette changes.

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-17T08:42:10Z

+          {widgets.map((widget) => (
+            <div
+              key={widget.id}
+              draggable
+              onDragStart={(e) => {
+                e.dataTransfer.setData('text/plain', widget.id);
+                e.dataTransfer.effectAllowed = 'move';
+                setDraggingWidgetId(widget.id);
+              }}
+              onDragEnd={() => setDraggingWidgetId(null)}
+              onDragOver={(e) => e.preventDefault()}
+              onDrop={(e) => {


The widget reorder UI is drag-and-drop only. As implemented, there’s no keyboard-accessible way to change widget order (and HTML5 drag-and-drop is typically not usable with keyboard/screen readers), which makes this modal inaccessible for non-pointer users. Consider adding explicit “Move up / Move down” controls (or another keyboard-operable ordering mechanism) in addition to drag-and-drop, and ensure the order change is reachable via Tab/Enter/Space.

Copilot · 2026-04-17T08:42:11Z

+    const openFromHeader = () => setManageWidgetsOpen(true);
+    window.addEventListener(OPEN_HOME_WIDGETS, openFromHeader as EventListener);
+    return () => window.removeEventListener(OPEN_HOME_WIDGETS, openFromHeader as EventListener);


The event listener uses openFromHeader as EventListener casts when adding/removing the listener. This hides type mismatches and makes the handler signature unclear. Prefer defining openFromHeader with an Event parameter (even if unused) or typing it as an EventListener so the cast isn’t needed, while keeping the same function reference for removeEventListener.

Suggested change

const openFromHeader = () => setManageWidgetsOpen(true);

window.addEventListener(OPEN_HOME_WIDGETS, openFromHeader as EventListener);

return () => window.removeEventListener(OPEN_HOME_WIDGETS, openFromHeader as EventListener);

const openFromHeader = (_event: Event) => setManageWidgetsOpen(true);

window.addEventListener(OPEN_HOME_WIDGETS, openFromHeader);

return () => window.removeEventListener(OPEN_HOME_WIDGETS, openFromHeader);

…plement-manage-widgets-modal-in-home-page

nazarli-shabnam

feat(home): enable reordering and toggling home page widgets

3537a55

Copilot AI review requested due to automatic review settings April 15, 2026 09:27

Javenn0 linked an issue Apr 15, 2026 that may be closed by this pull request

Implement Manage widgets modal in home page #85

Closed

Copilot started reviewing on behalf of Javenn0 April 15, 2026 09:27 View session

Copilot AI reviewed Apr 15, 2026

View reviewed changes

style(homepage): format widget enabled change handler

a66f17d

Javenn0 requested a review from Copilot April 15, 2026 09:53

Copilot started reviewing on behalf of Javenn0 April 15, 2026 09:53 View session

Copilot AI reviewed Apr 15, 2026

View reviewed changes

Comment thread ui/src/pages/WorkspaceHomePage.tsx Outdated

Comment thread ui/src/components/layout/PageHeader.tsx Outdated

Comment thread ui/src/pages/WorkspaceHomePage.tsx Outdated

Comment thread ui/src/pages/WorkspaceHomePage.tsx Outdated

Javenn0 requested review from Rafetikus, martian56 and nazarli-shabnam April 15, 2026 10:02

nazarli-shabnam assigned Javenn0 Apr 15, 2026

nazarli-shabnam added the enhancement New feature or request label Apr 15, 2026

nazarli-shabnam added this to the Deadline milestone Apr 15, 2026

nazarli-shabnam requested changes Apr 15, 2026

View reviewed changes

Javenn0 added 2 commits April 17, 2026 09:43

refactor(a11y): add aria-labelledby to role=\

e2d5e4b

fix(widgets): correct drag and drop reordering logic and set data tra…

4cde092

…nsfer

Javenn0 requested a review from Copilot April 17, 2026 05:59

Copilot started reviewing on behalf of Javenn0 April 17, 2026 05:59 View session

Copilot AI reviewed Apr 17, 2026

View reviewed changes

Comment thread ui/src/pages/WorkspaceHomePage.tsx Outdated

Comment thread ui/src/pages/WorkspaceHomePage.tsx Outdated

fix(workspace): correct widget reordering logic on homepage

de284f1

Javenn0 requested a review from Copilot April 17, 2026 06:20

Copilot started reviewing on behalf of Javenn0 April 17, 2026 06:20 View session

Copilot AI reviewed Apr 17, 2026

View reviewed changes

Comment thread ui/src/pages/WorkspaceHomePage.tsx Outdated

Comment thread ui/src/pages/WorkspaceHomePage.tsx Outdated

Javenn0 added 4 commits April 17, 2026 10:56

feat(home-widgets): extract event constant and dispatch function

4fb4370

refactor(ui): update pages for ui

7ff68a9

fix(workspace): improve widget persistence, drag-and-drop validation,…

8dcc335

… and toggle accessibility

refactor(ui): update pages for ui

a08abc4

Javenn0 requested a review from Copilot April 17, 2026 07:55

Copilot started reviewing on behalf of Javenn0 April 17, 2026 07:55 View session

Javenn0 requested a review from nazarli-shabnam April 17, 2026 07:59

Copilot AI reviewed Apr 17, 2026

View reviewed changes

fix(homepage): improve widget reordering by prioritizing dataTransfer…

807ae7f

… for dragged ID

Javenn0 requested a review from Copilot April 17, 2026 08:12

Copilot started reviewing on behalf of Javenn0 April 17, 2026 08:13 View session

Copilot AI reviewed Apr 17, 2026

View reviewed changes

style(ui): use brand default colors for widget toggle switch

cbfd2bc

Javenn0 requested a review from Copilot April 17, 2026 08:37

Copilot started reviewing on behalf of Javenn0 April 17, 2026 08:38 View session

Copilot AI reviewed Apr 17, 2026

View reviewed changes

Merge branch 'main' of https://github.com/Devlaner/devlane into 85-im…

e472dcd

…plement-manage-widgets-modal-in-home-page

nazarli-shabnam approved these changes Apr 17, 2026

View reviewed changes

nazarli-shabnam added the bug Something isn't working label Apr 17, 2026

Javenn0 merged commit 175558c into main Apr 17, 2026
7 checks passed

	aria-checked={widget.enabled}
	aria-checked={widget.enabled}
	aria-label={`Toggle ${widget.label}`}

		const sectionByWidgetId: Record<HomeWidgetId, ReactNode> = {
		quicklinks: (

Conversation

Javenn0 commented Apr 15, 2026 • edited by nazarli-shabnam Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nazarli-shabnam left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

nazarli-shabnam left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

Javenn0 commented Apr 15, 2026 •

edited by nazarli-shabnam

Loading