Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Javenn0 merged 12 commits into from
Apr 17, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
3537a55
feat(home): enable reordering and toggling home page widgets
Javenn0 Apr 15, 2026
a66f17d
style(homepage): format widget enabled change handler
Javenn0 Apr 15, 2026
e2d5e4b
refactor(a11y): add aria-labelledby to role=\
Javenn0 Apr 17, 2026
4cde092
fix(widgets): correct drag and drop reordering logic and set data tra…
Javenn0 Apr 17, 2026
de284f1
fix(workspace): correct widget reordering logic on homepage
Javenn0 Apr 17, 2026
4fb4370
feat(home-widgets): extract event constant and dispatch function
Javenn0 Apr 17, 2026
7ff68a9
refactor(ui): update pages for ui
Javenn0 Apr 17, 2026
8dcc335
fix(workspace): improve widget persistence, drag-and-drop validation,…
Javenn0 Apr 17, 2026
a08abc4
refactor(ui): update pages for ui
Javenn0 Apr 17, 2026
807ae7f
fix(homepage): improve widget reordering by prioritizing dataTransfer…
Javenn0 Apr 17, 2026
cbfd2bc
style(ui): use brand default colors for widget toggle switch
Javenn0 Apr 17, 2026
e472dcd
Merge branch 'main' of https://github.com/Devlaner/devlane into 85-im…
nazarli-shabnam Apr 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions ui/src/components/layout/PageHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -752,6 +753,7 @@ function HomeHeader() {
variant="ghost"
size="sm"
className="gap-1.5 text-[13px] font-medium text-(--txt-secondary)"
onClick={() => dispatchOpenHomeWidgets()}
>
<IconGrid />
Manage widgets
Expand Down
8 changes: 8 additions & 0 deletions ui/src/lib/homeWidgetsEvents.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 }));
}
44 changes: 38 additions & 6 deletions ui/src/pages/SettingsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1808,13 +1808,19 @@ 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;
Expand Down Expand Up @@ -2546,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 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>
Expand All @@ -2555,6 +2566,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);
Expand Down Expand Up @@ -2796,14 +2808,20 @@ 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>
<button
type="button"
role="switch"
aria-checked={value}
aria-labelledby={`feature-toggle-label-${id}-${selectedProjectId ?? 'project'}`}
onClick={async () => {
const next = !value;
set(next);
Expand Down Expand Up @@ -2842,7 +2860,12 @@ 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>
Expand All @@ -2852,6 +2875,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);
Expand Down Expand Up @@ -3155,7 +3179,10 @@ 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)">
Expand All @@ -3167,6 +3194,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)'}`}
>
Expand All @@ -3181,7 +3209,10 @@ 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)">
Expand All @@ -3194,6 +3225,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)'}`}
>
Expand Down
Loading
Loading