fix: fix typos

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() {
-  return <div>Hello "/auth/oidc/callback"!</div>
+function OidcCallbackRouteComponent() {
+  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>
   );