refactor: refresh shell UI styling and interaction polish

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 />

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>

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")}

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: {

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}

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}

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}

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)}