feat: display commits as activity

I also learned how to pluralise. I'm curious whether Weblate can handle
that. It follows ICU standard at least.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>

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 {
+		Copy16,
+		FileDirectory16,
+		GitCommit24,
+		NorthStar24,
+		Repo24,
+		Star16
+	} from 'svelte-octicons';
 
 	import Avatar from '../atoms/Avatar.svelte';
 	import BlockOrReport from '../atoms/BlockOrReport.svelte';
@@ -157,6 +164,16 @@ You should have received a copy of the GNU Affero General Public License along w
 							<p>These are the contents of the items in the previous dump.</p>
 							<pre>{JSON.stringify(data.user.collaboratorsMap, null, 2)}</pre>
 						</details>
+						<details>
+							<summary>Commits</summary>
+							<p>These are the contents of the items in the previous dump.</p>
+							<pre>{JSON.stringify(data.user.commits, null, 2)}</pre>
+						</details>
+						<details>
+							<summary>Commits mapped</summary>
+							<p>These are the contents of the items in the previous dump.</p>
+							<pre>{JSON.stringify(data.user.commitsMap, null, 2)}</pre>
+						</details>
 					{/if}
 				</div>
 			{:else}
@@ -181,31 +198,114 @@ You should have received a copy of the GNU Affero General Public License along w
 				{$_('page.profile.history.heading')}
 			</h2>
 			<ul>
-				<li class="flex flex-col ltr:border-l-2 rtl:border-r-2 ms-2">
+				{#if data?.user?.commitsMap}
 					<!-- Commit day -->
-					<span class="relative">
+					<li>
-						<span class="absolute ltr:-left-3 rtl:-right-3">
+						<!-- Indent the whole block by 6 -->
-							<NorthStar24 fill="currentColor" />
+						<div class="flex flex-col gap-6 ps-6">
+							<!-- Commit date -->
+							<!-- But align the icon to History heading -->
+							<div class="flex gap-6 -ms-6">
+								<!-- I don't group commits by date at the moment. -->
+								<span class="bg-white">
+									<GitCommit24 fill="currentColor" />
+								</span>
+								<!-- And align the date with the commits below -->
+								<span class="flex gap-6 -ms-3">
+									<!-- Manually remove the failed commit map fetch from the equation -->
+									<!-- Pluralisation: https://lokalise.com/blog/svelte-i18n/#Pluralization_with_Svelte_i18n -->
+									{$date(new Date(data.user.commitsMap[0].created))} - {$_(
+										'page.profile.history.activities.commits.number',
+										{ values: { number: data.user.commitsMap.length - 1 } }
+									)}
+									<span class="flex gap-2">
+										<Repo24 fill="currentColor" />
+										<!-- Pick a repo with known commits -->
+										{data.user.followingsMap[3].name}
+									</span>
+								</span>
+							</div>
+							<!-- Commits -->
+							<ul>
+								{#each data.user.commitsMap as commit}
+									{#if commit.name}
+										<li class="ltr:border-l-2 rtl:border-r-2 ms-2">
+											<!-- Commit body -->
+											<div class="flex w-full justify-between gap-4 border border-surface-100">
+												<!-- Detail text -->
+												<div class="flex flex-col flex-1">
+													<span class="text-surface-500">{commit.name}</span>
+													<span class="text-surface-400"
+														>{$_('page.profile.history.activities.commits.relative_time', {
+															values: { relativeTime: $date(new Date(commit.committed)) }
+														})}</span
+													>
+												</div>
+												<!-- SHA -->
+												<div class="flex">
+													<button
+														type="button"
+														class="btn-icon border border-surface-100 rounded bg-white self-start"
+													>
+														<Copy16 fill="currentColor" />
+														<span class="sr-only"
+															>{$_('page.profile.history.activities.commits.actions.copy')}</span
+														>
+													</button>
+													<!-- Since I cannot successfully define font-mono here, enforce a minimum width for equally sized buttons -->
+													<button
+														type="button"
+														class="btn border border-surface-100 rounded bg-white min-w-32 self-start"
+													>
+														{commit.hash.slice(0, 8)}
+													</button>
+												</div>
+												<!-- Browse -->
+												<div>
+													<button
+														type="button"
+														class="btn-icon border border-surface-100 rounded bg-white"
+													>
+														<FileDirectory16 fill="currentColor" />
+														<span class="sr-only"
+															>{$_('page.profile.history.activities.commits.actions.browse')}</span
+														>
+													</button>
+												</div>
+											</div>
+										</li>
+									{/if}
+								{/each}
+							</ul>
+						</div>
+					</li>
+				{:else}
+					<li class="flex flex-col ltr:border-l-2 rtl:border-r-2 ms-2">
+						<!-- Commit day -->
+						<span class="relative">
+							<span class="absolute ltr:-left-3 rtl:-right-3">
+								<NorthStar24 fill="currentColor" />
+							</span>
+							<span class="ms-4">
+								{$date(new Date('2023-04-23'))} - {$_(
+									'page.profile.history.activities.setup.summary'
+								)}
+							</span>
 						</span>
-						<span class="ms-4">
+						<!-- Commits -->
-							{$date(new Date('2023-04-23'))} - {$_(
+						<span class="ms-6 mt-8">
-								'page.profile.history.activities.setup.summary'
+							<span class="border box-decoration-clone px-4 py-2 leading-10">
-							)}
+								{$_('page.profile.history.activities.setup.description', {
+									values: {
+										created_with: data.user.created_with,
+										instance: data.user.instance,
+										username: data.user.username
+									}
+								})}
+							</span>
 						</span>
-					</span>
+					</li>
-					<!-- Commits -->
+				{/if}
-					<span class="ms-6 mt-8">
-						<span class="border box-decoration-clone px-4 py-2 leading-10">
-							{$_('page.profile.history.activities.setup.description', {
-								values: {
-									created_with: data.user.created_with,
-									instance: data.user.instance,
-									username: data.user.username
-								}
-							})}
-						</span>
-					</span>
-				</li>
 			</ul>
 		</div>
 	</div>

src/lib/i18n/locales/bg.json

@@ -66,6 +66,14 @@
 			"heading": "",
 			"history": {
 				"activities": {
+					"commits": {
+						"actions": {
+							"browse": "",
+							"copy": ""
+						},
+						"number": "",
+						"relative_time": ""
+					},
 					"setup": {
 						"description": "",
 						"summary": ""

src/lib/i18n/locales/de.json

@@ -66,6 +66,14 @@
 			"heading": "Profil für",
 			"history": {
 				"activities": {
+					"commits": {
+						"actions": {
+							"browse": "",
+							"copy": ""
+						},
+						"number": "",
+						"relative_time": ""
+					},
 					"setup": {
 						"description": "Das F2-Konto @{username}@{instance} wurde erfolgreich innerhalb von {created_with} erstellt",
 						"summary": "Kontoeinstellungen"

src/lib/i18n/locales/en.json

@@ -66,6 +66,14 @@
 			"heading": "Profile for",
 			"history": {
 				"activities": {
+					"commits": {
+						"actions": {
+							"browse": "Browse",
+							"copy": "Copy"
+						},
+						"number": "{number, plural, one{# commit} other{# commits}}",
+						"relative_time": "committed {relativeTime}"
+					},
 					"setup": {
 						"description": "The F2 account @{username}@{instance} was successfully set up within {created_with}",
 						"summary": "account set up"

src/lib/i18n/locales/he.json

@@ -66,6 +66,14 @@
 			"heading": "הפרופיל של",
 			"history": {
 				"activities": {
+					"commits": {
+						"actions": {
+							"browse": "",
+							"copy": ""
+						},
+						"number": "",
+						"relative_time": ""
+					},
 					"setup": {
 						"description": "",
 						"summary": ""

src/lib/i18n/locales/pl.json

@@ -66,6 +66,14 @@
 			"heading": "Profil dla",
 			"history": {
 				"activities": {
+					"commits": {
+						"actions": {
+							"browse": "",
+							"copy": ""
+						},
+						"number": "",
+						"relative_time": ""
+					},
 					"setup": {
 						"description": "Konto F2 @{username}@{instance} zostało poprawnie ustawione z {created_with}",
 						"summary": "ustawienia konta"