Enhance AppSidebar: Update sidebar button to display "Zoë" with new styling and icon

frontend/src/app/platform/AppSidebar.tsx

@@ -52,11 +52,25 @@ export function AppSidebar({
         <SidebarHeader>
           <SidebarMenu>
             <SidebarMenuItem>
-              <SidebarMenuButton size="lg" tooltip="Zui" className="font-semibold">
-                <span className="flex size-8 min-w-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground text-xs">
-                  Zo
+              <SidebarMenuButton size="lg" tooltip="Zoë" className="font-semibold font-serif">
+                <span className="flex size-8 min-w-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground dark:bg-white dark:text-black">
+                  <span
+                    className="size-6 shrink-0 rounded-[2px] opacity-90"
+                    style={{
+                      maskImage: 'url(/app-icon.svg)',
+                      maskRepeat: 'no-repeat',
+                      maskPosition: 'center',
+                      maskSize: 'contain',
+                      WebkitMaskImage: 'url(/app-icon.svg)',
+                      WebkitMaskRepeat: 'no-repeat',
+                      WebkitMaskPosition: 'center',
+                      WebkitMaskSize: 'contain',
+                      backgroundColor: 'currentColor',
+                    }}
+                    aria-hidden
+                  />
                 </span>
-                <span className="group-data-[collapsible=icon]:hidden">Zui</span>
+                <span className="font-serif group-data-[collapsible=icon]:hidden uppercase tracking-wide">ZOË</span>
               </SidebarMenuButton>
             </SidebarMenuItem>
           </SidebarMenu>