From 662dc71ede04226fa0e4126d2ae62bfc7f6e36a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Jaenisch?= <andre.jaenisch@posteo.de>
Date: Sat, 15 Jun 2024 11:59:49 +0200
Subject: [PATCH] feat: turn Vervis information into markup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This comes close to the design specification already. But I lack some
information in the Vervis responses.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
---
 src/lib/components/templates/Profile.svelte | 114 ++++++++++++++------
 1 file changed, 84 insertions(+), 30 deletions(-)

diff --git a/src/lib/components/templates/Profile.svelte b/src/lib/components/templates/Profile.svelte
index b0c4daf..5b67104 100644
--- a/src/lib/components/templates/Profile.svelte
+++ b/src/lib/components/templates/Profile.svelte
@@ -13,7 +13,14 @@ You should have received a copy of the GNU Affero General Public License along w
 
 <script>
 	import { _, date } from 'svelte-i18n';
-	import { NorthStar24, Star16 } from 'svelte-octicons';
+	import {
+		EyeClosed16,
+		NorthStar24,
+		Repo24,
+		RepoForked16,
+		Star16,
+		TriangleDown16
+	} from 'svelte-octicons';
 
 	import Avatar from '../atoms/Avatar.svelte';
 	import BlockOrReport from '../atoms/BlockOrReport.svelte';
@@ -85,35 +92,82 @@ You should have received a copy of the GNU Affero General Public License along w
 			<h2 class="h2 font-semibold leading-tight text-base px-4">
 				{$_('page.profile.projects.heading')}
 			</h2>
-			<p class="px-4">
-				{$_('page.profile.projects.empty')}
-				{@html $_('page.profile.projects.add_or_import', {
-					values: {
-						addElementOpen: '<a class="anchor" href="#">',
-						addElementClose: '</a>',
-						importElementOpen: `<a class="anchor" href="/projects/import/" data-sb-kind=${sb}>`,
-						importElementClose: '</a>'
-					}
-				})}
-			</p>
-			<div>
-				<p>The following is DEBUG information and will be removed in the near future.</p>
-				{#if data?.user}
-					<div>
-						<b>Person</b>
-						<pre>{JSON.stringify(data.user.person, null, 2)}</pre>
-					</div>
-					<div>
-						<b>Followings</b>
-						<pre>{JSON.stringify(data.user.followings, null, 2)}</pre>
-					</div>
-					<div>
-						<b>Followings mapped</b>
-						<p>These are the contents of the items in the previous dump.</p>
-						<pre>{JSON.stringify(data.user.followingsMap, null, 2)}</pre>
-					</div>
-				{/if}
-			</div>
+			{#if data?.user?.followingsMap}
+				<ul>
+					{#each data.user.followingsMap as following}
+						{#if following.type === 'Project'}
+							<li>
+								<div class="flex bg-white border border-surface-100 p-4">
+									<!-- Left -->
+									<div class="flex flex-col flex-grow ps-10">
+										<!-- Name + Icon -->
+										<div class="flex -ms-10">
+											<Repo24 fill="currentColor" />
+											{following.name}
+										</div>
+										<!-- Description -->
+										<!-- Compensate padding with negative margin -->
+										<div class="flex -ms-4">
+											{following.summary}
+										</div>
+										<!-- Tags -->
+										<div class="flex"></div>
+									</div>
+									<!-- Right -->
+									<div class="flex flex-col">
+										<!-- Star Fork Watch -->
+										<div class="flex gap-4">
+											<button type="button" class="btn-icon border rounded-none">
+												<RepoForked16 fill="currentColor" />
+											</button>
+											<button type="button" class="btn-icon border rounded-none">
+												<Star16 fill="currentColor" />
+											</button>
+											<button type="button" class="btn-icon border rounded-none">
+												<EyeClosed16 fill="currentColor" />
+												<TriangleDown16 fill="currentColor" />
+											</button>
+										</div>
+										<!-- FIXME: Mark up as translatable once I figured out the
+										     timestamp needed here -->
+										<div class="self-end">Updated somewhen</div>
+									</div>
+								</div>
+							</li>
+						{/if}
+					{/each}
+				</ul>
+				<div>
+					<p>The following is DEBUG information and will be removed in the near future.</p>
+					{#if data?.user}
+						<details>
+							<summary>Person</summary>
+							<pre>{JSON.stringify(data.user.person, null, 2)}</pre>
+						</details>
+						<details>
+							<summary>Followings</summary>
+							<pre>{JSON.stringify(data.user.followings, null, 2)}</pre>
+						</details>
+						<details>
+							<summary>Followings mapped</summary>
+							<p>These are the contents of the items in the previous dump.</p>
+							<pre>{JSON.stringify(data.user.followingsMap, null, 2)}</pre>
+						</details>
+					{/if}
+				</div>
+			{:else}
+				<p class="px-4">
+					{$_('page.profile.projects.empty')}
+					{@html $_('page.profile.projects.add_or_import', {
+						values: {
+							addElementOpen: '<a class="anchor" href="#">',
+							addElementClose: '</a>',
+							importElementOpen: `<a class="anchor" href="/projects/import/" data-sb-kind=${sb}>`,
+							importElementClose: '</a>'
+						}
+					})}
+				</p>
+			{/if}
 		</div>
 	</div>
 	<!-- History -->