fix: remove favicon image padding transparent

apps/recorder/public/assets/favicon.ico

@@ -0,0 +1 @@
+../../../../assets/favicon.ico

apps/webui/public/assets/favicon.ico

@@ -0,0 +1 @@
+../../../../assets/favicon.ico

apps/webui/public/assets/favicon.png

@@ -0,0 +1 @@
+../../../../assets/favicon.png

apps/webui/src/components/layout/app-icon.tsx

@@ -0,0 +1,33 @@
+import { Image } from '@kobalte/core/image';
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '~/components/ui/sidebar';
+
+export function AppIcon() {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          size="lg"
+          class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+        >
+          <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+            <Image fallbackDelay={1000}>
+              <Image.Img
+                src="/assets/favicon.png"
+                class="size-8 object-cover"
+              />
+              <Image.Fallback>KONOBANGU</Image.Fallback>
+            </Image>
+          </div>
+          <div class="grid flex-1 gap-1 py-1 text-left text-sm leading-tight">
+            <span class="truncate font-semibold">Konobangu</span>
+            <span class="mt-1 truncate">@dumtruck</span>
+          </div>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

apps/webui/src/components/layout/app-sidebar.tsx

@@ -18,10 +18,10 @@ import {
   SidebarHeader,
   SidebarRail,
 } from '~/components/ui/sidebar';
+import { AppIcon } from './app-icon';
 import { NavMain } from './nav-main';
 import { NavProjects } from './nav-projects';
 import { NavUser } from './nav-user';
-import { TeamSwitcher } from './team-switcher';
 // This is sample data.
 
 const data = {
@@ -30,23 +30,6 @@ const data = {
     email: 'm@example.com',
     avatar: '/avatars/shadcn.jpg',
   },
-  teams: [
-    {
-      name: 'Acme Inc',
-      logo: GalleryVerticalEnd,
-      plan: 'Enterprise',
-    },
-    {
-      name: 'Acme Corp.',
-      logo: AudioWaveform,
-      plan: 'Startup',
-    },
-    {
-      name: 'Evil Corp.',
-      logo: Command,
-      plan: 'Free',
-    },
-  ],
   navMain: [
     {
       title: 'Playground',
@@ -159,7 +142,7 @@ export const AppSidebar = (props: AppSidebarRootProps) => {
   return (
     <Sidebar collapsible="icon" {...props}>
       <SidebarHeader>
-        <TeamSwitcher teams={data.teams} />
+        <AppIcon />
       </SidebarHeader>
       <SidebarContent>
         <NavMain items={data.navMain} />

apps/webui/src/components/layout/team-switcher.tsx

@@ -1,79 +0,0 @@
-import { ChevronsUpDown, type LucideIcon, Plus } from 'lucide-solid';
-import { For, createSignal } from 'solid-js';
-import { Dynamic } from 'solid-js/web';
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuTrigger,
-} from '~/components/ui/dropdown-menu';
-import {
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-} from '~/components/ui/sidebar';
-
-export function TeamSwitcher(props: {
-  teams: {
-    name: string;
-    logo: LucideIcon;
-    plan: string;
-  }[];
-}) {
-  const [activeTeam, setActiveTeam] = createSignal(props.teams[0]);
-
-  const logo = activeTeam().logo;
-
-  return (
-    <SidebarMenu>
-      <SidebarMenuItem>
-        <DropdownMenu>
-          <DropdownMenuTrigger
-            as={SidebarMenuButton}
-            size="lg"
-            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-          >
-            <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
-              <Dynamic component={logo} class="size-4" />
-            </div>
-            <div class="grid flex-1 text-left text-sm leading-tight">
-              <span class="truncate font-semibold">{activeTeam().name}</span>
-              <span class="truncate text-xs">{activeTeam().plan}</span>
-            </div>
-            <ChevronsUpDown class="ml-auto" />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg">
-            <DropdownMenuLabel class="text-muted-foreground text-xs">
-              Teams
-            </DropdownMenuLabel>
-            <For each={props.teams}>
-              {(team, index) => (
-                <DropdownMenuItem
-                  onClick={() => setActiveTeam(team)}
-                  class="gap-2 p-2"
-                >
-                  <div class="flex size-6 items-center justify-center rounded-sm border">
-                    <Dynamic component={team.logo} class="size-4 shrink-0" />
-                  </div>
-                  {team.name}
-                  <DropdownMenuShortcut>⌘{index() + 1}</DropdownMenuShortcut>
-                </DropdownMenuItem>
-              )}
-            </For>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem class="gap-2 p-2">
-              <div class="flex size-6 items-center justify-center rounded-md border bg-background">
-                <Plus class="size-4" />
-              </div>
-              <div class="font-medium text-muted-foreground">Add team</div>
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </SidebarMenuItem>
-    </SidebarMenu>
-  );
-}