fix: player add

app/(app)/friends/page.tsx

@@ -17,7 +17,7 @@ export default async function Page() {
       <ul className="space-y-1">
         {friends?.map((friend) => (
           <li
-            className="flex items-center justify-between py-2"
+            className="flex items-center justify-between py-1"
             key={friend.id}
           >
             <User {...friend} />

app/(app)/matches/[matchId]/GameInputModal.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { DndContext } from "@dnd-kit/core";
 import { SortableContext } from "@dnd-kit/sortable";
 import { useSortable } from "@dnd-kit/sortable";
@@ -123,7 +125,7 @@ export function GameInputModal({
                 <PopoverTrigger>
                   <Button className="gap-1" variant="light" size="sm">
                     <span className="text-secondary underline">同点の場合</span>
-                    <Icon className="h-4 w-4 fill-secondary" name="help" />
+                    <Icon className="size-4 fill-secondary" name="help" />
                   </Button>
                 </PopoverTrigger>
                 <PopoverContent className="max-w-[280px] py-2">
@@ -148,7 +150,7 @@ export function GameInputModal({
                                 {...listeners}
                               >
                                 <Icon
-                                  className="h-5 w-5 fill-current"
+                                  className="size-5 fill-current"
                                   name="dragIndicator"
                                 />
                               </div>

app/(app)/matches/[matchId]/MatchPlayerInputModal/AnonymousPlayerSelect.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+import { useFormState } from "react-dom";
+import { Avatar } from "~/components/Avatar";
+import { Button } from "~/components/Button";
+import { Input } from "~/components/Input";
+import { NAME_MAX_LENGTH } from "~/lib/utils/schemas";
+import { addAnonymousPlayer } from "./actions";
+
+export function AnonymousPlayerSelect({ matchId }: { matchId: string }) {
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const [{ errors, success }, formAction] = useFormState(
+    addAnonymousPlayer.bind(null, matchId),
+    {
+      success: false,
+    },
+  );
+
+  // TODO: 見直し。サーバー側でできないか
+  useEffect(() => {
+    if (success) {
+      const params = new URLSearchParams(searchParams);
+      params.delete("mode");
+      router.replace(`${pathname}?${params.toString()}`);
+    }
+  }, [pathname, router, searchParams, success]);
+
+  return (
+    <form className="pt-1" action={formAction} noValidate>
+      <div className="flex  gap-3">
+        <Avatar className="mt-2 shrink-0" />
+        <Input
+          name="name"
+          type="text"
+          placeholder="プレイヤー名を入力してください"
+          maxLength={NAME_MAX_LENGTH}
+          errorMessage={errors?.name}
+        />
+      </div>
+      <Button className="mt-4" fullWidth type="submit" color="primary">
+        決定
+      </Button>
+    </form>
+  );
+}

app/(app)/matches/[matchId]/MatchPlayerInputModal/ModalController.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useCallback } from "react";
+import { Modal, ModalContent } from "~/components/Modal";
+
+export function ModalController({ children }: { children: React.ReactNode }) {
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const router = useRouter();
+  const mode = searchParams.get("mode");
+  const isOpen = mode === "player-add";
+
+  const handleClose = useCallback(() => {
+    const params = new URLSearchParams(searchParams);
+    params.delete("mode");
+    router.replace(`${pathname}?${params.toString()}`);
+  }, [pathname, router, searchParams]);
+
+  return (
+    <Modal isOpen={isOpen} onClose={handleClose} hideCloseButton>
+      <ModalContent>{children}</ModalContent>
+    </Modal>
+  );
+}

app/(app)/matches/[matchId]/MatchPlayerInputModal/Tabs.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { Tab, Tabs } from "~/components/Tabs";
+
+export function PlayerTypeTabs({
+  userTab,
+  anonymousTab,
+}: {
+  userTab: React.ReactNode;
+  anonymousTab: React.ReactNode;
+}) {
+  return (
+    <Tabs
+      classNames={{
+        panel: "min-h-0",
+      }}
+      fullWidth
+      radius="lg"
+      aria-label="プレイヤー選択の選択肢"
+    >
+      <Tab key="friends" title="ユーザー">
+        {userTab}
+      </Tab>
+      <Tab key="anonymous" title="一般">
+        {anonymousTab}
+      </Tab>
+    </Tabs>
+  );
+}

app/(app)/matches/[matchId]/MatchPlayerInputModal/UserSelect.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useCallback, useRef } from "react";
+import { useFormState, useFormStatus } from "react-dom";
+import { useDebouncedCallback } from "use-debounce";
+import { Icon } from "~/components/Icon";
+import { Input } from "~/components/Input";
+import { ScrollShadow } from "~/components/ScrollShadow";
+import { User } from "~/components/User";
+import { addUserPlayer, searchProfiles } from "./actions";
+
+export function UserSelect({
+  matchId,
+  friends,
+  playerIds,
+}: {
+  matchId: string;
+  friends: { id: string; name: string; janrecoId: string }[];
+  playerIds: string[];
+}) {
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const router = useRouter();
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const selectableFriends = friends.filter(
+    (friend) => !playerIds.includes(friend.id),
+  );
+
+  const [{ profiles }, formAction] = useFormState(searchProfiles, {});
+
+  const handleChange = useDebouncedCallback(() => {
+    formRef.current?.requestSubmit();
+  }, 300);
+
+  const selectUser = useCallback(
+    (profileId: string) => {
+      // TODO: await中の表示
+      addUserPlayer({ matchId, profileId });
+      // TODO: server側でredirectしてもいいかも
+      const params = new URLSearchParams(searchParams);
+      params.delete("mode");
+      router.replace(`${pathname}?${params.toString()}`);
+    },
+    [matchId, pathname, router, searchParams],
+  );
+
+  return (
+    <form className="flex h-full flex-col" ref={formRef} action={formAction}>
+      <Input
+        className="mb-3"
+        size="sm"
+        name="text"
+        placeholder="ユーザーIDもしくは名前で検索"
+        startContent={<Icon className="size-5 fill-current" name="search" />}
+        onChange={handleChange}
+      />
+      <ScrollShadow className="min-h-0">
+        {!!profiles && (
+          <ProfileList profiles={selectableFriends} onSelect={selectUser} />
+        )}
+        {!profiles && !!friends.length && (
+          <>
+            <p className="mb-2 text-small text-foreground-light">
+              フレンドから選ぶ
+            </p>
+            <ul className="space-y-1">
+              {selectableFriends.map((friend) => (
+                <li className="py-1" key={friend.id}>
+                  {/* TODO: ripple */}
+                  <button type="button" onClick={() => selectUser(friend.id)}>
+                    <User name={friend.name} janrecoId={friend.janrecoId} />
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </>
+        )}
+      </ScrollShadow>
+    </form>
+  );
+}
+
+function ProfileList({
+  profiles,
+  onSelect,
+}: {
+  profiles: { id: string; name: string; janrecoId: string }[];
+  onSelect: (profileId: string) => void;
+}) {
+  const { pending } = useFormStatus();
+
+  if (pending) {
+    return (
+      <ul className="space-y-1">
+        {Array.from({ length: 1 }).map((_, i) => (
+          <li
+            key={`search-profiles-${i}`}
+            className="flex items-center justify-between py-2"
+          >
+            <User skeleton />
+          </li>
+        ))}
+      </ul>
+    );
+  }
+
+  if (!profiles.length) {
+    return (
+      <p className="mt-10 text-center text-small text-foreground-light">
+        見つかりませんでした
+      </p>
+    );
+  }
+
+  return (
+    <ul className="space-y-1">
+      {profiles.map((profile) => (
+        <li key={profile.id} className="py-1">
+          {/* TODO: ripple, 共通化, 連打対策 */}
+          <button type="button" onClick={() => onSelect(profile.id)}>
+            <User name={profile.name} janrecoId={profile.janrecoId} />
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}