style: apply prettier formatting to all files

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

packages/frontend/src/lib/components/header/header.svelte

@@ -1,51 +1,51 @@
 <script lang="ts">
-import { _ } from "svelte-i18n";
-import { page } from "$app/state";
-import { Button } from "$lib/components/ui/button";
-import type { AuthStatus } from "$lib/types";
-import { logout } from "$lib/services";
-import { goto } from "$app/navigation";
-import { getAssetUrl } from "$lib/directus";
-import LogoutButton from "../logout-button/logout-button.svelte";
-import Separator from "../ui/separator/separator.svelte";
-import { Avatar, AvatarFallback, AvatarImage } from "$lib/components/ui/avatar";
-import { getUserInitials } from "$lib/utils";
-import BurgerMenuButton from "../burger-menu-button/burger-menu-button.svelte";
-import Girls from "../girls/girls.svelte";
-import Logo from "../logo/logo.svelte";
+  import { _ } from "svelte-i18n";
+  import { page } from "$app/state";
+  import { Button } from "$lib/components/ui/button";
+  import type { AuthStatus } from "$lib/types";
+  import { logout } from "$lib/services";
+  import { goto } from "$app/navigation";
+  import { getAssetUrl } from "$lib/directus";
+  import LogoutButton from "../logout-button/logout-button.svelte";
+  import Separator from "../ui/separator/separator.svelte";
+  import { Avatar, AvatarFallback, AvatarImage } from "$lib/components/ui/avatar";
+  import { getUserInitials } from "$lib/utils";
+  import BurgerMenuButton from "../burger-menu-button/burger-menu-button.svelte";
+  import Girls from "../girls/girls.svelte";
+  import Logo from "../logo/logo.svelte";
 
-interface Props {
-	authStatus: AuthStatus;
-}
+  interface Props {
+    authStatus: AuthStatus;
+  }
 
-let { authStatus }: Props = $props();
+  let { authStatus }: Props = $props();
 
-let isMobileMenuOpen = $state(false);
+  let isMobileMenuOpen = $state(false);
 
-const navLinks = [
-	{ name: $_("header.home"), href: "/" },
-	{ name: $_("header.models"), href: "/models" },
-	{ name: $_("header.videos"), href: "/videos" },
-	{ name: $_("header.magazine"), href: "/magazine" },
-	{ name: $_("header.about"), href: "/about" },
-];
+  const navLinks = [
+    { name: $_("header.home"), href: "/" },
+    { name: $_("header.models"), href: "/models" },
+    { name: $_("header.videos"), href: "/videos" },
+    { name: $_("header.magazine"), href: "/magazine" },
+    { name: $_("header.about"), href: "/about" },
+  ];
 
-async function handleLogout() {
-	closeMenu();
-	await logout();
-	goto("/login", { invalidateAll: true });
-}
+  async function handleLogout() {
+    closeMenu();
+    await logout();
+    goto("/login", { invalidateAll: true });
+  }
 
-function closeMenu() {
-	isMobileMenuOpen = false;
-}
+  function closeMenu() {
+    isMobileMenuOpen = false;
+  }
 
-function isActiveLink(link: any) {
-	return (
-		(page.url.pathname === "/" && link === navLinks[0]) ||
-		(page.url.pathname.startsWith(link.href) && link !== navLinks[0])
-	);
-}
+  function isActiveLink(link: any) {
+    return (
+      (page.url.pathname === "/" && link === navLinks[0]) ||
+      (page.url.pathname.startsWith(link.href) && link !== navLinks[0])
+    );
+  }
 </script>
 
 <header
@@ -58,7 +58,7 @@ function isActiveLink(link: any) {
         href="/"
         class="flex w-full items-center gap-3 hover:scale-105 transition-all duration-300"
       >
-          <Logo hideName={true} />
+        <Logo hideName={true} />
       </a>
 
       <!-- Desktop Navigation -->
@@ -67,12 +67,12 @@ function isActiveLink(link: any) {
           <a
             href={link.href}
             class={`text-sm hover:text-foreground transition-colors duration-200 font-medium relative group ${
-              isActiveLink(link) ? 'text-foreground' : 'text-foreground/85'
+              isActiveLink(link) ? "text-foreground" : "text-foreground/85"
             }`}
           >
             {link.name}
             <span
-              class={`absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-primary to-accent transition-all duration-300 ${isActiveLink(link) ? 'w-full' : 'group-hover:w-full'}`}
+              class={`absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-primary to-accent transition-all duration-300 ${isActiveLink(link) ? "w-full" : "group-hover:w-full"}`}
             ></span>
           </a>
         {/each}
@@ -95,29 +95,29 @@ function isActiveLink(link: any) {
             <Button
               variant="link"
               size="icon"
-              class={`hidden sm:flex h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: '/me' }) ? 'text-foreground' : 'hover:text-foreground'}`}
+              class={`hidden sm:flex h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/me" }) ? "text-foreground" : "hover:text-foreground"}`}
               href="/me"
-              title={$_('header.dashboard')}
+              title={$_("header.dashboard")}
             >
               <span class="icon-[ri--dashboard-2-line] h-4 w-4"></span>
               <span
-                class={`absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-primary to-accent transition-all duration-300 ${isActiveLink({ href: '/me' }) ? 'w-full' : 'group-hover:w-full'}`}
+                class={`absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-primary to-accent transition-all duration-300 ${isActiveLink({ href: "/me" }) ? "w-full" : "group-hover:w-full"}`}
               ></span>
-              <span class="sr-only">{$_('header.dashboard')}</span>
+              <span class="sr-only">{$_("header.dashboard")}</span>
             </Button>
 
             <Button
               variant="link"
               size="icon"
-              class={`hidden sm:flex h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: '/play' }) ? 'text-foreground' : 'hover:text-foreground'}`}
+              class={`hidden sm:flex h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/play" }) ? "text-foreground" : "hover:text-foreground"}`}
               href="/play"
-              title={$_('header.play')}
+              title={$_("header.play")}
             >
               <span class="icon-[ri--rocket-line] h-4 w-4"></span>
               <span
-                class={`absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-primary to-accent transition-all duration-300 ${isActiveLink({ href: '/play' }) ? 'w-full' : 'group-hover:w-full'}`}
+                class={`absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-primary to-accent transition-all duration-300 ${isActiveLink({ href: "/play" }) ? "w-full" : "group-hover:w-full"}`}
               ></span>
-              <span class="sr-only">{$_('header.play')}</span>
+              <span class="sr-only">{$_("header.play")}</span>
             </Button>
 
             <Separator orientation="vertical" class="hidden md:flex mx-1 h-6 bg-border/50" />
@@ -126,9 +126,10 @@ function isActiveLink(link: any) {
 
             <LogoutButton
               user={{
-                name: authStatus.user!.artist_name || authStatus.user!.email.split('@')[0] || 'User',
-                avatar: getAssetUrl(authStatus.user!.avatar?.id, 'mini')!,
-                email: authStatus.user!.email
+                name:
+                  authStatus.user!.artist_name || authStatus.user!.email.split("@")[0] || "User",
+                avatar: getAssetUrl(authStatus.user!.avatar?.id, "mini")!,
+                email: authStatus.user!.email,
               }}
               onLogout={handleLogout}
             />
@@ -136,18 +137,16 @@ function isActiveLink(link: any) {
         </div>
       {:else}
         <div class="flex w-full items-center justify-end gap-4">
-          <Button variant="outline" class="font-medium" href="/login"
-            >{$_('header.login')}</Button
-          >
+          <Button variant="outline" class="font-medium" href="/login">{$_("header.login")}</Button>
           <Button
             href="/signup"
             class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 font-medium"
-            >{$_('header.signup')}</Button
+            >{$_("header.signup")}</Button
           >
         </div>
       {/if}
       <BurgerMenuButton
-        label={$_('header.navigation')}
+        label={$_("header.navigation")}
         bind:isMobileMenuOpen
         onclick={() => (isMobileMenuOpen = !isMobileMenuOpen)}
       />
@@ -155,26 +154,24 @@ function isActiveLink(link: any) {
   </div>
   <!-- Mobile Navigation -->
   <div
-    class={`border-t border-border/20 bg-background/95 bg-gradient-to-br from-primary to-accent backdrop-blur-xl max-h-[calc(100vh-4rem)] overflow-y-auto shadow-xl/30 transition-all duration-250 ${isMobileMenuOpen ? 'opacity-100' : 'opacity-0'}`}
+    class={`border-t border-border/20 bg-background/95 bg-gradient-to-br from-primary to-accent backdrop-blur-xl max-h-[calc(100vh-4rem)] overflow-y-auto shadow-xl/30 transition-all duration-250 ${isMobileMenuOpen ? "opacity-100" : "opacity-0"}`}
   >
     {#if isMobileMenuOpen}
       <div class="container mx-auto grid grid-cols-1 lg:grid-cols-3">
         <div class="hidden lg:flex col-span-2">
           <Girls />
         </div>
-        <div class="py-6 px-4 space-y-6 lg:col-start-3 border-t border-border/20 bg-background/95 ">
+        <div class="py-6 px-4 space-y-6 lg:col-start-3 border-t border-border/20 bg-background/95">
           <!-- User Profile Card -->
           {#if authStatus.authenticated}
             <div
               class="relative overflow-hidden rounded-2xl border border-border/50 bg-gradient-to-br from-card to-card/50 p-4 backdrop-blur-sm"
             >
-              <div
-                class="absolute inset-0 bg-gradient-to-br from-primary/5 to-accent/5"
-              ></div>
+              <div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-accent/5"></div>
               <div class="relative flex items-center gap-4">
                 <Avatar class="h-14 w-14 ring-2 ring-primary/30">
                   <AvatarImage
-                    src={getAssetUrl(authStatus.user!.avatar?.id, 'mini')}
+                    src={getAssetUrl(authStatus.user!.avatar?.id, "mini")}
                     alt={authStatus.user!.artist_name}
                   />
                   <AvatarFallback
@@ -212,17 +209,15 @@ function isActiveLink(link: any) {
           {/if}
           <!-- Navigation Cards -->
           <div class="space-y-3">
-            <h3
-              class="px-1 text-xs font-semibold text-muted-foreground uppercase tracking-wider"
-            >
-              {$_('header.navigation')}
+            <h3 class="px-1 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+              {$_("header.navigation")}
             </h3>
             <div class="grid gap-2">
               {#each navLinks as link (link.href)}
                 <a
                   href={link.href}
                   class="flex items-center justify-between rounded-xl border border-border/50 bg-card/50 p-4 backdrop-blur-sm transition-all hover:bg-card hover:border-primary/20 {isActiveLink(
-                    link
+                    link,
                   )
                     ? 'border-primary/30 bg-primary/5'
                     : ''}"
@@ -233,8 +228,7 @@ function isActiveLink(link: any) {
                     <!-- {#if isActiveLink(link)}
                       <div class="h-2 w-2 rounded-full bg-primary"></div>
                     {/if} -->
-                    <span
-                      class="icon-[ri--arrow-drop-right-line] h-6 w-6 text-muted-foreground"
+                    <span class="icon-[ri--arrow-drop-right-line] h-6 w-6 text-muted-foreground"
                     ></span>
                   </div>
                 </a>
@@ -244,16 +238,14 @@ function isActiveLink(link: any) {
 
           <!-- Account Actions -->
           <div class="space-y-3">
-            <h3
-              class="px-1 text-xs font-semibold text-muted-foreground uppercase tracking-wider"
-            >
-              {$_('header.account')}
+            <h3 class="px-1 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+              {$_("header.account")}
             </h3>
 
             <div class="grid gap-2">
               {#if authStatus.authenticated}
                 <a
-                  class={`flex items-center gap-4 rounded-xl border border-border/50 bg-card/50 p-4 text-left backdrop-blur-sm transition-all group hover:bg-card hover:border-primary/20 ${isActiveLink({ href: '/me' }) ? 'border-primary/30 bg-primary/5' : ''}`}
+                  class={`flex items-center gap-4 rounded-xl border border-border/50 bg-card/50 p-4 text-left backdrop-blur-sm transition-all group hover:bg-card hover:border-primary/20 ${isActiveLink({ href: "/me" }) ? "border-primary/30 bg-primary/5" : ""}`}
                   href="/me"
                   onclick={closeMenu}
                 >
@@ -266,13 +258,9 @@ function isActiveLink(link: any) {
                   </div>
                   <div class="flex flex-1 flex-col gap-1">
                     <div class="flex items-center gap-2">
-                      <span class="font-medium text-foreground"
-                        >{$_('header.dashboard')}</span
-                      >
+                      <span class="font-medium text-foreground">{$_("header.dashboard")}</span>
                     </div>
-                    <span class="text-sm text-muted-foreground"
-                      >{$_('header.dashboard_hint')}</span
-                    >
+                    <span class="text-sm text-muted-foreground">{$_("header.dashboard_hint")}</span>
                   </div>
                   <span
                     class="icon-[ri--arrow-drop-right-line] h-6 w-6 text-muted-foreground transition-all"
@@ -280,7 +268,7 @@ function isActiveLink(link: any) {
                 </a>
 
                 <a
-                  class={`flex items-center gap-4 rounded-xl border border-border/50 bg-card/50 p-4 text-left backdrop-blur-sm transition-all group hover:bg-card hover:border-primary/20 ${isActiveLink({ href: '/play' }) ? 'border-primary/30 bg-primary/5' : ''}`}
+                  class={`flex items-center gap-4 rounded-xl border border-border/50 bg-card/50 p-4 text-left backdrop-blur-sm transition-all group hover:bg-card hover:border-primary/20 ${isActiveLink({ href: "/play" }) ? "border-primary/30 bg-primary/5" : ""}`}
                   href="/play"
                   onclick={closeMenu}
                 >
@@ -293,13 +281,9 @@ function isActiveLink(link: any) {
                   </div>
                   <div class="flex flex-1 flex-col gap-1">
                     <div class="flex items-center gap-2">
-                      <span class="font-medium text-foreground"
-                        >{$_('header.play')}</span
-                      >
+                      <span class="font-medium text-foreground">{$_("header.play")}</span>
                     </div>
-                    <span class="text-sm text-muted-foreground"
-                      >{$_('header.play_hint')}</span
-                    >
+                    <span class="text-sm text-muted-foreground">{$_("header.play_hint")}</span>
                   </div>
                   <span
                     class="icon-[ri--arrow-drop-right-line] h-6 w-6 text-muted-foreground transition-all"
@@ -307,7 +291,7 @@ function isActiveLink(link: any) {
                 </a>
               {:else}
                 <a
-                  class={`flex items-center gap-4 rounded-xl border border-border/50 bg-card/50 p-4 text-left backdrop-blur-sm transition-all group hover:bg-card hover:border-primary/20 ${isActiveLink({ href: '/login' }) ? 'border-primary/30 bg-primary/5' : ''}`}
+                  class={`flex items-center gap-4 rounded-xl border border-border/50 bg-card/50 p-4 text-left backdrop-blur-sm transition-all group hover:bg-card hover:border-primary/20 ${isActiveLink({ href: "/login" }) ? "border-primary/30 bg-primary/5" : ""}`}
                   href="/login"
                   onclick={closeMenu}
                 >
@@ -320,13 +304,9 @@ function isActiveLink(link: any) {
                   </div>
                   <div class="flex flex-1 flex-col gap-1">
                     <div class="flex items-center gap-2">
-                      <span class="font-medium text-foreground"
-                        >{$_('header.login')}</span
-                      >
+                      <span class="font-medium text-foreground">{$_("header.login")}</span>
                     </div>
-                    <span class="text-sm text-muted-foreground"
-                      >{$_('header.login_hint')}</span
-                    >
+                    <span class="text-sm text-muted-foreground">{$_("header.login_hint")}</span>
                   </div>
                   <span
                     class="icon-[ri--arrow-drop-right-line] h-6 w-6 text-muted-foreground transition-all"
@@ -334,7 +314,7 @@ function isActiveLink(link: any) {
                 </a>
 
                 <a
-                  class={`flex items-center gap-4 rounded-xl border border-border/50 bg-card/50 p-4 text-left backdrop-blur-sm transition-all group hover:bg-card hover:border-primary/20 ${isActiveLink({ href: '/signup' }) ? 'border-primary/30 bg-primary/5' : ''}`}
+                  class={`flex items-center gap-4 rounded-xl border border-border/50 bg-card/50 p-4 text-left backdrop-blur-sm transition-all group hover:bg-card hover:border-primary/20 ${isActiveLink({ href: "/signup" }) ? "border-primary/30 bg-primary/5" : ""}`}
                   href="/signup"
                   onclick={closeMenu}
                 >
@@ -347,13 +327,9 @@ function isActiveLink(link: any) {
                   </div>
                   <div class="flex flex-1 flex-col gap-1">
                     <div class="flex items-center gap-2">
-                      <span class="font-medium text-foreground"
-                        >{$_('header.signup')}</span
-                      >
+                      <span class="font-medium text-foreground">{$_("header.signup")}</span>
                     </div>
-                    <span class="text-sm text-muted-foreground"
-                      >{$_('header.signup_hint')}</span
-                    >
+                    <span class="text-sm text-muted-foreground">{$_("header.signup_hint")}</span>
                   </div>
                   <span
                     class="icon-[ri--arrow-drop-right-line] h-6 w-6 text-muted-foreground transition-all"
@@ -372,17 +348,11 @@ function isActiveLink(link: any) {
               <div
                 class="flex h-10 w-10 items-center justify-center rounded-xl bg-destructive/10 group-hover:bg-destructive/20 transition-all"
               >
-                <span
-                  class="icon-[ri--logout-circle-r-line] h-4 w-4 text-destructive"
-                ></span>
+                <span class="icon-[ri--logout-circle-r-line] h-4 w-4 text-destructive"></span>
               </div>
               <div class="flex flex-1 flex-col gap-1">
-                <span class="font-medium text-foreground"
-                  >{$_('header.logout')}</span
-                >
-                <span class="text-sm text-muted-foreground"
-                  >{$_('header.logout_hint')}</span
-                >
+                <span class="font-medium text-foreground">{$_("header.logout")}</span>
+                <span class="text-sm text-muted-foreground">{$_("header.logout_hint")}</span>
               </div>
             </button>
           {/if}