new data structure

src/routes/projects_new/[projectId]/+page.svelte

@@ -5,31 +5,75 @@
 	let columnsData: BranchLane[] = [
 		{
 			id: 'c1',
-			name: 'TODO',
-			items: [
-				{ id: 1, name: 'item41' },
-				{ id: 2, name: 'item42' },
-				{ id: 3, name: 'item43' },
-				{ id: 4, name: 'item44' },
-				{ id: 5, name: 'item45' },
-				{ id: 6, name: 'item46' },
-				{ id: 7, name: 'item47' },
-				{ id: 8, name: 'item48' },
-				{ id: 9, name: 'item49' }
+			name: 'new user api',
+			hunks: [
+				{
+					id: 'h1',
+					filePath: 'src/foo.py',
+					description: 'add new user api',
+					diff: '...',
+					modified: new Date('2011-04-11T10:20:30Z'),
+					commitId: null
+				},
+				{
+					id: 'h2',
+					filePath: 'src/foo.py',
+					description: 'refactor things',
+					diff: '...',
+					modified: new Date('2011-04-11T10:22:30Z'),
+					commitId: null
+				},
+				{
+					id: 'h3',
+					filePath: 'src/foo.py',
+					description: 'fix bug',
+					diff: '...',
+					modified: new Date('2011-04-11T10:29:30Z'),
+					commitId: null
+				},
+				{
+					id: 'h4',
+					filePath: 'src/bar.py',
+					description: 'something else',
+					diff: '...',
+					modified: new Date('2011-04-11T10:27:30Z'),
+					commitId: null
+				},
+				{
+					id: 'h5',
+					filePath: 'src/bar.py',
+					description: 'database migration',
+					diff: '...',
+					modified: new Date('2011-04-11T10:28:30Z'),
+					commitId: null
+				},
+				{
+					id: 'h6',
+					filePath: 'src/baz.py',
+					description: 'messing around',
+					diff: '...',
+					modified: new Date('2011-04-11T10:20:30Z'),
+					commitId: null
+				},
+				{
+					id: 'h7',
+					filePath: '.env',
+					description: 'development api keys',
+					diff: '...',
+					modified: new Date('2011-04-11T10:28:30Z'),
+					commitId: null
+				}
 			]
 		},
 		{
 			id: 'c2',
-			name: 'DOING',
-			items: [
-				{ id: 10, name: 'item50' },
-				{ id: 11, name: 'item51' }
-			]
+			name: 'fix random bug',
+			hunks: []
 		},
 		{
 			id: 'c3',
-			name: 'DONE',
-			items: [{ id: 13, name: 'item52' }]
+			name: 'stuff for later',
+			hunks: []
 		}
 	];
 	function handleBoardUpdated(newColumnsData: BranchLane[]) {

src/routes/projects_new/[projectId]/Board.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { flip } from 'svelte/animate';
 	import { dndzone } from 'svelte-dnd-action';
-	import type { FileCard, BranchLane } from './board';
+	import type { Hunk, BranchLane } from './board';
 	import Lane from './Lane.svelte';
 	const flipDurationMs = 300;
 
@@ -14,8 +14,8 @@
 	function handleDndFinalizeColumns(e: { detail: { items: BranchLane[] } }) {
 		onFinalUpdate(e.detail.items);
 	}
-	function handleItemFinalize(columnIdx: number, newItems: FileCard[]) {
-		columns[columnIdx].items = newItems;
+	function handleItemFinalize(columnIdx: number, newHunks: Hunk[]) {
+		columns[columnIdx].hunks = newHunks;
 		onFinalUpdate([...columns]);
 	}
 </script>
@@ -27,12 +27,12 @@
 	on:consider={handleDndConsiderColumns}
 	on:finalize={handleDndFinalizeColumns}
 >
-	{#each columns as { id, name, items }, idx (id)}
+	{#each columns as { id, name, items, hunks }, idx (id)}
 		<div
 			class="float-left m-2 flex h-full w-64 border border-zinc-700 bg-zinc-900/50 p-2"
 			animate:flip={{ duration: flipDurationMs }}
 		>
-			<Lane {name} {items} onDrop={(newItems) => handleItemFinalize(idx, newItems)} />
+			<Lane {name} {hunks} onDrop={(newHunks) => handleItemFinalize(idx, newHunks)} />
 		</div>
 	{/each}
 </section>

src/routes/projects_new/[projectId]/Lane.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
 	import { flip } from 'svelte/animate';
 	import { dndzone } from 'svelte-dnd-action';
-	import type { FileCard } from './board';
+	import type { Hunk } from './board';
 	const flipDurationMs = 150;
 	export let name: string;
-	export let items: FileCard[];
-	export let onDrop: (items: FileCard[]) => void;
+	export let hunks: Hunk[];
+	export let onDrop: (items: Hunk[]) => void;
 
-	function handleDndConsiderCards(e: { detail: { items: FileCard[] } }) {
+	function handleDndConsiderCards(e: { detail: { items: Hunk[] } }) {
 		console.warn('got consider', name);
-		items = e.detail.items;
+		hunks = e.detail.items;
 	}
-	function handleDndFinalizeCards(e: { detail: { items: FileCard[] } }) {
+	function handleDndFinalizeCards(e: { detail: { items: Hunk[] } }) {
 		onDrop(e.detail.items);
 	}
 </script>
@@ -23,16 +23,16 @@
 	<div
 		class="overflow-y-scroll"
 		style="height: calc(100% - 2.5em);"
-		use:dndzone={{ items, flipDurationMs, zoneTabIndex: -1 }}
+		use:dndzone={{ items: hunks, flipDurationMs, zoneTabIndex: -1 }}
 		on:consider={handleDndConsiderCards}
 		on:finalize={handleDndFinalizeCards}
 	>
-		{#each items as item (item.id)}
+		{#each hunks as hunk (hunk.id)}
 			<div
 				animate:flip={{ duration: flipDurationMs }}
 				class="my-2 flex h-14 w-full items-center justify-center rounded border border-zinc-600 bg-zinc-700"
 			>
-				{item.name}
+				{hunk.description}
 			</div>
 		{/each}
 	</div>

src/routes/projects_new/[projectId]/board.ts

@@ -1,10 +1,14 @@
-export type FileCard = {
-	id: number;
-	name: string;
+export type Hunk = {
+	id: string;
+	filePath: string;
+	description: string;
+	diff: string;
+	modified: Date;
+	commitId: string | null;
 };
 
 export type BranchLane = {
 	id: string;
 	name: string;
-	items: FileCard[];
+	hunks: Hunk[];
 };