From 83212434f2a15309de96b71a48042dfa41f2eaab Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julienfroidefond@gmail.com>
Date: Sat, 28 Feb 2026 18:45:54 +0100
Subject: [PATCH] refactor: refresh shell UI styling and interaction polish

---
 src/components/layout/ClientLayout.tsx |  8 +++
 src/components/layout/Header.tsx       | 48 +++++++------
 src/components/layout/Sidebar.tsx      | 30 +++++----
 src/components/ui/button.tsx           | 12 ++--
 src/components/ui/card.tsx             |  2 +-
 src/components/ui/input.tsx            |  8 +--
 src/components/ui/nav-button.tsx       |  4 +-
 src/components/ui/tabs.tsx             |  6 +-
 src/styles/globals.css                 | 93 ++++++++++++++++----------
 9 files changed, 125 insertions(+), 86 deletions(-)

diff --git a/src/components/layout/ClientLayout.tsx b/src/components/layout/ClientLayout.tsx
index 55e78e3..8717064 100644
--- a/src/components/layout/ClientLayout.tsx
+++ b/src/components/layout/ClientLayout.tsx
@@ -176,6 +176,14 @@ export default function ClientLayout({
               userIsAdmin={userIsAdmin}
             />
           )}
+          {!isPublicRoute && isSidebarOpen && (
+            <button
+              type="button"
+              aria-label="Fermer la navigation"
+              className="fixed inset-0 top-[calc(4rem+env(safe-area-inset-top,0px))] z-20 bg-black/35 backdrop-blur-[1px] transition-opacity lg:hidden"
+              onClick={handleCloseSidebar}
+            />
+          )}
           <main className={!isPublicRoute ? "pt-safe" : ""}>{children}</main>
           <InstallPWA />
           <Toaster />
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 819633b..6a355d7 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -33,46 +33,56 @@ export function Header({
   };
 
   return (
-    <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/70 backdrop-blur-md supports-[backdrop-filter]:bg-background/50 pt-safe">
-      <div className="container flex h-14 max-w-screen-2xl items-center">
+    <header className="sticky top-0 z-50 w-full border-b border-primary/30 bg-background/70 shadow-sm backdrop-blur-xl supports-[backdrop-filter]:bg-background/65 pt-safe relative overflow-hidden">
+      <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(112deg,hsl(var(--primary)/0.24)_0%,hsl(192_85%_55%/0.2)_30%,transparent_56%),linear-gradient(248deg,hsl(338_82%_62%/0.16)_0%,transparent_46%),repeating-linear-gradient(135deg,hsl(var(--foreground)/0.03)_0_1px,transparent_1px_11px)]" />
+      <div className="container relative flex h-16 max-w-screen-2xl items-center">
         <IconButton
           variant="ghost"
           size="icon"
           icon={Menu}
           onClick={onToggleSidebar}
           tooltip={t("header.toggleSidebar")}
-          className="mr-2"
+          className="mr-2 h-10 w-10 rounded-full"
           id="sidebar-toggle"
         />
 
-        <div className="mr-4 hidden md:flex">
-          <a className="mr-6 flex items-center space-x-2" href="/">
-            <span className="hidden font-bold sm:inline-block">StripStream</span>
+        <div className="mr-2 flex items-center md:mr-4">
+          <a className="mr-2 flex items-center md:mr-6" href="/">
+            <span className="inline-flex bg-gradient-to-r from-primary via-cyan-500 to-fuchsia-500 bg-clip-text text-sm font-bold uppercase tracking-[0.1em] text-transparent sm:hidden">
+              StripStream
+            </span>
+            <span className="hidden sm:inline-flex flex-col leading-none">
+              <span className="bg-gradient-to-r from-primary via-cyan-500 to-fuchsia-500 bg-clip-text text-lg font-bold tracking-[0.1em] text-transparent">
+                STRIPSTREAM
+              </span>
+              <span className="mt-1 text-[10px] font-medium uppercase tracking-[0.28em] text-foreground/70">
+                comic reader
+              </span>
+            </span>
           </a>
         </div>
 
-        <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
-          <nav className="flex items-center space-x-2">
+        <div className="ml-auto flex items-center">
+          <nav className="flex items-center gap-1 rounded-full border border-border/60 bg-background/45 px-1 py-1 shadow-[0_4px_18px_-14px_rgba(0,0,0,0.65)] backdrop-blur-md">
             {showRefreshBackground && (
-              <button
+              <IconButton
                 onClick={handleRefreshBackground}
                 disabled={isRefreshing}
-                className="px-2 py-1.5 hover:bg-accent hover:text-accent-foreground rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
-                aria-label="Rafraîchir l'image de fond"
-              >
-                <RefreshCw
-                  className={`h-[1.2rem] w-[1.2rem] ${isRefreshing ? "animate-spin" : ""}`}
-                />
-                <span className="sr-only">Rafraîchir l&apos;image de fond</span>
-              </button>
+                variant="ghost"
+                size="icon"
+                icon={RefreshCw}
+                iconClassName={isRefreshing ? "animate-spin" : ""}
+                className="h-9 w-9 rounded-full"
+                tooltip="Rafraîchir l'image de fond"
+              />
             )}
             <LanguageSelector />
             <button
               onClick={toggleTheme}
-              className="px-2 py-1.5 hover:bg-accent hover:text-accent-foreground rounded-md"
+              className="rounded-full p-2 transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
               aria-label={t("header.toggleTheme")}
             >
-              <div className="relative flex items-center  w-5 h-5">
+              <div className="relative flex h-5 w-5 items-center">
                 <Sun className="absolute inset-0 h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
                 <Moon className="absolute inset-0 h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
               </div>
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index a2bf14f..5c84b2e 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -149,17 +149,19 @@ export function Sidebar({
     <aside
       suppressHydrationWarning
       className={cn(
-        "fixed left-0 top-14 z-30 h-[calc(100vh-3.5rem)] w-64 border-r border-border/40",
-        "bg-background/70 backdrop-blur-md supports-[backdrop-filter]:bg-background/50",
+        "fixed left-0 top-[calc(4rem+env(safe-area-inset-top,0px))] z-30 h-[calc(100vh-4rem-env(safe-area-inset-top,0px))] w-72 border-r border-primary/30",
+        "bg-background/70 shadow-sm backdrop-blur-xl supports-[backdrop-filter]:bg-background/65",
         "transition-transform duration-300 ease-in-out flex flex-col",
         isOpen ? "translate-x-0" : "-translate-x-full"
       )}
       id="sidebar"
     >
-      <div className="flex-1 space-y-4 py-4 overflow-y-auto">
-        <div className="px-3 py-2">
+      <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(160deg,hsl(var(--primary)/0.12)_0%,hsl(192_85%_55%/0.08)_32%,transparent_58%),linear-gradient(332deg,hsl(338_82%_62%/0.06)_0%,transparent_42%),repeating-linear-gradient(135deg,hsl(var(--foreground)/0.02)_0_1px,transparent_1px_11px)]" />
+
+      <div className="relative flex-1 space-y-4 overflow-y-auto px-3 py-4">
+        <div className="rounded-xl border border-border/50 bg-background/30 p-2">
           <div className="space-y-1">
-            <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">
+            <h2 className="mb-2 px-3 text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
               {t("sidebar.navigation")}
             </h2>
             {mainNavItems.map((item) => (
@@ -174,10 +176,10 @@ export function Sidebar({
           </div>
         </div>
 
-        <div className="px-3 py-2">
+        <div className="rounded-xl border border-border/50 bg-background/30 p-2">
           <div className="space-y-1">
-            <div className="mb-2 px-4 flex items-center justify-between">
-              <h2 className="text-lg font-semibold tracking-tight">
+            <div className="mb-2 flex items-center justify-between px-3">
+              <h2 className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
                 {t("sidebar.favorites.title")}
               </h2>
               <span className="text-xs text-muted-foreground">{favorites.length}</span>
@@ -205,10 +207,10 @@ export function Sidebar({
           </div>
         </div>
 
-        <div className="px-3 py-2">
+        <div className="rounded-xl border border-border/50 bg-background/30 p-2">
           <div className="space-y-1">
-            <div className="mb-2 px-4 flex items-center justify-between">
-              <h2 className="text-lg font-semibold tracking-tight">
+            <div className="mb-2 flex items-center justify-between px-3">
+              <h2 className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
                 {t("sidebar.libraries.title")}
               </h2>
               <IconButton
@@ -244,9 +246,9 @@ export function Sidebar({
           </div>
         </div>
 
-        <div className="px-3 py-2">
+        <div className="rounded-xl border border-border/50 bg-background/30 p-2">
           <div className="space-y-1">
-            <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">
+            <h2 className="mb-2 px-3 text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
               {t("sidebar.settings.title")}
             </h2>
             <NavButton
@@ -273,7 +275,7 @@ export function Sidebar({
         </div>
       </div>
 
-      <div className="p-3 border-t border-border/40">
+      <div className="relative border-t border-border/50 bg-background/30 p-3">
         <NavButton
           icon={LogOut}
           label={t("sidebar.logout")}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 162557b..62a813d 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -4,18 +4,18 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none",
   {
     variants: {
       variant: {
-        default: "bg-primary/90 backdrop-blur-md text-primary-foreground hover:bg-primary/80",
+        default: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 hover:shadow-md",
         destructive:
-          "bg-destructive/90 backdrop-blur-md text-destructive-foreground hover:bg-destructive/80",
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 hover:shadow-md",
         outline:
-          "border border-input bg-background/70 backdrop-blur-md hover:bg-accent/80 hover:text-accent-foreground",
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
         secondary:
-          "bg-secondary/80 backdrop-blur-md text-secondary-foreground hover:bg-secondary/70",
-        ghost: "hover:bg-accent/80 hover:backdrop-blur-md hover:text-accent-foreground",
+          "bg-secondary text-secondary-foreground hover:bg-secondary/85",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index fa0ec5c..819f207 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -7,7 +7,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
     <div
       ref={ref}
       className={cn(
-        "rounded-lg border bg-card/70 backdrop-blur-md text-card-foreground shadow-sm",
+        "rounded-lg border bg-card text-card-foreground shadow-sm transition-colors duration-200",
         className
       )}
       {...props}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 08b68d7..c4c13a4 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -6,10 +6,10 @@ export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {
     return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        <input
+          type={type}
+          className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm ring-offset-background transition-colors duration-200 ease-out file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:border-ring disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}
diff --git a/src/components/ui/nav-button.tsx b/src/components/ui/nav-button.tsx
index 07bd8eb..5fb6a0c 100644
--- a/src/components/ui/nav-button.tsx
+++ b/src/components/ui/nav-button.tsx
@@ -15,8 +15,8 @@ const NavButton = React.forwardRef<HTMLButtonElement, NavButtonProps>(
       <button
         ref={ref}
         className={cn(
-          "w-full flex items-center justify-between rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors",
-          active && "bg-accent",
+          "w-full flex items-center justify-between rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground",
+          active && "bg-accent text-accent-foreground shadow-sm",
           className
         )}
         {...props}
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index e8a2c0c..e08c3a1 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -61,7 +61,7 @@ const TabsList = React.forwardRef<HTMLDivElement, TabsListProps>(({ className, .
   <div
     ref={ref}
     className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted/80 backdrop-blur-md p-1 text-muted-foreground",
+      "inline-flex h-10 items-center justify-center rounded-md border border-border bg-muted p-1 text-muted-foreground",
       className
     )}
     {...props}
@@ -86,8 +86,8 @@ const TabsTrigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>(
         role="tab"
         aria-selected={isSelected}
         className={cn(
-          "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-          isSelected && "bg-background/90 backdrop-blur-md text-foreground shadow-sm",
+          "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+          isSelected && "bg-background text-foreground shadow-sm",
           className
         )}
         onClick={() => onValueChange(value)}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index d67b9dd..9b58e53 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -27,67 +27,84 @@ body.no-pinch-zoom * {
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --background-rgb: 255, 255, 255;
-    --foreground: 222.2 84% 4.9%;
+    --background: 36 33% 97%;
+    --background-rgb: 249, 246, 241;
+    --foreground: 222 33% 15%;
 
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card-foreground: 222 33% 15%;
 
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
+    --popover-foreground: 222 33% 15%;
 
-    --primary: 222.2 47.4% 11.2%;
+    --primary: 198 78% 37%;
     --primary-foreground: 210 40% 98%;
 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 36 30% 92%;
+    --secondary-foreground: 222 33% 15%;
 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --muted: 36 24% 90%;
+    --muted-foreground: 220 13% 40%;
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --accent: 198 52% 90%;
+    --accent-foreground: 222 33% 15%;
 
-    --destructive: 0 84.2% 60.2%;
+    --destructive: 2 72% 48%;
     --destructive-foreground: 210 40% 98%;
 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+    --border: 32 18% 84%;
+    --input: 32 18% 84%;
+    --ring: 198 78% 37%;
 
-    --radius: 0.5rem;
+    --radius: 0.75rem;
+
+    --surface-1: 0 0% 100%;
+    --surface-2: 34 27% 94%;
+    --elevation-1: 0 1px 2px 0 rgb(23 32 46 / 0.06);
+    --elevation-2: 0 8px 24px -8px rgb(23 32 46 / 0.18);
+
+    --font-ui: "Avenir Next", "Segoe UI", "Noto Sans", sans-serif;
+    --font-display: "Baskerville", "Times New Roman", serif;
+    --duration-fast: 120ms;
+    --duration-base: 200ms;
+    --duration-slow: 320ms;
+    --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
-    --background-rgb: 12, 17, 29;
-    --foreground: 210 40% 98%;
+    --background: 222 35% 10%;
+    --background-rgb: 17, 24, 38;
+    --foreground: 38 20% 92%;
 
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
+    --card: 221 31% 13%;
+    --card-foreground: 38 20% 92%;
 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
+    --popover: 221 31% 13%;
+    --popover-foreground: 38 20% 92%;
 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
+    --primary: 194 76% 62%;
+    --primary-foreground: 220 39% 11%;
 
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
+    --secondary: 221 22% 20%;
+    --secondary-foreground: 38 20% 92%;
 
-    --muted: 217.2 32.6% 25%;
-    --muted-foreground: 215 20.2% 65.1%;
+    --muted: 220 17% 24%;
+    --muted-foreground: 218 17% 72%;
 
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
+    --accent: 210 34% 24%;
+    --accent-foreground: 38 20% 92%;
 
-    --destructive: 0 62.8% 30.6%;
+    --destructive: 2 76% 58%;
     --destructive-foreground: 210 40% 98%;
 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+    --border: 219 18% 25%;
+    --input: 219 18% 25%;
+    --ring: 194 76% 62%;
+
+    --surface-1: 221 31% 13%;
+    --surface-2: 221 24% 17%;
+    --elevation-1: 0 1px 2px 0 rgb(2 8 18 / 0.35);
+    --elevation-2: 0 12px 30px -12px rgb(2 8 18 / 0.55);
   }
 }
 
@@ -95,8 +112,10 @@ body.no-pinch-zoom * {
   * {
     @apply border-border;
   }
+
   body {
-    @apply text-foreground;
+    @apply bg-background text-foreground antialiased;
+    font-family: var(--font-ui);
   }
 
   /* Empêche le zoom automatique iOS sur les inputs */