modules/projects: ページ作成日を編集可能にし一覧順を安定化

旧 utcode.net からの移行データはバルクインサートで createdAt が
近い値になり、一覧順が非決定的になっていた。createdAt を CMS 側
で編集可能にし、id をタイブレーカーに追加して安定化。公開カード
には最終更新日を併記。

Author: aster-void

src/lib/components/ProjectForm.svelte

@@ -18,6 +18,7 @@
 			repoUrl: "",
 			demoUrl: "",
 			category: "active",
+			createdAt: new Date(),
 			leadMemberId: null,
 		},
 		members = [],
@@ -99,6 +100,7 @@
 		bind:category={formData.category}
 		bind:repoUrl={formData.repoUrl}
 		bind:demoUrl={formData.demoUrl}
+		bind:createdAt={formData.createdAt}
 		{errors}
 		onNameChange={handleNameChange}
 	/>

src/lib/components/project-form/ProjectEditor.svelte

@@ -17,6 +17,7 @@
 		category = $bindable<ProjectCategory>("active"),
 		repoUrl = $bindable(""),
 		demoUrl = $bindable(""),
+		createdAt = $bindable<Date>(new Date()),
 		errors,
 		onNameChange,
 	}: {
@@ -28,11 +29,31 @@
 		category?: ProjectCategory;
 		repoUrl?: string;
 		demoUrl?: string;
+		createdAt?: Date;
 		errors: Record<string, string>;
 		onNameChange: () => void;
 	} = $props();
 
 	let showPreview = $state(false);
+
+	function toDateInputValue(d: Date): string {
+		const y = d.getFullYear();
+		const m = String(d.getMonth() + 1).padStart(2, "0");
+		const day = String(d.getDate()).padStart(2, "0");
+		return `${y}-${m}-${day}`;
+	}
+
+	function handleDateChange(event: Event & { currentTarget: HTMLInputElement }) {
+		const raw = event.currentTarget.value;
+		if (!raw) return;
+		const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(raw);
+		if (!match) return;
+		const y = Number(match[1]);
+		const m = Number(match[2]);
+		const d = Number(match[3]);
+		// Local midnight matches what the picker shows; sort precision is day-level.
+		createdAt = new Date(y, m - 1, d);
+	}
 </script>
 
 <main class="flex-1 bg-white">
@@ -93,6 +114,21 @@
 			</div>
 		</div>
 
+		<!-- Page Creation Date -->
+		<div class="mb-6 space-y-2">
+			<label for="createdAt" class="text-sm font-medium text-zinc-700">
+				ページ作成日
+				<span class="ml-1 font-normal text-zinc-400">(一覧の並び順に使われます)</span>
+			</label>
+			<input
+				type="date"
+				id="createdAt"
+				value={toDateInputValue(createdAt)}
+				onchange={handleDateChange}
+				class="rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none"
+			/>
+		</div>
+
 		<!-- Name Input -->
 		<input
 			type="text"

src/lib/data/private/projects.remote.ts

@@ -55,6 +55,7 @@ export const saveProject = command(
       repoUrl: v.nullable(v.string()),
       demoUrl: v.nullable(v.string()),
       category: categorySchema,
+      createdAt: v.optional(v.date()),
     }),
     leadMemberId: v.string(),
   }),
@@ -78,6 +79,7 @@ export const editProject = command(
       repoUrl: v.optional(v.nullable(v.string())),
       demoUrl: v.optional(v.nullable(v.string())),
       category: v.optional(categorySchema),
+      createdAt: v.optional(v.date()),
     }),
   }),
   async ({ id, data }) => {

src/lib/server/database/projects.server.ts

@@ -8,7 +8,9 @@ export type NewProject = typeof project.$inferInsert;
 
 export async function listProjects(limit: number) {
   return db.query.project.findMany({
-    orderBy: (t, { desc }) => desc(t.createdAt),
+    // id is a deterministic tiebreaker so rows sharing createdAt (e.g. bulk-migrated
+    // records) keep a stable order between requests.
+    orderBy: (t, { desc }) => [desc(t.createdAt), desc(t.id)],
     limit,
     with: {
       projectMembers: { with: { member: true } },
@@ -116,7 +118,7 @@ export async function searchProjects(query: string, limit: number) {
       like(project.description, searchPattern),
       like(project.content, searchPattern),
     ),
-    orderBy: (t, { desc }) => desc(t.createdAt),
+    orderBy: (t, { desc }) => [desc(t.createdAt), desc(t.id)],
     limit,
     with: {
       projectMembers: { with: { member: true } },
@@ -138,7 +140,7 @@ export async function getRecentProjects(limit: number) {
 
 export async function listRecentProjects(limit: number) {
   return db.query.project.findMany({
-    orderBy: (t, { desc }) => desc(t.createdAt),
+    orderBy: (t, { desc }) => [desc(t.createdAt), desc(t.id)],
     limit,
     with: {
       projectMembers: { with: { member: true } },

src/lib/shared/models/types.ts

@@ -22,6 +22,7 @@ export type ProjectData = {
   repoUrl: string;
   demoUrl: string;
   category: ProjectCategory;
+  createdAt: Date;
   leadMemberId: string | null;
 };
 

src/routes/(admin)/admin/projects/edit/[id]/+page.svelte

@@ -41,6 +41,7 @@
 		repoUrl: string;
 		demoUrl: string;
 		category: ProjectCategory;
+		createdAt: Date;
 		leadMemberId: string | null;
 	}) {
 		if (!project) return;
@@ -67,6 +68,7 @@
 					repoUrl: data.repoUrl || null,
 					demoUrl: data.demoUrl || null,
 					category: data.category,
+					createdAt: data.createdAt,
 				},
 			});
 			toast.show("Saved", "success");
@@ -219,6 +221,7 @@
 						repoUrl: project.repoUrl ?? "",
 						demoUrl: project.demoUrl ?? "",
 						category: project.category,
+						createdAt: project.createdAt,
 						leadMemberId: null,
 					}}
 					{members}

src/routes/(admin)/admin/projects/new/+page.svelte

@@ -20,6 +20,7 @@
 		repoUrl: string;
 		demoUrl: string;
 		category: ProjectCategory;
+		createdAt: Date;
 		leadMemberId: string | null;
 	}) {
 		if (!data.leadMemberId) return;
@@ -35,6 +36,7 @@
 					repoUrl: data.repoUrl || null,
 					demoUrl: data.demoUrl || null,
 					category: data.category,
+					createdAt: data.createdAt,
 				},
 				leadMemberId: data.leadMemberId,
 			});

src/routes/(site)/projects/+page.svelte

@@ -38,6 +38,16 @@
 		const base = data.kindParam ? `/projects?category=${data.kindParam}` : "/projects";
 		return pageNum === 1 ? base : `${base}${data.kindParam ? "&" : "?"}page=${pageNum}`;
 	}
+
+	const updatedAtFormatter = new Intl.DateTimeFormat("ja-JP", {
+		year: "numeric",
+		month: "long",
+		day: "numeric",
+	});
+
+	function formatUpdatedAt(d: Date): string {
+		return updatedAtFormatter.format(d);
+	}
 </script>
 
 <svelte:head>
@@ -141,6 +151,9 @@
 							</span>
 						{/if}
 					</div>
+					<p class="mt-4 font-[JetBrains_Mono,monospace] text-[11px] text-zinc-400">
+						最終更新: {formatUpdatedAt(project.updatedAt)}
+					</p>
 				</a>
 			{/each}
 		</div>