refactor: refactor subscriptions

apps/webui/package.json

@@ -70,7 +70,6 @@
     "react": "^19.1.0",
     "react-day-picker": "9.6.0",
     "react-dom": "^19.1.0",
-    "react-hook-form": "^7.56.3",
     "react-resizable-panels": "^3.0.1",
     "recharts": "^2.15.3",
     "rxjs": "^7.8.2",

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

@@ -66,9 +66,9 @@ export function NavMain({
     );
   };
 
-  const renderCollapsedSubMenu = (item: NavMainItem) => {
+  const renderCollapsedSubMenu = (item: NavMainItem, itemIndex: number) => {
     return (
-      <DropdownMenu>
+      <DropdownMenu key={itemIndex}>
         <DropdownMenuTrigger asChild>
           <SidebarMenuButton
             tooltip={item.title}
@@ -159,7 +159,7 @@ export function NavMain({
               );
             }
             return state === 'collapsed'
-              ? renderCollapsedSubMenu(item)
+              ? renderCollapsedSubMenu(item, itemIndex)
               : renderExpandedSubMenu(item, itemIndex);
           })}
         </SidebarMenu>

apps/webui/src/components/ui/form-field-errors.tsx

@@ -7,47 +7,51 @@ interface ErrorDisplayProps {
     | string
     | StandardSchemaV1Issue
     | Array<string | StandardSchemaV1Issue | undefined>;
+  isDirty: boolean;
+  submissionAttempts: number;
 }
 
-export function FormFieldErrors({ errors }: ErrorDisplayProps) {
+export function FormFieldErrors({
+  errors,
+  isDirty,
+  submissionAttempts,
+}: ErrorDisplayProps) {
   const errorList = useMemo(
     () =>
-      (Array.isArray(errors) ? errors : [errors]).filter(Boolean) as Array<
-        string | StandardSchemaV1Issue
-      >,
+      Array.from(
+        new Set(
+          (Array.isArray(errors) ? errors : [errors])
+            .map((e) => {
+              if (typeof e === "string") {
+                return e;
+              }
+              if (e?.message) {
+                return e.message;
+              }
+              return null;
+            })
+            .filter(Boolean) as string[]
+        )
+      ),
     [errors]
   );
 
+  if (!isDirty && !(submissionAttempts > 0)) {
+    return null;
+  }
+
   if (!errorList.length) {
     return null;
   }
 
   return (
     <ul className="mt-1 space-y-1 text-sm text-destructive">
-      {errorList.map((error, index) => {
-        if (typeof error === "string") {
-          return (
-            <li key={index} className="flex items-center space-x-2">
-              <AlertCircle
-                size={16}
-                className="flex-shrink-0 text-destructive"
-              />
-              <span>{error}</span>
-            </li>
-          );
-        }
-        return (
-          <li key={index} className="flex flex-col space-y-0.5">
-            <div className="flex items-center space-x-2">
-              <AlertCircle
-                size={16}
-                className="flex-shrink-0 text-destructive"
-              />
-              <span>{error.message}</span>
-            </div>
-          </li>
-        );
-      })}
+      {errorList.map((error, index) => (
+        <li key={`${index}-${error}`} className="flex items-center space-x-2">
+          <AlertCircle size={16} className="flex-shrink-0 text-destructive" />
+          <span>{error}</span>
+        </li>
+      ))}
     </ul>
   );
 }

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

@@ -1,164 +0,0 @@
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { Slot } from "@radix-ui/react-slot";
-import * as React from "react";
-import {
-  Controller,
-  type ControllerProps,
-  type FieldPath,
-  type FieldValues,
-  FormProvider,
-  useFormContext,
-  useFormState,
-} from "react-hook-form";
-
-import { Label } from "@/components/ui/label";
-import { cn } from "@/presentation/utils";
-
-const Form = FormProvider;
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  name: TName;
-};
-
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-);
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  );
-};
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState } = useFormContext();
-  const formState = useFormState({ name: fieldContext.name });
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
-  }
-
-  const { id } = itemContext;
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  };
-};
-
-type FormItemContextValue = {
-  id: string;
-};
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-);
-
-function FormItem({ className, ...props }: React.ComponentProps<"div">) {
-  const id = React.useId();
-
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div
-        data-slot="form-item"
-        className={cn("grid gap-2", className)}
-        {...props}
-      />
-    </FormItemContext.Provider>
-  );
-}
-
-function FormLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  const { error, formItemId } = useFormField();
-
-  return (
-    <Label
-      data-slot="form-label"
-      data-error={!!error}
-      className={cn("data-[error=true]:text-destructive", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  );
-}
-
-function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
-  const { error, formItemId, formDescriptionId, formMessageId } =
-    useFormField();
-
-  return (
-    <Slot
-      data-slot="form-control"
-      id={formItemId}
-      aria-describedby={
-        error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  );
-}
-
-function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
-  const { formDescriptionId } = useFormField();
-
-  return (
-    <p
-      data-slot="form-description"
-      id={formDescriptionId}
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  );
-}
-
-function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message ?? "") : props.children;
-
-  if (!body) {
-    return null;
-  }
-
-  return (
-    <p
-      data-slot="form-message"
-      id={formMessageId}
-      className={cn("text-destructive text-sm", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  );
-}
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-};

apps/webui/src/domains/recorder/context.ts

@@ -0,0 +1,16 @@
+import type { Provider } from '@outposts/injection-js';
+import { MikanService } from './services/mikan.service';
+import { SubscriptionService } from './services/subscription.service';
+
+export function provideRecorder(): Provider[] {
+  return [
+    {
+      provide: MikanService,
+      useClass: MikanService,
+    },
+    {
+      provide: SubscriptionService,
+      useClass: SubscriptionService,
+    },
+  ];
+}

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

@@ -0,0 +1,192 @@
+import { UnimplementedError } from '@/infra/errors/common';
+import { SubscriptionCategoryEnum } from '@/infra/graphql/gql/graphql';
+import { type ArkErrors, type } from 'arktype';
+
+export const MIKAN_UNKNOWN_FANSUB_NAME = '生肉/不明字幕';
+export const MIKAN_UNKNOWN_FANSUB_ID = '202';
+export const MIKAN_ACCOUNT_MANAGE_PAGE_PATH = '/Account/Manage';
+export const MIKAN_SEASON_FLOW_PAGE_PATH = '/Home/BangumiCoverFlow';
+export const MIKAN_BANGUMI_HOMEPAGE_PATH = '/Home/Bangumi';
+export const MIKAN_BANGUMI_EXPAND_SUBSCRIBED_PAGE_PATH = '/Home/ExpandBangumi';
+export const MIKAN_EPISODE_HOMEPAGE_PATH = '/Home/Episode';
+export const MIKAN_BANGUMI_POSTER_PATH = '/images/Bangumi';
+export const MIKAN_EPISODE_TORRENT_PATH = '/Download';
+export const MIKAN_SUBSCRIBER_SUBSCRIPTION_RSS_PATH = '/RSS/MyBangumi';
+export const MIKAN_BANGUMI_RSS_PATH = '/RSS/Bangumi';
+export const MIKAN_BANGUMI_ID_QUERY_KEY = 'bangumiId';
+export const MIKAN_FANSUB_ID_QUERY_KEY = 'subgroupid';
+export const MIKAN_SUBSCRIBER_SUBSCRIPTION_TOKEN_QUERY_KEY = 'token';
+export const MIKAN_SEASON_STR_QUERY_KEY = 'seasonStr';
+export const MIKAN_YEAR_QUERY_KEY = 'year';
+
+export const MikanSubscriptionCategoryEnum = {
+  MikanBangumi: SubscriptionCategoryEnum.MikanBangumi,
+  MikanSeason: SubscriptionCategoryEnum.MikanSeason,
+  MikanSubscriber: SubscriptionCategoryEnum.MikanSubscriber,
+} as const;
+
+export type MikanSubscriptionCategoryEnum =
+  (typeof MikanSubscriptionCategoryEnum)[keyof typeof MikanSubscriptionCategoryEnum];
+
+export const MikanSeasonEnum = {
+  Spring: '春',
+  Summer: '夏',
+  Autumn: '秋',
+  Winter: '冬',
+} as const;
+
+export type MikanSeasonEnum =
+  (typeof MikanSeasonEnum)[keyof typeof MikanSeasonEnum];
+
+export const MikanSeasonSchema = type.enumerated(
+  MikanSeasonEnum.Spring,
+  MikanSeasonEnum.Summer,
+  MikanSeasonEnum.Autumn,
+  MikanSeasonEnum.Winter
+);
+
+export const MikanSubscriptionBangumiSourceUrlSchema = type({
+  category: `'${SubscriptionCategoryEnum.MikanBangumi}'`,
+  mikanBangumiId: 'string>0',
+  mikanFansubId: 'string>0',
+});
+
+export type MikanSubscriptionBangumiSourceUrl =
+  typeof MikanSubscriptionBangumiSourceUrlSchema.infer;
+
+export const MikanSubscriptionSeasonSourceUrlSchema = type({
+  category: `'${SubscriptionCategoryEnum.MikanSeason}'`,
+  seasonStr: MikanSeasonSchema,
+  year: 'number>0',
+});
+
+export type MikanSubscriptionSeasonSourceUrl =
+  typeof MikanSubscriptionSeasonSourceUrlSchema.infer;
+
+export const MikanSubscriptionSubscriberSourceUrlSchema = type({
+  category: `'${SubscriptionCategoryEnum.MikanSubscriber}'`,
+  mikanSubscriptionToken: 'string>0',
+});
+
+export type MikanSubscriptionSubscriberSourceUrl =
+  typeof MikanSubscriptionSubscriberSourceUrlSchema.infer;
+
+export const MikanSubscriptionSourceUrlSchema =
+  MikanSubscriptionBangumiSourceUrlSchema.or(
+    MikanSubscriptionSeasonSourceUrlSchema
+  ).or(MikanSubscriptionSubscriberSourceUrlSchema);
+
+export type MikanSubscriptionSourceUrl =
+  typeof MikanSubscriptionSourceUrlSchema.infer;
+
+export function isSubscriptionMikanCategory(
+  category: SubscriptionCategoryEnum
+): category is MikanSubscriptionCategoryEnum {
+  return (
+    category === SubscriptionCategoryEnum.MikanBangumi ||
+    category === SubscriptionCategoryEnum.MikanSeason ||
+    category === SubscriptionCategoryEnum.MikanSubscriber
+  );
+}
+
+export function buildMikanSubscriptionSeasonSourceUrl(
+  mikanBaseUrl: string,
+  formParts: MikanSubscriptionSeasonSourceUrl
+): URL {
+  const u = new URL(mikanBaseUrl);
+  u.pathname = MIKAN_SEASON_FLOW_PAGE_PATH;
+  u.searchParams.set(MIKAN_YEAR_QUERY_KEY, formParts.year.toString());
+  u.searchParams.set(MIKAN_SEASON_STR_QUERY_KEY, formParts.seasonStr);
+  return u;
+}
+
+export function buildMikanSubscriptionBangumiSourceUrl(
+  mikanBaseUrl: string,
+  formParts: MikanSubscriptionBangumiSourceUrl
+): URL {
+  const u = new URL(mikanBaseUrl);
+  u.pathname = MIKAN_BANGUMI_RSS_PATH;
+  u.searchParams.set(MIKAN_BANGUMI_ID_QUERY_KEY, formParts.mikanBangumiId);
+  u.searchParams.set(MIKAN_FANSUB_ID_QUERY_KEY, formParts.mikanFansubId);
+  return u;
+}
+
+export function buildMikanSubscriptionSubscriberSourceUrl(
+  mikanBaseUrl: string,
+  formParts: MikanSubscriptionSubscriberSourceUrl
+): URL {
+  const u = new URL(mikanBaseUrl);
+  u.pathname = MIKAN_SUBSCRIBER_SUBSCRIPTION_RSS_PATH;
+  u.searchParams.set(
+    MIKAN_SUBSCRIBER_SUBSCRIPTION_TOKEN_QUERY_KEY,
+    formParts.mikanSubscriptionToken
+  );
+  return u;
+}
+
+export function buildMikanSubscriptionSourceUrl(
+  mikanBaseUrl: string,
+  formParts: MikanSubscriptionSourceUrl
+): URL {
+  if (formParts.category === SubscriptionCategoryEnum.MikanBangumi) {
+    return buildMikanSubscriptionBangumiSourceUrl(mikanBaseUrl, formParts);
+  }
+  if (formParts.category === SubscriptionCategoryEnum.MikanSeason) {
+    return buildMikanSubscriptionSeasonSourceUrl(mikanBaseUrl, formParts);
+  }
+  if (formParts.category === SubscriptionCategoryEnum.MikanSubscriber) {
+    return buildMikanSubscriptionSubscriberSourceUrl(mikanBaseUrl, formParts);
+  }
+
+  throw new UnimplementedError(
+    // @ts-ignore
+    `source url category = ${formParts.category as any} is not implemented`
+  );
+}
+
+export function extractMikanSubscriptionSeasonSourceUrl(
+  sourceUrl: string
+): MikanSubscriptionSeasonSourceUrl | ArkErrors {
+  const u = new URL(sourceUrl);
+  return MikanSubscriptionSeasonSourceUrlSchema({
+    category: SubscriptionCategoryEnum.MikanSeason,
+    seasonStr: u.searchParams.get(
+      MIKAN_SEASON_STR_QUERY_KEY
+    ) as MikanSeasonEnum,
+    year: Number(u.searchParams.get(MIKAN_YEAR_QUERY_KEY)),
+  });
+}
+
+export function extractMikanSubscriptionBangumiSourceUrl(
+  sourceUrl: string
+): MikanSubscriptionBangumiSourceUrl | ArkErrors {
+  const u = new URL(sourceUrl);
+  return MikanSubscriptionBangumiSourceUrlSchema({
+    category: SubscriptionCategoryEnum.MikanBangumi,
+    mikanBangumiId: u.searchParams.get(MIKAN_BANGUMI_ID_QUERY_KEY),
+    mikanFansubId: u.searchParams.get(MIKAN_FANSUB_ID_QUERY_KEY),
+  });
+}
+
+export function extractMikanSubscriptionSubscriberSourceUrl(
+  sourceUrl: string
+): MikanSubscriptionSubscriberSourceUrl | ArkErrors {
+  const u = new URL(sourceUrl);
+  return MikanSubscriptionSubscriberSourceUrlSchema({
+    category: SubscriptionCategoryEnum.MikanSubscriber,
+    mikanSubscriptionToken: u.searchParams.get(
+      MIKAN_SUBSCRIBER_SUBSCRIPTION_TOKEN_QUERY_KEY
+    ),
+  });
+}
+
+export function extractMikanSubscriptionSourceUrl(
+  sourceUrl: string
+): MikanSubscriptionSourceUrl | ArkErrors {
+  const u = new URL(sourceUrl);
+  return MikanSubscriptionSourceUrlSchema({
+    category: SubscriptionCategoryEnum.MikanBangumi,
+    mikanBangumiId: u.searchParams.get(MIKAN_BANGUMI_ID_QUERY_KEY),
+    mikanFansubId: u.searchParams.get(MIKAN_FANSUB_ID_QUERY_KEY),
+  });
+}

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

@@ -1,5 +1,16 @@
-import type { GetSubscriptionsQuery } from '@/infra/graphql/gql/graphql';
+import { arkValidatorToTypeNarrower } from '@/infra/errors/arktype';
+import {
+  type GetSubscriptionsQuery,
+  SubscriptionCategoryEnum,
+} from '@/infra/graphql/gql/graphql';
 import { gql } from '@apollo/client';
+import { type } from 'arktype';
+import {
+  MikanSubscriptionSeasonSourceUrlSchema,
+  extractMikanSubscriptionBangumiSourceUrl,
+  extractMikanSubscriptionSeasonSourceUrl,
+  extractMikanSubscriptionSubscriberSourceUrl,
+} from './mikan';
 
 export const GET_SUBSCRIPTIONS = gql`
   query GetSubscriptions($filters: SubscriptionsFilterInput!, $orderBy: SubscriptionsOrderInput!, $pagination: PaginationInput!) {
@@ -16,6 +27,7 @@ export const GET_SUBSCRIPTIONS = gql`
         category
         sourceUrl
         enabled
+        credentialId
       }
       paginationInfo {
         total
@@ -25,6 +37,21 @@ export const GET_SUBSCRIPTIONS = gql`
   }
 `;
 
+export const INSERT_SUBSCRIPTION = gql`
+    mutation InsertSubscription($data: SubscriptionsInsertInput!) {
+        subscriptionsCreateOne(data: $data) {
+            id
+            createdAt
+            updatedAt
+            displayName
+            category
+            sourceUrl
+            enabled
+            credentialId
+        }
+    }
+`;
+
 export type SubscriptionDto =
   GetSubscriptionsQuery['subscriptions']['nodes'][number];
 
@@ -67,6 +94,9 @@ query GetSubscriptionDetail ($id: Int!) {
       category
       sourceUrl
       enabled
+      credential3rd {
+         id
+      }
       bangumi {
         nodes {
           createdAt
@@ -89,3 +119,39 @@ query GetSubscriptionDetail ($id: Int!) {
   }
 }
 `;
+
+export const SubscriptionTypedMikanSeasonSchema =
+  MikanSubscriptionSeasonSourceUrlSchema.and(
+    type({
+      credentialId: 'number>0',
+    })
+  );
+
+export const SubscriptionTypedMikanBangumiSchema = type({
+  category: `'${SubscriptionCategoryEnum.MikanBangumi}'`,
+  sourceUrl: type.string
+    .atLeastLength(1)
+    .narrow(
+      arkValidatorToTypeNarrower(extractMikanSubscriptionBangumiSourceUrl)
+    ),
+});
+
+export const SubscriptionTypedMikanSubscriberSchema = type({
+  category: `'${SubscriptionCategoryEnum.MikanSubscriber}'`,
+  sourceUrl: type.string
+    .atLeastLength(1)
+    .narrow(
+      arkValidatorToTypeNarrower(extractMikanSubscriptionSubscriberSourceUrl)
+    ),
+});
+
+export const SubscriptionTypedSchema = SubscriptionTypedMikanSeasonSchema.or(
+  SubscriptionTypedMikanBangumiSchema
+).or(SubscriptionTypedMikanSubscriberSchema);
+
+export const SubscriptionInsertFormSchema = type({
+  enabled: 'boolean',
+  displayName: 'string>0',
+}).and(SubscriptionTypedSchema);
+
+export type SubscriptionInsertForm = typeof SubscriptionInsertFormSchema.infer;

apps/webui/src/domains/recorder/services/mikan.service.ts

@@ -0,0 +1,6 @@
+import { Injectable } from '@outposts/injection-js';
+
+@Injectable()
+export class MikanService {
+  mikanBaseUrl = 'https://mikanani.me';
+}

apps/webui/src/domains/recorder/services/subscription.service.ts

@@ -0,0 +1,31 @@
+import {
+  SubscriptionCategoryEnum,
+  type SubscriptionsInsertInput,
+} from '@/infra/graphql/gql/graphql';
+import { Injectable, inject } from '@outposts/injection-js';
+import { buildMikanSubscriptionSeasonSourceUrl } from '../schema/mikan';
+import type { SubscriptionInsertForm } from '../schema/subscriptions';
+import { MikanService } from './mikan.service';
+
+@Injectable()
+export class SubscriptionService {
+  private mikan = inject(MikanService);
+
+  transformInsertFormToInput(
+    form: SubscriptionInsertForm
+  ): SubscriptionsInsertInput {
+    let sourceUrl: string;
+    if (form.category === SubscriptionCategoryEnum.MikanSeason) {
+      sourceUrl = buildMikanSubscriptionSeasonSourceUrl(
+        this.mikan.mikanBaseUrl,
+        form
+      ).toString();
+    } else {
+      sourceUrl = form.sourceUrl;
+    }
+    return {
+      ...form,
+      sourceUrl,
+    };
+  }
+}

apps/webui/src/infra/errors/arktype.ts

@@ -0,0 +1,15 @@
+import { ArkErrors, type Traversal } from 'arktype';
+
+export function arkValidatorToTypeNarrower<
+  T,
+  V extends (input: T) => unknown | ArkErrors,
+>(validator: V): (input: T, ctx: Traversal) => boolean {
+  return (input, ctx) => {
+    const result = validator(input);
+    if (result instanceof ArkErrors) {
+      ctx.errors.merge(result);
+      return false;
+    }
+    return true;
+  };
+}

apps/webui/src/infra/errors/common.ts

@@ -3,3 +3,9 @@ export class UnreachableError extends Error {
     super(`UnreachableError: ${detail}`);
   }
 }
+
+export class UnimplementedError extends Error {
+  constructor(detail: string) {
+    super(`UnimplementedError: ${detail}`);
+  }
+}

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

@@ -19,11 +19,11 @@ type Documents = {
     "\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  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        credentialId\n      }\n      paginationInfo {\n        total\n        pages\n      }\n    }\n  }\n": typeof types.GetSubscriptionsDocument,
+    "\n    mutation InsertSubscription($data: SubscriptionsInsertInput!) {\n        subscriptionsCreateOne(data: $data) {\n            id\n            createdAt\n            updatedAt\n            displayName\n            category\n            sourceUrl\n            enabled\n            credentialId\n        }\n    }\n": typeof types.InsertSubscriptionDocument,
     "\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,
-    "\nquery GetSubscriptionDetail ($id: Int!) {\n  subscriptions(filters: { id: {\n    eq: $id\n  } }) {\n    nodes {\n      id\n      displayName\n      createdAt\n      updatedAt\n      category\n      sourceUrl\n      enabled\n      bangumi {\n        nodes {\n          createdAt\n          updatedAt\n          id\n          mikanBangumiId\n          displayName\n          rawName\n          season\n          seasonRaw\n          fansub\n          mikanFansubId\n          rssLink\n          posterLink\n          savePath\n          homepage\n        }\n      }\n    }\n  }\n}\n": typeof types.GetSubscriptionDetailDocument,
-    "\n    mutation CreateSubscription($input: SubscriptionsInsertInput!) {\n        subscriptionsCreateOne(data: $input) {\n            id\n            displayName\n            sourceUrl\n            enabled\n            category\n        }\n    }\n": typeof types.CreateSubscriptionDocument,
+    "\nquery GetSubscriptionDetail ($id: Int!) {\n  subscriptions(filters: { id: {\n    eq: $id\n  } }) {\n    nodes {\n      id\n      displayName\n      createdAt\n      updatedAt\n      category\n      sourceUrl\n      enabled\n      credential3rd {\n         id\n      }\n      bangumi {\n        nodes {\n          createdAt\n          updatedAt\n          id\n          mikanBangumiId\n          displayName\n          rawName\n          season\n          seasonRaw\n          fansub\n          mikanFansubId\n          rssLink\n          posterLink\n          savePath\n          homepage\n        }\n      }\n    }\n  }\n}\n": typeof types.GetSubscriptionDetailDocument,
 };
 const documents: Documents = {
     "\n  query GetCredential3rd($filters: Credential3rdFilterInput!, $orderBy: Credential3rdOrderInput, $pagination: PaginationInput) {\n    credential3rd(filters: $filters, orderBy: $orderBy, pagination: $pagination) {\n      nodes {\n        id\n        cookies\n        username\n        password\n        userAgent\n        createdAt\n        updatedAt\n        credentialType\n      }\n      paginationInfo {\n        total\n        pages\n      }\n    }\n  }\n": types.GetCredential3rdDocument,
@@ -31,11 +31,11 @@ const documents: Documents = {
     "\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  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        credentialId\n      }\n      paginationInfo {\n        total\n        pages\n      }\n    }\n  }\n": types.GetSubscriptionsDocument,
+    "\n    mutation InsertSubscription($data: SubscriptionsInsertInput!) {\n        subscriptionsCreateOne(data: $data) {\n            id\n            createdAt\n            updatedAt\n            displayName\n            category\n            sourceUrl\n            enabled\n            credentialId\n        }\n    }\n": types.InsertSubscriptionDocument,
     "\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,
-    "\nquery GetSubscriptionDetail ($id: Int!) {\n  subscriptions(filters: { id: {\n    eq: $id\n  } }) {\n    nodes {\n      id\n      displayName\n      createdAt\n      updatedAt\n      category\n      sourceUrl\n      enabled\n      bangumi {\n        nodes {\n          createdAt\n          updatedAt\n          id\n          mikanBangumiId\n          displayName\n          rawName\n          season\n          seasonRaw\n          fansub\n          mikanFansubId\n          rssLink\n          posterLink\n          savePath\n          homepage\n        }\n      }\n    }\n  }\n}\n": types.GetSubscriptionDetailDocument,
-    "\n    mutation CreateSubscription($input: SubscriptionsInsertInput!) {\n        subscriptionsCreateOne(data: $input) {\n            id\n            displayName\n            sourceUrl\n            enabled\n            category\n        }\n    }\n": types.CreateSubscriptionDocument,
+    "\nquery GetSubscriptionDetail ($id: Int!) {\n  subscriptions(filters: { id: {\n    eq: $id\n  } }) {\n    nodes {\n      id\n      displayName\n      createdAt\n      updatedAt\n      category\n      sourceUrl\n      enabled\n      credential3rd {\n         id\n      }\n      bangumi {\n        nodes {\n          createdAt\n          updatedAt\n          id\n          mikanBangumiId\n          displayName\n          rawName\n          season\n          seasonRaw\n          fansub\n          mikanFansubId\n          rssLink\n          posterLink\n          savePath\n          homepage\n        }\n      }\n    }\n  }\n}\n": types.GetSubscriptionDetailDocument,
 };
 
 /**
@@ -75,7 +75,11 @@ export function gql(source: "\n  query GetCredential3rdDetail($id: Int!) {\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 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 documents)["\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"];
+export function gql(source: "\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        credentialId\n      }\n      paginationInfo {\n        total\n        pages\n      }\n    }\n  }\n"): (typeof documents)["\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        credentialId\n      }\n      paginationInfo {\n        total\n        pages\n      }\n    }\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    mutation InsertSubscription($data: SubscriptionsInsertInput!) {\n        subscriptionsCreateOne(data: $data) {\n            id\n            createdAt\n            updatedAt\n            displayName\n            category\n            sourceUrl\n            enabled\n            credentialId\n        }\n    }\n"): (typeof documents)["\n    mutation InsertSubscription($data: SubscriptionsInsertInput!) {\n        subscriptionsCreateOne(data: $data) {\n            id\n            createdAt\n            updatedAt\n            displayName\n            category\n            sourceUrl\n            enabled\n            credentialId\n        }\n    }\n"];
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -87,11 +91,7 @@ export function gql(source: "\n    mutation DeleteSubscriptions($filters: Subscr
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function gql(source: "\nquery GetSubscriptionDetail ($id: Int!) {\n  subscriptions(filters: { id: {\n    eq: $id\n  } }) {\n    nodes {\n      id\n      displayName\n      createdAt\n      updatedAt\n      category\n      sourceUrl\n      enabled\n      bangumi {\n        nodes {\n          createdAt\n          updatedAt\n          id\n          mikanBangumiId\n          displayName\n          rawName\n          season\n          seasonRaw\n          fansub\n          mikanFansubId\n          rssLink\n          posterLink\n          savePath\n          homepage\n        }\n      }\n    }\n  }\n}\n"): (typeof documents)["\nquery GetSubscriptionDetail ($id: Int!) {\n  subscriptions(filters: { id: {\n    eq: $id\n  } }) {\n    nodes {\n      id\n      displayName\n      createdAt\n      updatedAt\n      category\n      sourceUrl\n      enabled\n      bangumi {\n        nodes {\n          createdAt\n          updatedAt\n          id\n          mikanBangumiId\n          displayName\n          rawName\n          season\n          seasonRaw\n          fansub\n          mikanFansubId\n          rssLink\n          posterLink\n          savePath\n          homepage\n        }\n      }\n    }\n  }\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    mutation CreateSubscription($input: SubscriptionsInsertInput!) {\n        subscriptionsCreateOne(data: $input) {\n            id\n            displayName\n            sourceUrl\n            enabled\n            category\n        }\n    }\n"): (typeof documents)["\n    mutation CreateSubscription($input: SubscriptionsInsertInput!) {\n        subscriptionsCreateOne(data: $input) {\n            id\n            displayName\n            sourceUrl\n            enabled\n            category\n        }\n    }\n"];
+export function gql(source: "\nquery GetSubscriptionDetail ($id: Int!) {\n  subscriptions(filters: { id: {\n    eq: $id\n  } }) {\n    nodes {\n      id\n      displayName\n      createdAt\n      updatedAt\n      category\n      sourceUrl\n      enabled\n      credential3rd {\n         id\n      }\n      bangumi {\n        nodes {\n          createdAt\n          updatedAt\n          id\n          mikanBangumiId\n          displayName\n          rawName\n          season\n          seasonRaw\n          fansub\n          mikanFansubId\n          rssLink\n          posterLink\n          savePath\n          homepage\n        }\n      }\n    }\n  }\n}\n"): (typeof documents)["\nquery GetSubscriptionDetail ($id: Int!) {\n  subscriptions(filters: { id: {\n    eq: $id\n  } }) {\n    nodes {\n      id\n      displayName\n      createdAt\n      updatedAt\n      category\n      sourceUrl\n      enabled\n      credential3rd {\n         id\n      }\n      bangumi {\n        nodes {\n          createdAt\n          updatedAt\n          id\n          mikanBangumiId\n          displayName\n          rawName\n          season\n          seasonRaw\n          fansub\n          mikanFansubId\n          rssLink\n          posterLink\n          savePath\n          homepage\n        }\n      }\n    }\n  }\n}\n"];
 
 export function gql(source: string) {
   return (documents as any)[source] ?? {};

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

@@ -1685,7 +1685,14 @@ export type GetSubscriptionsQueryVariables = Exact<{
 }>;
 
 
-export type GetSubscriptionsQuery = { __typename?: 'Query', subscriptions: { __typename?: 'SubscriptionsConnection', nodes: Array<{ __typename?: 'Subscriptions', id: number, createdAt: string, updatedAt: string, displayName: string, category: SubscriptionCategoryEnum, sourceUrl: string, enabled: boolean }>, paginationInfo?: { __typename?: 'PaginationInfo', total: number, pages: number } | null } };
+export type GetSubscriptionsQuery = { __typename?: 'Query', subscriptions: { __typename?: 'SubscriptionsConnection', nodes: Array<{ __typename?: 'Subscriptions', id: number, createdAt: string, updatedAt: string, displayName: string, category: SubscriptionCategoryEnum, sourceUrl: string, enabled: boolean, credentialId?: number | null }>, paginationInfo?: { __typename?: 'PaginationInfo', total: number, pages: number } | null } };
+
+export type InsertSubscriptionMutationVariables = Exact<{
+  data: SubscriptionsInsertInput;
+}>;
+
+
+export type InsertSubscriptionMutation = { __typename?: 'Mutation', subscriptionsCreateOne: { __typename?: 'SubscriptionsBasic', id: number, createdAt: string, updatedAt: string, displayName: string, category: SubscriptionCategoryEnum, sourceUrl: string, enabled: boolean, credentialId?: number | null } };
 
 export type UpdateSubscriptionsMutationVariables = Exact<{
   data: SubscriptionsUpdateInput;
@@ -1707,14 +1714,7 @@ export type GetSubscriptionDetailQueryVariables = Exact<{
 }>;
 
 
-export type GetSubscriptionDetailQuery = { __typename?: 'Query', subscriptions: { __typename?: 'SubscriptionsConnection', nodes: Array<{ __typename?: 'Subscriptions', id: number, displayName: string, createdAt: string, updatedAt: string, category: SubscriptionCategoryEnum, sourceUrl: string, enabled: boolean, bangumi: { __typename?: 'BangumiConnection', nodes: Array<{ __typename?: 'Bangumi', createdAt: string, updatedAt: string, id: number, mikanBangumiId?: string | null, displayName: string, rawName: string, season: number, seasonRaw?: string | null, fansub?: string | null, mikanFansubId?: string | null, rssLink?: string | null, posterLink?: string | null, savePath?: string | null, homepage?: string | null }> } }> } };
-
-export type CreateSubscriptionMutationVariables = Exact<{
-  input: SubscriptionsInsertInput;
-}>;
-
-
-export type CreateSubscriptionMutation = { __typename?: 'Mutation', subscriptionsCreateOne: { __typename?: 'SubscriptionsBasic', id: number, displayName: string, sourceUrl: string, enabled: boolean, category: SubscriptionCategoryEnum } };
+export type GetSubscriptionDetailQuery = { __typename?: 'Query', subscriptions: { __typename?: 'SubscriptionsConnection', nodes: Array<{ __typename?: 'Subscriptions', id: number, displayName: string, createdAt: string, updatedAt: string, category: SubscriptionCategoryEnum, sourceUrl: string, enabled: boolean, credential3rd?: { __typename?: 'Credential3rd', id: number } | null, bangumi: { __typename?: 'BangumiConnection', nodes: Array<{ __typename?: 'Bangumi', createdAt: string, updatedAt: string, id: number, mikanBangumiId?: string | null, displayName: string, rawName: string, season: number, seasonRaw?: string | null, fansub?: string | null, mikanFansubId?: string | null, rssLink?: string | null, posterLink?: string | null, savePath?: string | null, homepage?: string | null }> } }> } };
 
 
 export const GetCredential3rdDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetCredential3rd"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdFilterInput"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"orderBy"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdOrderInput"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"PaginationInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"credential3rd"},"arguments":[{"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"}}},{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}}}],"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"}}]}},{"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<GetCredential3rdQuery, GetCredential3rdQueryVariables>;
@@ -1722,8 +1722,8 @@ export const InsertCredential3rdDocument = {"kind":"Document","definitions":[{"k
 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 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":"credentialId"}}]}},{"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 InsertSubscriptionDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"InsertSubscription"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"data"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"SubscriptionsInsertInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subscriptionsCreateOne"},"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":"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":"credentialId"}}]}}]}}]} as unknown as DocumentNode<InsertSubscriptionMutation, InsertSubscriptionMutationVariables>;
 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>;
-export const GetSubscriptionDetailDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetSubscriptionDetail"},"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":"subscriptions"},"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":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"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":"bangumi"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"mikanBangumiId"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"rawName"}},{"kind":"Field","name":{"kind":"Name","value":"season"}},{"kind":"Field","name":{"kind":"Name","value":"seasonRaw"}},{"kind":"Field","name":{"kind":"Name","value":"fansub"}},{"kind":"Field","name":{"kind":"Name","value":"mikanFansubId"}},{"kind":"Field","name":{"kind":"Name","value":"rssLink"}},{"kind":"Field","name":{"kind":"Name","value":"posterLink"}},{"kind":"Field","name":{"kind":"Name","value":"savePath"}},{"kind":"Field","name":{"kind":"Name","value":"homepage"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<GetSubscriptionDetailQuery, GetSubscriptionDetailQueryVariables>;
-export const CreateSubscriptionDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateSubscription"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"SubscriptionsInsertInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subscriptionsCreateOne"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"data"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"sourceUrl"}},{"kind":"Field","name":{"kind":"Name","value":"enabled"}},{"kind":"Field","name":{"kind":"Name","value":"category"}}]}}]}}]} as unknown as DocumentNode<CreateSubscriptionMutation, CreateSubscriptionMutationVariables>;
+export const GetSubscriptionDetailDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetSubscriptionDetail"},"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":"subscriptions"},"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":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"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":"credential3rd"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"bangumi"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"mikanBangumiId"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"rawName"}},{"kind":"Field","name":{"kind":"Name","value":"season"}},{"kind":"Field","name":{"kind":"Name","value":"seasonRaw"}},{"kind":"Field","name":{"kind":"Name","value":"fansub"}},{"kind":"Field","name":{"kind":"Name","value":"mikanFansubId"}},{"kind":"Field","name":{"kind":"Name","value":"rssLink"}},{"kind":"Field","name":{"kind":"Name","value":"posterLink"}},{"kind":"Field","name":{"kind":"Name","value":"savePath"}},{"kind":"Field","name":{"kind":"Name","value":"homepage"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<GetSubscriptionDetailQuery, GetSubscriptionDetailQueryVariables>;

apps/webui/src/main.tsx

@@ -14,9 +14,10 @@ import {
 import { Suspense } from 'react';
 import { createRoot } from 'react-dom/client';
 import './app.css';
+import { provideRecorder } from '@/domains/recorder/context';
+import { provideGraphql } from '@/infra/graphql';
+import { graphqlContextFromInjector } from '@/infra/graphql/context';
 import { ApolloProvider } from '@apollo/client';
-import { provideGraphql } from './infra/graphql';
-import { graphqlContextFromInjector } from './infra/graphql/context';
 
 // Create a new router instance
 const router = createRouter({
@@ -44,6 +45,7 @@ const injector: Injector = ReflectiveInjector.resolveAndCreate([
   ...provideAuth(router),
   ...provideStyles(),
   ...provideGraphql(),
+  ...provideRecorder(),
 ]);
 
 setupAuthContext(injector);

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

@@ -32,8 +32,8 @@ import { Route as AppCredential3rdCreateImport } from './routes/_app/credential3
 import { Route as AppBangumiManageImport } from './routes/_app/bangumi/manage'
 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 AppSubscriptionsEditIdImport } from './routes/_app/subscriptions/edit.$id'
+import { Route as AppSubscriptionsDetailIdImport } from './routes/_app/subscriptions/detail.$id'
 import { Route as AppCredential3rdEditIdImport } from './routes/_app/credential3rd/edit.$id'
 import { Route as AppCredential3rdDetailIdImport } from './routes/_app/credential3rd/detail.$id'
 
@@ -166,19 +166,17 @@ const AppExploreExploreRoute = AppExploreExploreImport.update({
   getParentRoute: () => AppRouteRoute,
 } as any)
 
-const AppSubscriptionsEditSubscriptionIdRoute =
-  AppSubscriptionsEditSubscriptionIdImport.update({
-    id: '/edit/$subscriptionId',
-    path: '/edit/$subscriptionId',
-    getParentRoute: () => AppSubscriptionsRouteRoute,
-  } as any)
+const AppSubscriptionsEditIdRoute = AppSubscriptionsEditIdImport.update({
+  id: '/edit/$id',
+  path: '/edit/$id',
+  getParentRoute: () => AppSubscriptionsRouteRoute,
+} as any)
 
-const AppSubscriptionsDetailSubscriptionIdRoute =
-  AppSubscriptionsDetailSubscriptionIdImport.update({
-    id: '/detail/$subscriptionId',
-    path: '/detail/$subscriptionId',
-    getParentRoute: () => AppSubscriptionsRouteRoute,
-  } as any)
+const AppSubscriptionsDetailIdRoute = AppSubscriptionsDetailIdImport.update({
+  id: '/detail/$id',
+  path: '/detail/$id',
+  getParentRoute: () => AppSubscriptionsRouteRoute,
+} as any)
 
 const AppCredential3rdEditIdRoute = AppCredential3rdEditIdImport.update({
   id: '/edit/$id',
@@ -357,18 +355,18 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppCredential3rdEditIdImport
       parentRoute: typeof AppCredential3rdRouteImport
     }
-    '/_app/subscriptions/detail/$subscriptionId': {
-      id: '/_app/subscriptions/detail/$subscriptionId'
-      path: '/detail/$subscriptionId'
-      fullPath: '/subscriptions/detail/$subscriptionId'
-      preLoaderRoute: typeof AppSubscriptionsDetailSubscriptionIdImport
+    '/_app/subscriptions/detail/$id': {
+      id: '/_app/subscriptions/detail/$id'
+      path: '/detail/$id'
+      fullPath: '/subscriptions/detail/$id'
+      preLoaderRoute: typeof AppSubscriptionsDetailIdImport
       parentRoute: typeof AppSubscriptionsRouteImport
     }
-    '/_app/subscriptions/edit/$subscriptionId': {
-      id: '/_app/subscriptions/edit/$subscriptionId'
-      path: '/edit/$subscriptionId'
-      fullPath: '/subscriptions/edit/$subscriptionId'
-      preLoaderRoute: typeof AppSubscriptionsEditSubscriptionIdImport
+    '/_app/subscriptions/edit/$id': {
+      id: '/_app/subscriptions/edit/$id'
+      path: '/edit/$id'
+      fullPath: '/subscriptions/edit/$id'
+      preLoaderRoute: typeof AppSubscriptionsEditIdImport
       parentRoute: typeof AppSubscriptionsRouteImport
     }
   }
@@ -432,17 +430,15 @@ const AppSettingsRouteRouteWithChildren =
 interface AppSubscriptionsRouteRouteChildren {
   AppSubscriptionsCreateRoute: typeof AppSubscriptionsCreateRoute
   AppSubscriptionsManageRoute: typeof AppSubscriptionsManageRoute
-  AppSubscriptionsDetailSubscriptionIdRoute: typeof AppSubscriptionsDetailSubscriptionIdRoute
-  AppSubscriptionsEditSubscriptionIdRoute: typeof AppSubscriptionsEditSubscriptionIdRoute
+  AppSubscriptionsDetailIdRoute: typeof AppSubscriptionsDetailIdRoute
+  AppSubscriptionsEditIdRoute: typeof AppSubscriptionsEditIdRoute
 }
 
 const AppSubscriptionsRouteRouteChildren: AppSubscriptionsRouteRouteChildren = {
   AppSubscriptionsCreateRoute: AppSubscriptionsCreateRoute,
   AppSubscriptionsManageRoute: AppSubscriptionsManageRoute,
-  AppSubscriptionsDetailSubscriptionIdRoute:
-    AppSubscriptionsDetailSubscriptionIdRoute,
-  AppSubscriptionsEditSubscriptionIdRoute:
-    AppSubscriptionsEditSubscriptionIdRoute,
+  AppSubscriptionsDetailIdRoute: AppSubscriptionsDetailIdRoute,
+  AppSubscriptionsEditIdRoute: AppSubscriptionsEditIdRoute,
 }
 
 const AppSubscriptionsRouteRouteWithChildren =
@@ -498,8 +494,8 @@ export interface FileRoutesByFullPath {
   '/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
+  '/subscriptions/detail/$id': typeof AppSubscriptionsDetailIdRoute
+  '/subscriptions/edit/$id': typeof AppSubscriptionsEditIdRoute
 }
 
 export interface FileRoutesByTo {
@@ -526,8 +522,8 @@ export interface FileRoutesByTo {
   '/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
+  '/subscriptions/detail/$id': typeof AppSubscriptionsDetailIdRoute
+  '/subscriptions/edit/$id': typeof AppSubscriptionsEditIdRoute
 }
 
 export interface FileRoutesById {
@@ -555,8 +551,8 @@ export interface FileRoutesById {
   '/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
+  '/_app/subscriptions/detail/$id': typeof AppSubscriptionsDetailIdRoute
+  '/_app/subscriptions/edit/$id': typeof AppSubscriptionsEditIdRoute
 }
 
 export interface FileRouteTypes {
@@ -585,8 +581,8 @@ export interface FileRouteTypes {
     | '/auth/oidc/callback'
     | '/credential3rd/detail/$id'
     | '/credential3rd/edit/$id'
-    | '/subscriptions/detail/$subscriptionId'
-    | '/subscriptions/edit/$subscriptionId'
+    | '/subscriptions/detail/$id'
+    | '/subscriptions/edit/$id'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -612,8 +608,8 @@ export interface FileRouteTypes {
     | '/auth/oidc/callback'
     | '/credential3rd/detail/$id'
     | '/credential3rd/edit/$id'
-    | '/subscriptions/detail/$subscriptionId'
-    | '/subscriptions/edit/$subscriptionId'
+    | '/subscriptions/detail/$id'
+    | '/subscriptions/edit/$id'
   id:
     | '__root__'
     | '/'
@@ -639,8 +635,8 @@ export interface FileRouteTypes {
     | '/auth/oidc/callback'
     | '/_app/credential3rd/detail/$id'
     | '/_app/credential3rd/edit/$id'
-    | '/_app/subscriptions/detail/$subscriptionId'
-    | '/_app/subscriptions/edit/$subscriptionId'
+    | '/_app/subscriptions/detail/$id'
+    | '/_app/subscriptions/edit/$id'
   fileRoutesById: FileRoutesById
 }
 
@@ -741,8 +737,8 @@ export const routeTree = rootRoute
       "children": [
         "/_app/subscriptions/create",
         "/_app/subscriptions/manage",
-        "/_app/subscriptions/detail/$subscriptionId",
-        "/_app/subscriptions/edit/$subscriptionId"
+        "/_app/subscriptions/detail/$id",
+        "/_app/subscriptions/edit/$id"
       ]
     },
     "/auth/sign-in": {
@@ -798,12 +794,12 @@ export const routeTree = rootRoute
       "filePath": "_app/credential3rd/edit.$id.tsx",
       "parent": "/_app/credential3rd"
     },
-    "/_app/subscriptions/detail/$subscriptionId": {
-      "filePath": "_app/subscriptions/detail.$subscriptionId.tsx",
+    "/_app/subscriptions/detail/$id": {
+      "filePath": "_app/subscriptions/detail.$id.tsx",
       "parent": "/_app/subscriptions"
     },
-    "/_app/subscriptions/edit/$subscriptionId": {
-      "filePath": "_app/subscriptions/edit.$subscriptionId.tsx",
+    "/_app/subscriptions/edit/$id": {
+      "filePath": "_app/subscriptions/edit.$id.tsx",
       "parent": "/_app/subscriptions"
     }
   }

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

@@ -80,13 +80,11 @@ function CredentialCreateRouteComponent() {
         ...form.value,
         userAgent: form.value.userAgent || platformService.userAgent,
       };
-      if (form.value.credentialType === Credential3rdTypeEnum.Mikan) {
-        await insertCredential3rd({
-          variables: {
-            data: value,
-          },
-        });
-      }
+      await insertCredential3rd({
+        variables: {
+          data: value,
+        },
+      });
     },
   });
 
@@ -118,16 +116,7 @@ function CredentialCreateRouteComponent() {
             }}
             className="space-y-6"
           >
-            <form.Field
-              name="credentialType"
-              validators={{
-                onChange: ({ value }) => {
-                  if (!value) {
-                    return 'Please select the credential type';
-                  }
-                },
-              }}
-            >
+            <form.Field name="credentialType">
               {(field) => (
                 <div className="space-y-2">
                   <Label htmlFor={field.name}>Credential type *</Label>
@@ -147,7 +136,11 @@ function CredentialCreateRouteComponent() {
                     </SelectContent>
                   </Select>
                   {field.state.meta.errors && (
-                    <FormFieldErrors errors={field.state.meta.errors} />
+                    <FormFieldErrors
+                      errors={field.state.meta.errors}
+                      isDirty={field.state.meta.isDirty}
+                      submissionAttempts={form.state.submissionAttempts}
+                    />
                   )}
                 </div>
               )}
@@ -166,7 +159,11 @@ function CredentialCreateRouteComponent() {
                     autoComplete="off"
                   />
                   {field.state.meta.errors && (
-                    <FormFieldErrors errors={field.state.meta.errors} />
+                    <FormFieldErrors
+                      errors={field.state.meta.errors}
+                      isDirty={field.state.meta.isDirty}
+                      submissionAttempts={form.state.submissionAttempts}
+                    />
                   )}
                 </div>
               )}
@@ -188,7 +185,11 @@ function CredentialCreateRouteComponent() {
                     autoComplete="off"
                   />
                   {field.state.meta.errors && (
-                    <FormFieldErrors errors={field.state.meta.errors} />
+                    <FormFieldErrors
+                      errors={field.state.meta.errors}
+                      isDirty={field.state.meta.isDirty}
+                      submissionAttempts={form.state.submissionAttempts}
+                    />
                   )}
                 </div>
               )}
@@ -215,7 +216,11 @@ function CredentialCreateRouteComponent() {
                     Current default user agent: {platformService.userAgent}
                   </p>
                   {field.state.meta.errors && (
-                    <FormFieldErrors errors={field.state.meta.errors} />
+                    <FormFieldErrors
+                      errors={field.state.meta.errors}
+                      isDirty={field.state.meta.isDirty}
+                      submissionAttempts={form.state.submissionAttempts}
+                    />
                   )}
                 </div>
               )}

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

@@ -91,7 +91,7 @@ function Credential3rdDetailRouteComponent() {
           <div>
             <h1 className="font-bold text-2xl">Credential detail</h1>
             <p className="mt-1 text-muted-foreground">
-              View and manage credential #{credential.id}
+              View credential #{credential.id}
             </p>
           </div>
         </div>

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

@@ -117,9 +117,9 @@ function FormView({
             <ArrowLeft className="h-4 w-4" />
           </Button>
           <div>
-            <h1 className="font-bold text-2xl">Credential detail</h1>
+            <h1 className="font-bold text-2xl">Credential edit</h1>
             <p className="mt-1 text-muted-foreground">
-              View and manage credential #{credential.id}
+              Edit credential #{credential.id}
             </p>
           </div>
         </div>

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

@@ -22,6 +22,7 @@ import type { GetCredential3rdQuery } from '@/infra/graphql/gql/graphql';
 import type { RouteStateDataOption } from '@/infra/routes/traits';
 import { useDebouncedSkeleton } from '@/presentation/hooks/use-debounded-skeleton';
 import { useEvent } from '@/presentation/hooks/use-event';
+import { cn } from '@/presentation/utils';
 import { useMutation, useQuery } from '@apollo/client';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import {
@@ -332,14 +333,24 @@ function CredentialManageRouteComponent() {
                     key={row.id}
                     data-state={row.getIsSelected() && 'selected'}
                   >
-                    {row.getVisibleCells().map((cell) => (
-                      <TableCell key={cell.id}>
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
-                      </TableCell>
-                    ))}
+                    {row.getVisibleCells().map((cell) => {
+                      const isPinned = cell.column.getIsPinned();
+                      return (
+                        <TableCell
+                          key={cell.id}
+                          className={cn({
+                            'sticky z-1 bg-background shadow-xs': isPinned,
+                            'right-0': isPinned === 'right',
+                            'left-0': isPinned === 'left',
+                          })}
+                        >
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext()
+                          )}
+                        </TableCell>
+                      );
+                    })}
                   </TableRow>
                 ))
               ) : (

apps/webui/src/presentation/routes/_app/subscriptions/-credential3rd-select.tsx

@@ -0,0 +1,93 @@
+import { Button } from '@/components/ui/button';
+import { SelectContent, SelectItem } from '@/components/ui/select';
+import { GET_CREDENTIAL_3RD } from '@/domains/recorder/schema/credential3rd';
+import {
+  type Credential3rdTypeEnum,
+  type GetCredential3rdQuery,
+  type GetCredential3rdQueryVariables,
+  OrderByEnum,
+} from '@/infra/graphql/gql/graphql';
+import { useQuery } from '@apollo/client';
+import { AlertCircle, Loader2, RefreshCw } from 'lucide-react';
+import type { ComponentProps } from 'react';
+
+export interface Credential3rdSelectContentProps
+  extends ComponentProps<typeof SelectContent> {
+  credentialType: Credential3rdTypeEnum;
+}
+
+export function Credential3rdSelectContent({
+  credentialType,
+  ...props
+}: Credential3rdSelectContentProps) {
+  const { data, loading, error, refetch } = useQuery<
+    GetCredential3rdQuery,
+    GetCredential3rdQueryVariables
+  >(GET_CREDENTIAL_3RD, {
+    fetchPolicy: 'cache-and-network',
+    nextFetchPolicy: 'cache-and-network',
+    variables: {
+      filters: {
+        credentialType: {
+          eq: credentialType,
+        },
+      },
+      orderBy: {
+        createdAt: OrderByEnum.Desc,
+      },
+      pagination: {
+        page: {
+          page: 0,
+          limit: 100,
+        },
+      },
+    },
+  });
+
+  const credentials = data?.credential3rd?.nodes ?? [];
+
+  return (
+    <SelectContent {...props}>
+      {loading && (
+        <div className="flex items-center justify-center py-6">
+          <Loader2 className="h-4 w-4 animate-spin" />
+          <span className="ml-2 text-muted-foreground text-sm">Loading...</span>
+        </div>
+      )}
+
+      {error && (
+        <div className="flex flex-col items-center gap-2 py-6">
+          <div className="flex items-center text-destructive">
+            <AlertCircle className="h-4 w-4" />
+            <span className="ml-2 text-sm">Failed to load credentials</span>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => refetch()}
+            className="flex items-center gap-1"
+          >
+            <RefreshCw className="h-3 w-3" />
+            Retry
+          </Button>
+        </div>
+      )}
+
+      {!loading &&
+        !error &&
+        (credentials.length === 0 ? (
+          <div className="py-6 text-center">
+            <span className="text-muted-foreground text-sm">
+              No credentials found
+            </span>
+          </div>
+        ) : (
+          credentials.map((credential) => (
+            <SelectItem key={credential.id} value={credential.id.toString()}>
+              {credential.username}
+            </SelectItem>
+          ))
+        ))}
+    </SelectContent>
+  );
+}

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

@@ -1,23 +1,14 @@
-import { useAuth } from '@/app/auth/hooks';
 import { Button } from '@/components/ui/button';
 import {
   Card,
   CardContent,
   CardDescription,
-  CardFooter,
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
+import { FormFieldErrors } from '@/components/ui/form-field-errors';
 import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import {
   Select,
   SelectContent,
@@ -26,13 +17,28 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
+import { useAppForm } from '@/components/ui/tanstack-form';
+import { MikanSeasonEnum } from '@/domains/recorder/schema/mikan';
+import {
+  INSERT_SUBSCRIPTION,
+  type SubscriptionInsertForm,
+  SubscriptionInsertFormSchema,
+} from '@/domains/recorder/schema/subscriptions';
+import { SubscriptionService } from '@/domains/recorder/services/subscription.service';
+import { useInject } from '@/infra/di/inject';
+import {
+  Credential3rdTypeEnum,
+  type InsertSubscriptionMutation,
+  type InsertSubscriptionMutationVariables,
+  SubscriptionCategoryEnum,
+} from '@/infra/graphql/gql/graphql';
 import type { RouteStateDataOption } from '@/infra/routes/traits';
-import { gql, useMutation } from '@apollo/client';
+import { useMutation } from '@apollo/client';
 import { createFileRoute } from '@tanstack/react-router';
 import { useNavigate } from '@tanstack/react-router';
-import { useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { Loader2, Save } from 'lucide-react';
 import { toast } from 'sonner';
+import { Credential3rdSelectContent } from './-credential3rd-select';
 
 export const Route = createFileRoute('/_app/subscriptions/create')({
   component: SubscriptionCreateRouteComponent,
@@ -41,194 +47,312 @@ export const Route = createFileRoute('/_app/subscriptions/create')({
   } satisfies RouteStateDataOption,
 });
 
-type SubscriptionFormValues = {
-  displayName: string;
-  sourceUrl: string;
-  category: string;
-  enabled: boolean;
-};
-
-const CREATE_SUBSCRIPTION_MUTATION = gql`
-    mutation CreateSubscription($input: SubscriptionsInsertInput!) {
-        subscriptionsCreateOne(data: $input) {
-            id
-            displayName
-            sourceUrl
-            enabled
-            category
-        }
-    }
-`;
-
 function SubscriptionCreateRouteComponent() {
-  const { authData } = useAuth();
-  console.log(JSON.stringify(authData, null, 2));
-  const [isSubmitting, setIsSubmitting] = useState(false);
   const navigate = useNavigate();
-  const form = useForm<SubscriptionFormValues>({
-    defaultValues: {
-      displayName: '',
-      sourceUrl: '',
-      category: 'mikan',
-      enabled: true,
+  const subscriptionService = useInject(SubscriptionService);
+
+  const [insertSubscription, { loading }] = useMutation<
+    InsertSubscriptionMutation['subscriptionsCreateOne'],
+    InsertSubscriptionMutationVariables
+  >(INSERT_SUBSCRIPTION, {
+    onCompleted(data) {
+      toast.success('Subscription created');
+      navigate({
+        to: '/subscriptions/detail/$id',
+        params: { id: `${data.id}` },
+      });
+    },
+    onError(error) {
+      toast.error('Failed to create subscription', {
+        description: error.message,
+      });
     },
   });
 
-  const [createSubscription] = useMutation(CREATE_SUBSCRIPTION_MUTATION);
-
-  const onSubmit = async (data: SubscriptionFormValues) => {
-    try {
-      setIsSubmitting(true);
-      const response = await createSubscription({
+  const form = useAppForm({
+    defaultValues: {
+      displayName: '',
+      category: undefined,
+      enabled: true,
+      sourceUrl: '',
+      credentialId: '',
+      year: undefined,
+      seasonStr: '',
+    } as unknown as SubscriptionInsertForm,
+    validators: {
+      onBlur: SubscriptionInsertFormSchema,
+      onSubmit: SubscriptionInsertFormSchema,
+    },
+    onSubmit: async (form) => {
+      const input = subscriptionService.transformInsertFormToInput(form.value);
+      await insertSubscription({
         variables: {
-          input: {
-            category: data.category,
-            displayName: data.displayName,
-            sourceUrl: data.sourceUrl,
-            enabled: data.enabled,
-          },
+          data: input,
         },
       });
-
-      if (response.errors) {
-        throw new Error(
-          response.errors[0]?.message || 'Failed to create subscription'
-        );
-      }
-
-      toast.success('Subscription created successfully');
-      navigate({ to: '/subscriptions/manage' });
-    } catch (error) {
-      console.error('Failed to create subscription:', error);
-      toast.error(
-        `Subscription creation failed: ${
-          error instanceof Error ? error.message : 'Unknown error'
-        }`
-      );
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
+    },
+  });
 
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Create Bangumi Subscription</CardTitle>
-        <CardDescription>Add a new bangumi subscription source</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-            <FormField
-              control={form.control}
-              name="category"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Source Type</FormLabel>
+    <div className="container mx-auto max-w-2xl py-6">
+      <div className="mb-6 flex items-center gap-4">
+        <div>
+          <h1 className="font-bold text-2xl">Create Bangumi Subscription</h1>
+          <p className="mt-1 text-muted-foreground">
+            Add a new bangumi subscription source
+          </p>
+        </div>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Subscription information</CardTitle>
+          <CardDescription className="mt-2">
+            Please fill in the information of the bangumi subscription source.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              form.handleSubmit();
+            }}
+            className="space-y-6"
+          >
+            <form.Field name="displayName">
+              {(field) => (
+                <div className="space-y-2">
+                  <Label htmlFor={field.name}>Display Name *</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 display name"
+                    autoComplete="off"
+                  />
+                  {field.state.meta.errors && (
+                    <FormFieldErrors
+                      errors={field.state.meta.errors}
+                      isDirty={field.state.meta.isDirty}
+                      submissionAttempts={form.state.submissionAttempts}
+                    />
+                  )}
+                </div>
+              )}
+            </form.Field>
+
+            <form.Field name="category">
+              {(field) => (
+                <div className="space-y-2">
+                  <Label htmlFor={field.name}>Category *</Label>
                   <Select
-                    disabled
-                    value={field.value}
-                    onValueChange={field.onChange}
-                    defaultValue="mikan"
+                    value={field.state.value}
+                    onValueChange={(value) =>
+                      field.handleChange(
+                        value as SubscriptionInsertForm['category']
+                      )
+                    }
                   >
-                    <FormControl>
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select source type" />
-                      </SelectTrigger>
-                    </FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select subscription category" />
+                    </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="mikan">mikan</SelectItem>
+                      <SelectItem value={SubscriptionCategoryEnum.MikanBangumi}>
+                        Mikan Bangumi Subscription
+                      </SelectItem>
+                      <SelectItem value={SubscriptionCategoryEnum.MikanSeason}>
+                        Mikan Season Subscription
+                      </SelectItem>
+                      <SelectItem
+                        value={SubscriptionCategoryEnum.MikanSubscriber}
+                      >
+                        Mikan Subscriber Subscription
+                      </SelectItem>
                     </SelectContent>
                   </Select>
-                  <FormDescription>
-                    Currently only mikan source is supported
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="displayName"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Display Name</FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder="Enter subscription display name"
-                      {...field}
+                  {field.state.meta.errors && (
+                    <FormFieldErrors
+                      errors={field.state.meta.errors}
+                      isDirty={field.state.meta.isDirty}
+                      submissionAttempts={form.state.submissionAttempts}
                     />
-                  </FormControl>
-                  <FormDescription>
-                    Set an easily recognizable name for this subscription
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
+                  )}
+                </div>
               )}
-            />
-
-            <FormField
-              control={form.control}
-              name="sourceUrl"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Source URL</FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder="Enter subscription source URL"
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormDescription>
-                    Copy the RSS subscription link from the source website, e.g.
-                    https://mikanani.me/RSS/Bangumi?bangumiId=3141&subgroupid=370
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="enabled"
-              render={({ field }) => (
-                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+            </form.Field>
+            <form.Subscribe selector={(state) => state.values.category}>
+              {(category) => {
+                if (category === SubscriptionCategoryEnum.MikanSeason) {
+                  return (
+                    <>
+                      <form.Field name="credentialId">
+                        {(field) => (
+                          <div className="space-y-2">
+                            <Label htmlFor={field.name}>Credential ID *</Label>
+                            <Select
+                              value={field.state.value.toString()}
+                              onValueChange={(value) =>
+                                field.handleChange(Number.parseInt(value))
+                              }
+                            >
+                              <SelectTrigger>
+                                <SelectValue placeholder="Select credential" />
+                              </SelectTrigger>
+                              <Credential3rdSelectContent
+                                credentialType={Credential3rdTypeEnum.Mikan}
+                              />
+                            </Select>
+                            {field.state.meta.errors && (
+                              <FormFieldErrors
+                                errors={field.state.meta.errors}
+                                isDirty={field.state.meta.isDirty}
+                                submissionAttempts={
+                                  form.state.submissionAttempts
+                                }
+                              />
+                            )}
+                          </div>
+                        )}
+                      </form.Field>
+                      <form.Field name="year">
+                        {(field) => (
+                          <div className="space-y-2">
+                            <Label htmlFor={field.name}>Year *</Label>
+                            <Input
+                              id={field.name}
+                              name={field.name}
+                              value={field.state.value}
+                              type="number"
+                              min={1970}
+                              onBlur={field.handleBlur}
+                              onChange={(e) =>
+                                field.handleChange(
+                                  Number.parseInt(e.target.value)
+                                )
+                              }
+                              placeholder="Please enter full year (e.g. 2025)"
+                              autoComplete="off"
+                            />
+                            {field.state.meta.errors && (
+                              <FormFieldErrors
+                                errors={field.state.meta.errors}
+                                isDirty={field.state.meta.isDirty}
+                                submissionAttempts={
+                                  form.state.submissionAttempts
+                                }
+                              />
+                            )}
+                          </div>
+                        )}
+                      </form.Field>
+                      <form.Field name="seasonStr">
+                        {(field) => (
+                          <div className="space-y-2">
+                            <Label htmlFor={field.name}>Season *</Label>
+                            <Select>
+                              <SelectTrigger>
+                                <SelectValue placeholder="Select season" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value={MikanSeasonEnum.Spring}>
+                                  Spring
+                                </SelectItem>
+                                <SelectItem value={MikanSeasonEnum.Summer}>
+                                  Summer
+                                </SelectItem>
+                                <SelectItem value={MikanSeasonEnum.Autumn}>
+                                  Autumn
+                                </SelectItem>
+                                <SelectItem value={MikanSeasonEnum.Winter}>
+                                  Winter
+                                </SelectItem>
+                              </SelectContent>
+                            </Select>
+                            {field.state.meta.errors && (
+                              <FormFieldErrors
+                                errors={field.state.meta.errors}
+                                isDirty={field.state.meta.isDirty}
+                                submissionAttempts={
+                                  form.state.submissionAttempts
+                                }
+                              />
+                            )}
+                          </div>
+                        )}
+                      </form.Field>
+                    </>
+                  );
+                }
+                return (
+                  <form.Field name="sourceUrl">
+                    {(field) => (
+                      <div className="space-y-2">
+                        <Label htmlFor={field.name}>Source URL *</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 source URL"
+                          autoComplete="off"
+                        />
+                        {field.state.meta.errors && (
+                          <FormFieldErrors
+                            errors={field.state.meta.errors}
+                            isDirty={field.state.meta.isDirty}
+                            submissionAttempts={form.state.submissionAttempts}
+                          />
+                        )}
+                      </div>
+                    )}
+                  </form.Field>
+                );
+              }}
+            </form.Subscribe>
+            <form.Field name="enabled">
+              {(field) => (
+                <div className="flex items-center justify-between">
                   <div className="space-y-0.5">
-                    <FormLabel className="text-base">
-                      Enable Subscription
-                    </FormLabel>
-                    <FormDescription>
-                      Enable this subscription immediately after creation
-                    </FormDescription>
+                    <Label htmlFor={field.name}>Enabled</Label>
+                    <div className="text-muted-foreground text-sm">
+                      Enable this subscription
+                    </div>
                   </div>
-                  <FormControl>
-                    <Switch
-                      checked={field.value}
-                      onCheckedChange={field.onChange}
-                    />
-                  </FormControl>
-                </FormItem>
+                  <Switch
+                    id={field.name}
+                    checked={field.state.value}
+                    onCheckedChange={(checked) => field.handleChange(checked)}
+                  />
+                </div>
               )}
-            />
+            </form.Field>
+
+            <div className="flex gap-3 pt-4">
+              <form.Subscribe selector={(state) => [state.isSubmitting]}>
+                {([isSubmitting]) => (
+                  <Button type="submit" disabled={loading} className="flex-1">
+                    {loading || isSubmitting ? (
+                      <>
+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                        Creating...
+                      </>
+                    ) : (
+                      <>
+                        <Save className="mr-2 h-4 w-4" />
+                        Create subscription
+                      </>
+                    )}
+                  </Button>
+                )}
+              </form.Subscribe>
+            </div>
           </form>
-        </Form>
-      </CardContent>
-      <CardFooter className="flex justify-between">
-        <Button
-          variant="outline"
-          onClick={() => navigate({ to: '/subscriptions/manage' })}
-        >
-          Cancel
-        </Button>
-        <Button
-          type="submit"
-          onClick={form.handleSubmit(onSubmit)}
-          disabled={isSubmitting}
-        >
-          {isSubmitting ? 'Creating...' : 'Create Subscription'}
-        </Button>
-      </CardFooter>
-    </Card>
+        </CardContent>
+      </Card>
+    </div>
   );
 }

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

@@ -3,19 +3,17 @@ import { useQuery } from '@apollo/client';
 import { createFileRoute } from '@tanstack/react-router';
 import { GET_SUBSCRIPTION_DETAIL } from '../../../../domains/recorder/schema/subscriptions.js';
 
-export const Route = createFileRoute(
-  '/_app/subscriptions/detail/$subscriptionId'
-)({
+export const Route = createFileRoute('/_app/subscriptions/detail/$id')({
   component: DetailRouteComponent,
 });
 
 function DetailRouteComponent() {
-  const { subscriptionId } = Route.useParams();
+  const { id } = Route.useParams();
   const { data, loading, error } = useQuery<GetSubscriptionDetailQuery>(
     GET_SUBSCRIPTION_DETAIL,
     {
       variables: {
-        id: Number.parseInt(subscriptionId),
+        id: Number.parseInt(id),
       },
     }
   );

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

@@ -1,9 +1,7 @@
 import type { RouteStateDataOption } from '@/infra/routes/traits';
 import { createFileRoute } from '@tanstack/react-router';
 
-export const Route = createFileRoute(
-  '/_app/subscriptions/edit/$subscriptionId'
-)({
+export const Route = createFileRoute('/_app/subscriptions/edit/$id')({
   component: RouteComponent,
   staticData: {
     breadcrumb: { label: 'Edit' },
@@ -11,5 +9,6 @@ export const Route = createFileRoute(
 });
 
 function RouteComponent() {
-  return <div>Hello "/subscriptions/edit/$subscription-id"!</div>;
+  const { id } = Route.useParams();
+  return <div>Hello "/subscriptions/edit/$id"!</div>;
 }

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

@@ -26,6 +26,7 @@ import type {
 import type { RouteStateDataOption } from '@/infra/routes/traits';
 import { useDebouncedSkeleton } from '@/presentation/hooks/use-debounded-skeleton';
 import { useEvent } from '@/presentation/hooks/use-event';
+import { cn } from '@/presentation/utils';
 import { useMutation, useQuery } from '@apollo/client';
 import { createFileRoute } from '@tanstack/react-router';
 import { useNavigate } from '@tanstack/react-router';
@@ -40,6 +41,7 @@ import {
   getPaginationRowModel,
   useReactTable,
 } from '@tanstack/react-table';
+import { format } from 'date-fns';
 import { Plus } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { toast } from 'sonner';
@@ -54,7 +56,10 @@ export const Route = createFileRoute('/_app/subscriptions/manage')({
 function SubscriptionManageRouteComponent() {
   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,
@@ -181,6 +186,30 @@ function SubscriptionManageRouteComponent() {
           );
         },
       },
+      {
+        header: 'Created At',
+        accessorKey: 'createdAt',
+        cell: ({ row }) => {
+          const createdAt = row.original.createdAt;
+          return (
+            <div className="text-sm">
+              {format(new Date(createdAt), 'yyyy-MM-dd HH:mm:ss')}
+            </div>
+          );
+        },
+      },
+      {
+        header: 'Updated At',
+        accessorKey: 'updatedAt',
+        cell: ({ row }) => {
+          const updatedAt = row.original.updatedAt;
+          return (
+            <div className="text-sm">
+              {format(new Date(updatedAt), 'yyyy-MM-dd HH:mm:ss')}
+            </div>
+          );
+        },
+      },
       {
         id: 'actions',
         cell: ({ row }) => (
@@ -192,14 +221,14 @@ function SubscriptionManageRouteComponent() {
             showDelete
             onDetail={() => {
               navigate({
-                to: '/subscriptions/detail/$subscriptionId',
-                params: { subscriptionId: `${row.original.id}` },
+                to: '/subscriptions/detail/$id',
+                params: { id: `${row.original.id}` },
               });
             }}
             onEdit={() => {
               navigate({
-                to: '/subscriptions/edit/$subscriptionId',
-                params: { subscriptionId: `${row.original.id}` },
+                to: '/subscriptions/edit/$id',
+                params: { id: `${row.original.id}` },
               });
             }}
             onDelete={handleDeleteRecord(row)}
@@ -220,11 +249,17 @@ function SubscriptionManageRouteComponent() {
     onColumnVisibilityChange: setColumnVisibility,
     pageCount: subscriptions?.paginationInfo?.pages,
     rowCount: subscriptions?.paginationInfo?.total,
+    enableColumnPinning: true,
     state: {
       pagination,
       sorting,
       columnVisibility,
     },
+    initialState: {
+      columnPinning: {
+        right: ['actions'],
+      },
+    },
   });
 
   if (error) {
@@ -284,14 +319,24 @@ function SubscriptionManageRouteComponent() {
                     key={row.id}
                     data-state={row.getIsSelected() && 'selected'}
                   >
-                    {row.getVisibleCells().map((cell) => (
-                      <TableCell key={cell.id}>
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
-                      </TableCell>
-                    ))}
+                    {row.getVisibleCells().map((cell) => {
+                      const isPinned = cell.column.getIsPinned();
+                      return (
+                        <TableCell
+                          key={cell.id}
+                          className={cn({
+                            'sticky z-1 bg-background shadow-xs': isPinned,
+                            'right-0': isPinned === 'right',
+                            'left-0': isPinned === 'left',
+                          })}
+                        >
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext()
+                          )}
+                        </TableCell>
+                      );
+                    })}
                   </TableRow>
                 ))
               ) : (