flvx/docs/superpowers/plans/2026-04-04-flvx-ios26-redesign-plan.md

Flvx iOS 26 Liquid Glass UI Redesign Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Transform the Flvx frontend interface entirely into an "Apple iOS 26 Liquid Glass" visual style by utilizing high-radius squircles, heavy background blurs, mesh gradients, and highly semantic translucent containers.

Architecture: We will approach this from the ground up: first defining the global TailwindCSS design tokens and the base mesh-gradient layout, then systematically replacing the structural styling inside each React page component (vite-frontend/src/pages/*.tsx).

Tech Stack: React DOM, TailwindCSS (v4), shadcn-bridge (HeroUI), Vite

---

Task 1: Setup Global CSS Variables and App Shell

Files:

• Modify: vite-frontend/src/styles/globals.css (or index.css)

• Modify: vite-frontend/tailwind.config.js

• Modify: vite-frontend/src/App.tsx (or main.tsx / layouts depending on structural entry point)

• Step 1: Inject Liquid Glass theme variables Open the main CSS file and add variables for the new blur radius, box-shadows, and background gradients.

  :root {
    --glass-bg: rgba(255, 255, 255, 0.6);
    --glass-border: rgba(255, 255, 255, 0.8);
    --glass-card: rgba(255, 255, 255, 0.7);
    --glass-overlay: rgba(0, 0, 0, 0.3);
  }
  .dark {
    --glass-bg: rgba(30, 30, 30, 0.6);
    --glass-border: rgba(255, 255, 255, 0.15);
    --glass-card: rgba(40, 40, 40, 0.6);
  }
  .bg-mesh-gradient {
    background: radial-gradient(at 0% 0%, #ff9a9e 0%, transparent 50%),
                radial-gradient(at 100% 0%, #fecfef 0%, transparent 50%),
                radial-gradient(at 100% 100%, #c2e9fb 0%, transparent 50%),
                radial-gradient(at 0% 100%, #a1c4fd 0%, transparent 50%);
    background-color: #f2f2f7;
  }
  

• Step 2: Update App Layout Modify the root app container to use .bg-mesh-gradient and ensure the main container occupies min-h-screen.

Task 2: Refactor Global Components (Card & Modal)

Files:

• Modify: vite-frontend/src/shadcn-bridge/heroui/card.tsx

• Modify: vite-frontend/src/shadcn-bridge/heroui/modal.tsx

• Step 1: Liquid Card Base Update the default className string for Card to incorporate: backdrop-blur-3xl bg-white/60 dark:bg-zinc-900/60 border border-white/80 dark:border-white/10 rounded-2xl shadow-[0_10px_30px_rgba(0,0,0,0.1)].

• Step 2: Modal Overlay Base Update the default overlay className for Modal to use bg-black/30 backdrop-blur-sm, and its content panel to use the same glass_card classes as the Card component but with rounded-3xl.

Task 3: Redesign Dashboard Page

Files:

• Modify: vite-frontend/src/pages/dashboard.tsx

• Step 1: Replace hardcoded borders/bg with glass semantics Find hardcoded bg-white, border-gray-200, shadow-md inside DashboardPage and MetricCard, replace with bg-white/60 backdrop-blur-3xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] border-white/80 rounded-2xl.

• Step 2: Adjust spacing Ensure all metric cards have uniform h-48 equivalent height and are strictly rounded-2xl with p-6 padding.

• Step 3: Update Flow Chart Card Replace standard grid backgrounds in the flow chart with transparent spacing and vibrant bg-blue-500 squircle bars without harsh borders.

Task 4: Redesign Node Management Page

Files:

• Modify: vite-frontend/src/pages/node.tsx

• Step 1: Replace standard List/Table view with Grid Cards Update the node rendering map to output glass_card containers (rounded-2xl, blur, padding p-6).

• Step 2: Apply semantic status highlights Refactor the Online/Offline badges into pill-shapes (rounded-full) using the defined semantic colors (e.g. bg-green-500/20 text-green-600 with a 6px inner dot bg-green-500).

• Step 3: Embed Micro-charts For CPU/RAM data inside the node card, switch standard progress bars to ultra-thin (height 4px) continuous lines utilizing standard brand colors.

Task 5: Redesign Tunnels & Rules Configuration

Files:

• Modify: vite-frontend/src/pages/tunnel.tsx

• Modify: vite-frontend/src/pages/forward.tsx

• Step 1: Update Tunnel lists into nested Glass Panels Encapsulate each tunnel configuration into a wide glass_card.

• Step 2: Create Visual Rule Tags For the Forwarding rules, wrap the target IP/Port logic into visual badges: bg-green-500/20 for Entry and bg-blue-500/20 for Target.

• Step 3: Refactor the "Add Rule" Floating action Ensure the plus button follows the squircle format (rounded-full) with a prominent diffused shadow (shadow-[0_4px_12px_rgba(0,122,255,0.3)]).

Task 6: Redesign Monitor Page

Files:

• Modify: vite-frontend/src/pages/monitor.tsx

• Step 1: Style the Top Hero Metrics Replace flat stat boxes with high-contrast, large typography inside glass_card backgrounds.

• Step 2: Refactor Latency Indicators Format the connection list rows as bg-white/50 dark:bg-black/30 strips with pill-shaped status tags (Healthy, Warning, Offline) mapping exactly to the green/orange/red semantics from the design spec.

Task 7: Redesign Group & Sharing Pages

Files:

• Modify: vite-frontend/src/pages/group.tsx

• Modify: vite-frontend/src/pages/panel-sharing.tsx

• Step 1: Update Tab Switchers Refactor the internal navigation tabs (e.g., "Tunnel Groups" vs "User Groups") into an encapsulated p-1 rounded-xl bg-white/40 backdrop-blur-lg container with animated active states (shadow-sm bg-white).

• Step 2: Style Share Cards Transform flat panel sharing list items into rich glass_card entities. Highlight expiration dates with the accent text color.

Task 8: Redesign Settings, Config, and User Management

Files:

• Modify: vite-frontend/src/pages/config.tsx

• Modify: vite-frontend/src/pages/settings.tsx

• Modify: vite-frontend/src/pages/user.tsx

• Modify: vite-frontend/src/pages/limit.tsx

• Step 1: Flatten Forms Convert traditional input groups into rounded-xl bg-white/50 border border-white/60 containers. Remove outer boxing for standard label + input pairs.

• Step 2: iOS Toggle Switches Ensure that any <Switch> or <Checkbox> components use the new Accent brand color (#007aff) with full rounded-full geometry.

• Step 3: Refactor User Badges In user.tsx, replace text-based role columns with circular Avatar badges (e.g., w-10 h-10 rounded-full bg-blue-500 text-white with the first two letters of the username).

Task 9: Profile & Password Modal Restyling

Files:

• Modify: vite-frontend/src/pages/profile.tsx

• Modify: vite-frontend/src/pages/change-password.tsx

• Step 1: Apply Profile Card Structure Create a split view on desktop using flex: Left side (Avatar + User Info + Admin Shortcuts), Right side (Password Form).

• Step 2: Restyle Auth Inputs Ensure all password inputs use bg-white/50 backdrop-blur-md border border-white/60 and the update button has heavy shadow-glow.