refactor(ui): update UI components and navigation

- Improve header, hero, and login modal components
- Update command menu functionality
- Enhance magic card component

web/src/components/command-menu.tsx

@@ -68,11 +68,7 @@ export function CommandMenu({ icons, open: externalOpen, onOpenChange: externalO
 
 	return (
 		<CommandDialog open={isOpen} onOpenChange={setIsOpen} contentClassName="bg-background/90 backdrop-blur-sm border border-border/60">
-			<CommandInput
-				placeholder={`Search our collection of ${totalIcons} icons by name...`}
-				value={query}
-				onValueChange={setQuery}
-			/>
+			<CommandInput placeholder={`Search our collection of ${totalIcons} icons by name...`} value={query} onValueChange={setQuery} />
 			<CommandList className="max-h-[300px]">
 				{/* Icon Results */}
 				<CommandGroup heading="Icons">

web/src/components/header.tsx

@@ -2,8 +2,8 @@
 
 import { Github, LayoutDashboard, LogOut, PlusCircle, Search, Star } from "lucide-react"
 import Link from "next/link"
-import { useEffect, useState } from "react"
 import { usePostHog } from "posthog-js/react"
+import { useEffect, useState } from "react"
 import { LoginModal } from "@/components/login-modal"
 import { ThemeSwitcher } from "@/components/theme-switcher"
 import { REPO_NAME, REPO_PATH } from "@/constants"
@@ -110,10 +110,10 @@ export function Header() {
 				username: userData.username,
 			})
 		}
-		
+
 		// Clear PocketBase auth
 		pb.authStore.clear()
-		
+
 		// Reset PostHog identity to unlink future events from this user
 		// This is important for shared computers and follows PostHog best practices
 		resetPostHogIdentity(posthog)
@@ -185,13 +185,21 @@ export function Header() {
 
 					<div className="hidden md:flex items-center gap-2 md:gap-4">
 						{isLoggedIn ? (
-							<Button variant="outline" className="hidden md:inline-flex cursor-pointer transition-all duration-300 items-center gap-2" asChild>
+							<Button
+								variant="outline"
+								className="hidden md:inline-flex cursor-pointer transition-all duration-300 items-center gap-2"
+								asChild
+							>
 								<Link href="/submit">
 									<PlusCircle className="h-4 w-4 transition-all duration-300" /> Submit icon(s)
 								</Link>
 							</Button>
 						) : (
-							<Button variant="outline" className="hidden md:inline-flex cursor-pointer transition-all duration-300 items-center gap-2" onClick={handleSubmitClick}>
+							<Button
+								variant="outline"
+								className="hidden md:inline-flex cursor-pointer transition-all duration-300 items-center gap-2"
+								onClick={handleSubmitClick}
+							>
 								<PlusCircle className="h-4 w-4 transition-all duration-300" /> Submit icon(s)
 							</Button>
 						)}

web/src/components/hero.tsx

@@ -114,7 +114,7 @@ function ElegantShape({
 					y: [0, 15, 0],
 				}}
 				transition={{
-					duration: 8 + Math.random() * 4, // Random duration between 8-12s for varied movement
+					duration: 8,
 					repeat: Number.POSITIVE_INFINITY,
 					ease: "easeInOut",
 					repeatType: "reverse",
@@ -128,7 +128,7 @@ function ElegantShape({
 				<div
 					className={cn(
 						"absolute inset-0 rounded-full",
-						// Use primary 
+						// Use primary
 						"bg-gradient-to-r from-primary/[0.6] via-primary/[0.4] to-primary/[0.1]",
 						gradient,
 						"backdrop-blur-[3px]",

web/src/components/login-modal.tsx

@@ -1,9 +1,9 @@
 "use client"
 
 import { Github, Loader2 } from "lucide-react"
+import { usePostHog } from "posthog-js/react"
 import type React from "react"
 import { useRef, useState } from "react"
-import { usePostHog } from "posthog-js/react"
 import { Button } from "@/components/ui/button"
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
@@ -65,11 +65,11 @@ export function LoginModal({ open, onOpenChange }: LoginModalProps) {
 					passwordConfirm: confirmPassword,
 				})
 				await pb.collection("users").authWithPassword(email, password)
-				
+
 				// Identify user immediately after successful authentication
 				// This follows PostHog best practice of calling identify as soon as possible
 				identifyUserInPostHog(posthog)
-				
+
 				// Track registration event
 				posthog?.capture("user_registered", {
 					email: email.trim(),
@@ -78,11 +78,11 @@ export function LoginModal({ open, onOpenChange }: LoginModalProps) {
 			} else {
 				// Login
 				await pb.collection("users").authWithPassword(email, password)
-				
+
 				// Identify user immediately after successful authentication
 				// This follows PostHog best practice of calling identify as soon as possible
 				identifyUserInPostHog(posthog)
-				
+
 				// Track login event
 				posthog?.capture("user_logged_in", {
 					email: email.trim(),
@@ -110,14 +110,9 @@ export function LoginModal({ open, onOpenChange }: LoginModalProps) {
 		<Dialog open={open} onOpenChange={onOpenChange}>
 			<DialogContent className="w-full max-w-lg bg-background border shadow-2xl">
 				<DialogHeader className="text-center space-y-2 pb-4">
-					<DialogTitle className="text-3xl font-bold">
-						{isRegister ? "Create Account" : "Welcome Back"}
-					</DialogTitle>
+					<DialogTitle className="text-3xl font-bold">{isRegister ? "Create Account" : "Welcome Back"}</DialogTitle>
 					<DialogDescription className="text-lg text-muted-foreground">
-						{isRegister 
-							? "Join our community and start submitting icons" 
-							: "Sign in to submit and manage your icons"
-						}
+						{isRegister ? "Join our community and start submitting icons" : "Sign in to submit and manage your icons"}
 					</DialogDescription>
 				</DialogHeader>
 
@@ -137,12 +132,7 @@ export function LoginModal({ open, onOpenChange }: LoginModalProps) {
 					)}
 
 					{/* GitHub Button (Coming Soon) */}
-					<Button
-						type="button"
-						variant="outline"
-						className="w-full h-12 text-base font-medium cursor-not-allowed opacity-50"
-						disabled
-					>
+					<Button type="button" variant="outline" className="w-full h-12 text-base font-medium cursor-not-allowed opacity-50" disabled>
 						<Github className="h-5 w-5 mr-2" />
 						Continue with GitHub
 						<span className="ml-2 text-xs text-muted-foreground">(Coming soon)</span>
@@ -176,9 +166,7 @@ export function LoginModal({ open, onOpenChange }: LoginModalProps) {
 								required
 							/>
 							{isRegister && (
-								<p className="text-xs text-muted-foreground">
-									We'll only use this to send you updates about your submissions
-								</p>
+								<p className="text-xs text-muted-foreground">We'll only use this to send you updates about your submissions</p>
 							)}
 						</div>
 
@@ -198,9 +186,7 @@ export function LoginModal({ open, onOpenChange }: LoginModalProps) {
 									className="h-12 text-base"
 									required
 								/>
-								<p className="text-xs text-muted-foreground">
-									This will be displayed publicly with your submissions
-								</p>
+								<p className="text-xs text-muted-foreground">This will be displayed publicly with your submissions</p>
 							</div>
 						)}
 
@@ -242,11 +228,7 @@ export function LoginModal({ open, onOpenChange }: LoginModalProps) {
 					</div>
 
 					{/* Submit Button */}
-					<Button 
-						type="submit" 
-						className="w-full h-12 text-base font-semibold" 
-						disabled={isLoading}
-					>
+					<Button type="submit" className="w-full h-12 text-base font-semibold" disabled={isLoading}>
 						{isLoading ? (
 							<>
 								<Loader2 className="h-5 w-5 mr-2 animate-spin" />
@@ -264,10 +246,7 @@ export function LoginModal({ open, onOpenChange }: LoginModalProps) {
 							onClick={toggleMode}
 							className="text-sm text-muted-foreground hover:text-foreground transition-colors font-medium hover:underline underline-offset-4"
 						>
-							{isRegister 
-								? "Already have an account? Sign in" 
-								: "Don't have an account? Create one"
-							}
+							{isRegister ? "Already have an account? Sign in" : "Don't have an account? Create one"}
 						</button>
 					</div>
 				</form>

web/src/components/magicui/magic-card.tsx

@@ -1,11 +1,10 @@
 "use client"
 
 import { motion, useMotionTemplate, useMotionValue } from "motion/react"
+import { useTheme } from "next-themes"
 import type React from "react"
 import { useCallback, useEffect, useRef, useState } from "react"
-
 import { cn } from "@/lib/utils"
-import { useTheme } from "next-themes"
 
 interface MagicCardProps {
 	children?: React.ReactNode
@@ -29,7 +28,6 @@ export function MagicCard({
 	const cardRef = useRef<HTMLDivElement>(null)
 	const mouseX = useMotionValue(-gradientSize)
 	const mouseY = useMotionValue(-gradientSize)
-	
 
 	const handleMouseMove = useCallback(
 		(e: MouseEvent) => {
@@ -85,10 +83,10 @@ export function MagicCard({
 
 	useEffect(() => {
 		if (theme === "dark") {
-			setFromColor("#ffb3c1")  // fallback for dark
+			setFromColor("#ffb3c1") // fallback for dark
 			setToColor("#ff75a0")
 		} else {
-			setFromColor("#1e9df1")  // fallback for light
+			setFromColor("#1e9df1") // fallback for light
 			setToColor("#8ed0f9")
 		}
 	}, [theme])