Bluesky連携ページ仮実装 (#412)

## Issue

## 変更内容
- Blueskyアカウントの連携ページを作成しました。
- デザインなどは仮です。

@coderabbitai: ignore

src/app/(menu)/(private)/settings/_components/Settings.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { styled } from '@mui/material';
+import Link from 'next/link';
+
+const Root = styled('div')`
+  display: flex;
+  flex-direction: column;
+  padding: 0 20px;
+`;
+
+const H2 = styled('h2')`
+  font-size: 20px;
+`;
+
+/**
+ * FIXME デザインは仮です
+ * @constructor
+ */
+export default function Settings() {
+  return (
+    <Root>
+      <H2>外部連携</H2>
+      <Link href={'/settings/connect-bluesky'}>Blueskyと連携する</Link>
+    </Root>
+  );
+}

src/app/(menu)/(private)/settings/connect-bluesky/_components/ConnectBluesky.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import {
+  Alert,
+  Button,
+  IconButton,
+  InputAdornment,
+  LinearProgress,
+  OutlinedInput,
+  Snackbar,
+  styled,
+} from '@mui/material';
+import Link from 'next/link';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
+import { useState } from 'react';
+import { useConnectBsky } from '@/swr/client/bluesky';
+
+const Root = styled('div')`
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+
+  gap: 40px;
+`;
+
+/**
+ * FIXME デザインは仮です
+ * @constructor
+ */
+export default function ConnectBluesky() {
+  const { isMutating, trigger, error } = useConnectBsky();
+
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(true);
+  const [successMessage, setSuccessMessage] = useState('');
+  const handleClickShowPassword = () => setShowPassword((show) => !show);
+
+  return (
+    <Root>
+      <Link href={'https://bsky.app/settings/app-passwords'}>
+        アプリパスワードの発行はこちら
+      </Link>
+      <OutlinedInput
+        sx={{ width: '100%' }}
+        size="small"
+        name="handle"
+        autoComplete="off"
+        disabled={isMutating}
+        type="text"
+        onChange={(e) => setUsername(e.target.value)}
+        placeholder="example.bsky.social"
+      />
+      <OutlinedInput
+        sx={{ width: '100%' }}
+        size="small"
+        disabled={isMutating}
+        name="app-password"
+        autoComplete="off"
+        type={showPassword ? 'text' : 'password'}
+        onChange={(e) => setPassword(e.target.value)}
+        placeholder="アプリパスワード"
+        endAdornment={
+          <InputAdornment position="end">
+            <IconButton
+              aria-label="toggle password visibility"
+              onClick={handleClickShowPassword}
+              onMouseDown={(event) => {
+                event.preventDefault();
+              }}
+              edge="end"
+            >
+              {showPassword ? <VisibilityOff /> : <Visibility />}
+            </IconButton>
+          </InputAdornment>
+        }
+      />
+      {isMutating && <LinearProgress />}
+      {!isMutating && error && <Alert severity="error">{error.message}</Alert>}
+      <Button
+        disabled={isMutating}
+        variant="contained"
+        sx={{ maxWidth: '200px' }}
+        onClick={() => {
+          void trigger({
+            connectAtProtocol: {
+              id: username,
+              appPassword: password,
+            },
+          }).then((result) => {
+            if (result) {
+              setSuccessMessage('連携しました。');
+            }
+          });
+        }}
+      >
+        連携
+      </Button>
+      <Snackbar
+        open={!!successMessage.length}
+        onClose={() => setSuccessMessage('')}
+        autoHideDuration={2_000}
+      >
+        <Alert severity="success">{successMessage}</Alert>
+      </Snackbar>
+    </Root>
+  );
+}

src/app/(menu)/(private)/settings/connect-bluesky/page.tsx

@@ -0,0 +1,15 @@
+import { Metadata } from 'next';
+import PrimaryColumn from '@/app/(menu)/_components/main/PrimaryColumn';
+import ConnectBluesky from '@/app/(menu)/(private)/settings/connect-bluesky/_components/ConnectBluesky';
+
+export const metadata: Metadata = {
+  title: 'Bluesky連携',
+};
+
+export default function page() {
+  return (
+    <PrimaryColumn columnName={'Bluesky連携'} showBack={true}>
+      <ConnectBluesky />
+    </PrimaryColumn>
+  );
+}

src/app/(menu)/(private)/settings/page.tsx

@@ -1,15 +1,15 @@
-import ComingSoon from '@/app/(menu)/_components/main/ComingSoon';
 import { Metadata } from 'next';
 import PrimaryColumn from '@/app/(menu)/_components/main/PrimaryColumn';
+import Settings from '@/app/(menu)/(private)/settings/_components/Settings';
 
 export const metadata: Metadata = {
   title: '設定',
 };
 
 export default function page() {
   return (
-    <PrimaryColumn hideHeader={true}>
-      <ComingSoon />
+    <PrimaryColumn columnName={'設定'}>
+      <Settings />
     </PrimaryColumn>
   );
 }

src/libs/cuculus-client.ts

@@ -1,5 +1,6 @@
 import {
   AccountsApi,
+  AtProtocolApi,
   AuthApi,
   Configuration,
   DefaultApi,
@@ -20,6 +21,7 @@ const invitationsApi = new InvitationsApi(config);
 const timelinesApi = new TimelinesApi(config);
 const postsApi = new PostsApi(config);
 const accountsApi = new AccountsApi(config);
+const atProtocolApi = new AtProtocolApi(config);
 
 export {
   authApi,
@@ -29,4 +31,5 @@ export {
   timelinesApi,
   postsApi,
   accountsApi,
+  atProtocolApi,
 };

src/swr/client/bluesky.ts

@@ -0,0 +1,45 @@
+import useSWRMutation from 'swr/mutation';
+import { atProtocolApi } from '@/libs/cuculus-client';
+import { useAuth } from '@/swr/client/auth';
+import { ConnectAtProtocolRequest, ResponseError } from '@cuculus/cuculus-api';
+import { getAuthorizationHeader } from '@/libs/auth';
+
+/**
+ * Blueskyアカウントと連携する
+ */
+export const useConnectBsky = () => {
+  const { data: authId } = useAuth();
+  const key = authId ? { key: 'useConnectBsky', authId } : null;
+  return useSWRMutation<
+    boolean,
+    Error,
+    { key: string; authId: number } | null,
+    ConnectAtProtocolRequest
+  >(
+    key,
+    async (_, { arg: request }) => {
+      // header上書きで消えてるので手動で設定
+      const headers = {
+        ...(await getAuthorizationHeader(authId)),
+        accept: 'application/json',
+        'Content-Type': 'application/json',
+      };
+      try {
+        await atProtocolApi.connectAtProtocol(request, { headers });
+        return true;
+      } catch (error) {
+        if (error instanceof ResponseError) {
+          if (error.response.status === 400) {
+            const body = (await error.response.json()) as { message?: string };
+            throw new Error(body.message ?? 'エラーが発生しました。');
+          }
+        }
+        throw error;
+      }
+    },
+    {
+      throwOnError: false,
+      revalidate: false,
+    },
+  );
+};