Unified settings modal + dashboard shell redesign #69

2026-03-26T09:11:45Z

uz1mani commented

2026-03-26 09:11:45 +00:00

(Migrated from github.com)

Summary

Unified settings modal with full feature parity across 3 contexts (Site, Organization, Account) and 15 tabs
Dokploy-style dashboard shell with page title in top bar, aligned collapse toggle
Glassmorphism treatment matching ciphera-website header dropdowns
Dirty state tracking with modal-level save bar and discard flow

Changes

Dashboard Shell

Collapse toggle aligned with sidebar AppLauncher (Dokploy-style positioning)
Page title in top bar derived from current route
Downsized h1 headers across all 10 site pages — top bar is primary, page heading is secondary
Glassmorphism sidebar, site picker portal, notification animations

Site tabs: General (danger zone, script setup, verification), Goals, Visibility (password management), Privacy (retention, excluded paths,
PageSpeed frequency, privacy snippet), Bot & Spam (session review with bulk actions), Reports (create/edit modals for reports + alerts),
Integrations (BunnyCDN inline setup, GSC connection details)
Workspace tabs: General (delete org with confirmation), Members (removal + pending invitations), Billing (invoice list), Notifications, Audit
(filtering + pagination)
Account tabs: Profile (native form replacing SharedProfileSettings), Security, Devices
All entry points wired to unified modal — legacy SettingsModalWrapper no longer rendered

Save System

Dirty state tracking on all form tabs (General, Visibility, Privacy, Bot & Spam, Workspace General, Notifications, Account Profile)
Modal-level save bar — appears when dirty, shows "Save or discard to continue" when navigating away
Script features, PageSpeed frequency, notification toggles all batch through Save Changes
SWR revalidation guard prevents form state reset

Design Consistency

Shared DangerZone component used across 3 tabs
Card blocks for toggle rows, bare labels for text inputs
Standardized spacing (space-y-6), dividers (pt-6 border-t), helper text (text-xs text-neutral-500)
All inputs use @ciphera-net/ui components (Input, Select, Toggle, Button)
Action buttons always visible (no hover-only opacity)
Real Google + BunnyCDN SVG logos, LinkBreak icon for disconnect

Glassmorphism & Animation

Always-mounted glass panel keeps GPU backdrop-filter composited
Content animates in/out via Framer Motion (scale + opacity), glass panel instant on open, fades on close
No backdrop-filter flash on rapid open/close

Test Plan

Open/close settings with comma hotkey on all pages
Toggle privacy settings → verify save bar appears → save → verify persistence
Change site name → switch to Organization context → verify discard prompt
Delete site/org/account flows with confirmation
Script feature toggles persist after save + modal re-open
Integration connect/disconnect for GSC and BunnyCDN
Report/alert create, edit, test, toggle, delete
Audit log filtering and pagination
Mobile sidebar navigation still works

## Summary - Unified settings modal with full feature parity across 3 contexts (Site, Organization, Account) and 15 tabs - Dokploy-style dashboard shell with page title in top bar, aligned collapse toggle - Glassmorphism treatment matching ciphera-website header dropdowns - Dirty state tracking with modal-level save bar and discard flow ## Changes ### Dashboard Shell - Collapse toggle aligned with sidebar AppLauncher (Dokploy-style positioning) - Page title in top bar derived from current route - Downsized h1 headers across all 10 site pages — top bar is primary, page heading is secondary - Glassmorphism sidebar, site picker portal, notification animations ### Unified Settings Modal (13 migration tasks) - **Site tabs:** General (danger zone, script setup, verification), Goals, Visibility (password management), Privacy (retention, excluded paths, PageSpeed frequency, privacy snippet), Bot & Spam (session review with bulk actions), Reports (create/edit modals for reports + alerts), Integrations (BunnyCDN inline setup, GSC connection details) - **Workspace tabs:** General (delete org with confirmation), Members (removal + pending invitations), Billing (invoice list), Notifications, Audit (filtering + pagination) - **Account tabs:** Profile (native form replacing SharedProfileSettings), Security, Devices - All entry points wired to unified modal — legacy SettingsModalWrapper no longer rendered ### Save System - Dirty state tracking on all form tabs (General, Visibility, Privacy, Bot & Spam, Workspace General, Notifications, Account Profile) - Modal-level save bar — appears when dirty, shows "Save or discard to continue" when navigating away - Script features, PageSpeed frequency, notification toggles all batch through Save Changes - SWR revalidation guard prevents form state reset ### Design Consistency - Shared DangerZone component used across 3 tabs - Card blocks for toggle rows, bare labels for text inputs - Standardized spacing (space-y-6), dividers (pt-6 border-t), helper text (text-xs text-neutral-500) - All inputs use @ciphera-net/ui components (Input, Select, Toggle, Button) - Action buttons always visible (no hover-only opacity) - Real Google + BunnyCDN SVG logos, LinkBreak icon for disconnect ### Glassmorphism & Animation - Always-mounted glass panel keeps GPU backdrop-filter composited - Content animates in/out via Framer Motion (scale + opacity), glass panel instant on open, fades on close - No backdrop-filter flash on rapid open/close ## Test Plan - [x] Open/close settings with comma hotkey on all pages - [x] Toggle privacy settings → verify save bar appears → save → verify persistence - [x] Change site name → switch to Organization context → verify discard prompt - [x] Delete site/org/account flows with confirmation - [x] Script feature toggles persist after save + modal re-open - [x] Integration connect/disconnect for GSC and BunnyCDN - [x] Report/alert create, edit, test, toggle, delete - [x] Audit log filtering and pagination - [x] Mobile sidebar navigation still works

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: ciphera-net/pulse#69