fix: fix table horizontal scroll and collapsed sidebar

apps/webui/graphql-codegen.ts

@@ -10,6 +10,9 @@ const config: CodegenConfig = {
       presetConfig: {
         gqlTagName: 'gql',
       },
+      config: {
+        enumsAsConst: true,
+      },
     },
   },
 };

apps/webui/src/components/detail-card-skeleton.tsx

@@ -0,0 +1,32 @@
+import { Card, CardContent, CardHeader } from './ui/card';
+import { Skeleton } from './ui/skeleton';
+
+export function DetailCardSkeleton() {
+  return (
+    <div className="container mx-auto max-w-4xl py-6">
+      <div className="space-y-6">
+        <div className="flex items-center gap-4">
+          <Skeleton className="h-8 w-8" />
+          <div className="space-y-2">
+            <Skeleton className="h-8 w-48" />
+            <Skeleton className="h-4 w-64" />
+          </div>
+        </div>
+        <Card>
+          <CardHeader>
+            <Skeleton className="h-6 w-32" />
+            <Skeleton className="h-4 w-48" />
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <div key={i} className="space-y-2">
+                <Skeleton className="h-4 w-24" />
+                <Skeleton className="h-10 w-full" />
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

apps/webui/src/components/layout/nav-main.tsx

@@ -7,6 +7,14 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from '@/components/ui/collapsible';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { ProLink, type ProLinkProps } from '@/components/ui/pro-link';
 import {
   SidebarGroup,
   SidebarGroupLabel,
@@ -16,9 +24,9 @@ import {
   SidebarMenuSub,
   SidebarMenuSubButton,
   SidebarMenuSubItem,
+  useSidebar,
 } from '@/components/ui/sidebar';
 import { useMatches } from '@tanstack/react-router';
-import { ProLink, type ProLinkProps } from '../ui/pro-link';
 
 export interface NavMainItem {
   link?: ProLinkProps;
@@ -38,6 +46,7 @@ export function NavMain({
   groups: NavMainGroup[];
 }) {
   const matches = useMatches();
+  const { state } = useSidebar();
 
   const isMenuMatch = (link: ProLinkProps | undefined) => {
     const linkTo = link?.to;
@@ -50,30 +59,41 @@ export function NavMain({
   const renderSidebarMenuItemButton = (item: NavMainItem) => {
     return (
       <>
-        {item.icon && <item.icon />}
+        {item.icon && <item.icon className="h-4 w-4" aria-hidden="true" />}
-        <span>{item.title}</span>
+        <span className="truncate">{item.title}</span>
         <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]:rotate-90" />
       </>
     );
   };
 
-  return groups.map((group, groupIndex) => {
+  const renderCollapsedSubMenu = (item: NavMainItem) => {
     return (
-      <SidebarGroup key={groupIndex}>
+      <DropdownMenu>
-        <SidebarGroupLabel>{group.group}</SidebarGroupLabel>
+        <DropdownMenuTrigger asChild>
-        <SidebarMenu>
+          <SidebarMenuButton
-          {group.items.map((item, itemIndex) => {
+            tooltip={item.title}
-            if (!item.children?.length) {
+            isActive={isMenuMatch(item.link)}
-              return (
+            aria-label={`${item.title} (expandable)`}
-                <SidebarMenuItem key={itemIndex}>
+          >
-                  <SidebarMenuButton asChild tooltip={item.title}>
+            {item.icon && <item.icon className="h-4 w-4" aria-hidden="true" />}
-                    <ProLink {...item.link}>
-                      {renderSidebarMenuItemButton(item)}
-                    </ProLink>
           </SidebarMenuButton>
-                </SidebarMenuItem>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent side="right" align="start" className="min-w-48">
+          <DropdownMenuItem asChild>
+            <span className="font-medium">{item.title}</span>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          {item.children?.map((subItem, index) => (
+            <DropdownMenuItem key={index} asChild>
+              <ProLink {...subItem.link}>{subItem.title}</ProLink>
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
     );
-            }
+  };
+
+  const renderExpandedSubMenu = (item: NavMainItem, itemIndex: number) => {
     return (
       <Collapsible
         key={itemIndex}
@@ -83,7 +103,10 @@ export function NavMain({
       >
         <SidebarMenuItem>
           <CollapsibleTrigger asChild>
-                    <SidebarMenuButton tooltip={item.title}>
+            <SidebarMenuButton
+              tooltip={item.title}
+              aria-label={`${item.title} (expandable)`}
+            >
               {renderSidebarMenuItemButton(item)}
             </SidebarMenuButton>
           </CollapsibleTrigger>
@@ -99,6 +122,7 @@ export function NavMain({
                       <ProLink
                         {...subItem.link}
                         activeProps={{ className: '' }}
+                        aria-label={`${subItem.title}`}
                       >
                         <span>{subItem.title}</span>
                       </ProLink>
@@ -111,6 +135,32 @@ export function NavMain({
         </SidebarMenuItem>
       </Collapsible>
     );
+  };
+
+  return groups.map((group, groupIndex) => {
+    return (
+      <SidebarGroup key={groupIndex}>
+        <SidebarGroupLabel>{group.group}</SidebarGroupLabel>
+        <SidebarMenu>
+          {group.items.map((item, itemIndex) => {
+            if (!item.children?.length) {
+              return (
+                <SidebarMenuItem key={itemIndex}>
+                  <SidebarMenuButton
+                    asChild
+                    tooltip={item.title}
+                    isActive={isMenuMatch(item.link)}
+                  >
+                    <ProLink {...item.link} tabIndex={0}>
+                      {renderSidebarMenuItemButton(item)}
+                    </ProLink>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              );
+            }
+            return state === 'collapsed'
+              ? renderCollapsedSubMenu(item)
+              : renderExpandedSubMenu(item, itemIndex);
           })}
         </SidebarMenu>
       </SidebarGroup>

apps/webui/src/components/ui/detail-empty-view.tsx

@@ -0,0 +1,18 @@
+import { memo } from "react";
+import { Card, CardContent } from "./card";
+
+export interface DetailEmptyViewProps {
+  message: string;
+}
+
+export const DetailEmptyView = memo(({ message }: DetailEmptyViewProps) => {
+  return (
+    <div className="container mx-auto py-6 max-w-4xl">
+      <Card>
+        <CardContent className="flex items-center justify-center h-32">
+          <p className="text-muted-foreground">{message ?? "No data"}</p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+});

apps/webui/src/components/ui/sidebar.tsx

@@ -25,8 +25,6 @@ import {
 import { useIsMobile } from "@/presentation/hooks/use-mobile";
 import { cn } from "@/presentation/utils";
 
-const SIDEBAR_COOKIE_NAME = "sidebar_state";
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = "16rem";
 const SIDEBAR_WIDTH_MOBILE = "18rem";
 const SIDEBAR_WIDTH_ICON = "3rem";
@@ -81,10 +79,6 @@ function SidebarProvider({
       } else {
         _setOpen(openState);
       }
-
-      // This sets the cookie to keep the sidebar state.
-      // TODO: FIX THIS
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
     },
     [setOpenProp, open]
   );
@@ -310,7 +304,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
     <main
       data-slot="sidebar-inset"
       className={cn(
-        "bg-background relative flex w-full flex-1 flex-col",
+        "bg-background relative flex w-full flex-1 min-w-0 flex-col",
         "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className
       )}

apps/webui/src/domains/recorder/schema/credential3rd.ts

@@ -1,5 +1,6 @@
 import {
   Credential3rdTypeEnum,
+  type GetCredential3rdDetailQuery,
   type GetCredential3rdQuery,
 } from '@/infra/graphql/gql/graphql';
 import { gql } from '@apollo/client';
@@ -62,6 +63,23 @@ export const DELETE_CREDENTIAL_3RD = gql`
   }
 `;
 
+export const GET_CREDENTIAL_3RD_DETAIL = gql`
+  query GetCredential3rdDetail($id: Int!) {
+    credential3rd(filters: { id: { eq: $id } }) {
+      nodes {
+        id
+        cookies
+        username
+        password
+        userAgent
+        createdAt
+        updatedAt
+        credentialType
+      }
+    }
+  }
+`;
+
 export const Credential3rdTypedMikanSchema = type({
   credentialType: `'${Credential3rdTypeEnum.Mikan}'`,
   username: 'string > 0',
@@ -81,3 +99,10 @@ export type Credential3rdInsertDto = typeof Credential3rdInsertSchema.infer;
 
 export type Credential3rdQueryDto =
   GetCredential3rdQuery['credential3rd']['nodes'][number];
+
+export const Credential3rdUpdateSchema = Credential3rdInsertSchema.partial();
+
+export type Credential3rdUpdateDto = typeof Credential3rdUpdateSchema.infer;
+
+export type Credential3rdDetailDto =
+  GetCredential3rdDetailQuery['credential3rd']['nodes'][number];

apps/webui/src/infra/graphql/gql/gql.ts

@@ -18,6 +18,7 @@ type Documents = {
     "\n  mutation InsertCredential3rd($data: Credential3rdInsertInput!) {\n    credential3rdCreateOne(data: $data) {\n      id\n      cookies\n      username\n      password\n      userAgent\n      createdAt\n      updatedAt\n      credentialType\n    }\n  }\n": typeof types.InsertCredential3rdDocument,
     "\n  mutation UpdateCredential3rd($data: Credential3rdUpdateInput!, $filters: Credential3rdFilterInput!) {\n    credential3rdUpdate(data: $data, filter: $filters) {\n      id\n      cookies\n      username\n      password\n      userAgent\n      createdAt\n      updatedAt\n      credentialType\n    }\n  }\n": typeof types.UpdateCredential3rdDocument,
     "\n  mutation DeleteCredential3rd($filters: Credential3rdFilterInput!) {\n    credential3rdDelete(filter: $filters)\n  }\n": typeof types.DeleteCredential3rdDocument,
+    "\n  query GetCredential3rdDetail($id: Int!) {\n    credential3rd(filters: { id: { eq: $id } }) {\n      nodes {\n        id\n        cookies\n        username\n        password\n        userAgent\n        createdAt\n        updatedAt\n        credentialType\n      }\n    }\n  }\n": typeof types.GetCredential3rdDetailDocument,
     "\n  query GetSubscriptions($filters: SubscriptionsFilterInput!, $orderBy: SubscriptionsOrderInput!, $pagination: PaginationInput!) {\n    subscriptions(\n      pagination: $pagination\n      filters: $filters\n      orderBy: $orderBy\n    ) {\n      nodes {\n        id\n        createdAt\n        updatedAt\n        displayName\n        category\n        sourceUrl\n        enabled\n      }\n      paginationInfo {\n        total\n        pages\n      }\n    }\n  }\n": typeof types.GetSubscriptionsDocument,
     "\n    mutation UpdateSubscriptions(\n    $data: SubscriptionsUpdateInput!,\n    $filters: SubscriptionsFilterInput!,\n    ) {\n    subscriptionsUpdate (\n        data: $data\n        filter: $filters\n    ) {\n        id\n        createdAt\n        updatedAt\n        displayName\n        category\n        sourceUrl\n        enabled\n    }\n}\n": typeof types.UpdateSubscriptionsDocument,
     "\n    mutation DeleteSubscriptions($filters: SubscriptionsFilterInput) {\n        subscriptionsDelete(filter: $filters)\n    }\n": typeof types.DeleteSubscriptionsDocument,
@@ -29,6 +30,7 @@ const documents: Documents = {
     "\n  mutation InsertCredential3rd($data: Credential3rdInsertInput!) {\n    credential3rdCreateOne(data: $data) {\n      id\n      cookies\n      username\n      password\n      userAgent\n      createdAt\n      updatedAt\n      credentialType\n    }\n  }\n": types.InsertCredential3rdDocument,
     "\n  mutation UpdateCredential3rd($data: Credential3rdUpdateInput!, $filters: Credential3rdFilterInput!) {\n    credential3rdUpdate(data: $data, filter: $filters) {\n      id\n      cookies\n      username\n      password\n      userAgent\n      createdAt\n      updatedAt\n      credentialType\n    }\n  }\n": types.UpdateCredential3rdDocument,
     "\n  mutation DeleteCredential3rd($filters: Credential3rdFilterInput!) {\n    credential3rdDelete(filter: $filters)\n  }\n": types.DeleteCredential3rdDocument,
+    "\n  query GetCredential3rdDetail($id: Int!) {\n    credential3rd(filters: { id: { eq: $id } }) {\n      nodes {\n        id\n        cookies\n        username\n        password\n        userAgent\n        createdAt\n        updatedAt\n        credentialType\n      }\n    }\n  }\n": types.GetCredential3rdDetailDocument,
     "\n  query GetSubscriptions($filters: SubscriptionsFilterInput!, $orderBy: SubscriptionsOrderInput!, $pagination: PaginationInput!) {\n    subscriptions(\n      pagination: $pagination\n      filters: $filters\n      orderBy: $orderBy\n    ) {\n      nodes {\n        id\n        createdAt\n        updatedAt\n        displayName\n        category\n        sourceUrl\n        enabled\n      }\n      paginationInfo {\n        total\n        pages\n      }\n    }\n  }\n": types.GetSubscriptionsDocument,
     "\n    mutation UpdateSubscriptions(\n    $data: SubscriptionsUpdateInput!,\n    $filters: SubscriptionsFilterInput!,\n    ) {\n    subscriptionsUpdate (\n        data: $data\n        filter: $filters\n    ) {\n        id\n        createdAt\n        updatedAt\n        displayName\n        category\n        sourceUrl\n        enabled\n    }\n}\n": types.UpdateSubscriptionsDocument,
     "\n    mutation DeleteSubscriptions($filters: SubscriptionsFilterInput) {\n        subscriptionsDelete(filter: $filters)\n    }\n": types.DeleteSubscriptionsDocument,
@@ -66,6 +68,10 @@ export function gql(source: "\n  mutation UpdateCredential3rd($data: Credential3
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function gql(source: "\n  mutation DeleteCredential3rd($filters: Credential3rdFilterInput!) {\n    credential3rdDelete(filter: $filters)\n  }\n"): (typeof documents)["\n  mutation DeleteCredential3rd($filters: Credential3rdFilterInput!) {\n    credential3rdDelete(filter: $filters)\n  }\n"];
+/**
+ * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function gql(source: "\n  query GetCredential3rdDetail($id: Int!) {\n    credential3rd(filters: { id: { eq: $id } }) {\n      nodes {\n        id\n        cookies\n        username\n        password\n        userAgent\n        createdAt\n        updatedAt\n        credentialType\n      }\n    }\n  }\n"): (typeof documents)["\n  query GetCredential3rdDetail($id: Int!) {\n    credential3rd(filters: { id: { eq: $id } }) {\n      nodes {\n        id\n        cookies\n        username\n        password\n        userAgent\n        createdAt\n        updatedAt\n        credentialType\n      }\n    }\n  }\n"];
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

apps/webui/src/infra/graphql/gql/graphql.ts

@@ -267,10 +267,11 @@ export type Credential3rdOrderInput = {
   username?: InputMaybe<OrderByEnum>;
 };
 
-export enum Credential3rdTypeEnum {
+export const Credential3rdTypeEnum = {
-  Mikan = 'mikan'
+  Mikan: 'mikan'
-}
+} as const;
 
+export type Credential3rdTypeEnum = typeof Credential3rdTypeEnum[keyof typeof Credential3rdTypeEnum];
 export type Credential3rdTypeEnumFilterInput = {
   eq?: InputMaybe<Credential3rdTypeEnum>;
   gt?: InputMaybe<Credential3rdTypeEnum>;
@@ -300,11 +301,12 @@ export type CursorInput = {
   limit: Scalars['Int']['input'];
 };
 
-export enum DownloadMimeEnum {
+export const DownloadMimeEnum = {
-  Applicationoctetstream = 'applicationoctetstream',
+  Applicationoctetstream: 'applicationoctetstream',
-  Applicationxbittorrent = 'applicationxbittorrent'
+  Applicationxbittorrent: 'applicationxbittorrent'
-}
+} as const;
 
+export type DownloadMimeEnum = typeof DownloadMimeEnum[keyof typeof DownloadMimeEnum];
 export type DownloadMimeEnumFilterInput = {
   eq?: InputMaybe<DownloadMimeEnum>;
   gt?: InputMaybe<DownloadMimeEnum>;
@@ -318,15 +320,16 @@ export type DownloadMimeEnumFilterInput = {
   ne?: InputMaybe<DownloadMimeEnum>;
 };
 
-export enum DownloadStatusEnum {
+export const DownloadStatusEnum = {
-  Completed = 'completed',
+  Completed: 'completed',
-  Deleted = 'deleted',
+  Deleted: 'deleted',
-  Downloading = 'downloading',
+  Downloading: 'downloading',
-  Failed = 'failed',
+  Failed: 'failed',
-  Paused = 'paused',
+  Paused: 'paused',
-  Pending = 'pending'
+  Pending: 'pending'
-}
+} as const;
 
+export type DownloadStatusEnum = typeof DownloadStatusEnum[keyof typeof DownloadStatusEnum];
 export type DownloadStatusEnumFilterInput = {
   eq?: InputMaybe<DownloadStatusEnum>;
   gt?: InputMaybe<DownloadStatusEnum>;
@@ -340,11 +343,12 @@ export type DownloadStatusEnumFilterInput = {
   ne?: InputMaybe<DownloadStatusEnum>;
 };
 
-export enum DownloaderCategoryEnum {
+export const DownloaderCategoryEnum = {
-  Dandanplay = 'dandanplay',
+  Dandanplay: 'dandanplay',
-  Qbittorrent = 'qbittorrent'
+  Qbittorrent: 'qbittorrent'
-}
+} as const;
 
+export type DownloaderCategoryEnum = typeof DownloaderCategoryEnum[keyof typeof DownloaderCategoryEnum];
 export type DownloaderCategoryEnumFilterInput = {
   eq?: InputMaybe<DownloaderCategoryEnum>;
   gt?: InputMaybe<DownloaderCategoryEnum>;
@@ -1007,11 +1011,12 @@ export type OffsetInput = {
   offset: Scalars['Int']['input'];
 };
 
-export enum OrderByEnum {
+export const OrderByEnum = {
-  Asc = 'ASC',
+  Asc: 'ASC',
-  Desc = 'DESC'
+  Desc: 'DESC'
-}
+} as const;
 
+export type OrderByEnum = typeof OrderByEnum[keyof typeof OrderByEnum];
 export type PageInfo = {
   __typename?: 'PageInfo';
   endCursor?: Maybe<Scalars['String']['output']>;
@@ -1405,13 +1410,14 @@ export type SubscriptionBangumiUpdateInput = {
   subscriptionId?: InputMaybe<Scalars['Int']['input']>;
 };
 
-export enum SubscriptionCategoryEnum {
+export const SubscriptionCategoryEnum = {
-  Manual = 'manual',
+  Manual: 'manual',
-  MikanBangumi = 'mikan_bangumi',
+  MikanBangumi: 'mikan_bangumi',
-  MikanSeason = 'mikan_season',
+  MikanSeason: 'mikan_season',
-  MikanSubscriber = 'mikan_subscriber'
+  MikanSubscriber: 'mikan_subscriber'
-}
+} as const;
 
+export type SubscriptionCategoryEnum = typeof SubscriptionCategoryEnum[keyof typeof SubscriptionCategoryEnum];
 export type SubscriptionCategoryEnumFilterInput = {
   eq?: InputMaybe<SubscriptionCategoryEnum>;
   gt?: InputMaybe<SubscriptionCategoryEnum>;
@@ -1665,6 +1671,13 @@ export type DeleteCredential3rdMutationVariables = Exact<{
 
 export type DeleteCredential3rdMutation = { __typename?: 'Mutation', credential3rdDelete: number };
 
+export type GetCredential3rdDetailQueryVariables = Exact<{
+  id: Scalars['Int']['input'];
+}>;
+
+
+export type GetCredential3rdDetailQuery = { __typename?: 'Query', credential3rd: { __typename?: 'Credential3rdConnection', nodes: Array<{ __typename?: 'Credential3rd', id: number, cookies?: string | null, username?: string | null, password?: string | null, userAgent?: string | null, createdAt: string, updatedAt: string, credentialType: Credential3rdTypeEnum }> } };
+
 export type GetSubscriptionsQueryVariables = Exact<{
   filters: SubscriptionsFilterInput;
   orderBy: SubscriptionsOrderInput;
@@ -1708,6 +1721,7 @@ export const GetCredential3rdDocument = {"kind":"Document","definitions":[{"kind
 export const InsertCredential3rdDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"InsertCredential3rd"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"data"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdInsertInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"credential3rdCreateOne"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"data"},"value":{"kind":"Variable","name":{"kind":"Name","value":"data"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"cookies"}},{"kind":"Field","name":{"kind":"Name","value":"username"}},{"kind":"Field","name":{"kind":"Name","value":"password"}},{"kind":"Field","name":{"kind":"Name","value":"userAgent"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"credentialType"}}]}}]}}]} as unknown as DocumentNode<InsertCredential3rdMutation, InsertCredential3rdMutationVariables>;
 export const UpdateCredential3rdDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateCredential3rd"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"data"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdUpdateInput"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdFilterInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"credential3rdUpdate"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"data"},"value":{"kind":"Variable","name":{"kind":"Name","value":"data"}}},{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"cookies"}},{"kind":"Field","name":{"kind":"Name","value":"username"}},{"kind":"Field","name":{"kind":"Name","value":"password"}},{"kind":"Field","name":{"kind":"Name","value":"userAgent"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"credentialType"}}]}}]}}]} as unknown as DocumentNode<UpdateCredential3rdMutation, UpdateCredential3rdMutationVariables>;
 export const DeleteCredential3rdDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteCredential3rd"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdFilterInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"credential3rdDelete"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}}]}]}}]} as unknown as DocumentNode<DeleteCredential3rdMutation, DeleteCredential3rdMutationVariables>;
+export const GetCredential3rdDetailDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetCredential3rdDetail"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"credential3rd"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"cookies"}},{"kind":"Field","name":{"kind":"Name","value":"username"}},{"kind":"Field","name":{"kind":"Name","value":"password"}},{"kind":"Field","name":{"kind":"Name","value":"userAgent"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"credentialType"}}]}}]}}]}}]} as unknown as DocumentNode<GetCredential3rdDetailQuery, GetCredential3rdDetailQueryVariables>;
 export const GetSubscriptionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetSubscriptions"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"SubscriptionsFilterInput"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"orderBy"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"SubscriptionsOrderInput"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"PaginationInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subscriptions"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}}},{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}},{"kind":"Argument","name":{"kind":"Name","value":"orderBy"},"value":{"kind":"Variable","name":{"kind":"Name","value":"orderBy"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"category"}},{"kind":"Field","name":{"kind":"Name","value":"sourceUrl"}},{"kind":"Field","name":{"kind":"Name","value":"enabled"}}]}},{"kind":"Field","name":{"kind":"Name","value":"paginationInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"total"}},{"kind":"Field","name":{"kind":"Name","value":"pages"}}]}}]}}]}}]} as unknown as DocumentNode<GetSubscriptionsQuery, GetSubscriptionsQueryVariables>;
 export const UpdateSubscriptionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateSubscriptions"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"data"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"SubscriptionsUpdateInput"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"SubscriptionsFilterInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subscriptionsUpdate"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"data"},"value":{"kind":"Variable","name":{"kind":"Name","value":"data"}}},{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"category"}},{"kind":"Field","name":{"kind":"Name","value":"sourceUrl"}},{"kind":"Field","name":{"kind":"Name","value":"enabled"}}]}}]}}]} as unknown as DocumentNode<UpdateSubscriptionsMutation, UpdateSubscriptionsMutationVariables>;
 export const DeleteSubscriptionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteSubscriptions"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"SubscriptionsFilterInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subscriptionsDelete"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}}]}]}}]} as unknown as DocumentNode<DeleteSubscriptionsMutation, DeleteSubscriptionsMutationVariables>;

apps/webui/src/infra/routes/nav.ts

@@ -32,7 +32,7 @@ export const AppNavMainData = [
       {
         title: 'Subscriptions',
         link: {
-          to: '/subscriptions',
+          to: '/subscriptions/manage',
         },
         icon: Folders,
         children: [
@@ -53,7 +53,7 @@ export const AppNavMainData = [
       {
         title: 'Credential',
         link: {
-          to: '/credential3rd',
+          to: '/credential3rd/manage',
         },
         icon: KeyRound,
         children: [

apps/webui/src/infra/styles/context.ts

@@ -37,8 +37,11 @@ export function useTheme() {
   }, [injector]);
 
   const colorTheme = useMemo(
-    () => atomWithObservable(() => themeService.colorSchema$),
+    () =>
-    [themeService]
+      atomWithObservable(() => themeService.colorSchema$, {
+        initialValue: themeService.colorSchema$.value,
+      }),
+    [themeService.colorSchema$]
   );
 
   return {

apps/webui/src/infra/styles/theme.service.ts

@@ -3,18 +3,17 @@ import { LocalStorageService } from '@/infra/storage/web-storage.service';
 import { Injectable, inject } from '@outposts/injection-js';
 import {
   BehaviorSubject,
-  ReplaySubject,
   combineLatest,
   distinctUntilChanged,
   filter,
   fromEvent,
   map,
-  shareReplay,
-  startWith,
 } from 'rxjs';
 export type PreferColorSchemaType = 'dark' | 'light' | 'system';
 export type PreferColorSchemaClass = 'dark' | 'light';
 
+const MOBILE_BREAKPOINT = 768;
+
 @Injectable()
 export class ThemeService {
   document = inject(DOCUMENT);
@@ -29,17 +28,34 @@ export class ThemeService {
       this.systemColorSchema$.value
     )
   );
+  isMobile$ = new BehaviorSubject(
+    this.getIsMobileByInnerWidth(this.document.defaultView?.innerWidth)
+  );
 
   setup() {
-    const mediaQuery = this.document.defaultView?.matchMedia(
+    const isMobileMediaQuery = this.document.defaultView?.matchMedia(
+      `(max-width: ${MOBILE_BREAKPOINT - 1}px)`
+    );
+
+    if (isMobileMediaQuery) {
+      fromEvent(isMobileMediaQuery, 'change')
+        .pipe(
+          map(() =>
+            this.getIsMobileByInnerWidth(this.document.defaultView?.innerWidth)
+          ),
+          distinctUntilChanged()
+        )
+        .subscribe(this.isMobile$);
+    }
+
+    const systemColorSchemaMediaQuery = this.document.defaultView?.matchMedia(
       '(prefers-color-scheme: dark)'
     );
 
-    if (mediaQuery) {
+    if (systemColorSchemaMediaQuery) {
-      fromEvent(mediaQuery, 'change')
+      fromEvent(systemColorSchemaMediaQuery, 'change')
         .pipe(
-          map(() => (mediaQuery.matches ? 'dark' : 'light')),
+          map(() => (systemColorSchemaMediaQuery.matches ? 'dark' : 'light')),
-          startWith(this.systemColorSchema),
           distinctUntilChanged()
         )
         .subscribe(this.systemColorSchema$);
@@ -85,6 +101,13 @@ export class ThemeService {
     return systemColorSchema;
   }
 
+  private getIsMobileByInnerWidth(innerWidth: number | undefined): boolean {
+    if (innerWidth === undefined) {
+      return false;
+    }
+    return innerWidth < MOBILE_BREAKPOINT;
+  }
+
   get systemColorSchema(): PreferColorSchemaClass {
     return this.document.defaultView?.matchMedia('(prefers-color-scheme: dark)')
       .matches

apps/webui/src/presentation/hooks/use-mobile.ts

@@ -1,19 +1,21 @@
-import * as React from "react"
+import { useInject } from '@/infra/di/inject';
-
+import { ThemeService } from '@/infra/styles/theme.service';
-const MOBILE_BREAKPOINT = 768
+import { useAtomValue } from 'jotai/react';
+import { atomWithObservable } from 'jotai/utils';
+import { useMemo } from 'react';
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+  const themeService = useInject(ThemeService);
 
-  React.useEffect(() => {
+  const isMobile = useAtomValue(
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    useMemo(
-    const onChange = () => {
+      () =>
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+        atomWithObservable(() => themeService.isMobile$, {
-    }
+          initialValue: themeService.isMobile$.value,
-    mql.addEventListener("change", onChange)
+        }),
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+      [themeService.isMobile$]
-    return () => mql.removeEventListener("change", onChange)
+    )
-  }, [])
+  );
 
-  return !!isMobile
+  return isMobile;
 }

apps/webui/src/presentation/routeTree.gen.ts

@@ -34,6 +34,7 @@ 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.$subscriptionId'
 import { Route as AppSubscriptionsDetailSubscriptionIdImport } from './routes/_app/subscriptions/detail.$subscriptionId'
+import { Route as AppCredential3rdEditIdImport } from './routes/_app/credential3rd/edit.$id'
 import { Route as AppCredential3rdDetailIdImport } from './routes/_app/credential3rd/detail.$id'
 
 // Create/Update Routes
@@ -179,6 +180,12 @@ const AppSubscriptionsDetailSubscriptionIdRoute =
     getParentRoute: () => AppSubscriptionsRouteRoute,
   } as any)
 
+const AppCredential3rdEditIdRoute = AppCredential3rdEditIdImport.update({
+  id: '/edit/$id',
+  path: '/edit/$id',
+  getParentRoute: () => AppCredential3rdRouteRoute,
+} as any)
+
 const AppCredential3rdDetailIdRoute = AppCredential3rdDetailIdImport.update({
   id: '/detail/$id',
   path: '/detail/$id',
@@ -343,6 +350,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppCredential3rdDetailIdImport
       parentRoute: typeof AppCredential3rdRouteImport
     }
+    '/_app/credential3rd/edit/$id': {
+      id: '/_app/credential3rd/edit/$id'
+      path: '/edit/$id'
+      fullPath: '/credential3rd/edit/$id'
+      preLoaderRoute: typeof AppCredential3rdEditIdImport
+      parentRoute: typeof AppCredential3rdRouteImport
+    }
     '/_app/subscriptions/detail/$subscriptionId': {
       id: '/_app/subscriptions/detail/$subscriptionId'
       path: '/detail/$subscriptionId'
@@ -378,12 +392,14 @@ interface AppCredential3rdRouteRouteChildren {
   AppCredential3rdCreateRoute: typeof AppCredential3rdCreateRoute
   AppCredential3rdManageRoute: typeof AppCredential3rdManageRoute
   AppCredential3rdDetailIdRoute: typeof AppCredential3rdDetailIdRoute
+  AppCredential3rdEditIdRoute: typeof AppCredential3rdEditIdRoute
 }
 
 const AppCredential3rdRouteRouteChildren: AppCredential3rdRouteRouteChildren = {
   AppCredential3rdCreateRoute: AppCredential3rdCreateRoute,
   AppCredential3rdManageRoute: AppCredential3rdManageRoute,
   AppCredential3rdDetailIdRoute: AppCredential3rdDetailIdRoute,
+  AppCredential3rdEditIdRoute: AppCredential3rdEditIdRoute,
 }
 
 const AppCredential3rdRouteRouteWithChildren =
@@ -481,6 +497,7 @@ export interface FileRoutesByFullPath {
   '/subscriptions/manage': typeof AppSubscriptionsManageRoute
   '/auth/oidc/callback': typeof AuthOidcCallbackRoute
   '/credential3rd/detail/$id': typeof AppCredential3rdDetailIdRoute
+  '/credential3rd/edit/$id': typeof AppCredential3rdEditIdRoute
   '/subscriptions/detail/$subscriptionId': typeof AppSubscriptionsDetailSubscriptionIdRoute
   '/subscriptions/edit/$subscriptionId': typeof AppSubscriptionsEditSubscriptionIdRoute
 }
@@ -508,6 +525,7 @@ export interface FileRoutesByTo {
   '/subscriptions/manage': typeof AppSubscriptionsManageRoute
   '/auth/oidc/callback': typeof AuthOidcCallbackRoute
   '/credential3rd/detail/$id': typeof AppCredential3rdDetailIdRoute
+  '/credential3rd/edit/$id': typeof AppCredential3rdEditIdRoute
   '/subscriptions/detail/$subscriptionId': typeof AppSubscriptionsDetailSubscriptionIdRoute
   '/subscriptions/edit/$subscriptionId': typeof AppSubscriptionsEditSubscriptionIdRoute
 }
@@ -536,6 +554,7 @@ export interface FileRoutesById {
   '/_app/subscriptions/manage': typeof AppSubscriptionsManageRoute
   '/auth/oidc/callback': typeof AuthOidcCallbackRoute
   '/_app/credential3rd/detail/$id': typeof AppCredential3rdDetailIdRoute
+  '/_app/credential3rd/edit/$id': typeof AppCredential3rdEditIdRoute
   '/_app/subscriptions/detail/$subscriptionId': typeof AppSubscriptionsDetailSubscriptionIdRoute
   '/_app/subscriptions/edit/$subscriptionId': typeof AppSubscriptionsEditSubscriptionIdRoute
 }
@@ -565,6 +584,7 @@ export interface FileRouteTypes {
     | '/subscriptions/manage'
     | '/auth/oidc/callback'
     | '/credential3rd/detail/$id'
+    | '/credential3rd/edit/$id'
     | '/subscriptions/detail/$subscriptionId'
     | '/subscriptions/edit/$subscriptionId'
   fileRoutesByTo: FileRoutesByTo
@@ -591,6 +611,7 @@ export interface FileRouteTypes {
     | '/subscriptions/manage'
     | '/auth/oidc/callback'
     | '/credential3rd/detail/$id'
+    | '/credential3rd/edit/$id'
     | '/subscriptions/detail/$subscriptionId'
     | '/subscriptions/edit/$subscriptionId'
   id:
@@ -617,6 +638,7 @@ export interface FileRouteTypes {
     | '/_app/subscriptions/manage'
     | '/auth/oidc/callback'
     | '/_app/credential3rd/detail/$id'
+    | '/_app/credential3rd/edit/$id'
     | '/_app/subscriptions/detail/$subscriptionId'
     | '/_app/subscriptions/edit/$subscriptionId'
   fileRoutesById: FileRoutesById
@@ -695,7 +717,8 @@ export const routeTree = rootRoute
       "children": [
         "/_app/credential3rd/create",
         "/_app/credential3rd/manage",
-        "/_app/credential3rd/detail/$id"
+        "/_app/credential3rd/detail/$id",
+        "/_app/credential3rd/edit/$id"
       ]
     },
     "/_app/playground": {
@@ -771,6 +794,10 @@ export const routeTree = rootRoute
       "filePath": "_app/credential3rd/detail.$id.tsx",
       "parent": "/_app/credential3rd"
     },
+    "/_app/credential3rd/edit/$id": {
+      "filePath": "_app/credential3rd/edit.$id.tsx",
+      "parent": "/_app/credential3rd"
+    },
     "/_app/subscriptions/detail/$subscriptionId": {
       "filePath": "_app/subscriptions/detail.$subscriptionId.tsx",
       "parent": "/_app/subscriptions"

apps/webui/src/presentation/routes/_app/credential3rd/create.tsx

@@ -19,7 +19,6 @@ import {
 import { useAppForm } from '@/components/ui/tanstack-form';
 import { Textarea } from '@/components/ui/textarea';
 import {
-  type Credential3rdInsertDto,
   Credential3rdInsertSchema,
   INSERT_CREDENTIAL_3RD,
 } from '@/domains/recorder/schema/credential3rd';
@@ -27,6 +26,7 @@ import { useInject } from '@/infra/di/inject';
 import {
   Credential3rdTypeEnum,
   type InsertCredential3rdMutation,
+  type InsertCredential3rdMutationVariables,
 } from '@/infra/graphql/gql/graphql';
 import { PlatformService } from '@/infra/platform/platform.service';
 import type { RouteStateDataOption } from '@/infra/routes/traits';
@@ -47,7 +47,8 @@ function CredentialCreateRouteComponent() {
   const platformService = useInject(PlatformService);
 
   const [insertCredential3rd, { loading }] = useMutation<
-    InsertCredential3rdMutation['credential3rdCreateOne']
+    InsertCredential3rdMutation['credential3rdCreateOne'],
+    InsertCredential3rdMutationVariables
   >(INSERT_CREDENTIAL_3RD, {
     onCompleted(data) {
       toast.success('Credential created');
@@ -69,16 +70,20 @@ function CredentialCreateRouteComponent() {
       username: '',
       password: '',
       userAgent: '',
-    } as Credential3rdInsertDto,
+    },
     validators: {
       onBlur: Credential3rdInsertSchema,
       onSubmit: Credential3rdInsertSchema,
     },
     onSubmit: async (form) => {
+      const value = {
+        ...form.value,
+        userAgent: form.value.userAgent || platformService.userAgent,
+      };
       if (form.value.credentialType === Credential3rdTypeEnum.Mikan) {
         await insertCredential3rd({
           variables: {
-            data: form.value,
+            data: value,
           },
         });
       }
@@ -142,9 +147,7 @@ function CredentialCreateRouteComponent() {
                     </SelectContent>
                   </Select>
                   {field.state.meta.errors && (
-                    <p className="text-destructive text-sm">
+                    <FormFieldErrors errors={field.state.meta.errors} />
-                      {field.state.meta.errors[0]?.toString()}
-                    </p>
                   )}
                 </div>
               )}
@@ -209,7 +212,7 @@ function CredentialCreateRouteComponent() {
                     the default value"
                   />
                   <p className="text-muted-foreground text-sm">
-                    Current user agent: {platformService.userAgent}
+                    Current default user agent: {platformService.userAgent}
                   </p>
                   {field.state.meta.errors && (
                     <FormFieldErrors errors={field.state.meta.errors} />

apps/webui/src/presentation/routes/_app/credential3rd/detail.$id.tsx

@@ -1,9 +1,214 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { DetailCardSkeleton } from '@/components/detail-card-skeleton';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { DetailEmptyView } from '@/components/ui/detail-empty-view';
+import { Label } from '@/components/ui/label';
+import { QueryErrorView } from '@/components/ui/query-error-view';
+import { Separator } from '@/components/ui/separator';
+import { GET_CREDENTIAL_3RD_DETAIL } from '@/domains/recorder/schema/credential3rd';
+import type { GetCredential3rdDetailQuery } from '@/infra/graphql/gql/graphql';
+import type { RouteStateDataOption } from '@/infra/routes/traits';
+import { useQuery } from '@apollo/client';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { format } from 'date-fns/format';
+import { ArrowLeft, Edit, Eye, EyeOff } from 'lucide-react';
+import { useState } from 'react';
 
 export const Route = createFileRoute('/_app/credential3rd/detail/$id')({
-  component: RouteComponent,
+  component: Credential3rdDetailRouteComponent,
-})
+  staticData: {
+    breadcrumb: { label: 'Detail' },
+  } satisfies RouteStateDataOption,
+});
 
-function RouteComponent() {
+function Credential3rdDetailRouteComponent() {
-  return <div>Hello "/_app/credential3rd/detail/$id"!</div>
+  const { id } = Route.useParams();
+  const navigate = useNavigate();
+  const [showPassword, setShowPassword] = useState(false);
+
+  const { loading, error, data } = useQuery<GetCredential3rdDetailQuery>(
+    GET_CREDENTIAL_3RD_DETAIL,
+    {
+      variables: {
+        id: Number.parseInt(id),
+      },
+      fetchPolicy: 'cache-and-network',
+    }
+  );
+
+  const handleBack = () => {
+    navigate({
+      to: '/credential3rd/manage',
+    });
+  };
+
+  const handleEnterEditMode = () => {
+    navigate({
+      to: '/credential3rd/edit/$id',
+      params: {
+        id,
+      },
+    });
+  };
+
+  const togglePasswordVisibility = () => {
+    setShowPassword((prev) => !prev);
+  };
+
+  const credential = data?.credential3rd?.nodes?.[0];
+
+  if (loading) {
+    return <DetailCardSkeleton />;
+  }
+
+  if (error) {
+    return <QueryErrorView message={error.message} />;
+  }
+
+  if (!credential) {
+    return <DetailEmptyView message="Not found certain credential" />;
+  }
+
+  return (
+    <div className="container mx-auto max-w-4xl py-6">
+      <div className="mb-6 flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleBack}
+            className="h-8 w-8 p-0"
+          >
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+          <div>
+            <h1 className="font-bold text-2xl">Credential detail</h1>
+            <p className="mt-1 text-muted-foreground">
+              View and manage credential #{credential.id}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex gap-2">
+          <Button onClick={handleEnterEditMode}>
+            <Edit className="mr-2 h-4 w-4" />
+            Edit
+          </Button>
+        </div>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle>Credential information</CardTitle>
+              <CardDescription className="mt-2">
+                View credential detail
+              </CardDescription>
+            </div>
+            <Badge variant="secondary" className="capitalize">
+              {credential.credentialType}
+            </Badge>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-6">
+            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+              <div className="space-y-2">
+                <Label className="font-medium text-sm">ID</Label>
+                <div className="rounded-md bg-muted p-3">
+                  <code className="text-sm">{credential.id}</code>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label className="font-medium text-sm">Credential type</Label>
+                <div className="rounded-md bg-muted p-3">
+                  <Badge variant="secondary" className="capitalize">
+                    {credential.credentialType}
+                  </Badge>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label className="font-medium text-sm">Username</Label>
+                <div className="rounded-md bg-muted p-3">
+                  <span className="text-sm">
+                    {credential.username || 'Not set'}
+                  </span>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label className="font-medium text-sm">Password</Label>
+                <div className="flex items-center justify-between rounded-md bg-muted p-3">
+                  <span className="font-mono text-sm">
+                    {showPassword ? credential.password || '-' : '••••••••'}
+                  </span>
+                  {credential.password && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-6 w-6 p-0"
+                      onClick={togglePasswordVisibility}
+                    >
+                      {showPassword ? (
+                        <EyeOff className="h-3 w-3" />
+                      ) : (
+                        <Eye className="h-3 w-3" />
+                      )}
+                    </Button>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label className="font-medium text-sm">User Agent</Label>
+              <div className="rounded-md bg-muted p-3">
+                <span className="break-all text-sm">
+                  {credential.userAgent || '-'}
+                </span>
+              </div>
+            </div>
+
+            <Separator />
+
+            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+              <div className="space-y-2">
+                <Label className="font-medium text-sm">Created at</Label>
+                <div className="rounded-md bg-muted p-3">
+                  <span className="text-sm">
+                    {format(
+                      new Date(credential.createdAt),
+                      'yyyy-MM-dd HH:mm:ss'
+                    )}
+                  </span>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label className="font-medium text-sm">Updated at</Label>
+                <div className="rounded-md bg-muted p-3">
+                  <span className="text-sm">
+                    {format(
+                      new Date(credential.updatedAt),
+                      'yyyy-MM-dd HH:mm:ss'
+                    )}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
 }

apps/webui/src/presentation/routes/_app/credential3rd/edit.$id.tsx

@@ -0,0 +1,292 @@
+import { DetailCardSkeleton } from '@/components/detail-card-skeleton';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { DetailEmptyView } from '@/components/ui/detail-empty-view';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { QueryErrorView } from '@/components/ui/query-error-view';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { useAppForm } from '@/components/ui/tanstack-form';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  type Credential3rdDetailDto,
+  Credential3rdUpdateSchema,
+  GET_CREDENTIAL_3RD_DETAIL,
+  UPDATE_CREDENTIAL_3RD,
+} from '@/domains/recorder/schema/credential3rd';
+import type {
+  Credential3rdTypeEnum,
+  GetCredential3rdDetailQuery,
+  UpdateCredential3rdMutation,
+  UpdateCredential3rdMutationVariables,
+} from '@/infra/graphql/gql/graphql';
+import type { RouteStateDataOption } from '@/infra/routes/traits';
+import { useMutation, useQuery } from '@apollo/client';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { ArrowLeft, Eye, EyeOff, Save, X } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import { toast } from 'sonner';
+
+export const Route = createFileRoute('/_app/credential3rd/edit/$id')({
+  component: Credential3rdEditRouteComponent,
+  staticData: {
+    breadcrumb: { label: 'Edit' },
+  } satisfies RouteStateDataOption,
+});
+
+function FormView({
+  credential,
+  onCompleted,
+}: {
+  credential: Credential3rdDetailDto;
+  onCompleted: VoidFunction;
+}) {
+  const navigate = useNavigate();
+  const [showPassword, setShowPassword] = useState(false);
+  const togglePasswordVisibility = () => {
+    setShowPassword((prev) => !prev);
+  };
+
+  const handleBack = () => {
+    navigate({
+      to: '/credential3rd/manage',
+    });
+  };
+
+  const [updateCredential, { loading: updating }] = useMutation<
+    UpdateCredential3rdMutation['credential3rdUpdate'],
+    UpdateCredential3rdMutationVariables
+  >(UPDATE_CREDENTIAL_3RD, {
+    onCompleted,
+    onError: (error) => {
+      toast('Update credential failed', {
+        description: error.message,
+      });
+    },
+  });
+
+  const form = useAppForm({
+    defaultValues: {
+      credentialType: credential.credentialType,
+      username: credential.username,
+      password: credential.password,
+      userAgent: credential.userAgent,
+    },
+    validators: {
+      onBlur: Credential3rdUpdateSchema,
+      onSubmit: Credential3rdUpdateSchema,
+    },
+    onSubmit: (form) => {
+      const value = form.value;
+      updateCredential({
+        variables: {
+          data: value,
+          filters: {
+            id: {
+              eq: credential.id,
+            },
+          },
+        },
+      });
+    },
+  });
+
+  return (
+    <div className="container mx-auto max-w-4xl py-6">
+      <div className="mb-6 flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleBack}
+            className="h-8 w-8 p-0"
+          >
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+          <div>
+            <h1 className="font-bold text-2xl">Credential detail</h1>
+            <p className="mt-1 text-muted-foreground">
+              View and manage credential #{credential.id}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={handleBack} disabled={updating}>
+            <X className="mr-2 h-4 w-4" />
+            Back
+          </Button>
+          <Button onClick={() => form.handleSubmit()} disabled={updating}>
+            <Save className="mr-2 h-4 w-4" />
+            {updating ? 'Saving...' : 'Save'}
+          </Button>
+        </div>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle>Credential information</CardTitle>
+              <CardDescription className="mt-2">
+                Edit credential information
+              </CardDescription>
+            </div>
+            <Badge variant="secondary" className="capitalize">
+              {credential.credentialType}
+            </Badge>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              form.handleSubmit();
+            }}
+            className="space-y-6"
+          >
+            <form.Field name="credentialType">
+              {(field) => (
+                <div className="space-y-2">
+                  <Label htmlFor={field.name}>Credential type</Label>
+                  <Select
+                    value={field.state.value!}
+                    onValueChange={(value) =>
+                      field.handleChange(value as Credential3rdTypeEnum)
+                    }
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select credential type" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="mikan">Mikan</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
+            </form.Field>
+
+            <form.Field name="username">
+              {(field) => (
+                <div className="space-y-2">
+                  <Label htmlFor={field.name}>Username</Label>
+                  <Input
+                    id={field.name}
+                    name={field.name}
+                    value={field.state.value || ''}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                    placeholder="Please enter username"
+                  />
+                </div>
+              )}
+            </form.Field>
+
+            <form.Field name="password">
+              {(field) => (
+                <div className="space-y-2">
+                  <Label htmlFor={field.name}>Password</Label>
+                  <div className="relative">
+                    <Input
+                      id={field.name}
+                      name={field.name}
+                      type={showPassword ? 'text' : 'password'}
+                      value={field.state.value || ''}
+                      onBlur={field.handleBlur}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      placeholder="Please enter password"
+                      className="pr-10"
+                    />
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      className="absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent"
+                      onClick={togglePasswordVisibility}
+                    >
+                      {showPassword ? (
+                        <EyeOff className="h-4 w-4" />
+                      ) : (
+                        <Eye className="h-4 w-4" />
+                      )}
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </form.Field>
+            <form.Field name="userAgent">
+              {(field) => (
+                <div className="space-y-2">
+                  <Label htmlFor={field.name}>User Agent</Label>
+                  <Textarea
+                    id={field.name}
+                    name={field.name}
+                    value={field.state.value ?? undefined}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                    placeholder="Please enter User Agent (optional)"
+                    rows={3}
+                    className="resize-none"
+                  />
+                </div>
+              )}
+            </form.Field>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function Credential3rdEditRouteComponent() {
+  const { id } = Route.useParams();
+
+  const { loading, error, data, refetch } =
+    useQuery<GetCredential3rdDetailQuery>(GET_CREDENTIAL_3RD_DETAIL, {
+      variables: {
+        id: Number.parseInt(id),
+      },
+      fetchPolicy: 'cache-and-network',
+    });
+
+  const credential = data?.credential3rd?.nodes?.[0];
+
+  const onCompleted = useCallback(async () => {
+    const refetchResult = await refetch();
+    if (refetchResult.errors) {
+      toast('Update credential failed', {
+        description: refetchResult.errors[0].message,
+      });
+    } else {
+      toast('Update credential successfully');
+    }
+  }, [refetch]);
+
+  if (loading) {
+    return <DetailCardSkeleton />;
+  }
+
+  if (error) {
+    return <QueryErrorView message={error.message} />;
+  }
+
+  if (!credential) {
+    return <DetailEmptyView message="Not found certain credential" />;
+  }
+
+  return <FormView credential={credential} onCompleted={onCompleted} />;
+}

apps/webui/src/presentation/routes/_app/credential3rd/manage.tsx

@@ -36,7 +36,6 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import { format } from 'date-fns';
-import { zhCN } from 'date-fns/locale';
 import { Eye, EyeOff, Plus } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { toast } from 'sonner';
@@ -51,7 +50,10 @@ export const Route = createFileRoute('/_app/credential3rd/manage')({
 function CredentialManageRouteComponent() {
   const navigate = useNavigate();
 
-  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({
+    createdAt: false,
+    updatedAt: false,
+  });
   const [sorting, setSorting] = useState<SortingState>([]);
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
@@ -85,7 +87,9 @@ function CredentialManageRouteComponent() {
     onCompleted: async () => {
       const refetchResult = await refetch();
       if (refetchResult.errors) {
-        toast.error(refetchResult.errors[0].message);
+        toast.error('Failed to delete credential', {
+          description: refetchResult.errors[0].message,
+        });
         return;
       }
       toast.success('Credential deleted');
@@ -124,7 +128,6 @@ function CredentialManageRouteComponent() {
       {
         header: 'ID',
         accessorKey: 'id',
-        enableHiding: false,
         cell: ({ row }) => {
           return <div className="font-mono text-sm">{row.original.id}</div>;
         },
@@ -160,14 +163,10 @@ function CredentialManageRouteComponent() {
           const password = row.original.password;
           const isVisible = showPasswords[row.original.id];
 
-          if (!password) {
-            return <div>-</div>;
-          }
-
           return (
             <div className="flex items-center gap-2">
               <div className="font-mono text-sm">
-                {isVisible ? password : '••••••••'}
+                {isVisible ? password || '-' : '••••••••'}
               </div>
               <Button
                 variant="ghost"
@@ -216,9 +215,7 @@ function CredentialManageRouteComponent() {
           const updatedAt = row.original.updatedAt;
           return (
             <div className="text-sm">
-              {format(new Date(updatedAt), 'yyyy-MM-dd HH:mm:ss', {
+              {format(new Date(updatedAt), 'yyyy-MM-dd HH:mm:ss')}
-                locale: zhCN,
-              })}
             </div>
           );
         },
@@ -231,12 +228,19 @@ function CredentialManageRouteComponent() {
             getId={(row) => row.original.id}
             showEdit
             showDelete
-            onEdit={() => {
+            showDetail
+            onDetail={() => {
               navigate({
                 to: '/credential3rd/detail/$id',
                 params: { id: `${row.original.id}` },
               });
             }}
+            onEdit={() => {
+              navigate({
+                to: '/credential3rd/edit/$id',
+                params: { id: `${row.original.id}` },
+              });
+            }}
             onDelete={handleDeleteRecord(row)}
           />
         ),
@@ -260,6 +264,13 @@ function CredentialManageRouteComponent() {
       sorting,
       columnVisibility,
     },
+    enableColumnPinning: true,
+    initialState: {
+      columnPinning: {
+        left: [],
+        right: ['actions'],
+      },
+    },
   });
 
   if (error) {

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

@@ -4,7 +4,7 @@ import { ProLink } from '@/components/ui/pro-link';
 import { Spinner } from '@/components/ui/spinner';
 import { AUTH_METHOD } from '@/infra/auth/defs';
 import { createFileRoute, redirect } from '@tanstack/react-router';
-import { useAtom } from 'jotai/react';
+import { useAtomValue } from 'jotai/react';
 import { atomWithObservable } from 'jotai/utils';
 import { EventTypes } from 'oidc-client-rx';
 import { useMemo } from 'react';
@@ -23,7 +23,7 @@ export const Route = createFileRoute('/auth/oidc/callback')({
 function OidcCallbackRouteComponent() {
   const { authService } = useAuth();
 
-  const isLoading = useAtom(
+  const isLoading = useAtomValue(
     useMemo(
       () =>
         atomWithObservable(() =>
@@ -33,7 +33,7 @@ function OidcCallbackRouteComponent() {
     )
   );
 
-  const checkAuthResultError = useAtom(
+  const checkAuthResultError = useAtomValue(
     useMemo(
       () =>
         atomWithObservable(() =>

biome.json

@@ -4,6 +4,7 @@
   "javascript": {
     "globals": ["Liveblocks"]
   },
+
   "linter": {
     "rules": {
       "nursery": {
@@ -26,6 +27,12 @@
         "noSvgWithoutTitle": "off"
       },
       "complexity": {
+        "noExcessiveCognitiveComplexity": {
+          "level": "warn",
+          "options": {
+            "maxAllowedComplexity": 20
+          }
+        },
         "noBannedTypes": "off"
       },
       "correctness": {