fix: fix table horizontal scroll and collapsed sidebar

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

@@ -1,19 +1,21 @@
-import * as React from "react"
-
-const MOBILE_BREAKPOINT = 768
+import { useInject } from '@/infra/di/inject';
+import { ThemeService } from '@/infra/styles/theme.service';
+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 mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
+  const isMobile = useAtomValue(
+    useMemo(
+      () =>
+        atomWithObservable(() => themeService.isMobile$, {
+          initialValue: themeService.isMobile$.value,
+        }),
+      [themeService.isMobile$]
+    )
+  );
 
-  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">
-                      {field.state.meta.errors[0]?.toString()}
-                    </p>
+                    <FormFieldErrors errors={field.state.meta.errors} />
                   )}
                 </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() {
-  return <div>Hello "/_app/credential3rd/detail/$id"!</div>
+function Credential3rdDetailRouteComponent() {
+  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', {
-                locale: zhCN,
-              })}
+              {format(new Date(updatedAt), 'yyyy-MM-dd HH:mm:ss')}
             </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(() =>