treewide: implement pageContent and transferLead features

aster-void · claude · aster-void · commit db3b150f15ea · 2025-12-18T18:23:00.000+09:00
- Add pageContent (自己紹介ページ) field to MemberForm with markdown editor - Display pageContent on public member detail page with Markdown rendering - Add transferLead remote function for project lead handover - Add Transfer Lead UI button and modal in project edit page - Update data-models.md to mark both features as implemented 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
diff --git a/docs/knowledges/data-models.md b/docs/knowledges/data-models.md
@@ -91,7 +91,7 @@ projectMembers
 | メンバーを検索する         |      | ✓    |
 | メンバー一覧を見る         | ✓    | ✓    |
 | メンバー詳細を見る         | ✓    | ✓    |
-| 自己紹介ページを書く       |      |      |
+| 自己紹介ページを書く       | ✓    | ✓    |
 
 ### Articles
 
@@ -122,7 +122,7 @@ projectMembers
 | プロジェクトを検索する           |      | ✓    |
 | プロジェクト一覧を見る           | ✓    | ✓    |
 | プロジェクト詳細を見る           | ✓    | ✓    |
-| リードを引き継ぐ                 |      |      |
+| リードを引き継ぐ                 |      | ✓    |
 
 ### Search
 
diff --git a/src/lib/components/MemberForm.svelte b/src/lib/components/MemberForm.svelte
@@ -4,17 +4,19 @@
   import { onSaveShortcut } from "$lib/utils/keyboard";
   import { validateSlug, generateSlug } from "$lib/shared/logic/slugs";
   import ImageUpload from "./image-upload.svelte";
+  import Markdown from "./Markdown.svelte";
   import { Loader2, ArrowLeft, Settings, X } from "lucide-svelte";
 
   type MemberData = {
     slug: string;
     name: string;
     bio: string;
     imageUrl: string;
+    pageContent: string;
   };
 
   let {
-    initialData = { slug: "", name: "", bio: "", imageUrl: "" },
+    initialData = { slug: "", name: "", bio: "", imageUrl: "", pageContent: "" },
     onSubmit,
     onDelete = null,
     submitLabel = "Save",
@@ -30,6 +32,7 @@
   let formData = $state(snapshot(() => initialData));
   let errors = $state<Record<string, string>>({});
   let showSettings = $state(false);
+  let showPageContentPreview = $state(false);
 
   function handleNameChange() {
     if (!formData.slug || formData.slug === generateSlug(initialData.name)) {
@@ -165,6 +168,54 @@
             placeholder="A short bio about this member..."
           ></textarea>
         </div>
+
+        <!-- Page Content -->
+        <div class="mt-8 border-t border-zinc-200 pt-8">
+          <div class="mb-4 flex items-center justify-between">
+            <label for="pageContent" class="block text-sm font-medium text-zinc-700">
+              自己紹介ページ
+            </label>
+            <div class="flex items-center gap-2">
+              <button
+                type="button"
+                onclick={() => (showPageContentPreview = false)}
+                class="rounded-lg px-3 py-1.5 text-sm font-medium transition-colors {!showPageContentPreview
+                  ? 'bg-zinc-100 text-zinc-900'
+                  : 'text-zinc-500 hover:text-zinc-700'}"
+              >
+                Write
+              </button>
+              <button
+                type="button"
+                onclick={() => (showPageContentPreview = true)}
+                class="rounded-lg px-3 py-1.5 text-sm font-medium transition-colors {showPageContentPreview
+                  ? 'bg-zinc-100 text-zinc-900'
+                  : 'text-zinc-500 hover:text-zinc-700'}"
+              >
+                Preview
+              </button>
+            </div>
+          </div>
+          <p class="mb-3 text-xs text-zinc-400">
+            Markdown supported - This will be displayed on your public profile page
+          </p>
+          {#if showPageContentPreview}
+            <div class="min-h-[40vh] rounded-lg border border-zinc-200 bg-white px-4 py-3">
+              {#if formData.pageContent.trim()}
+                <Markdown content={formData.pageContent} />
+              {:else}
+                <p class="text-zinc-400">Nothing to preview</p>
+              {/if}
+            </div>
+          {:else}
+            <textarea
+              id="pageContent"
+              bind:value={formData.pageContent}
+              class="min-h-[40vh] w-full resize-none rounded-lg border border-zinc-200 bg-white px-4 py-3 font-[JetBrains_Mono,monospace] text-sm leading-relaxed text-zinc-900 placeholder:text-zinc-400 focus:border-zinc-400 focus:ring-0 focus:outline-none"
+              placeholder="Write detailed information about yourself using Markdown..."
+            ></textarea>
+          {/if}
+        </div>
       </div>
     </main>
 
diff --git a/src/lib/data/private/members.remote.ts b/src/lib/data/private/members.remote.ts
@@ -25,6 +25,7 @@ export const saveMember = command(
     name: v.string(),
     bio: v.nullable(v.string()),
     imageUrl: v.nullable(v.string()),
+    pageContent: v.nullable(v.string()),
   }),
   async (data) => {
     await requireUtCodeMember();
@@ -40,6 +41,7 @@ export const editMember = command(
       name: v.optional(v.string()),
       bio: v.optional(v.nullable(v.string())),
       imageUrl: v.optional(v.nullable(v.string())),
+      pageContent: v.optional(v.nullable(v.string())),
     }),
   }),
   async ({ id, data }) => {
diff --git a/src/lib/data/private/projects.remote.ts b/src/lib/data/private/projects.remote.ts
@@ -9,6 +9,7 @@ import {
   deleteProject,
   addProjectMember,
   removeProjectMember,
+  transferLead as serverTransferLead,
 } from "$lib/server/database/projects.server";
 import { listMembers } from "$lib/server/database/members.server";
 import { type ProjectCategory, type ProjectRole } from "$lib/shared/models/schema";
@@ -109,3 +110,27 @@ export const removeMember = command(
     await removeProjectMember(projectId, memberId);
   },
 );
+
+export const transferLead = command(
+  v.object({
+    projectId: v.string(),
+    newLeadMemberId: v.string(),
+  }),
+  async ({ projectId, newLeadMemberId }) => {
+    await requireUtCodeMember();
+    const project = await getProjectById(projectId);
+    if (!project) throw new Error("Project not found");
+
+    const currentLead = project.projectMembers.find((pm) => pm.role === "lead");
+    if (!currentLead) throw new Error("No current lead found");
+
+    const newLeadMember = project.projectMembers.find((pm) => pm.memberId === newLeadMemberId);
+    if (!newLeadMember) throw new Error("New lead is not a member of this project");
+
+    if (currentLead.memberId === newLeadMemberId) {
+      throw new Error("Member is already the lead");
+    }
+
+    await serverTransferLead(projectId, currentLead.memberId, newLeadMemberId);
+  },
+);
diff --git a/src/routes/(admin)/admin/members/edit/[id]/+page.svelte b/src/routes/(admin)/admin/members/edit/[id]/+page.svelte
@@ -12,7 +12,13 @@
   const member = $derived(await getMember(id));
   let isSubmitting = $state(false);
 
-  async function handleSubmit(data: { slug: string; name: string; bio: string; imageUrl: string }) {
+  async function handleSubmit(data: {
+    slug: string;
+    name: string;
+    bio: string;
+    imageUrl: string;
+    pageContent: string;
+  }) {
     if (!member) return;
 
     try {
@@ -33,6 +39,7 @@
           name: data.name,
           bio: data.bio || null,
           imageUrl: data.imageUrl || null,
+          pageContent: data.pageContent || null,
         },
       });
       toast.show("Saved", "success");
@@ -96,6 +103,7 @@
           name: member.name,
           bio: member.bio ?? "",
           imageUrl: member.imageUrl ?? "",
+          pageContent: member.pageContent ?? "",
         }}
         onSubmit={handleSubmit}
         onDelete={handleDelete}
diff --git a/src/routes/(admin)/admin/members/new/+page.svelte b/src/routes/(admin)/admin/members/new/+page.svelte
@@ -7,13 +7,20 @@
   const toast = useToast();
   let isSubmitting = $state(false);
 
-  async function handleSubmit(data: { slug: string; name: string; bio: string; imageUrl: string }) {
+  async function handleSubmit(data: {
+    slug: string;
+    name: string;
+    bio: string;
+    imageUrl: string;
+    pageContent: string;
+  }) {
     try {
       const result = await saveMember({
         slug: data.slug,
         name: data.name,
         bio: data.bio || null,
         imageUrl: data.imageUrl || null,
+        pageContent: data.pageContent || null,
       });
       if (result) {
         toast.show("Created", "success");
diff --git a/src/routes/(admin)/admin/projects/edit/[id]/+page.svelte b/src/routes/(admin)/admin/projects/edit/[id]/+page.svelte
@@ -10,9 +10,10 @@
     removeProject,
     addMember,
     removeMember,
+    transferLead,
   } from "$lib/data/private/projects.remote";
   import { useToast } from "$lib/components/toast/controls.svelte";
-  import { Folder, Plus, X } from "lucide-svelte";
+  import { Folder, Plus, X, ArrowRightLeft } from "lucide-svelte";
   import type { ProjectCategory } from "$lib/shared/models/schema";
 
   const toast = useToast();
@@ -23,6 +24,12 @@
   let showAddMember = $state(false);
   let newMemberId = $state<string | null>(null);
   let newMemberRole = $state<"member" | "lead">("member");
+  let showTransferLead = $state(false);
+  let transferTargetId = $state<string | null>(null);
+
+  const currentLead = $derived(project?.projectMembers.find((pm) => pm.role === "lead"));
+  const otherMembers = $derived(project?.projectMembers.filter((pm) => pm.role !== "lead") ?? []);
+  const canTransferLead = $derived((otherMembers?.length ?? 0) > 0);
 
   async function handleSubmit(data: {
     slug: string;
@@ -120,6 +127,33 @@
       }
     }
   }
+
+  async function handleTransferLead() {
+    if (!transferTargetId || !currentLead) return;
+
+    const targetMember = otherMembers.find((m) => m.memberId === transferTargetId);
+    if (!targetMember) return;
+
+    const confirmed = await confirm({
+      title: "Transfer lead role?",
+      description: `Transfer lead role from ${currentLead.member.name} to ${targetMember.member.name}?`,
+      confirmText: "Transfer",
+      variant: "warning",
+    });
+
+    if (confirmed) {
+      try {
+        await transferLead({ projectId: id, newLeadMemberId: transferTargetId }).updates(
+          getProject(id),
+        );
+        toast.show("Lead transferred", "success");
+        showTransferLead = false;
+        transferTargetId = null;
+      } catch (error) {
+        toast.show(error instanceof Error ? error.message : "Failed to transfer");
+      }
+    }
+  }
 </script>
 
 <svelte:head>
@@ -152,7 +186,7 @@
       <!-- Team Members Bar -->
       <div class="flex items-center gap-3 border-b border-zinc-200 bg-zinc-50 px-4 py-2">
         <span class="text-xs font-medium text-zinc-500">Team:</span>
-        <div class="flex items-center gap-1">
+        <div class="flex flex-1 items-center gap-1">
           {#each project.projectMembers as pm (pm.memberId)}
             <div
               class="group flex items-center gap-1.5 rounded-full bg-white py-1 pr-2 pl-1 text-xs shadow-sm ring-1 ring-zinc-200"
@@ -192,6 +226,16 @@
             <Plus class="h-4 w-4" />
           </button>
         </div>
+        {#if canTransferLead}
+          <button
+            type="button"
+            onclick={() => (showTransferLead = true)}
+            class="flex items-center gap-1.5 rounded-lg bg-white px-2.5 py-1.5 text-xs font-medium text-zinc-700 shadow-sm ring-1 ring-zinc-200 transition-colors hover:bg-zinc-50"
+          >
+            <ArrowRightLeft class="h-3.5 w-3.5" />
+            Transfer Lead
+          </button>
+        {/if}
       </div>
 
       <!-- Main Form -->
@@ -268,5 +312,49 @@
         </div>
       </div>
     {/if}
+
+    <!-- Transfer Lead Modal -->
+    {#if showTransferLead}
+      <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+        <div class="w-full max-w-sm rounded-xl bg-white p-5 shadow-xl">
+          <h3 class="font-semibold text-zinc-900">Transfer lead role</h3>
+          <div class="mt-4 space-y-1.5">
+            <label for="transferTarget" class="text-sm font-medium text-zinc-700"
+              >New lead member</label
+            >
+            <select
+              id="transferTarget"
+              bind:value={transferTargetId}
+              class="w-full rounded-lg border border-zinc-200 px-3 py-2 text-sm text-zinc-900"
+            >
+              <option value={null}>Select</option>
+              {#each otherMembers as pm (pm.memberId)}
+                <option value={pm.memberId}>{pm.member.name}</option>
+              {/each}
+            </select>
+          </div>
+          <div class="mt-5 flex justify-end gap-2">
+            <button
+              type="button"
+              onclick={() => {
+                showTransferLead = false;
+                transferTargetId = null;
+              }}
+              class="rounded-lg px-3 py-2 text-sm font-medium text-zinc-600 hover:bg-zinc-100"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onclick={handleTransferLead}
+              disabled={!transferTargetId}
+              class="rounded-lg bg-zinc-900 px-3 py-2 text-sm font-medium text-white hover:bg-zinc-800 disabled:opacity-50"
+            >
+              Transfer
+            </button>
+          </div>
+        </div>
+      </div>
+    {/if}
   {/if}
 </svelte:boundary>
diff --git a/src/routes/(site)/members/[slug]/+page.svelte b/src/routes/(site)/members/[slug]/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { page } from "$app/state";
   import { getPublicMember } from "$lib/data/public/index.remote";
+  import Markdown from "$lib/components/Markdown.svelte";
 
   const slug = $derived(page.params.slug ?? "");
   const member = $derived(await getPublicMember(slug));
@@ -54,6 +55,12 @@
       </div>
     </div>
 
+    {#if member.pageContent}
+      <section class="mt-12 border-t border-zinc-200 pt-8">
+        <Markdown content={member.pageContent} />
+      </section>
+    {/if}
+
     {#if member.projectMembers && member.projectMembers.length > 0}
       <section class="mt-12 border-t border-zinc-200 pt-8">
         <h2 class="mb-4 text-xl font-semibold">参加プロジェクト</h2>
