fix: fix typos

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

@@ -94,9 +94,9 @@ export function AppAside(props: AppAsideProps) {
 
                       return (
                         <>
-                          {index() > 0 && (
+                          <Show when={index() > 0}>
                             <BreadcrumbSeparator class="hidden md:block" />
-                          )}
+                          </Show>
                           <BreadcrumbItem class="hidden md:block">
                             <BreadcrumbLink
                               class="text-[var(--foreground)] hover:text-inherit"
@@ -117,7 +117,10 @@ export function AppAside(props: AppAsideProps) {
             </Show>
           </div>
         </header>
-        <div {...other} class={cn('min-h-0 flex-1 p-4 pt-0', local.class)}>
+        <div
+          {...other}
+          class={cn('flex min-h-0 flex-1 flex-col p-4 pt-0', local.class)}
+        >
           {local.children}
         </div>
       </SidebarInset>

apps/webui/src/components/layout/app-not-found.tsx

@@ -21,7 +21,7 @@ export function guardRouteIndexAsNotFound(
 
 export function AppNotFoundComponent() {
   return (
-    <div class="flex min-h-screen items-center px-4 py-12 sm:px-6 md:px-8 lg:px-12 xl:px-16">
+    <div class="flex h-svh items-center px-4 py-12 sm:px-6 md:px-8 lg:px-12 xl:px-16">
       <div class="w-full space-y-6 text-center">
         <div class="space-y-3">
           <h1 class="font-bold text-4xl tracking-tighter sm:text-5xl">

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

@@ -1,10 +1,3 @@
-import {
-  BookOpen,
-  Folders,
-  Settings2,
-  SquareTerminal,
-  Telescope,
-} from 'lucide-solid';
 import type { ComponentProps } from 'solid-js';
 import {
   Sidebar,
@@ -13,84 +6,11 @@ import {
   SidebarHeader,
   SidebarRail,
 } from '~/components/ui/sidebar';
+import { AppNavMainData } from '~/config/app-layout';
 import { AppIcon } from './app-icon';
 import { NavMain } from './nav-main';
 import { NavUser } from './nav-user';
 
-const navMain = [
-  {
-    group: 'Dashboard',
-    items: [
-      {
-        title: 'Explore',
-        link: {
-          to: '/explore',
-        },
-        icon: Telescope,
-      },
-      {
-        title: 'Subscriptions',
-        link: {
-          to: '/subscriptions',
-        },
-        icon: Folders,
-        children: [
-          {
-            title: 'Manage',
-            link: {
-              to: '/subscriptions/manage',
-            },
-          },
-          {
-            title: 'Create',
-            link: {
-              to: '/subscriptions/create',
-            },
-          },
-        ],
-      },
-      {
-        title: 'Playground',
-        icon: SquareTerminal,
-        link: {
-          to: '/playground',
-        },
-        children: [
-          {
-            title: 'GraphQL Api',
-            link: {
-              to: '/playground/graphql-api',
-            },
-          },
-        ],
-      },
-      {
-        title: 'Documentation',
-        link: {
-          href: 'https://github.com/dumtruck/konobangu/wiki',
-          target: '_blank',
-        },
-        icon: BookOpen,
-      },
-      {
-        title: 'Settings',
-        link: {
-          to: '/settings',
-        },
-        icon: Settings2,
-        children: [
-          {
-            title: 'Downloader',
-            link: {
-              to: '/settings/downloader',
-            },
-          },
-        ],
-      },
-    ],
-  },
-];
-
 const data = {
   user: {
     name: 'shadcn',
@@ -108,7 +28,7 @@ export const AppSidebar = (props: AppSidebarRootProps) => {
         <AppIcon />
       </SidebarHeader>
       <SidebarContent>
-        <NavMain groups={navMain} />
+        <NavMain groups={AppNavMainData} />
       </SidebarContent>
       <SidebarFooter>
         <NavUser user={data.user} />

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

@@ -1,12 +1,12 @@
 export function AppSkeleton() {
   return (
-    <>
+    <div class="flex min-h-svh flex-1 flex-col gap-4 md:min-h-0">
       <div class="grid auto-rows-min gap-4 md:grid-cols-3">
         <div class="aspect-video rounded-xl bg-muted/50" />
         <div class="aspect-video rounded-xl bg-muted/50" />
         <div class="aspect-video rounded-xl bg-muted/50" />
       </div>
-      <div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
-    </>
+      <div class="min-h-svh flex-1 rounded-xl bg-muted/50 md:min-h-0" />
+    </div>
   );
 }