From f026c48fd2137336f3a5e0d9bd082d0ff0eda71f Mon Sep 17 00:00:00 2001
From: Anirudh Oppiliappan <x@icyphox.sh>
Date: Wed, 26 Feb 2025 14:06:52 +0200
Subject: [PATCH] more finesse

---
 appview/pages/templates/layouts/repobase.html |  6 +-
 appview/pages/templates/layouts/topbar.html   | 84 +++++++++++--------
 appview/pages/templates/repo/index.html       |  2 +-
 .../pages/templates/repo/issues/issue.html    | 16 ++--
 appview/pages/templates/repo/log.html         | 47 +++++++++--
 5 files changed, 103 insertions(+), 52 deletions(-)

diff --git a/appview/pages/templates/layouts/repobase.html b/appview/pages/templates/layouts/repobase.html
index f1405742..5dd75561 100644
--- a/appview/pages/templates/layouts/repobase.html
+++ b/appview/pages/templates/layouts/repobase.html
@@ -8,7 +8,7 @@
                 class="no-underline hover:underline"
                 >{{ .RepoInfo.OwnerWithAt }}</a
             >
-            /
+            <span class="select-none">/</span>
             <a
                 href="/{{ .RepoInfo.FullName }}"
                 class="no-underline hover:underline"
@@ -33,11 +33,11 @@
                     {{ $value := index $item 1 }}
                     <a
                         href="/{{ $.RepoInfo.FullName }}{{ $value }}"
-                        class="relative -mr-px group no-underline"
+                        class="relative -mr-px group no-underline hover:no-underline"
                         hx-boost="true"
                     >
                         <div
-                            class="px-4 py-2 mr-1 text-black min-w-[80px] text-center relative group-hover:bg-gray-200 rounded-t 
+                            class="px-4 py-2 mr-1 text-black min-w-[80px] text-center relative group-hover:bg-gray-200 rounded-t
                          {{ if eq $.Active $key }}
                                 {{ $activeTabStyles }}
                             {{ end }}"
diff --git a/appview/pages/templates/layouts/topbar.html b/appview/pages/templates/layouts/topbar.html
index 47b7af48..978faea9 100644
--- a/appview/pages/templates/layouts/topbar.html
+++ b/appview/pages/templates/layouts/topbar.html
@@ -1,35 +1,53 @@
 {{ define "layouts/topbar" }}
-  {{ $linkstyle := "text-black hover:text-gray-600 no-underline" }}
-  <nav class="space-x-4 mb-4 px-6 py-2 rounded bg-white">
-    <div class="container flex justify-between p-0">
-      <div id="left-items">
-        <a href="/" hx-boost="true" class="{{ $linkstyle }} flex gap-2">
-          <i class="w-6 h-6" data-lucide="tangent"></i>
-          tangled.sh
-        </a>
-      </div>
-      <div id="right-items" class="flex gap-2">
-        {{ with .LoggedInUser }}
-        <a href="/repo/new" hx-boost="true" class="{{ $linkstyle }}">
-          <i class="w-6 h-6" data-lucide="plus"></i>
-        </a>
-        <details class="relative inline-block text-left">
-          <summary class="{{ $linkstyle }} cursor-pointer list-none">
-            {{ didOrHandle .Did .Handle }}
-          </summary>
-          <div class="absolute flex flex-col right-0 mt-4 p-4 rounded w-48 bg-white border border-gray-200 z-50">
-            <a href="/{{ didOrHandle .Did .Handle }}"class="{{ $linkstyle }}">profile</a>
-            <a href="/knots"class="{{ $linkstyle }}">knots</a>
-            <a href="/settings"class="{{ $linkstyle }}">settings</a>
-            <a href="/logout" class="text-red-400 hover:text-red-700 no-underline">logout</a>
-          </div>
-        </details>
-        {{ else }}
-        <a href="/login" class="{{ $linkstyle }}">
-          login
-        </a>
-        {{ end }}
-      </div>
-    </div>
-  </nav>
+    {{ $linkstyle := "text-black hover:text-gray-600 no-underline" }}
+    <nav
+        class="space-x-4 mb-4 px-6 py-2 rounded bg-white shadow-[0_4px_10px_-1px_rgba(0,0,0,0.1)]"
+    >
+        <div class="container flex justify-between p-0">
+            <div id="left-items">
+                <a href="/" hx-boost="true" class="{{ $linkstyle }} flex gap-2">
+                    <i class="w-6 h-6" data-lucide="tangent"></i>
+                    tangled.sh
+                </a>
+            </div>
+            <div id="right-items" class="flex gap-2">
+                {{ with .LoggedInUser }}
+                    <a
+                        href="/repo/new"
+                        hx-boost="true"
+                        class="{{ $linkstyle }}"
+                    >
+                        <i class="w-6 h-6" data-lucide="plus"></i>
+                    </a>
+                    <details class="relative inline-block text-left">
+                        <summary
+                            class="{{ $linkstyle }} cursor-pointer list-none"
+                        >
+                            {{ didOrHandle .Did .Handle }}
+                        </summary>
+                        <div
+                            class="absolute flex flex-col right-0 mt-4 p-4 rounded w-48 bg-white border border-gray-200 z-50"
+                        >
+                            <a
+                                href="/{{ didOrHandle .Did .Handle }}"
+                                class="{{ $linkstyle }}"
+                                >profile</a
+                            >
+                            <a href="/knots" class="{{ $linkstyle }}">knots</a>
+                            <a href="/settings" class="{{ $linkstyle }}"
+                                >settings</a
+                            >
+                            <a
+                                href="/logout"
+                                class="text-red-400 hover:text-red-700 no-underline"
+                                >logout</a
+                            >
+                        </div>
+                    </details>
+                {{ else }}
+                    <a href="/login" class="{{ $linkstyle }}"> login </a>
+                {{ end }}
+            </div>
+        </div>
+    </nav>
 {{ end }}
diff --git a/appview/pages/templates/repo/index.html b/appview/pages/templates/repo/index.html
index 556b9210..3b17fbcf 100644
--- a/appview/pages/templates/repo/index.html
+++ b/appview/pages/templates/repo/index.html
@@ -38,7 +38,7 @@
             </select>
             <a
                 href="/{{ .RepoInfo.FullName }}/commits/{{ .Ref }}"
-                class="btn ml-2 no-underline flex items-center gap-2"
+                class="ml-2 no-underline flex items-center gap-2 text-sm uppercase font-bold"
             >
                 <i class="w-4 h-4" data-lucide="logs"></i>
                 {{ .TotalCommits }}
diff --git a/appview/pages/templates/repo/issues/issue.html b/appview/pages/templates/repo/issues/issue.html
index 03bd077e..2e1602ce 100644
--- a/appview/pages/templates/repo/issues/issue.html
+++ b/appview/pages/templates/repo/issues/issue.html
@@ -43,23 +43,27 @@
         </div>
 
         {{ if .Issue.Body }}
-            <article id="body" class="mt-8 border border-gray-300 px-4 py-6">
+            <article id="body" class="mt-8">
                 {{ .Issue.Body | escapeHtml }}
             </article>
         {{ end }}
     </section>
+{{ end }}
 
-    <hr class="my-10" />
-
+{{ define "repoAfter" }}
     <section id="comments" class="mt-8 space-y-4 relative">
         {{ range $index, $comment := .Comments }}
             <div
                 id="comment-{{ .CommentId }}"
-                class="border border-gray-200 p-4 relative"
+                class="rounded-sm bg-white p-4 relative"
             >
-                {{ if ne $index 0 }}
+                {{ if eq $index 0 }}
+                    <div
+                        class="absolute left-8 -top-8 w-px h-8 bg-gray-300"
+                    ></div>
+                {{ else }}
                     <div
-                        class="absolute left-8 -top-4 w-px h-4 bg-gray-200"
+                        class="absolute left-8 -top-4 w-px h-4 bg-gray-300"
                     ></div>
                 {{ end }}
                 <div class="flex items-center gap-2 mb-2">
diff --git a/appview/pages/templates/repo/log.html b/appview/pages/templates/repo/log.html
index c14bd1b4..94162146 100644
--- a/appview/pages/templates/repo/log.html
+++ b/appview/pages/templates/repo/log.html
@@ -1,21 +1,50 @@
 {{ define "title" }}commits &middot; {{ .RepoInfo.FullName }}{{ end }}
 
 {{ define "repoContent" }}
-    <h1>Commits</h1>
-    <h1>Commits</h1>
+    <section id="commit-message">
+        {{ $commit := index .Commits 0 }}
+        {{ $messageParts := splitN $commit.Message "\n\n" 2 }}
+        <div>
+            <p class="pb-5">{{ index $messageParts 0 }}</p>
+            {{ if gt (len $messageParts) 1 }}
+                <p class="mt-1 text-sm cursor-text pb-5">
+                    {{ nl2br (unwrapText (index $messageParts 1)) }}
+                </p>
+            {{ end }}
+        </div>
+
+        <div class="text-sm text-gray-500">
+            <span class="font-mono">
+                <a
+                    href="/{{ $.RepoInfo.FullName }}/commit/{{ $commit.Hash.String }}"
+                    class="text-gray-500 no-underline hover:underline"
+                    >{{ slice $commit.Hash.String }}</a
+                >
+            </span>
+            <span class="mx-2 before:content-['·'] before:select-none"></span>
+            <span>
+                <a
+                    href="mailto:{{ $commit.Author.Email }}"
+                    class="text-gray-500 no-underline hover:underline"
+                    >{{ $commit.Author.Name }}</a
+                >
+            </span>
+            <div
+                class="inline-block px-1 select-none after:content-['·']"
+            ></div>
+            <span>{{ timeFmt $commit.Author.When }}</span>
+        </div>
+    </section>
 {{ end }}
 
 {{ define "repoAfter" }}
     <main>
-        <div id="commit-log" class="flex-1">
+        <div id="commit-log" class="flex-1 relative">
+            <div class="absolute left-8 top-0 bottom-0 w-px bg-gray-300"></div>
             {{ range .Commits }}
                 <div class="flex flex-row justify-between items-center">
-                    <i
-                        class="w-5 h-5 mt-5 text-gray-400 align-middle"
-                        data-lucide="git-commit-horizontal"
-                    ></i>
                     <div
-                        class="relative w-full px-4 py-4 mt-5 hover:bg-gray-50 border border-gray-200 bg-white"
+                        class="relative w-full px-4 py-4 mt-5 hover:bg-gray-50 rounded-sm bg-white"
                     >
                         <div id="commit-message">
                             {{ $messageParts := splitN .Message "\n\n" 2 }}
@@ -51,7 +80,7 @@
                             </div>
                         </div>
 
-                        <div class="text-xs text-gray-500">
+                        <div class="text-xs text-gray-500 mt-3">
                             <span class="font-mono">
                                 <a
                                     href="/{{ $.RepoInfo.FullName }}/commit/{{ .Hash.String }}"
-- 
knotmirror 0.0.1