fix: remove favicon image padding transparent
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 30 B |
1
apps/recorder/public/assets/favicon.ico
Symbolic link
@ -0,0 +1 @@
|
|||||||
|
../../../../assets/favicon.ico
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 30 B |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 30 B |
1
apps/webui/public/assets/favicon.ico
Symbolic link
@ -0,0 +1 @@
|
|||||||
|
../../../../assets/favicon.ico
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 30 B |
1
apps/webui/public/assets/favicon.png
Symbolic link
@ -0,0 +1 @@
|
|||||||
|
../../../../assets/favicon.png
|
33
apps/webui/src/components/layout/app-icon.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
@ -18,10 +18,10 @@ import {
|
|||||||
SidebarHeader,
|
SidebarHeader,
|
||||||
SidebarRail,
|
SidebarRail,
|
||||||
} from '~/components/ui/sidebar';
|
} from '~/components/ui/sidebar';
|
||||||
|
import { AppIcon } from './app-icon';
|
||||||
import { NavMain } from './nav-main';
|
import { NavMain } from './nav-main';
|
||||||
import { NavProjects } from './nav-projects';
|
import { NavProjects } from './nav-projects';
|
||||||
import { NavUser } from './nav-user';
|
import { NavUser } from './nav-user';
|
||||||
import { TeamSwitcher } from './team-switcher';
|
|
||||||
// This is sample data.
|
// This is sample data.
|
||||||
|
|
||||||
const data = {
|
const data = {
|
||||||
@ -30,23 +30,6 @@ const data = {
|
|||||||
email: 'm@example.com',
|
email: 'm@example.com',
|
||||||
avatar: '/avatars/shadcn.jpg',
|
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: [
|
navMain: [
|
||||||
{
|
{
|
||||||
title: 'Playground',
|
title: 'Playground',
|
||||||
@ -159,7 +142,7 @@ export const AppSidebar = (props: AppSidebarRootProps) => {
|
|||||||
return (
|
return (
|
||||||
<Sidebar collapsible="icon" {...props}>
|
<Sidebar collapsible="icon" {...props}>
|
||||||
<SidebarHeader>
|
<SidebarHeader>
|
||||||
<TeamSwitcher teams={data.teams} />
|
<AppIcon />
|
||||||
</SidebarHeader>
|
</SidebarHeader>
|
||||||
<SidebarContent>
|
<SidebarContent>
|
||||||
<NavMain items={data.navMain} />
|
<NavMain items={data.navMain} />
|
||||||
|
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 73 KiB |
Before Width: | Height: | Size: 247 KiB After Width: | Height: | Size: 363 KiB |
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 66 KiB |
BIN
assets/favicon-1024x1024.png
Normal file
After Width: | Height: | Size: 846 KiB |
Before Width: | Height: | Size: 813 B After Width: | Height: | Size: 1.0 KiB |
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 3.3 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 717 KiB After Width: | Height: | Size: 300 KiB |
Before Width: | Height: | Size: 459 KiB After Width: | Height: | Size: 78 KiB |