fix: fix typos

apps/webui/package.json

@@ -9,6 +9,7 @@
     "preview": "rsbuild preview"
   },
   "dependencies": {
+    "@abraham/reflection": "^0.12.0",
     "@ark-ui/solid": "^4.10.2",
     "@codemirror/language": "6.0.0",
     "@corvu/drawer": "^0.2.3",
@@ -17,44 +18,43 @@
     "@graphiql/toolkit": "^0.11.1",
     "@kobalte/core": "^0.13.9",
     "@kobalte/tailwindcss": "^0.9.0",
+    "@outposts/injection-js": "^2.5.1",
     "@solid-primitives/graphql": "^2.2.0",
     "@solid-primitives/refs": "^1.1.0",
     "@tailwindcss/postcss": "^4.0.9",
-    "@tanstack/solid-router": "^1.112.2",
+    "@tanstack/react-router": "^1.112.13",
+    "@tanstack/router-devtools": "^1.112.13",
+    "@tanstack/solid-router": "^1.112.12",
+    "arktype": "^2.1.6",
     "chart.js": "^4.4.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "cmdk-solid": "^1.1.2",
     "embla-carousel-solid": "^8.5.2",
     "graphiql": "^3.8.3",
     "lucide-solid": "^0.477.0",
-    "react": "^18.0.0",
+    "oidc-client-rx": "0.1.0-alpha.9",
-    "react-dom": "^18.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rxjs": "^7.8.2",
     "solid-js": "^1.9.5",
     "solid-sonner": "^0.2.8",
-    "tailwindcss": "^3.4.17",
     "tailwind-merge": "^3.0.2",
-    "tailwindcss-animate": "^1.0.7",
+    "tailwindcss": "^3.4.17",
-    "@tanstack/react-router": "^1.112.0",
+    "tailwindcss-animate": "^1.0.7"
-    "@tanstack/router-devtools": "^1.112.6",
-    "class-variance-authority": "^0.7.1",
-    "@abraham/reflection": "^0.12.0",
-    "@outposts/injection-js": "^2.5.1",
-    "arktype": "^2.1.2",
-    "clsx": "^2.1.1",
-    "oidc-client-rx": "0.1.0-alpha.8",
-    "rxjs": "^7.8.2"
   },
   "devDependencies": {
-    "@rsbuild/core": "^1.2.14",
+    "@rsbuild/core": "^1.2.15",
     "@rsbuild/plugin-babel": "^1.0.4",
+    "@rsbuild/plugin-solid": "^1.0.5",
+    "@tailwindcss/postcss": "^4.0.9",
+    "@tanstack/react-router": "^1.112.0",
+    "@tanstack/router-devtools": "^1.112.6",
+    "@tanstack/router-plugin": "^1.112.13",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "chalk": "^5.4.1",
     "commander": "^13.1.0",
-    "postcss": "^8.5.3",
+    "postcss": "^8.5.3"
-    "@rsbuild/plugin-solid": "^1.0.5",
-    "@tanstack/react-router": "^1.112.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "@tailwindcss/postcss": "^4.0.9",
-    "@tanstack/router-devtools": "^1.112.6",
-    "@tanstack/router-plugin": "^1.112.3"
   }
 }

apps/webui/src/auth/hooks.ts

@@ -3,8 +3,8 @@ import {
   InjectorContextVoidInjector,
   useOidcClient,
 } from 'oidc-client-rx/adapters/solid-js';
-import { NEVER, of } from 'rxjs';
+import { NEVER, map, of } from 'rxjs';
-import { createMemo, from } from 'solid-js';
+import { from } from 'solid-js';
 import { isBasicAuth, isOidcAuth } from './config';
 
 const BASIC_AUTH_IS_AUTHENTICATED$ = of({
@@ -17,34 +17,39 @@ const BASIC_AUTH_USER_DATA$ = of({
   allUserData: [],
 });
 
-const useOidcClientExt = isOidcAuth ? useOidcClient : () => ({ oidcSecurityService: undefined, injector: InjectorContextVoidInjector })
+const useOidcClientExt = isOidcAuth
+  ? useOidcClient
+  : () => ({
+      oidcSecurityService: undefined,
+      injector: InjectorContextVoidInjector,
+    });
 
 export function useAuth() {
   const { oidcSecurityService, injector } = useOidcClientExt();
 
-  const isAuthenticatedObj = from(
+  const isAuthenticated$ = (
     oidcSecurityService?.isAuthenticated$ ?? BASIC_AUTH_IS_AUTHENTICATED$
-  );
+  ).pipe(map((s) => s.isAuthenticated));
 
-  const userDataObj = from(
+  const userData$ = (
     oidcSecurityService?.userData$ ?? BASIC_AUTH_USER_DATA$
-  );
+  ).pipe(map((s) => s.userData));
 
-  const isAuthenticated = createMemo(
+  const isAuthenticated = from(isAuthenticated$);
-    () => isAuthenticatedObj()?.isAuthenticated ?? false
-  );
 
-  const userData = createMemo(() => userDataObj()?.userData ?? {});
+  const userData = from(userData$);
 
-  const checkAuthResultEvent = isBasicAuth
+  const checkAuthResultEvent$ = isBasicAuth
     ? NEVER
     : injector.get(CHECK_AUTH_RESULT_EVENT);
 
   return {
     oidcSecurityService,
+    isAuthenticated$,
     isAuthenticated,
+    userData$,
     userData,
     injector,
-    checkAuthResultEvent,
+    checkAuthResultEvent$,
   };
 }

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>
   );
 }

apps/webui/src/config/app-layout.ts

@@ -0,0 +1,92 @@
+import {
+  BookOpen,
+  Folders,
+  Settings2,
+  SquareTerminal,
+  Telescope,
+} from 'lucide-solid';
+
+export const AppNavMainData = [
+  {
+    group: 'Dashboard',
+    items: [
+      {
+        title: 'Explore',
+        icon: Telescope,
+        children: [
+          {
+            title: 'Feed',
+            link: {
+              to: '/feed',
+            },
+          },
+          {
+            title: 'Explore',
+            link: {
+              to: '/explore',
+            },
+          },
+        ],
+      },
+      {
+        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',
+            },
+          },
+        ],
+      },
+    ],
+  },
+];

apps/webui/src/routeTree.gen.ts

@@ -12,19 +12,21 @@
 
 import { Route as rootRoute } from './routes/__root'
 import { Route as AboutImport } from './routes/about'
-import { Route as AppImport } from './routes/_app'
 import { Route as R404Import } from './routes/404'
+import { Route as AppRouteImport } from './routes/_app/route'
 import { Route as IndexImport } from './routes/index'
 import { Route as AuthSignUpImport } from './routes/auth/sign-up'
 import { Route as AuthSignInImport } from './routes/auth/sign-in'
-import { Route as AppExploreImport } from './routes/_app/explore'
 import { Route as AppSubscriptionsRouteImport } from './routes/_app/subscriptions/route'
 import { Route as AppSettingsRouteImport } from './routes/_app/settings/route'
 import { Route as AppPlaygroundRouteImport } from './routes/_app/playground/route'
 import { Route as AuthOidcCallbackImport } from './routes/auth/oidc/callback'
 import { Route as AppSubscriptionsManageImport } from './routes/_app/subscriptions/manage'
 import { Route as AppSubscriptionsCreateImport } from './routes/_app/subscriptions/create'
+import { Route as AppSettingsDownloaderImport } from './routes/_app/settings/downloader'
 import { Route as AppPlaygroundGraphqlApiImport } from './routes/_app/playground/graphql-api'
+import { Route as AppExploreFeedImport } from './routes/_app/_explore/feed'
+import { Route as AppExploreExploreImport } from './routes/_app/_explore/explore'
 import { Route as AppSubscriptionsEditSubscriptionIdImport } from './routes/_app/subscriptions/edit.$subscription-id'
 
 // Create/Update Routes
@@ -35,17 +37,17 @@ const AboutRoute = AboutImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
-const AppRoute = AppImport.update({
-  id: '/_app',
-  getParentRoute: () => rootRoute,
-} as any)
-
 const R404Route = R404Import.update({
   id: '/404',
   path: '/404',
   getParentRoute: () => rootRoute,
 } as any)
 
+const AppRouteRoute = AppRouteImport.update({
+  id: '/_app',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const IndexRoute = IndexImport.update({
   id: '/',
   path: '/',
@@ -64,28 +66,22 @@ const AuthSignInRoute = AuthSignInImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
-const AppExploreRoute = AppExploreImport.update({
-  id: '/explore',
-  path: '/explore',
-  getParentRoute: () => AppRoute,
-} as any)
-
 const AppSubscriptionsRouteRoute = AppSubscriptionsRouteImport.update({
   id: '/subscriptions',
   path: '/subscriptions',
-  getParentRoute: () => AppRoute,
+  getParentRoute: () => AppRouteRoute,
 } as any)
 
 const AppSettingsRouteRoute = AppSettingsRouteImport.update({
   id: '/settings',
   path: '/settings',
-  getParentRoute: () => AppRoute,
+  getParentRoute: () => AppRouteRoute,
 } as any)
 
 const AppPlaygroundRouteRoute = AppPlaygroundRouteImport.update({
   id: '/playground',
   path: '/playground',
-  getParentRoute: () => AppRoute,
+  getParentRoute: () => AppRouteRoute,
 } as any)
 
 const AuthOidcCallbackRoute = AuthOidcCallbackImport.update({
@@ -106,6 +102,12 @@ const AppSubscriptionsCreateRoute = AppSubscriptionsCreateImport.update({
   getParentRoute: () => AppSubscriptionsRouteRoute,
 } as any)
 
+const AppSettingsDownloaderRoute = AppSettingsDownloaderImport.update({
+  id: '/downloader',
+  path: '/downloader',
+  getParentRoute: () => AppSettingsRouteRoute,
+} as any)
+
 const AppPlaygroundGraphqlApiRoute = AppPlaygroundGraphqlApiImport.update({
   id: '/graphql-api',
   path: '/graphql-api',
@@ -114,6 +116,18 @@ const AppPlaygroundGraphqlApiRoute = AppPlaygroundGraphqlApiImport.update({
   import('./routes/_app/playground/graphql-api.lazy').then((d) => d.Route),
 )
 
+const AppExploreFeedRoute = AppExploreFeedImport.update({
+  id: '/_explore/feed',
+  path: '/feed',
+  getParentRoute: () => AppRouteRoute,
+} as any)
+
+const AppExploreExploreRoute = AppExploreExploreImport.update({
+  id: '/_explore/explore',
+  path: '/explore',
+  getParentRoute: () => AppRouteRoute,
+} as any)
+
 const AppSubscriptionsEditSubscriptionIdRoute =
   AppSubscriptionsEditSubscriptionIdImport.update({
     id: '/edit/$subscription-id',
@@ -132,6 +146,13 @@ declare module '@tanstack/solid-router' {
       preLoaderRoute: typeof IndexImport
       parentRoute: typeof rootRoute
     }
+    '/_app': {
+      id: '/_app'
+      path: ''
+      fullPath: ''
+      preLoaderRoute: typeof AppRouteImport
+      parentRoute: typeof rootRoute
+    }
     '/404': {
       id: '/404'
       path: '/404'
@@ -139,13 +160,6 @@ declare module '@tanstack/solid-router' {
       preLoaderRoute: typeof R404Import
       parentRoute: typeof rootRoute
     }
-    '/_app': {
-      id: '/_app'
-      path: ''
-      fullPath: ''
-      preLoaderRoute: typeof AppImport
-      parentRoute: typeof rootRoute
-    }
     '/about': {
       id: '/about'
       path: '/about'
@@ -158,28 +172,21 @@ declare module '@tanstack/solid-router' {
       path: '/playground'
       fullPath: '/playground'
       preLoaderRoute: typeof AppPlaygroundRouteImport
-      parentRoute: typeof AppImport
+      parentRoute: typeof AppRouteImport
     }
     '/_app/settings': {
       id: '/_app/settings'
       path: '/settings'
       fullPath: '/settings'
       preLoaderRoute: typeof AppSettingsRouteImport
-      parentRoute: typeof AppImport
+      parentRoute: typeof AppRouteImport
     }
     '/_app/subscriptions': {
       id: '/_app/subscriptions'
       path: '/subscriptions'
       fullPath: '/subscriptions'
       preLoaderRoute: typeof AppSubscriptionsRouteImport
-      parentRoute: typeof AppImport
+      parentRoute: typeof AppRouteImport
-    }
-    '/_app/explore': {
-      id: '/_app/explore'
-      path: '/explore'
-      fullPath: '/explore'
-      preLoaderRoute: typeof AppExploreImport
-      parentRoute: typeof AppImport
     }
     '/auth/sign-in': {
       id: '/auth/sign-in'
@@ -195,6 +202,20 @@ declare module '@tanstack/solid-router' {
       preLoaderRoute: typeof AuthSignUpImport
       parentRoute: typeof rootRoute
     }
+    '/_app/_explore/explore': {
+      id: '/_app/_explore/explore'
+      path: '/explore'
+      fullPath: '/explore'
+      preLoaderRoute: typeof AppExploreExploreImport
+      parentRoute: typeof AppRouteImport
+    }
+    '/_app/_explore/feed': {
+      id: '/_app/_explore/feed'
+      path: '/feed'
+      fullPath: '/feed'
+      preLoaderRoute: typeof AppExploreFeedImport
+      parentRoute: typeof AppRouteImport
+    }
     '/_app/playground/graphql-api': {
       id: '/_app/playground/graphql-api'
       path: '/graphql-api'
@@ -202,6 +223,13 @@ declare module '@tanstack/solid-router' {
       preLoaderRoute: typeof AppPlaygroundGraphqlApiImport
       parentRoute: typeof AppPlaygroundRouteImport
     }
+    '/_app/settings/downloader': {
+      id: '/_app/settings/downloader'
+      path: '/downloader'
+      fullPath: '/settings/downloader'
+      preLoaderRoute: typeof AppSettingsDownloaderImport
+      parentRoute: typeof AppSettingsRouteImport
+    }
     '/_app/subscriptions/create': {
       id: '/_app/subscriptions/create'
       path: '/create'
@@ -246,6 +274,17 @@ const AppPlaygroundRouteRouteChildren: AppPlaygroundRouteRouteChildren = {
 const AppPlaygroundRouteRouteWithChildren =
   AppPlaygroundRouteRoute._addFileChildren(AppPlaygroundRouteRouteChildren)
 
+interface AppSettingsRouteRouteChildren {
+  AppSettingsDownloaderRoute: typeof AppSettingsDownloaderRoute
+}
+
+const AppSettingsRouteRouteChildren: AppSettingsRouteRouteChildren = {
+  AppSettingsDownloaderRoute: AppSettingsDownloaderRoute,
+}
+
+const AppSettingsRouteRouteWithChildren =
+  AppSettingsRouteRoute._addFileChildren(AppSettingsRouteRouteChildren)
+
 interface AppSubscriptionsRouteRouteChildren {
   AppSubscriptionsCreateRoute: typeof AppSubscriptionsCreateRoute
   AppSubscriptionsManageRoute: typeof AppSubscriptionsManageRoute
@@ -264,34 +303,40 @@ const AppSubscriptionsRouteRouteWithChildren =
     AppSubscriptionsRouteRouteChildren,
   )
 
-interface AppRouteChildren {
+interface AppRouteRouteChildren {
   AppPlaygroundRouteRoute: typeof AppPlaygroundRouteRouteWithChildren
-  AppSettingsRouteRoute: typeof AppSettingsRouteRoute
+  AppSettingsRouteRoute: typeof AppSettingsRouteRouteWithChildren
   AppSubscriptionsRouteRoute: typeof AppSubscriptionsRouteRouteWithChildren
-  AppExploreRoute: typeof AppExploreRoute
+  AppExploreExploreRoute: typeof AppExploreExploreRoute
+  AppExploreFeedRoute: typeof AppExploreFeedRoute
 }
 
-const AppRouteChildren: AppRouteChildren = {
+const AppRouteRouteChildren: AppRouteRouteChildren = {
   AppPlaygroundRouteRoute: AppPlaygroundRouteRouteWithChildren,
-  AppSettingsRouteRoute: AppSettingsRouteRoute,
+  AppSettingsRouteRoute: AppSettingsRouteRouteWithChildren,
   AppSubscriptionsRouteRoute: AppSubscriptionsRouteRouteWithChildren,
-  AppExploreRoute: AppExploreRoute,
+  AppExploreExploreRoute: AppExploreExploreRoute,
+  AppExploreFeedRoute: AppExploreFeedRoute,
 }
 
-const AppRouteWithChildren = AppRoute._addFileChildren(AppRouteChildren)
+const AppRouteRouteWithChildren = AppRouteRoute._addFileChildren(
+  AppRouteRouteChildren,
+)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '': typeof AppRouteRouteWithChildren
   '/404': typeof R404Route
-  '': typeof AppRouteWithChildren
   '/about': typeof AboutRoute
   '/playground': typeof AppPlaygroundRouteRouteWithChildren
-  '/settings': typeof AppSettingsRouteRoute
+  '/settings': typeof AppSettingsRouteRouteWithChildren
   '/subscriptions': typeof AppSubscriptionsRouteRouteWithChildren
-  '/explore': typeof AppExploreRoute
   '/auth/sign-in': typeof AuthSignInRoute
   '/auth/sign-up': typeof AuthSignUpRoute
+  '/explore': typeof AppExploreExploreRoute
+  '/feed': typeof AppExploreFeedRoute
   '/playground/graphql-api': typeof AppPlaygroundGraphqlApiRoute
+  '/settings/downloader': typeof AppSettingsDownloaderRoute
   '/subscriptions/create': typeof AppSubscriptionsCreateRoute
   '/subscriptions/manage': typeof AppSubscriptionsManageRoute
   '/auth/oidc/callback': typeof AuthOidcCallbackRoute
@@ -300,16 +345,18 @@ export interface FileRoutesByFullPath {
 
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '': typeof AppRouteRouteWithChildren
   '/404': typeof R404Route
-  '': typeof AppRouteWithChildren
   '/about': typeof AboutRoute
   '/playground': typeof AppPlaygroundRouteRouteWithChildren
-  '/settings': typeof AppSettingsRouteRoute
+  '/settings': typeof AppSettingsRouteRouteWithChildren
   '/subscriptions': typeof AppSubscriptionsRouteRouteWithChildren
-  '/explore': typeof AppExploreRoute
   '/auth/sign-in': typeof AuthSignInRoute
   '/auth/sign-up': typeof AuthSignUpRoute
+  '/explore': typeof AppExploreExploreRoute
+  '/feed': typeof AppExploreFeedRoute
   '/playground/graphql-api': typeof AppPlaygroundGraphqlApiRoute
+  '/settings/downloader': typeof AppSettingsDownloaderRoute
   '/subscriptions/create': typeof AppSubscriptionsCreateRoute
   '/subscriptions/manage': typeof AppSubscriptionsManageRoute
   '/auth/oidc/callback': typeof AuthOidcCallbackRoute
@@ -319,16 +366,18 @@ export interface FileRoutesByTo {
 export interface FileRoutesById {
   __root__: typeof rootRoute
   '/': typeof IndexRoute
+  '/_app': typeof AppRouteRouteWithChildren
   '/404': typeof R404Route
-  '/_app': typeof AppRouteWithChildren
   '/about': typeof AboutRoute
   '/_app/playground': typeof AppPlaygroundRouteRouteWithChildren
-  '/_app/settings': typeof AppSettingsRouteRoute
+  '/_app/settings': typeof AppSettingsRouteRouteWithChildren
   '/_app/subscriptions': typeof AppSubscriptionsRouteRouteWithChildren
-  '/_app/explore': typeof AppExploreRoute
   '/auth/sign-in': typeof AuthSignInRoute
   '/auth/sign-up': typeof AuthSignUpRoute
+  '/_app/_explore/explore': typeof AppExploreExploreRoute
+  '/_app/_explore/feed': typeof AppExploreFeedRoute
   '/_app/playground/graphql-api': typeof AppPlaygroundGraphqlApiRoute
+  '/_app/settings/downloader': typeof AppSettingsDownloaderRoute
   '/_app/subscriptions/create': typeof AppSubscriptionsCreateRoute
   '/_app/subscriptions/manage': typeof AppSubscriptionsManageRoute
   '/auth/oidc/callback': typeof AuthOidcCallbackRoute
@@ -339,16 +388,18 @@ export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/'
-    | '/404'
     | ''
+    | '/404'
     | '/about'
     | '/playground'
     | '/settings'
     | '/subscriptions'
-    | '/explore'
     | '/auth/sign-in'
     | '/auth/sign-up'
+    | '/explore'
+    | '/feed'
     | '/playground/graphql-api'
+    | '/settings/downloader'
     | '/subscriptions/create'
     | '/subscriptions/manage'
     | '/auth/oidc/callback'
@@ -356,16 +407,18 @@ export interface FileRouteTypes {
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
-    | '/404'
     | ''
+    | '/404'
     | '/about'
     | '/playground'
     | '/settings'
     | '/subscriptions'
-    | '/explore'
     | '/auth/sign-in'
     | '/auth/sign-up'
+    | '/explore'
+    | '/feed'
     | '/playground/graphql-api'
+    | '/settings/downloader'
     | '/subscriptions/create'
     | '/subscriptions/manage'
     | '/auth/oidc/callback'
@@ -373,16 +426,18 @@ export interface FileRouteTypes {
   id:
     | '__root__'
     | '/'
-    | '/404'
     | '/_app'
+    | '/404'
     | '/about'
     | '/_app/playground'
     | '/_app/settings'
     | '/_app/subscriptions'
-    | '/_app/explore'
     | '/auth/sign-in'
     | '/auth/sign-up'
+    | '/_app/_explore/explore'
+    | '/_app/_explore/feed'
     | '/_app/playground/graphql-api'
+    | '/_app/settings/downloader'
     | '/_app/subscriptions/create'
     | '/_app/subscriptions/manage'
     | '/auth/oidc/callback'
@@ -392,8 +447,8 @@ export interface FileRouteTypes {
 
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  AppRouteRoute: typeof AppRouteRouteWithChildren
   R404Route: typeof R404Route
-  AppRoute: typeof AppRouteWithChildren
   AboutRoute: typeof AboutRoute
   AuthSignInRoute: typeof AuthSignInRoute
   AuthSignUpRoute: typeof AuthSignUpRoute
@@ -402,8 +457,8 @@ export interface RootRouteChildren {
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  AppRouteRoute: AppRouteRouteWithChildren,
   R404Route: R404Route,
-  AppRoute: AppRouteWithChildren,
   AboutRoute: AboutRoute,
   AuthSignInRoute: AuthSignInRoute,
   AuthSignUpRoute: AuthSignUpRoute,
@@ -421,8 +476,8 @@ export const routeTree = rootRoute
       "filePath": "__root.tsx",
       "children": [
         "/",
-        "/404",
         "/_app",
+        "/404",
         "/about",
         "/auth/sign-in",
         "/auth/sign-up",
@@ -432,18 +487,19 @@ export const routeTree = rootRoute
     "/": {
       "filePath": "index.tsx"
     },
-    "/404": {
-      "filePath": "404.tsx"
-    },
     "/_app": {
-      "filePath": "_app.tsx",
+      "filePath": "_app/route.tsx",
       "children": [
         "/_app/playground",
         "/_app/settings",
         "/_app/subscriptions",
-        "/_app/explore"
+        "/_app/_explore/explore",
+        "/_app/_explore/feed"
       ]
     },
+    "/404": {
+      "filePath": "404.tsx"
+    },
     "/about": {
       "filePath": "about.tsx"
     },
@@ -456,7 +512,10 @@ export const routeTree = rootRoute
     },
     "/_app/settings": {
       "filePath": "_app/settings/route.tsx",
-      "parent": "/_app"
+      "parent": "/_app",
+      "children": [
+        "/_app/settings/downloader"
+      ]
     },
     "/_app/subscriptions": {
       "filePath": "_app/subscriptions/route.tsx",
@@ -467,20 +526,28 @@ export const routeTree = rootRoute
         "/_app/subscriptions/edit/$subscription-id"
       ]
     },
-    "/_app/explore": {
-      "filePath": "_app/explore.tsx",
-      "parent": "/_app"
-    },
     "/auth/sign-in": {
       "filePath": "auth/sign-in.tsx"
     },
     "/auth/sign-up": {
       "filePath": "auth/sign-up.tsx"
     },
+    "/_app/_explore/explore": {
+      "filePath": "_app/_explore/explore.tsx",
+      "parent": "/_app"
+    },
+    "/_app/_explore/feed": {
+      "filePath": "_app/_explore/feed.tsx",
+      "parent": "/_app"
+    },
     "/_app/playground/graphql-api": {
       "filePath": "_app/playground/graphql-api.tsx",
       "parent": "/_app/playground"
     },
+    "/_app/settings/downloader": {
+      "filePath": "_app/settings/downloader.tsx",
+      "parent": "/_app/settings"
+    },
     "/_app/subscriptions/create": {
       "filePath": "_app/subscriptions/create.tsx",
       "parent": "/_app/subscriptions"

apps/webui/src/routes/_app/_explore/explore.tsx

@@ -1,7 +1,7 @@
 import { createFileRoute } from '@tanstack/solid-router';
 import type { RouteStateDataOption } from '~/traits/router';
 
-export const Route = createFileRoute('/_app/explore')({
+export const Route = createFileRoute('/_app/_explore/explore')({
   component: ExploreRouteComponent,
   staticData: {
     breadcrumb: {

apps/webui/src/routes/_app/_explore/feed.tsx

@@ -0,0 +1,15 @@
+import { createFileRoute } from '@tanstack/solid-router';
+import type { RouteStateDataOption } from '~/traits/router';
+
+export const Route = createFileRoute('/_app/_explore/feed')({
+  component: FeedRouteComponent,
+  staticData: {
+    breadcrumb: {
+      label: 'Feed',
+    },
+  } satisfies RouteStateDataOption,
+});
+
+function FeedRouteComponent() {
+  return <div>Hello "/_app/feed"!</div>;
+}

apps/webui/src/routes/_app/playground/graphql-api.lazy.tsx

@@ -1,7 +1,7 @@
 import { type Fetcher, createGraphiQLFetcher } from '@graphiql/toolkit';
 import { createLazyFileRoute } from '@tanstack/solid-router';
 import GraphiQL from 'graphiql';
-import React from 'react';
+import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
 import { onCleanup, onMount } from 'solid-js';
 import { isOidcAuth } from '~/auth/config';
@@ -34,10 +34,10 @@ function PlaygroundGraphQLApiRouteComponent() {
               : undefined,
           })(props);
         };
-        const g = React.createElement(GraphiQL, {
+        const graphiql = createElement(GraphiQL, {
           fetcher,
         });
-        reactRoot.render(g);
+        reactRoot.render(graphiql);
 
         onCleanup(() => reactRoot.unmount());
       }
@@ -47,7 +47,7 @@ function PlaygroundGraphQLApiRouteComponent() {
   return (
     <div
       data-id="graphiql-playground-container"
-      class="h-full"
+      class="h-full overflow-hidden rounded-lg"
       ref={containerRef}
     />
   );

apps/webui/src/routes/_app/playground/graphql-api.tsx

@@ -1,6 +1,8 @@
 import { createFileRoute } from '@tanstack/solid-router';
+import { AppSkeleton } from '~/components/layout/app-skeleton';
 import { buildLeafRouteStaticData } from '~/utils/route';
 
 export const Route = createFileRoute('/_app/playground/graphql-api')({
   staticData: buildLeafRouteStaticData({ title: 'GraphQL Api' }),
+  pendingComponent: AppSkeleton,
 });

apps/webui/src/routes/_app/settings/downloader.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/solid-router';
+import { buildLeafRouteStaticData } from '~/utils/route';
+
+export const Route = createFileRoute('/_app/settings/downloader')({
+  component: SettingsDownloaderRouteComponent,
+  staticData: buildLeafRouteStaticData({
+    title: 'Downloader',
+  }),
+});
+
+function SettingsDownloaderRouteComponent() {
+  return <div>Hello "/_app/settings/downloader"!</div>;
+}

apps/webui/src/routes/auth/oidc/callback.tsx

@@ -1,9 +1,80 @@
-import { createFileRoute } from '@tanstack/solid-router'
+import { createFileRoute } from '@tanstack/solid-router';
+import { EventTypes } from 'oidc-client-rx';
+import { filter, map } from 'rxjs';
+import { Match, Switch, from } from 'solid-js';
+import { isOidcAuth } from '~/auth/config';
+import { useAuth } from '~/auth/hooks';
+import { ProLink } from '~/components/ui/pro-link';
+import { Spinner } from '~/components/ui/spinner';
 
 export const Route = createFileRoute('/auth/oidc/callback')({
-  component: RouteComponent,
+  component: OidcCallbackRouteComponent,
-})
+});
 
-function RouteComponent() {
+function OidcCallbackRouteComponent() {
-  return <div>Hello "/auth/oidc/callback"!</div>
+  const auth = useAuth();
+
+  const isLoading = from(auth.checkAuthResultEvent$.pipe(map(Boolean)));
+
+  const checkAuthResultError = from(
+    auth.checkAuthResultEvent$.pipe(
+      filter(
+        (
+          e
+        ): e is {
+          type: EventTypes.CheckingAuthFinishedWithError;
+          value: string;
+        } => e.type === EventTypes.CheckingAuthFinishedWithError
+      ),
+      map((e) => e.value)
+    )
+  );
+
+  const renderBackToHome = () => {
+    return (
+      <ProLink
+        to="/"
+        class="inline-flex h-10 items-center rounded-md border border-gray-200 border-gray-200 bg-white px-8 font-medium text-sm shadow-sm transition-colors hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:border-gray-800 dark:bg-gray-950 dark:focus-visible:ring-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-50"
+      >
+        Return to website
+      </ProLink>
+    );
+  };
+
+  return (
+    <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-6">
+          <div class="flex justify-center font-bold text-4xl tracking-tighter sm:text-5xl">
+            <Spinner variant="circle-filled" size="48" />
+          </div>
+          {isOidcAuth ? (
+            <Switch
+              fallback={
+                <p class="text-gray-500">
+                  Succeed to handle OIDC authentication callback.
+                </p>
+              }
+            >
+              <Match when={isLoading()}>
+                <p class="text-gray-500">
+                  Processing OIDC authentication callback...
+                </p>
+              </Match>
+              <Match when={!!checkAuthResultError()}>
+                <p class="text-gray-500">
+                  Failed to handle OIDC callback: {checkAuthResultError()}
+                </p>
+              </Match>
+            </Switch>
+          ) : (
+            <p class="text-gray-500">
+              Error: Current authentication method is not OIDC!
+            </p>
+          )}
+          {renderBackToHome()}
+        </div>
+      </div>
+    </div>
+  );
 }

apps/webui/src/routes/index.tsx

@@ -8,7 +8,7 @@ export const Route = createFileRoute('/')({
 
 function HomeRouteComponent() {
   return (
-    <AppAside class="flex flex-1 flex-col gap-4" extractBreadcrumbFromRoutes>
+    <AppAside extractBreadcrumbFromRoutes>
       <AppSkeleton />
     </AppAside>
   );

apps/webui/src/utils/route/index.ts

@@ -1,4 +1,4 @@
-import { FileRoutesByPath, Outlet } from '@tanstack/solid-router';
+import { Outlet } from '@tanstack/solid-router';
 import { guardRouteIndexAsNotFound } from '~/components/layout/app-not-found';
 import type { RouteStateDataOption } from '~/traits/router';