Merge pull request #62 from Yashh56/code-improvement

feat: enhance UI stability and refresh settings layout

Author: Yashh56

src/App.css

@@ -48,82 +48,103 @@
 }
 
 :root {
-  --radius: 0.75rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
+  --radius: 0.625rem;
+  --background: oklch(0.985 0.003 240);
+  --foreground: oklch(0.18 0.015 252);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
+  --card-foreground: oklch(0.18 0.015 252);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.18 0.015 252);
+  --primary: oklch(0.55 0.17 238);
+  --primary-foreground: oklch(0.99 0 0);
+  --secondary: oklch(0.955 0.01 247);
+  --secondary-foreground: oklch(0.25 0.025 252);
+  --muted: oklch(0.95 0.01 247);
+  --muted-foreground: oklch(0.52 0.025 252);
+  --accent: oklch(0.94 0.028 238);
+  --accent-foreground: oklch(0.27 0.075 238);
   --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  --border: oklch(0.885 0.012 247);
+  --input: oklch(0.9 0.012 247);
+  --ring: oklch(0.58 0.17 238);
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar: oklch(0.965 0.006 247);
+  --sidebar-foreground: oklch(0.22 0.02 252);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: oklch(0.93 0.014 247);
+  --sidebar-accent-foreground: oklch(0.22 0.02 252);
+  --sidebar-border: oklch(0.875 0.012 247);
+  --sidebar-ring: var(--ring);
 
   /* New Design System Tokens */
-  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  --card-shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.15);
-  --glass-bg: rgba(255, 255, 255, 0.8);
+  --card-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 32px rgba(15, 23, 42, 0.05);
+  --card-shadow-hover: 0 12px 36px rgba(15, 23, 42, 0.1);
+  --glass-bg: rgba(255, 255, 255, 0.78);
   --glass-blur: 12px;
-  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-smooth: all 0.18s cubic-bezier(0.22, 1, 0.36, 1);
   --icon-bar-width: 60px;
   --command-bar-max-width: 600px;
   --slide-out-width: 400px;
+  --surface: oklch(0.975 0.006 247);
+  --surface-elevated: oklch(1 0 0);
+  --surface-subtle: oklch(0.95 0.01 247);
+  --border-subtle: oklch(0.9 0.012 247);
+}
+
+html,
+body,
+#root {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  background: var(--background);
 }
 
 .dark {
-  --background: oklch(0.12 0 0);
-  --foreground: oklch(0.95 0 0);
-  --card: oklch(0.16 0 0);
-  --card-foreground: oklch(0.95 0 0);
-  --popover: oklch(0.16 0 0);
-  --popover-foreground: oklch(0.95 0 0);
-  --primary: oklch(0.7 0.15 250);
-  --primary-foreground: oklch(0.98 0 0);
-  --secondary: oklch(0.22 0 0);
-  --secondary-foreground: oklch(0.95 0 0);
-  --muted: oklch(0.22 0 0);
-  --muted-foreground: oklch(0.65 0 0);
-  --accent: oklch(0.22 0 0);
-  --accent-foreground: oklch(0.95 0 0);
+  --background: oklch(0.135 0.012 250);
+  --foreground: oklch(0.94 0.006 255);
+  --card: oklch(0.18 0.014 250);
+  --card-foreground: oklch(0.94 0.006 255);
+  --popover: oklch(0.18 0.014 250);
+  --popover-foreground: oklch(0.94 0.006 255);
+  --primary: oklch(0.68 0.16 235);
+  --primary-foreground: oklch(0.12 0.02 250);
+  --secondary: oklch(0.23 0.016 250);
+  --secondary-foreground: oklch(0.93 0.006 255);
+  --muted: oklch(0.235 0.014 250);
+  --muted-foreground: oklch(0.68 0.018 255);
+  --accent: oklch(0.25 0.035 238);
+  --accent-foreground: oklch(0.93 0.014 238);
   --destructive: oklch(0.65 0.2 25);
-  --border: oklch(0.28 0 0);
-  --input: oklch(0.22 0 0);
-  --ring: oklch(0.7 0.15 250);
+  --border: oklch(0.31 0.018 250);
+  --input: oklch(0.26 0.016 250);
+  --ring: oklch(0.68 0.16 235);
   --chart-1: oklch(0.65 0.2 250);
   --chart-2: oklch(0.65 0.15 165);
   --chart-3: oklch(0.75 0.15 70);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  --sidebar: oklch(0.16 0.014 250);
+  --sidebar-foreground: oklch(0.9 0.008 255);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: oklch(0.24 0.018 250);
+  --sidebar-accent-foreground: oklch(0.94 0.006 255);
+  --sidebar-border: oklch(1 0 0 / 9%);
+  --sidebar-ring: var(--ring);
+  --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 52px rgba(0, 0, 0, 0.34);
+  --card-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 22px 64px rgba(0, 0, 0, 0.42);
+  --glass-bg: rgba(23, 29, 39, 0.76);
+  --surface: oklch(0.16 0.014 250);
+  --surface-elevated: oklch(0.19 0.016 250);
+  --surface-subtle: oklch(0.22 0.016 250);
+  --border-subtle: oklch(1 0 0 / 8%);
 }
 
 /* Theme Variants - Slate */
@@ -183,6 +204,11 @@
   body {
     @apply bg-background text-foreground antialiased;
     font-family: var(--font-sans);
+    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+    text-rendering: optimizeLegibility;
+    background:
+      radial-gradient(circle at 18% -10%, color-mix(in oklch, var(--primary) 14%, transparent) 0, transparent 32rem),
+      linear-gradient(180deg, color-mix(in oklch, var(--background) 96%, white), var(--background));
   }
 
   /* Apply monospace font to technical elements */
@@ -257,6 +283,44 @@ code,
     background-clip: content-box;
   }
 
+  .app-surface {
+    background:
+      linear-gradient(180deg, color-mix(in oklch, var(--surface) 92%, transparent), var(--background)),
+      var(--background);
+  }
+
+  .glass-panel {
+    background: var(--glass-bg);
+    backdrop-filter: blur(var(--glass-blur));
+    border-color: var(--border-subtle);
+    box-shadow: var(--card-shadow);
+  }
+
+  .premium-card {
+    border-color: var(--border-subtle);
+    box-shadow: var(--card-shadow);
+    transition: var(--transition-smooth);
+  }
+
+  .premium-card:hover {
+    border-color: color-mix(in oklch, var(--primary) 34%, var(--border));
+    box-shadow: var(--card-shadow-hover);
+    transform: translateY(-1px);
+  }
+
+  .ide-panel {
+    background: color-mix(in oklch, var(--card) 88%, transparent);
+    border-color: var(--border-subtle);
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
+  }
+
+  .hairline-grid {
+    background-image:
+      linear-gradient(color-mix(in oklch, var(--border) 38%, transparent) 1px, transparent 1px),
+      linear-gradient(90deg, color-mix(in oklch, var(--border) 38%, transparent) 1px, transparent 1px);
+    background-size: 28px 28px;
+  }
+
   /* Firefox */
 
   /* Route transition helpers for smoother page changes */
@@ -293,4 +357,4 @@ code,
   .dark * {
     scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
   }
-}
+}

src/components/layout/VerticalIconBar.tsx

@@ -42,7 +42,7 @@ export default function VerticalIconBar({ dbId, activePanel, onPanelChange }: Ve
     ] : [];
 
     return (
-        <nav className="fixed left-0 top-8 h-[calc(100vh-32px)] w-15 bg-background border-r border-border/20 z-40 flex flex-col items-center py-4 gap-2">
+        <nav className="fixed left-0 top-8 h-[calc(100vh-32px)] w-15 bg-sidebar/90 border-r border-sidebar-border z-40 flex flex-col items-center py-4 gap-2 backdrop-blur-xl shadow-[1px_0_0_rgba(255,255,255,0.03)_inset]">
 
             {/* Global Navigation Icons */}
             <div className="flex flex-col gap-2">
@@ -58,10 +58,10 @@ export default function VerticalIconBar({ dbId, activePanel, onPanelChange }: Ve
                                         variant="ghost"
                                         size="icon"
                                         className={`
-                      w-10 h-10 rounded-lg transition-all
+                      w-10 h-10 rounded-lg transition-all duration-150
                       ${active
-                                                ? 'bg-primary text-primary-foreground shadow-md'
-                                                : 'hover:bg-muted text-muted-foreground hover:text-foreground'
+                                                ? 'bg-primary text-primary-foreground shadow-lg shadow-primary/20'
+                                                : 'text-sidebar-foreground/62 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
                                             }
                     `}
                                     >
@@ -80,7 +80,7 @@ export default function VerticalIconBar({ dbId, activePanel, onPanelChange }: Ve
             {/* Database-Specific Panel Items (state-based, no navigation) */}
             {databasePanelItems.length > 0 && (
                 <>
-                    <div className="w-8 h-px bg-border/40 my-2" />
+                    <div className="w-8 h-px bg-sidebar-border my-2" />
                     <div className="flex flex-col gap-2">
                         {databasePanelItems.map((item) => {
                             const Icon = item.icon;
@@ -94,10 +94,10 @@ export default function VerticalIconBar({ dbId, activePanel, onPanelChange }: Ve
                                             size="icon"
                                             onClick={() => onPanelChange?.(item.panel)}
                                             className={`
-                          w-10 h-10 rounded-lg transition-all
+                          w-10 h-10 rounded-lg transition-all duration-150
                           ${active
-                                                    ? 'bg-primary text-primary-foreground shadow-md'
-                                                    : 'hover:bg-muted text-muted-foreground hover:text-foreground'
+                                                    ? 'bg-primary text-primary-foreground shadow-lg shadow-primary/20'
+                                                    : 'text-sidebar-foreground/62 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
                                                 }
                         `}
                                         >

src/components/shared/DataTable.tsx

@@ -44,8 +44,8 @@ export const DataTable = ({
 
   const tableContent = (
     <Table>
-      <TableHeader>
-        <TableRow className="bg-muted/20 hover:bg-muted/20 border-b border-border/20">
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted/45 hover:bg-muted/45 border-b border-border/30 backdrop-blur-sm">
           {showRowNumbers && (
             <TableHead className="w-12 text-center text-[11px] font-medium text-muted-foreground/60 px-3 py-2">
               #
@@ -54,7 +54,7 @@ export const DataTable = ({
           {columns.map((column) => (
             <TableHead
               key={column}
-              className="text-xs font-medium font-mono text-muted-foreground/70 whitespace-nowrap px-4 py-2.5 first:pl-4"
+              className="text-xs font-semibold font-mono text-muted-foreground/80 whitespace-nowrap px-4 py-2.5 first:pl-4"
             >
               {column}
             </TableHead>
@@ -70,7 +70,7 @@ export const DataTable = ({
         {data.map((row, index) => (
           <TableRow
             key={index}
-            className="group transition-colors hover:bg-muted/10 border-b border-border/10 last:border-0"
+            className="group transition-colors hover:bg-accent/20 border-b border-border/10 last:border-0"
           >
             {showRowNumbers && (
               <TableCell className="w-12 text-center text-[11px] tabular-nums text-muted-foreground/40 px-3 py-2 font-normal">
@@ -97,7 +97,7 @@ export const DataTable = ({
                     <Button
                       variant="ghost"
                       size="icon"
-                      className="h-7 w-7"
+                  className="h-7 w-7 hover:bg-primary/10"
                       onClick={() => onEditRow(row)}
                       title="Edit row"
                     >
@@ -108,7 +108,7 @@ export const DataTable = ({
                     <Button
                       variant="ghost"
                       size="icon"
-                      className="h-7 w-7"
+                  className="h-7 w-7 hover:bg-destructive/10"
                       onClick={() => onDeleteRow(row)}
                       title="Delete row"
                     >
@@ -127,15 +127,15 @@ export const DataTable = ({
   // If maxHeight is "none", render table directly (parent handles scrolling)
   if (maxHeight === "none") {
     return (
-      <div className="rounded-md border border-border/20 overflow-x-auto bg-background">
+      <div className="max-w-full min-w-0 rounded-lg border border-border/50 overflow-x-auto bg-background/70 shadow-sm">
         {tableContent}
       </div>
     );
   }
 
   // Otherwise use ScrollArea with maxHeight
   return (
-    <div className="rounded-md border border-border/20 overflow-hidden bg-background">
+    <div className="max-w-full min-w-0 rounded-lg border border-border/50 overflow-hidden bg-background/70 shadow-sm">
       <ScrollArea className="w-full" style={{ maxHeight }}>
         {tableContent}
         <ScrollBar orientation="horizontal" />
@@ -214,4 +214,4 @@ function formatCellValue(value: any): React.ReactNode {
   }
 
   return <span className="text-foreground/90">{strValue}</span>;
-}
+}

src/components/ui/alert-dialog.tsx

@@ -36,7 +36,7 @@ function AlertDialogOverlay({
     <AlertDialogPrimitive.Overlay
       data-slot="alert-dialog-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/60 backdrop-blur-sm",
         className
       )}
       {...props}
@@ -54,7 +54,7 @@ function AlertDialogContent({
       <AlertDialogPrimitive.Content
         data-slot="alert-dialog-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          "bg-popover/95 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border/70 p-6 shadow-2xl backdrop-blur-xl duration-200 sm:max-w-lg",
           className
         )}
         {...props}

src/components/ui/button.tsx

@@ -5,19 +5,19 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium tracking-[0.005em] transition-all duration-150 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/45 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
           "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border border-border/70 bg-background/70 shadow-xs hover:border-primary/35 hover:bg-accent/70 hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/55",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+          "hover:bg-accent/80 hover:text-accent-foreground dark:hover:bg-accent/55",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {

src/components/ui/card.tsx

@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card"
       className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        "bg-card/95 text-card-foreground flex flex-col gap-6 rounded-lg border border-border/60 py-6 shadow-sm backdrop-blur-sm transition-[border-color,box-shadow,transform]",
         className
       )}
       {...props}