絵文字アイコン機能追加 (#6)

app/features/board/board-viewer.tsx

···
             return {
               id: payload.id,
               text: payload.text,
+              emoji: payload.emoji,
               url: resolvedUrl,
             };
           }

app/features/board/card/parser.ts

···
   icon: CardIconComponent;
   text: string;
   url: string;
+  emoji?: string;
 };
 
 export type ParsedTextCard = {
   type: "text";
   text: string;
+  emoji?: string;
 };
 
 export type ParsedEmbedCard = {
···
     return {
       type: "text",
       text: card.text || card.url || "",
+      emoji: card.emoji,
     };
   }
   const url = new URL(card.url);
···
       icon: TwitterIcon,
       text: card.text || `@${paths[1]}`,
       url: card.url,
+      emoji: card.emoji,
     };
   }
   if (isGitHubProfileUrl(url)) {
···
       icon: GitHubIcon,
       text: card.text || `@${paths[1]}`,
       url: card.url,
+      emoji: card.emoji,
     };
   }
   return {
···
     icon: cardIcons[url.hostname] || LinkIcon,
     text: card.text || card.url,
     url: card.url,
+    emoji: card.emoji,
   };
 };

app/features/board/card/sortable-card.tsx

···
   }
   return (
     <div className="card-body flex-row items-center gap-2">
-      {parsed.type === "link" && <parsed.icon className="-ml-2 size-6" />}
+      {parsed.emoji ? (
+        <div className="-ml-2 flex size-6 items-center justify-center text-xl">
+          {parsed.emoji}
+        </div>
+      ) : (
+        parsed.type === "link" && <parsed.icon className="-ml-2 size-6" />
+      )}
       <p className="flex-1 truncate">{parsed.text}</p>
     </div>
   );
···
   const handleOpen = () => {
     form.update({ name: "text", value: card.text });
     form.update({ name: "url", value: card.url });
+    form.update({ name: "emoji", value: card.emoji });
     form.update({ name: "id", value: card.id });
     cardModal.open();
   };

app/features/board/form/card-form-provider.tsx

···
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
 
-const _schema = z.object({
-  text: z.string().optional(),
-  url: z.string().url().optional(),
+import { cardSchema } from "~/models/card";
+
+const _schema = cardSchema.extend({
   id: z.string().optional(),
 });
 

app/features/board/form/card-form.tsx

···
   getInputProps,
   useFormMetadata,
 } from "@conform-to/react";
+import Picker from "@emoji-mart/react";
+import { XMarkIcon } from "@heroicons/react/24/outline";
 import { Form } from "@remix-run/react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { Button } from "~/components/button";
 import { Input } from "~/components/input";
+import { cn } from "~/utils/cn";
 
 import type { CardFormPayload } from "./card-form-provider";
 
···
   const { t } = useTranslation();
   const form = useFormMetadata<CardFormPayload>();
   const fields = form.getFieldset();
+  const [isEmojipickerOpen, setIsEmojiPickerOpen] = useState(false);
+
+  const handleResetEmoji = () => {
+    form.update({ name: "emoji", value: "" });
+  };
+
   return (
     <Form
       method="post"
···
         key={fields.text.key}
         data-testid="card-form__text"
       />
+      <p className="text-sm text-gray-400">
+        {t("card-form.help-input-message")}
+      </p>
+      <div>
+        <label className="form-control">
+          <div className="label">
+            <span className="label-text">{t("card-form.emoji-label")}</span>
+          </div>
+          <input
+            {...getInputProps(fields.emoji, { type: "hidden" })}
+            key={fields.emoji.key}
+          />
+        </label>
+        <div className="flex gap-2">
+          <Button
+            type="button"
+            className={cn("w-fit", {
+              "text-xl": !!fields.emoji.value,
+            })}
+            onClick={() => setIsEmojiPickerOpen(true)}
+          >
+            {fields.emoji.value ?? t("card-form.emoji-select-button")}
+          </Button>
+          {fields.emoji.value && (
+            <Button type="button" onClick={handleResetEmoji}>
+              <XMarkIcon className="size-6 text-error" />
+              {t("card-form.emoji-reset-button")}
+            </Button>
+          )}
+        </div>
+        {fields.emoji.errors && (
+          <p className="p-1 text-sm text-error">{fields.emoji.errors}</p>
+        )}
+      </div>
+      <p className="text-sm text-gray-400">
+        {t("card-form.help-emoji-message")}
+      </p>
+      {isEmojipickerOpen && (
+        <Picker
+          dynamicWidth
+          onClickOutside={() => setIsEmojiPickerOpen(false)}
+          previewPosition="none"
+          skinTonePosition="none"
+          onEmojiSelect={(emoji: { native: string }) => {
+            form.update({ name: "emoji", value: emoji.native });
+          }}
+        />
+      )}
       <input
         {...getInputProps(fields.id, { type: "hidden" })}
         key={fields.id.key}
···
           </Button>
         )}
       </div>
-      <p className="pl-1 text-end text-sm text-gray-400">
-        {t("card-form.form-footer-message")}
-      </p>
     </Form>
   );
 }

app/i18n/locales/en.json

···
     "change-button": "Change",
     "add-button": "Add",
     "delete-button": "Delete",
-    "form-footer-message": "Either the URL or text can be left blank."
+    "emoji-label": "Icon",
+    "emoji-select-button": "Select emoji",
+    "emoji-reset-button": "Reset selection",
+    "help-input-message": "Either the URL or text can be left blank.",
+    "help-emoji-message": "When not selected, it will be automatically determined based on the URL."
   },
   "card-form-modal": {
     "add-card": "Add Card"

app/i18n/locales/ja.json

···
     "change-button": "変更",
     "add-button": "追加",
     "delete-button": "削除",
-    "form-footer-message": "URLかテキストはどちらか空欄でもOKです。"
+    "emoji-label": "アイコン",
+    "emoji-select-button": "絵文字を選択",
+    "emoji-reset-button": "未選択に戻す",
+    "help-input-message": "URLかテキストはどちらか空欄でもOKです。",
+    "help-emoji-message": "未選択時はURLに応じて自動で決まります。"
   },
   "card-form-modal": {
     "add-card": "カードを追加"

app/models/card.ts

···
 export const cardSchema = z.object({
   url: z.string().url().or(z.literal("")).optional(),
   text: z.string().optional(),
+  emoji: z
+    .string()
+    .regex(/^\p{Emoji}$/u)
+    .or(z.literal(""))
+    .optional(),
 });
 
 export type ValidCard = z.infer<typeof cardSchema>;

app/tailwind.css

···
 .btn-bluesky {
   --btn-color: 62.58% 0.205 254.95;
 }
+
+em-emoji-picker {
+  width: 100%;
+  height: 300px;
+}

lexicons/blue/linkat/board.json

···
         "text": {
           "type": "string",
           "description": "Text of the card"
+        },
+        "emoji": {
+          "type": "string",
+          "description": "Emoji of the card"
         }
       }
     }

package.json

···
     "@atproto/xrpc-server": "0.6.4",
     "@conform-to/react": "1.2.2",
     "@conform-to/zod": "1.2.2",
+    "@emoji-mart/data": "^1.2.1",
+    "@emoji-mart/react": "^1.1.1",
     "@heroicons/react": "2.1.5",
     "@prisma/client": "5.19.1",
     "@remix-run/express": "2.12.1",
···
     "@t3-oss/env-core": "0.11.1",
     "@vercel/og": "^0.6.3",
     "clsx": "2.1.1",
+    "emoji-mart": "^5.6.0",
     "express": "4.21.0",
     "i18next": "^23.15.2",
     "i18next-browser-languagedetector": "^8.0.0",

pnpm-lock.yaml

···
       '@conform-to/zod':
         specifier: 1.2.2
         version: 1.2.2(zod@3.23.8)
+      '@emoji-mart/data':
+        specifier: ^1.2.1
+        version: 1.2.1
+      '@emoji-mart/react':
+        specifier: ^1.1.1
+        version: 1.1.1(emoji-mart@5.6.0)(react@18.3.1)
       '@heroicons/react':
         specifier: 2.1.5
         version: 2.1.5(react@18.3.1)
···
       clsx:
         specifier: 2.1.1
         version: 2.1.1
+      emoji-mart:
+        specifier: ^5.6.0
+        version: 5.6.0
       express:
         specifier: 4.21.0
         version: 4.21.0
···
     resolution: {integrity: sha512-iK2fRD2+9vD6ps8OHYeSJCKCMy9H8A2yjTmVuhxqaVKMYZI1pw0hdWWTfB27czmXn7Lgk/B4ftE5zSYvrYmXZg==}
     engines: {node: '>=18'}
 
+  '@emoji-mart/data@1.2.1':
+    resolution: {integrity: sha512-no2pQMWiBy6gpBEiqGeU77/bFejDqUTRY7KX+0+iur13op3bqUsXdnwoZs6Xb1zbv0gAj5VvS1PWoUUckSr5Dw==}
+
+  '@emoji-mart/react@1.1.1':
+    resolution: {integrity: sha512-NMlFNeWgv1//uPsvLxvGQoIerPuVdXwK/EUek8OOkJ6wVOWPUizRBJU0hDqWZCOROVpfBgCemaC3m6jDOXi03g==}
+    peerDependencies:
+      emoji-mart: ^5.2
+      react: ^16.8 || ^17 || ^18
+
   '@emotion/hash@0.9.2':
     resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==}
 
···
   emittery@0.13.1:
     resolution: {integrity: sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==}
     engines: {node: '>=12'}
+
+  emoji-mart@5.6.0:
+    resolution: {integrity: sha512-eJp3QRe79pjwa+duv+n7+5YsNhRcMl812EcFVwrnRvYKoNPoQb5qxU8DG6Bgwji0akHdp6D4Ln6tYLG58MFSow==}
 
   emoji-regex@10.4.0:
     resolution: {integrity: sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==}
···
       lodash: 4.17.21
       tinycolor2: 1.6.0
 
+  '@emoji-mart/data@1.2.1': {}
+
+  '@emoji-mart/react@1.1.1(emoji-mart@5.6.0)(react@18.3.1)':
+    dependencies:
+      emoji-mart: 5.6.0
+      react: 18.3.1
+
   '@emotion/hash@0.9.2': {}
 
   '@esbuild/aix-ppc64@0.21.5':
···
   electron-to-chromium@1.5.27: {}
 
   emittery@0.13.1: {}
+
+  emoji-mart@5.6.0: {}
 
   emoji-regex@10.4.0: {}