Skip to content

Commit 88f1667

Browse files
SH20RAJSH20RAJ
committed
refactor: migrate home components to use SWR and update visual styles for cards and lists
1 parent b83ce0c commit 88f1667

14 files changed

Lines changed: 506 additions & 478 deletions

‎apps/website/src/app/dashboard/layout.tsx‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
import { Suspense, useState, useEffect } from "react";
44
import { usePathname, useSearchParams } from "next/navigation";
5+
import Link from "next/link";
6+
import { LayoutDashboard, MessageSquare, Inbox, Library } from "lucide-react";
57
import { cn } from "@/lib/utils";
68
import { TooltipProvider } from "@/components/ui/tooltip";
79
import { Sidebar } from "@/components/app-shell/sidebar";
@@ -165,13 +167,45 @@ function DashboardLayoutContent({
165167
<main
166168
className={cn(
167169
"flex-1 min-h-0",
168-
noGlobalScroll ? "overflow-hidden flex flex-col" : "overflow-y-auto"
170+
noGlobalScroll ? "overflow-hidden flex flex-col" : "overflow-y-auto pb-24 md:pb-0"
169171
)}
170172
>
171173
<Suspense fallback={null}>{children}</Suspense>
172174
</main>
173175
</div>
174176

177+
{/* Mobile Floating Bottom Navigation */}
178+
{!isFocused && (
179+
<div className="md:hidden fixed bottom-6 left-1/2 -translate-x-1/2 z-40 w-[90%] max-w-sm">
180+
<div className="flex items-center justify-around bg-neutral-950/95 text-neutral-400 rounded-full px-5 py-2.5 shadow-[0_8px_32px_rgba(0,0,0,0.3)] border border-neutral-800/40 backdrop-blur-md">
181+
{[
182+
{ href: "/dashboard", icon: LayoutDashboard, label: "Home" },
183+
{ href: "/dashboard/ask", icon: MessageSquare, label: "Ask" },
184+
{ href: "/dashboard/inbox", icon: Inbox, label: "Inbox" },
185+
{ href: "/dashboard/library", icon: Library, label: "Library" },
186+
].map((item) => {
187+
const active = item.href === "/dashboard"
188+
? pathname === "/dashboard"
189+
: pathname.startsWith(item.href);
190+
const Icon = item.icon;
191+
return (
192+
<Link
193+
key={item.href}
194+
href={item.href}
195+
className={cn(
196+
"relative flex items-center justify-center w-12 h-12 rounded-full transition-all duration-200",
197+
active ? "bg-primary text-primary-foreground scale-110 shadow-md" : "text-neutral-400 hover:text-neutral-200"
198+
)}
199+
aria-label={item.label}
200+
>
201+
<Icon className="w-5 h-5" />
202+
</Link>
203+
);
204+
})}
205+
</div>
206+
</div>
207+
)}
208+
175209
<CommandMenu open={commandMenuOpen} onClose={() => setCommandMenuOpen(false)} />
176210
</div>
177211
);

‎apps/website/src/app/globals.css‎

Lines changed: 157 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -93,134 +93,180 @@
9393
--font-body: "Nunito Sans", "Nunito", "Segoe UI", sans-serif;
9494
--font-display: "Nunito", "Segoe UI", sans-serif;
9595
--bn-colors-editor-background: transparent;
96-
/* Duolingo-inspired palette */
97-
--background: #FBFCFA;
98-
--foreground: #222222;
96+
/* Smart Home & FlowUp inspired palette */
97+
--background: #FAF8F5;
98+
--foreground: #1A1A1A;
9999
--card: #FFFFFF;
100-
--card-foreground: #222222;
100+
--card-foreground: #1A1A1A;
101101
--popover: #FFFFFF;
102-
--popover-foreground: #222222;
103-
--primary: #58CC02;
102+
--popover-foreground: #1A1A1A;
103+
--primary: #E04006;
104104
--primary-foreground: #FFFFFF;
105-
--secondary: #FAFAF7;
106-
--secondary-foreground: #555555;
107-
--muted: #FAFAF7;
108-
--muted-foreground: #888888;
109-
--accent: #FAFAF7;
110-
--accent-foreground: #222222;
111-
--destructive: #FF4B4B;
105+
--secondary: #F3EFEA;
106+
--secondary-foreground: #4E4A42;
107+
--muted: #F3EFEA;
108+
--muted-foreground: #8A857C;
109+
--accent: #F3EFEA;
110+
--accent-foreground: #1A1A1A;
111+
--destructive: #E53E3E;
112112
--destructive-foreground: #FFFFFF;
113-
--border: #EAEAEA;
114-
--input: #EAEAEA;
115-
--ring: #58CC02;
116-
--radius: 1rem;
113+
--border: #E5E1D8;
114+
--input: #E5E1D8;
115+
--ring: #E04006;
116+
--radius: 1.75rem;
117117

118118
/* Memory/AI accent */
119-
--memory: #58CC02;
119+
--memory: #E04006;
120120
--memory-foreground: #FFFFFF;
121-
--surface: #F5F5F3;
122-
--surface-foreground: #222222;
121+
--surface: #F5F3ED;
122+
--surface-foreground: #1A1A1A;
123123

124124
/* Duo accent colors */
125-
--duo-eel: #4B4B4B;
126-
--duo-wolf: #777777;
127-
--duo-swan: #E5E5E5;
128-
--duo-polar: #F7F7F7;
125+
--duo-eel: #4A4A4A;
126+
--duo-wolf: #7A7670;
127+
--duo-swan: #E5E1D8;
128+
--duo-polar: #FAF8F5;
129129
--duo-snow: #FFFFFF;
130-
--duo-feather: #58CC02;
131-
--duo-green: #58CC02;
130+
--duo-feather: #E04006;
131+
--duo-green: #E04006;
132132
--duo-macaw: #1CB0F6;
133133
--duo-blue: #1CB0F6;
134134
--duo-fox: #FF9600;
135135
--duo-orange: #FF9600;
136-
--duo-cardinal: #FF4B4B;
137-
--duo-red: #FF4B4B;
136+
--duo-cardinal: #E53E3E;
137+
--duo-red: #E53E3E;
138138
--duo-beetle: #CE82FF;
139139
--duo-purple: #CE82FF;
140140
--duo-yellow: #FFC800;
141141
--duo-canary: #FFC800;
142142

143143
/* Sidebar */
144144
--sidebar-background: #FFFFFF;
145-
--sidebar-foreground: #4B4B4B;
146-
--sidebar-border: #E5E5E5;
147-
--sidebar-accent: #F7F7F7;
148-
--sidebar-accent-foreground: #4B4B4B;
145+
--sidebar-foreground: #4A4A4A;
146+
--sidebar-border: #E5E1D8;
147+
--sidebar-accent: #FAF8F5;
148+
--sidebar-accent-foreground: #4A4A4A;
149149

150150
/* Landing page */
151-
--landing-bg: #FBFCFA;
151+
--landing-bg: #FAF8F5;
152152
--landing-surface: #FFFFFF;
153-
--landing-surface-subtle: #FAFAF7;
154-
--landing-border: #EAEAEA;
155-
--landing-border-light: #F0F0F0;
156-
--landing-text-primary: #222222;
157-
--landing-text-secondary: #555555;
158-
--landing-text-tertiary: #888888;
159-
--landing-accent: #58CC02;
160-
--landing-accent-hover: #4ea603;
153+
--landing-surface-subtle: #F3EFEA;
154+
--landing-border: #E5E1D8;
155+
--landing-border-light: #F0EDE6;
156+
--landing-text-primary: #1A1A1A;
157+
--landing-text-secondary: #4E4A42;
158+
--landing-text-tertiary: #8A857C;
159+
--landing-accent: #E04006;
160+
--landing-accent-hover: #C03604;
161+
162+
/* Agent Elements theme overrides */
163+
--an-background: var(--background);
164+
--an-background-secondary: var(--secondary);
165+
--an-background-tertiary: var(--muted);
166+
--an-foreground: var(--foreground);
167+
--an-foreground-muted: var(--muted-foreground);
168+
--an-foreground-subtle: var(--muted-foreground);
169+
--an-border-color: var(--border);
170+
--an-primary-color: var(--primary);
171+
--an-user-message-bg: var(--secondary);
172+
--an-user-message-text: var(--foreground);
173+
--an-input-background: var(--card);
174+
--an-input-border-color: var(--border);
175+
--an-input-color: var(--foreground);
176+
--an-input-placeholder-color: var(--muted-foreground);
177+
--an-send-button-bg: var(--primary);
178+
--an-send-button-color: var(--primary-foreground);
179+
--an-tool-background: var(--secondary);
180+
--an-tool-border-color: var(--border);
181+
--an-tool-color: var(--foreground);
182+
--an-tool-color-muted: var(--muted-foreground);
183+
--an-border-radius: 24px;
161184
}
162185

163186
.dark {
164-
--background: #0C0F0A;
165-
--foreground: #ECEEEC;
187+
--background: #0F0E0C;
188+
--foreground: #F5F3ED;
166189
--bn-colors-editor-background: transparent;
167-
--card: #121610;
168-
--card-foreground: #ECEEEC;
169-
--popover: #121610;
170-
--popover-foreground: #ECEEEC;
171-
--primary: #58CC02;
190+
--card: #161512;
191+
--card-foreground: #F5F3ED;
192+
--popover: #161512;
193+
--popover-foreground: #F5F3ED;
194+
--primary: #FF5A1F;
172195
--primary-foreground: #FFFFFF;
173-
--secondary: #181E15;
174-
--secondary-foreground: #B0B5B0;
175-
--muted: #181E15;
176-
--muted-foreground: #808680;
177-
--accent: #181E15;
178-
--accent-foreground: #ECEEEC;
179-
--destructive: #FF4B4B;
196+
--secondary: #1F1D19;
197+
--secondary-foreground: #C7C2B8;
198+
--muted: #1F1D19;
199+
--muted-foreground: #999388;
200+
--accent: #1F1D19;
201+
--accent-foreground: #F5F3ED;
202+
--destructive: #E53E3E;
180203
--destructive-foreground: #FFFFFF;
181-
--border: #1F261B;
182-
--input: #1F261B;
183-
--ring: #58CC02;
204+
--border: #2B2824;
205+
--input: #2B2824;
206+
--ring: #FF5A1F;
184207

185-
--memory: #58CC02;
208+
--memory: #FF5A1F;
186209
--memory-foreground: #FFFFFF;
187-
--surface: #1A1A1E;
188-
--surface-foreground: #ECEEEC;
189-
190-
--duo-eel: #e6edf3;
191-
--duo-wolf: #8b949e;
192-
--duo-swan: #30363d;
193-
--duo-polar: #21262d;
194-
--duo-snow: #0d1117;
195-
--duo-feather: #58CC02;
196-
--duo-green: #58CC02;
210+
--surface: #22201C;
211+
--surface-foreground: #F5F3ED;
212+
213+
--duo-eel: #F5F3ED;
214+
--duo-wolf: #999388;
215+
--duo-swan: #2B2824;
216+
--duo-polar: #1F1D19;
217+
--duo-snow: #0F0E0C;
218+
--duo-feather: #FF5A1F;
219+
--duo-green: #FF5A1F;
197220
--duo-macaw: #1CB0F6;
198221
--duo-blue: #1CB0F6;
199222
--duo-fox: #FF9600;
200223
--duo-orange: #FF9600;
201-
--duo-cardinal: #FF4B4B;
202-
--duo-red: #FF4B4B;
224+
--duo-cardinal: #E53E3E;
225+
--duo-red: #E53E3E;
203226
--duo-beetle: #CE82FF;
204227
--duo-purple: #CE82FF;
205228
--duo-yellow: #FFC800;
206229
--duo-canary: #FFC800;
207230

208-
--sidebar-background: #0d1117;
209-
--sidebar-foreground: #e6edf3;
210-
--sidebar-border: #30363d;
211-
--sidebar-accent: #21262d;
212-
--sidebar-accent-foreground: #e6edf3;
213-
214-
--landing-bg: #0C0F0A;
215-
--landing-surface: #121610;
216-
--landing-surface-subtle: #181E15;
217-
--landing-border: #1F261B;
218-
--landing-border-light: #181E15;
219-
--landing-text-primary: #ECEEEC;
220-
--landing-text-secondary: #B0B5B0;
221-
--landing-text-tertiary: #808680;
222-
--landing-accent: #58CC02;
223-
--landing-accent-hover: #69DF0E;
231+
--sidebar-background: #0F0E0C;
232+
--sidebar-foreground: #F5F3ED;
233+
--sidebar-border: #2B2824;
234+
--sidebar-accent: #1F1D19;
235+
--sidebar-accent-foreground: #F5F3ED;
236+
237+
--landing-bg: #0F0E0C;
238+
--landing-surface: #161512;
239+
--landing-surface-subtle: #1F1D19;
240+
--landing-border: #2B2824;
241+
--landing-border-light: #1F1D19;
242+
--landing-text-primary: #F5F3ED;
243+
--landing-text-secondary: #C7C2B8;
244+
--landing-text-tertiary: #999388;
245+
--landing-accent: #FF5A1F;
246+
--landing-accent-hover: #FF7747;
247+
248+
/* Agent Elements dark theme overrides */
249+
--an-background: var(--background);
250+
--an-background-secondary: var(--secondary);
251+
--an-background-tertiary: var(--muted);
252+
--an-foreground: var(--foreground);
253+
--an-foreground-muted: var(--muted-foreground);
254+
--an-foreground-subtle: var(--muted-foreground);
255+
--an-border-color: var(--border);
256+
--an-primary-color: var(--primary);
257+
--an-user-message-bg: var(--secondary);
258+
--an-user-message-text: var(--foreground);
259+
--an-input-background: var(--card);
260+
--an-input-border-color: var(--border);
261+
--an-input-color: var(--foreground);
262+
--an-input-placeholder-color: var(--muted-foreground);
263+
--an-send-button-bg: var(--primary);
264+
--an-send-button-color: var(--primary-foreground);
265+
--an-tool-background: var(--secondary);
266+
--an-tool-border-color: var(--border);
267+
--an-tool-color: var(--foreground);
268+
--an-tool-color-muted: var(--muted-foreground);
269+
--an-border-radius: 24px;
224270
}
225271

226272
@layer base {
@@ -288,18 +334,18 @@
288334
}
289335

290336
@utility minimal-card {
291-
@apply rounded-2xl border-2 border-border bg-card p-6 transition-all duration-200;
292-
@apply hover:border-primary/30 hover:shadow-[0_2px_0_var(--border)];
337+
@apply rounded-3xl border border-border bg-card p-6 transition-all duration-300 shadow-[0_4px_20px_rgba(0,0,0,0.02)];
338+
@apply hover:border-primary/30 hover:shadow-[0_8px_24px_rgba(0,0,0,0.04)] hover:-translate-y-[1px];
293339
}
294340

295341
@utility minimal-btn {
296-
@apply inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-extrabold uppercase tracking-wide transition-all duration-100;
342+
@apply inline-flex items-center justify-center rounded-xl px-4 py-2.5 text-sm font-extrabold uppercase tracking-wide transition-all duration-100;
297343
@apply active:translate-y-[2px] disabled:opacity-50 disabled:cursor-not-allowed;
298344
}
299345

300346
@utility minimal-btn-primary {
301347
@apply minimal-btn bg-primary text-primary-foreground;
302-
box-shadow: 0 4px 0 #46A302;
348+
box-shadow: 0 4px 0 #A02D04;
303349
@apply hover:brightness-105 active:shadow-none;
304350
}
305351

@@ -314,29 +360,43 @@
314360
@apply hover:-translate-y-0.5 hover:shadow-md active:translate-y-0 active:shadow-none;
315361
}
316362

317-
@utility grad-green {
318-
background: linear-gradient(135deg, #58CC02 0%, #89E219 100%);
363+
@utility grad-orange {
364+
background: linear-gradient(135deg, #E04006 0%, #FF7A45 100%);
319365
}
320366

321367
@utility glass {
322-
@apply bg-background/60 backdrop-blur-xl border-2 border-border/30;
368+
@apply bg-background/60 backdrop-blur-xl border border-border/30;
323369
}
324370

325371
@utility glass-card {
326-
@apply bg-card/80 backdrop-blur-xl border-2 border-border/20;
372+
@apply bg-card/85 backdrop-blur-xl border border-border/20 shadow-[0_8px_30px_rgb(0,0,0,0.02)];
327373
}
328374

329375
@utility duo-card {
330-
@apply rounded-2xl border-2 border-border bg-card p-4;
376+
@apply rounded-3xl border border-border bg-card p-5 shadow-[0_4px_16px_rgba(0,0,0,0.01)];
331377
box-shadow: 0 2px 0 var(--border);
332378
}
333379

334380
@utility duo-input {
335-
@apply rounded-xl border-2 border-border bg-card px-4 py-3 text-sm font-medium text-foreground placeholder:text-muted-foreground/60;
381+
@apply rounded-2xl border-2 border-border bg-card px-4 py-3 text-sm font-medium text-foreground placeholder:text-muted-foreground/60;
336382
@apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
337383
@apply transition-all duration-200;
338384
}
339385

386+
@utility ios-card {
387+
@apply rounded-[1.75rem] border border-border/80 bg-card p-5 transition-all duration-300 shadow-[0_4px_20px_rgba(0,0,0,0.02)];
388+
@apply hover:border-primary/20 hover:shadow-[0_8px_24px_rgba(0,0,0,0.04)] hover:-translate-y-[1px];
389+
}
390+
391+
@utility ios-pill-btn {
392+
@apply inline-flex items-center justify-center rounded-full px-5 py-2.5 text-sm font-bold transition-all duration-200 active:scale-[0.98];
393+
@apply disabled:opacity-50 disabled:cursor-not-allowed;
394+
}
395+
396+
@utility ios-badge-orange {
397+
@apply inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold bg-primary/10 text-primary border border-primary/20;
398+
}
399+
340400
@keyframes wiggle {
341401

342402
0%,

0 commit comments

Comments
 (0)