設定ページを追加 (#11)

app/components/back-button.tsx

···
+import { ChevronLeftIcon } from "@heroicons/react/24/outline";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+
+export function BackButton() {
+  const { t } = useTranslation();
+  return (
+    <Link to="/" className="btn btn-ghost justify-start p-1">
+      <ChevronLeftIcon className="size-6" />
+      {t("back-button.text")}
+    </Link>
+  );
+}

app/components/layout.tsx

···
-import { LanguageIcon } from "@heroicons/react/24/outline";
+import { Cog8ToothIcon, LanguageIcon } from "@heroicons/react/24/outline";
 import { type ReactNode, useRef } from "react";
 import GitHubButton from "react-github-btn";
 import { useTranslation } from "react-i18next";
···
 import { BlueskyIcon } from "./icons/bluesky";
 import { GitHubIcon } from "./icons/github";
 
-type Props = {
-  className?: string;
-  children?: ReactNode;
+type HeaderProps = {
+  isLogin?: boolean;
 };
 
-export function Header() {
+export function Header({ isLogin }: HeaderProps) {
   const detailsRef = useRef<HTMLDetailsElement>(null);
   const handleClick = () => {
     if (detailsRef.current) {
···
           Linkat
         </Link>
       </div>
-      <details
-        className="dropdown dropdown-end absolute right-2 top-2"
-        ref={detailsRef}
-        onClick={(event) => {
-          if ((event.target as HTMLElement).tagName === "BUTTON") return;
-          void umami.track("click-header-lang", {
-            action: "open",
-          });
-        }}
-      >
-        <summary className="btn btn-square m-1 shadow dark:btn-neutral light:bg-white">
-          <LanguageIcon className="size-6" />
-        </summary>
-        <Form>
-          <ul className="menu dropdown-content z-[1] w-52 rounded-box p-2 shadow light:bg-white dark:bg-neutral">
-            <li>
-              <button
-                type="submit"
-                name="lng"
-                value="ja"
-                onClick={handleClick}
-                data-umami-event="click-header-lang"
-                data-umami-event-action="select-ja"
-              >
-                日本語
-              </button>
-            </li>
-            <li>
-              <button
-                type="submit"
-                name="lng"
-                value="en"
-                onClick={handleClick}
-                data-umami-event="click-header-lang"
-                data-umami-event-action="select-en"
-              >
-                English
-              </button>
-            </li>
-          </ul>
-        </Form>
-      </details>
+      <div className="absolute right-2 top-2 flex gap-1">
+        <details
+          className="dropdown dropdown-end"
+          ref={detailsRef}
+          onClick={(event) => {
+            if ((event.target as HTMLElement).tagName === "BUTTON") return;
+            void umami.track("click-header-lang", {
+              action: "open",
+            });
+          }}
+        >
+          <summary className="btn btn-square m-1 shadow dark:btn-neutral light:bg-white">
+            <LanguageIcon className="size-6" />
+          </summary>
+          <Form>
+            <ul className="menu dropdown-content z-[1] w-52 rounded-box p-2 shadow light:bg-white dark:bg-neutral">
+              <li>
+                <button
+                  type="submit"
+                  name="lng"
+                  value="ja"
+                  onClick={handleClick}
+                  data-umami-event="click-header-lang"
+                  data-umami-event-action="select-ja"
+                >
+                  日本語
+                </button>
+              </li>
+              <li>
+                <button
+                  type="submit"
+                  name="lng"
+                  value="en"
+                  onClick={handleClick}
+                  data-umami-event="click-header-lang"
+                  data-umami-event-action="select-en"
+                >
+                  English
+                </button>
+              </li>
+            </ul>
+          </Form>
+        </details>
+        {isLogin && (
+          <Link
+            to="/settings"
+            className="btn btn-square m-1 shadow dark:btn-neutral light:bg-white"
+          >
+            <Cog8ToothIcon className="size-6" />
+          </Link>
+        )}
+      </div>
     </header>
   );
 }
 
-export function Main({ className, children }: Props) {
+type MainProps = {
+  className?: string;
+  children?: ReactNode;
+};
+
+export function Main({ className, children }: MainProps) {
   return (
     <main
       className={cn(
···
   );
 }
 
-export function RootLayout({ children }: { children: ReactNode }) {
+type RootLayoutProps = {
+  isLogin?: boolean;
+  children: ReactNode;
+};
+
+export function RootLayout({ isLogin, children }: RootLayoutProps) {
   return (
     <>
-      <Header />
+      <Header isLogin={isLogin} />
       {children}
       <Footer />
     </>

app/components/logout-button.tsx app/features/settings/logout-button.tsx

···
 import { useTranslation } from "react-i18next";
 import { Form, useSubmit } from "react-router";
 
-import { Button } from "./button";
+import { Button } from "~/components/button";
 
 export function LogoutButton() {
   const { t } = useTranslation();
···
     <Form action="/logout" method="post" onSubmit={handleSubmit}>
       <Button
         type="submit"
-        className="btn btn-ghost btn-sm w-64 text-error"
+        className="btn btn-error"
         data-umami-event="click-logout-button"
         data-testid="logout-button"
       >

app/features/settings/delete-button.tsx

···
+import { useTranslation } from "react-i18next";
+import { Form, useSubmit } from "react-router";
+
+import { Button } from "~/components/button";
+
+export function DeleteBoardButton() {
+  const { t } = useTranslation();
+  const submit = useSubmit();
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const ok = confirm(t("delete-board-button.confirm-message"));
+    if (ok) {
+      void submit(event.currentTarget);
+    }
+    void umami.track("handle-", {
+      action: ok ? "confirm" : "cancel",
+    });
+  };
+
+  return (
+    <Form action="/delete" method="post" onSubmit={handleSubmit}>
+      <Button
+        type="submit"
+        className="btn btn-error"
+        data-umami-event="click-delete-board-button"
+        data-testid="delete-board-button"
+      >
+        {t("delete-board-button.text")}
+      </Button>
+    </Form>
+  );
+}

app/i18n/locales/en.json

···
     "text": "Logout",
     "confirm-message": "Are you sure you want to log out?"
   },
-  "about": {
-    "back-to-top": "Back to top"
+  "back-button": {
+    "text": "Back to top"
+  },
+  "delete": {
+    "invalid-session-error-message": "The login information was invalid"
+  },
+  "delete-board-button": {
+    "text": "Delete this board",
+    "confirm-message": "Are you sure you want to delete your board?"
+  },
+  "settings": {
+    "title": "Settings",
+    "header-account": "Account",
+    "header-board": "Board",
+    "delete-board-warning": "Delete your board saved in PDS. This action cannot be undone."
   }
 }

app/i18n/locales/ja.json

···
     "text": "ログアウト",
     "confirm-message": "ログアウトしますか？"
   },
-  "about": {
-    "back-to-top": "トップに戻る"
+  "back-button": {
+    "text": "トップに戻る"
+  },
+  "delete": {
+    "invalid-session-error-message": "ログイン情報が無効でした"
+  },
+  "delete-board-button": {
+    "text": "ボードを削除する",
+    "confirm-message": "本当にボードを削除しますか？"
+  },
+  "settings": {
+    "title": "設定",
+    "header-account": "アカウント",
+    "header-board": "ボード",
+    "delete-board-warning": "PDSに保存されているボードを削除します。削除後は元に戻せません。"
   }
 }

app/routes/_index.tsx

···
 import { Link } from "react-router";
 
 import { Main, RootLayout } from "~/components/layout";
-import { LogoutButton } from "~/components/logout-button";
 import { i18nServer } from "~/i18n/i18n";
 import { getSessionUserDid } from "~/server/oauth/session";
 import { cn } from "~/utils/cn";
···
   const { isLogin } = loaderData;
   const { t, i18n } = useTranslation();
   return (
-    <RootLayout>
+    <RootLayout isLogin={isLogin}>
       <Main className="utils--center">
         <div className="text-center">
           <h2
···
           </h2>
           <div className="mt-12 flex flex-col items-center gap-2">
             {isLogin ? (
-              <Link to="/edit" className="btn btn-primary w-64">
+              <Link
+                to="/edit"
+                className="btn btn-primary w-64"
+                data-testid="index__edit-link"
+              >
                 <PencilSquareIcon className="size-6" />
                 {t("_index.edit-link")}
               </Link>
···
               <ArrowRightIcon className="size-6" />
               {t("_index.sample-link")}
             </Link>
-            {isLogin && <LogoutButton />}
-            <div
-              className={cn("flex flex-col gap-2", {
-                "mt-8": !isLogin,
-              })}
-            >
+            <div className={cn("flex flex-col gap-2 mt-8")}>
               <p>
                 <Link to="/about" className="underline">
                   {t("_index.notes-link")}

app/routes/about.tsx

···
 import { AtUri } from "@atproto/api";
-import { ChevronLeftIcon } from "@heroicons/react/24/outline";
 import { LRUCache } from "lru-cache";
 import markdownit from "markdown-it";
 import linkAttributes from "markdown-it-link-attributes";
-import { useTranslation } from "react-i18next";
-import { Link } from "react-router";
 import { z } from "zod";
 
+import { BackButton } from "~/components/back-button";
 import { Card } from "~/components/card";
 import { Footer, Main } from "~/components/layout";
 import { i18nServer } from "~/i18n/i18n";
···
 };
 
 export default function AboutPage({ loaderData }: Route.ComponentProps) {
-  const { t } = useTranslation();
   const { about } = loaderData;
   return (
     <>
       <Main>
         <Card className="my-4">
           <div className="card-body">
-            <Link to="/" className="flex h-8 items-center">
-              <ChevronLeftIcon className="size-6" />
-              {t("about.back-to-top")}
-            </Link>
+            <BackButton />
             <article className="prose mt-4">
               <h1 className="text-3xl">{about.title}</h1>
               <div dangerouslySetInnerHTML={{ __html: about.content }} />

app/routes/delete.tsx

···
+import { redirect } from "react-router";
+
+import { i18nServer } from "~/i18n/i18n";
+import { getSessionAgent, getSessionUserDid } from "~/server/oauth/session";
+import { boardService } from "~/server/service/boardService";
+import { createLogger } from "~/utils/logger";
+
+import type { Route } from "./+types/delete";
+
+const logger = createLogger("delete");
+
+export async function action({ request }: Route.ActionArgs) {
+  const t = await i18nServer.getFixedT(request);
+  const [userDid, agent] = await Promise.all([
+    getSessionUserDid(request),
+    getSessionAgent(request),
+  ]);
+  if (!userDid || !agent) {
+    return { error: t("delete.invalid-session-error-message") };
+  }
+  try {
+    await agent.deleteBoard();
+  } catch (error) {
+    logger.error("PDSからボードの削除に失敗しました", { error });
+  }
+  await boardService.deleteBoard(userDid);
+  return redirect(`/`);
+}

app/routes/login.tsx

···
 import { RouteToaster } from "~/features/toast/route";
 import { i18nServer } from "~/i18n/i18n";
 import { createOAuthClient } from "~/server/oauth/client";
+import { getSessionUserDid } from "~/server/oauth/session";
 import { createLogger } from "~/utils/logger";
 
 import type { Route } from "./+types/login";
···
     return { error: t("login.default-error-message") };
   }
 }
+
+export const loader = async ({ request }: Route.LoaderArgs) => {
+  const userDid = await getSessionUserDid(request);
+  if (userDid) {
+    return redirect("/");
+  }
+  return null;
+};
 
 export default function LoginPage() {
   return (

app/routes/settings.tsx

···
+import { useTranslation } from "react-i18next";
+import { redirect } from "react-router";
+
+import { BackButton } from "~/components/back-button";
+import { Card } from "~/components/card";
+import { Footer, Main } from "~/components/layout";
+import { DeleteBoardButton } from "~/features/settings/delete-button";
+import { LogoutButton } from "~/features/settings/logout-button";
+import { getSessionUserDid } from "~/server/oauth/session";
+
+import type { Route } from "./+types/settings";
+
+export const loader = async ({ request }: Route.LoaderArgs) => {
+  const userDid = await getSessionUserDid(request);
+  if (!userDid) {
+    throw redirect("/login");
+  }
+  return null;
+};
+
+export default function SettingsPage() {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Main className="py-4">
+        <Card>
+          <div className="card-body gap-4">
+            <BackButton />
+            <h1 className="card-title justify-center">{t("settings.title")}</h1>
+            <h2 className="border-b-2 border-gray-200 pb-1 font-bold">
+              {t("settings.header-account")}
+            </h2>
+            <LogoutButton />
+            <h2 className="border-b-2 border-gray-200 pb-1 font-bold">
+              {t("settings.header-board")}
+            </h2>
+            <DeleteBoardButton />
+            <p className="text-gray-400">
+              {t("settings.delete-board-warning")}
+            </p>
+          </div>
+        </Card>
+      </Main>
+      <Footer />
+    </>
+  );
+}

app/server/jetstream/subscription.ts

···
 jetstream.onCreate("blue.linkat.board", handleCreateOrUpdate);
 
 jetstream.onUpdate("blue.linkat.board", handleCreateOrUpdate);
+
+jetstream.onDelete("blue.linkat.board", async (event) => {
+  await boardService.deleteBoard(event.did);
+  logger.info("ボードを削除しました", { userDid: event.did });
+});

app/server/service/boardService/board.ts

···
     board: boardInPDS,
   });
 };
+
+export const deleteBoard = async (userDid: string) => {
+  await prisma.board.deleteMany({
+    where: {
+      userDid,
+    },
+  });
+};

e2e/edit.spec.ts

···
     await expect(card1Edited).toBeVisible();
     await expect(card2).toBeVisible();
 
-    // カードを編集
+    // カードを削除(後続の削除処理の確認のために1つ残す)
     await page.getByTestId("profile-card__edit").click();
     page.on("dialog", (dialog) => dialog.accept());
     await card1Edited.getByTestId("sortable-card__edit").click();
     await page.getByTestId("card-form__delete").click();
-    await card2.getByTestId("sortable-card__edit").click();
-    await page.getByTestId("card-form__delete").click();
 
-    // 保存して閲覧ページで順番を確認
+    // 保存して閲覧ページで削除を確認
     await page.getByTestId("board-viewer__submit").click();
     await page.waitForURL((url) => url.pathname !== "/edit");
     await page.getByTestId("show-modal__close").click();
     await expect(card1Edited).not.toBeVisible();
-    await expect(card2).not.toBeVisible();
+
+    // ボードを削除
+    await page.goto("/settings");
+    await page.getByTestId("delete-board-button").click();
+
+    // 編集ページで削除されていることを確認
+    await page.getByTestId("index__edit-link").click();
+    await page.waitForURL("/edit");
+    await expect(
+      page.locator('[data-testid="sortable-card"]'),
+    ).not.toBeVisible();
   });
 });

e2e/logout.spec.ts

···
   test("ログアウトボタンを押すとダイアログが出てログアウトできる", async ({
     page,
   }) => {
-    await page.goto("/");
+    await page.goto("/settings");
     page.on("dialog", (dialog) => dialog.accept());
     const logoutButton = page.getByTestId("logout-button");
     await logoutButton.click();
     await expect(logoutButton).not.toBeVisible();
   });
   test("ログアウトボタンを押したあとキャンセルできる", async ({ page }) => {
-    await page.goto("/");
+    await page.goto("/settings");
     page.on("dialog", (dialog) => dialog.dismiss());
     const logoutButton = page.getByTestId("logout-button");
     await logoutButton.click();