From 35599777e7a3824dd023eb0c8328a168a128642b Mon Sep 17 00:00:00 2001
From: CGQAQ <m.jason.liu@outlook.com>
Date: Wed, 11 Feb 2026 22:06:23 +0800
Subject: [PATCH 1/4] fix(use-cases): fix quick start cards layout with
 horizontal scroll

Use fixed card width and overflow-x auto for consistent sizing
and proper horizontal scrolling on all screen widths.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 use_cases/src/pages/HomePage.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/use_cases/src/pages/HomePage.tsx b/use_cases/src/pages/HomePage.tsx
index c8dcddc688..c865b1d0ec 100644
--- a/use_cases/src/pages/HomePage.tsx
+++ b/use_cases/src/pages/HomePage.tsx
@@ -142,6 +142,13 @@ const quickStart: QuickStartItem[] = [
     icon: LucideIcons.sparkles,
     gradient: 'linear-gradient(135deg, #f97316, #f59e0b)',
   },
+  {
+    title: 'Shadcn UI',
+    desc: 'Popular React component library',
+    to: '/shadcn-showcase',
+    icon: LucideIcons.box,
+    gradient: 'linear-gradient(135deg, #8b5cf6, #ec4899)',
+  }
 ];
 
 export const HomePage: React.FC = () => {
@@ -152,10 +159,10 @@ export const HomePage: React.FC = () => {
       style={{
         background: item.gradient,
         borderRadius: '16px',
-        padding: '20px 16px',
+        padding: '14px 12px',
         cursor: 'pointer',
-        flex: '1',
-        minWidth: '0',
+        width: '130px',
+        flexShrink: 0,
         display: 'flex',
         flexDirection: 'column',
         gap: '10px',
@@ -175,7 +182,7 @@ export const HomePage: React.FC = () => {
       </div>
       <div>
         <div style={{
-          fontSize: '16px',
+          fontSize: '15px',
           fontWeight: 700,
           color: '#fff',
           marginBottom: '2px',
@@ -348,7 +355,8 @@ export const HomePage: React.FC = () => {
           }}>Quick Start</div>
           <div style={{
             display: 'flex',
-            gap: '12px',
+            gap: '10px',
+            overflowX: 'auto' as const,
           }}>
             {quickStart.map((qs) => (
               <QuickStartCard key={qs.to} item={qs} />

From 695f5f78983009f53d73bdaf7862738f2c327ce8 Mon Sep 17 00:00:00 2001
From: CGQAQ <m.jason.liu@outlook.com>
Date: Wed, 11 Feb 2026 22:06:39 +0800
Subject: [PATCH 2/4] feat(use-cases): enable all shadcn component demos

Uncomment previously hidden demos for Input, Select, Slider,
Radio Group, Form, Progress, Skeleton, Tabs, Table, and Popover.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 use_cases/src/pages/ShadcnShowcasePage.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/use_cases/src/pages/ShadcnShowcasePage.tsx b/use_cases/src/pages/ShadcnShowcasePage.tsx
index fe50b64da9..acf32cd4a4 100644
--- a/use_cases/src/pages/ShadcnShowcasePage.tsx
+++ b/use_cases/src/pages/ShadcnShowcasePage.tsx
@@ -33,12 +33,12 @@ export const ShadcnShowcasePage: React.FC = () => {
           <div className="mb-5 bg-surface-secondary rounded-xl shadow overflow-hidden border border-line">
             <Item label="Buttons" desc="Primary, secondary, destructive, outline, ghost variants" to="/shadcn/buttons" />
             <Item label="Icon Button" desc="Icon-only buttons with Lucide icons" to="/shadcn/icon-button" />
-            {/*<Item label="Input" desc="Text input with various types and states" to="/shadcn/input" />*/}
+            <Item label="Input" desc="Text input with various types and states" to="/shadcn/input" />
             <Item label="Checkbox & Switch" desc="Toggle controls for forms" to="/shadcn/checkbox-switch" />
-            {/*<Item label="Select & Combobox" desc="Dropdown selection components" to="/shadcn/select" />*/}
-            {/*<Item label="Slider" desc="Range selection slider" to="/shadcn/slider" />*/}
-            {/*<Item label="Radio Group" desc="Single selection from multiple options" to="/shadcn/radio" />*/}
-            {/*<Item label="Form" desc="Form state management with validation" to="/shadcn/form" />*/}
+            <Item label="Select & Combobox" desc="Dropdown selection components" to="/shadcn/select" />
+            <Item label="Slider" desc="Range selection slider" to="/shadcn/slider" />
+            <Item label="Radio Group" desc="Single selection from multiple options" to="/shadcn/radio" />
+            <Item label="Form" desc="Form state management with validation" to="/shadcn/form" />
           </div>
 
           <h2 className="text-lg font-semibold text-fg-primary mb-3 pl-3 border-l-4 border-zinc-500">Display Components</h2>
@@ -46,13 +46,13 @@ export const ShadcnShowcasePage: React.FC = () => {
             <Item label="Card" desc="Container with header, content, and footer" to="/shadcn/card" />
             <Item label="Alert & Badge" desc="Notifications and status indicators" to="/shadcn/alert-badge" />
             <Item label="Avatar" desc="User profile images" to="/shadcn/avatar" />
-            {/*<Item label="Progress" desc="Loading and progress indicators" to="/shadcn/progress" />*/}
-            {/*<Item label="Skeleton" desc="Loading placeholder animations" to="/shadcn/skeleton" />*/}
+            <Item label="Progress" desc="Loading and progress indicators" to="/shadcn/progress" />
+            <Item label="Skeleton" desc="Loading placeholder animations" to="/shadcn/skeleton" />
           </div>
 
           <h2 className="text-lg font-semibold text-fg-primary mb-3 pl-3 border-l-4 border-zinc-500">Navigation & Layout</h2>
           <div className="mb-5 bg-surface-secondary rounded-xl shadow overflow-hidden border border-line">
-            {/*<Item label="Tabs" desc="Tabbed content navigation" to="/shadcn/tabs" />*/}
+            <Item label="Tabs" desc="Tabbed content navigation" to="/shadcn/tabs" />
             <Item label="Accordion" desc="Collapsible content sections" to="/shadcn/accordion" />
             <Item label="Dialog & Sheet" desc="Modal dialogs and bottom sheets" to="/shadcn/dialog" />
             <Item label="Breadcrumb" desc="Navigation hierarchy" to="/shadcn/breadcrumb" />
@@ -60,7 +60,7 @@ export const ShadcnShowcasePage: React.FC = () => {
 
           <h2 className="text-lg font-semibold text-fg-primary mb-3 pl-3 border-l-4 border-zinc-500">Data & Pickers</h2>
           <div className="mb-5 bg-surface-secondary rounded-xl shadow overflow-hidden border border-line">
-            {/*<Item label="Table" desc="Data table with headers and rows" to="/shadcn/table" />*/}
+            <Item label="Table" desc="Data table with headers and rows" to="/shadcn/table" />
             <Item label="Calendar & Date Picker" desc="Date selection components" to="/shadcn/calendar" />
           </div>
 
@@ -68,7 +68,7 @@ export const ShadcnShowcasePage: React.FC = () => {
           <div className="mb-5 bg-surface-secondary rounded-xl shadow overflow-hidden border border-line">
             <Item label="Dropdown Menu" desc="Action menu dropdowns" to="/shadcn/dropdown" />
             <Item label="Context Menu" desc="Right-click context menus" to="/shadcn/context-menu" />
-            {/*<Item label="Popover & Tooltip" desc="Floating content and hints" to="/shadcn/popover" />*/}
+            <Item label="Popover & Tooltip" desc="Floating content and hints" to="/shadcn/popover" />
           </div>
         </div>
       </WebFListView>

From 108dd463270737ab11a7b46962f0dfc0ca28279a Mon Sep 17 00:00:00 2001
From: CGQAQ <m.jason.liu@outlook.com>
Date: Wed, 11 Feb 2026 22:11:51 +0800
Subject: [PATCH 3/4] fix(use-cases): allow quick start cards to expand when
 few items

Use flex: 1 with minWidth instead of fixed width so cards fill
available space when there are only 2-3 items.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 use_cases/src/pages/HomePage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/use_cases/src/pages/HomePage.tsx b/use_cases/src/pages/HomePage.tsx
index c865b1d0ec..90bd3801f0 100644
--- a/use_cases/src/pages/HomePage.tsx
+++ b/use_cases/src/pages/HomePage.tsx
@@ -161,8 +161,8 @@ export const HomePage: React.FC = () => {
         borderRadius: '16px',
         padding: '14px 12px',
         cursor: 'pointer',
-        width: '130px',
-        flexShrink: 0,
+        flex: '1',
+        minWidth: '130px',
         display: 'flex',
         flexDirection: 'column',
         gap: '10px',

From ce319fb4eb68ae913fefab392372fd558ff0a5d3 Mon Sep 17 00:00:00 2001
From: CGQAQ <m.jason.liu@outlook.com>
Date: Wed, 11 Feb 2026 22:15:56 +0800
Subject: [PATCH 4/4] feat(use-cases): hide Shadcn UI quick start card in
 production

Add hidden config to QuickStartItem and set it for Shadcn UI
since shadcn routes are only available in dev mode.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 use_cases/src/pages/HomePage.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/use_cases/src/pages/HomePage.tsx b/use_cases/src/pages/HomePage.tsx
index 90bd3801f0..51fae74d0a 100644
--- a/use_cases/src/pages/HomePage.tsx
+++ b/use_cases/src/pages/HomePage.tsx
@@ -125,6 +125,7 @@ type QuickStartItem = {
   to: string;
   icon: LucideIcons;
   gradient: string;
+  hidden?: boolean;
 };
 
 const quickStart: QuickStartItem[] = [
@@ -148,6 +149,7 @@ const quickStart: QuickStartItem[] = [
     to: '/shadcn-showcase',
     icon: LucideIcons.box,
     gradient: 'linear-gradient(135deg, #8b5cf6, #ec4899)',
+    hidden: !import.meta.env.DEV,
   }
 ];
 
@@ -358,7 +360,7 @@ export const HomePage: React.FC = () => {
             gap: '10px',
             overflowX: 'auto' as const,
           }}>
-            {quickStart.map((qs) => (
+            {quickStart.filter((qs) => !qs.hidden).map((qs) => (
               <QuickStartCard key={qs.to} item={qs} />
             ))}
           </div>