From 9566898415cd5ff0cfb7b4bb0d57944c403ffbed Mon Sep 17 00:00:00 2001
From: Anirudh Oppiliappan <x@icyphox.sh>
Date: Fri, 14 Feb 2025 16:07:00 +0200
Subject: [PATCH] more htmxing

---
 appview/pages/templates/knot.html           |  4 +-
 appview/pages/templates/knots.html          | 67 ++++++++++++---------
 appview/pages/templates/layouts/topbar.html | 57 +++++++++++++-----
 appview/pages/templates/new-repo.html       | 23 ++++---
 appview/pages/templates/repo/settings.html  | 30 ++++-----
 appview/pages/templates/settings/keys.html  | 33 +++++-----
 appview/pages/templates/user/login.html     |  7 +--
 input.css                                   | 22 +++----
 8 files changed, 141 insertions(+), 102 deletions(-)

diff --git a/appview/pages/templates/knot.html b/appview/pages/templates/knot.html
index e8eb5aa9..6539382e 100644
--- a/appview/pages/templates/knot.html
+++ b/appview/pages/templates/knot.html
@@ -14,7 +14,7 @@
       <code>registered on: {{.Registration.Registered}}</code>
       {{ else }}
       <code>pending registration</code>
-      <button hx-post="/knots/{{.Domain}}/init">initialize</button>
+      <button class="btn my-2" hx-post="/knots/{{.Domain}}/init" hx-swap="none">initialize</button>
       {{ end }}
     </p>
 
@@ -34,7 +34,7 @@
     <form hx-put="/knots/{{.Registration.Domain}}/member">
         <label for="member">did or handle:</label>
         <input type="text" id="member" name="member" required>
-        <button type="text">add member</button>
+        <button class="btn my-2" type="text">add member</button>
     </form>
     {{ end }}
 {{end}}
diff --git a/appview/pages/templates/knots.html b/appview/pages/templates/knots.html
index 6d8aaa67..474b88aa 100644
--- a/appview/pages/templates/knots.html
+++ b/appview/pages/templates/knots.html
@@ -1,45 +1,56 @@
-{{define "title"}}knots{{end}}
+{{ define "title" }}knots{{ end }}
 
-{{define "content"}}
+{{ define "content" }}
     <h1>knots</h1>
 
     <h2>register</h2>
     put in a domain, and use the key while booting up your knotserver
     <form hx-post="/knots/key">
         <label for="domain">domain:</label>
-        <input type="text" id="domain" name="domain" required>
-        <button type="text">generate key</button>
+        <input type="text" id="domain" name="domain" required />
+        <button class="btn my-2" type="text">generate key</button>
     </form>
 
     <h3>my knots</h3>
     <ul id="my-knots">
-        {{range .Registrations}}
-        {{ if .Registered }}
-            <li>
-                <code>domain: <a href="/knots/{{.Domain}}">{{.Domain}}</a></code><br>
-                <code>opened by: {{.ByDid}}</code><br>
-                <code>on: {{.Created}}</code><br>
-                <code>registered on: {{.Registered}}</code>
-            </li>
-        {{ end }}
-        {{else}}
+        {{ range .Registrations }}
+            {{ if .Registered }}
+                <li>
+                    <code
+                        >domain:
+                        <a href="/knots/{{ .Domain }}">{{ .Domain }}</a></code
+                    ><br />
+                    <code>opened by: {{ .ByDid }}</code><br />
+                    <code>on: {{ .Created }}</code><br />
+                    <code>registered on: {{ .Registered }}</code>
+                </li>
+            {{ end }}
+        {{ else }}
             <p>you don't have any knots yet</p>
-        {{end}}
+        {{ end }}
     </ul>
     <h3>pending registrations</h3>
     <ul id="pending-registrations">
-        {{range .Registrations}}
-        {{ if not .Registered }}
-            <li>
-                <code>domain: <a href="/knots/{{.Domain}}">{{.Domain}}</a></code><br>
-                <code>opened by: {{.ByDid}}</code><br>
-                <code>on: {{.Created}}</code><br>
-                <code>pending registration</code>
-                <button hx-post="/knots/{{.Domain}}/init">initialize</button>
-            </li>
-        {{ end }}
-        {{else}}
+        {{ range .Registrations }}
+            {{ if not .Registered }}
+                <li>
+                    <code
+                        >domain:
+                        <a href="/knots/{{ .Domain }}">{{ .Domain }}</a></code
+                    ><br />
+                    <code>opened by: {{ .ByDid }}</code><br />
+                    <code>on: {{ .Created }}</code><br />
+                    <code>pending registration</code>
+                    <button
+                        class="btn my-2"
+                        hx-post="/knots/{{ .Domain }}/init"
+                    >
+                        initialize
+                    </button>
+                </li>
+            {{ end }}
+        {{ else }}
             <p>no registrations yet</p>
-        {{end}}
+        {{ end }}
     </ul>
-{{end}}
+{{ end }}
diff --git a/appview/pages/templates/layouts/topbar.html b/appview/pages/templates/layouts/topbar.html
index 1d1771bb..b566200d 100644
--- a/appview/pages/templates/layouts/topbar.html
+++ b/appview/pages/templates/layouts/topbar.html
@@ -1,19 +1,48 @@
 {{ define "layouts/topbar" }}
-
-{{ with .LoggedInUser }}
-<nav>
-    <a href="/">timeline</a>&nbsp;·
-    <a href="/settings">settings</a>&nbsp;·
-    <a href="/knots">knots</a>&nbsp;·
-    <a href="/repo/new">add repos</a>&nbsp;·
-    {{ if .Handle }}
-    <a href="/@{{ .Handle }}">my profile</a>
+    {{ with .LoggedInUser }}
+        <nav class="flex items-center space-x-4">
+            <a
+                href="/"
+                hx-boost="true"
+                class="text-gray-600 hover:text-gray-900"
+                >timeline</a
+            >
+            <a
+                href="/settings"
+                hx-boost="true"
+                class="text-gray-600 hover:text-gray-900"
+                >settings</a
+            >
+            <a
+                href="/knots"
+                hx-boost="true"
+                class="text-gray-600 hover:text-gray-900"
+                >knots</a
+            >
+            <a
+                href="/repo/new"
+                hx-boost="true"
+                class="text-gray-600 hover:text-gray-900"
+                >add repos</a
+            >
+            {{ if .Handle }}
+                <a
+                    href="/@{{ .Handle }}"
+                    hx-boost="true"
+                    class="text-gray-600 hover:text-gray-900"
+                    >my profile</a
+                >
+            {{ else }}
+                <a
+                    href="/{{ .Did }}"
+                    hx-boost="true"
+                    class="text-gray-600 hover:text-gray-900"
+                    >my profile</a
+                >
+            {{ end }}
+        </nav>
     {{ else }}
-    <a href="/{{ .Did }}">my profile</a>
+        <a href="/login" class="btn my-2">login</a>
     {{ end }}
-</nav>
-{{ else }}
-<button onclick="window.location.href='/login'">login</button>
-{{ end }}
 
 {{ end }}
diff --git a/appview/pages/templates/new-repo.html b/appview/pages/templates/new-repo.html
index 5482f279..c82830df 100644
--- a/appview/pages/templates/new-repo.html
+++ b/appview/pages/templates/new-repo.html
@@ -1,15 +1,14 @@
-{{define "title"}}new repo{{end}}
+{{ define "title" }}new repo{{ end }}
 
-{{define "content"}}
-<h1>new repo</h1>
-<form method="POST" action="/repo/new">
-  <label for="name">repo name</label>
-  <input type="text" id="name" name="name" required>
+{{ define "content" }}
+    <h1>new repo</h1>
+    <form method="POST" action="/repo/new">
+        <label for="name">repo name</label>
+        <input type="text" id="name" name="name" required />
 
-  <label for="domain">domain</label>
-  <input type="domain" id="domain" name="domain" required>
-
-  <button type="submit">create repo</button>
-</form>
-{{end}}
+        <label for="domain">domain</label>
+        <input type="domain" id="domain" name="domain" required />
 
+        <button class="btn my-2" type="submit">create repo</button>
+    </form>
+{{ end }}
diff --git a/appview/pages/templates/repo/settings.html b/appview/pages/templates/repo/settings.html
index f070e049..0d14ac6c 100644
--- a/appview/pages/templates/repo/settings.html
+++ b/appview/pages/templates/repo/settings.html
@@ -2,22 +2,22 @@
     <h3>settings</h3>
     <em>collaborators</em>
     <ol>
-      {{ range .Collaborators }}
-        <li>
-          {{ index . 0 }} - {{ index . 3 }}
-        </li>
-      {{ else }}
-      <p>no members</p>
-      {{ end }}
+        {{ range .Collaborators }}
+            <li>
+                {{ index . 0 }} -
+                {{ index . 3 }}
+            </li>
+        {{ else }}
+            <p>no members</p>
+        {{ end }}
     </ol>
 
     {{ if .IsCollaboratorInviteAllowed }}
-    <h3>add collaborator</h3>
-    <form hx-put="/{{ $.RepoInfo.FullName }}/settings/collaborator">
-        <label for="collaborator">did or handle:</label>
-        <input type="text" id="collaborator" name="collaborator" required>
-        <button type="text">add collaborator</button>
-    </form>
+        <h3>add collaborator</h3>
+        <form hx-put="/{{ $.RepoInfo.FullName }}/settings/collaborator">
+            <label for="collaborator">did or handle:</label>
+            <input type="text" id="collaborator" name="collaborator" required />
+            <button class="btn my-2" type="text">add collaborator</button>
+        </form>
     {{ end }}
-{{end}}
-
+{{ end }}
diff --git a/appview/pages/templates/settings/keys.html b/appview/pages/templates/settings/keys.html
index 1c005800..0fa89b44 100644
--- a/appview/pages/templates/settings/keys.html
+++ b/appview/pages/templates/settings/keys.html
@@ -1,33 +1,38 @@
-{{define "title"}}settings{{end}}
+{{ define "title" }}settings{{ end }}
 
-{{define "content"}}
+{{ define "content" }}
     <h1>settings</h1>
 
     <h2>profile</h2>
-    <p><strong>handle:</strong> {{.LoggedInUser.Handle}}</p>
-    <p><strong>did:</strong> {{.LoggedInUser.Did}}</p>
-    <p><strong>pds:</strong> {{.LoggedInUser.Pds}}</p>
+    <p><strong>handle:</strong> {{ .LoggedInUser.Handle }}</p>
+    <p><strong>did:</strong> {{ .LoggedInUser.Did }}</p>
+    <p><strong>pds:</strong> {{ .LoggedInUser.Pds }}</p>
 
     <h2>ssh keys</h2>
     <form hx-put="/settings/keys">
         <label for="name">key name:</label>
-        <input type="text" id="name" name="name" required>
+        <input type="text" id="name" name="name" required />
 
         <label for="key">pub key:</label>
-        <textarea id="key" name="key" placeholder="ssh-rsa AAAAAA..." required></textarea>
+        <textarea
+            id="key"
+            name="key"
+            placeholder="ssh-rsa AAAAAA..."
+            required
+        ></textarea>
 
-        <button type="submit">add key</button>
+        <button class="btn my-2" type="submit">add key</button>
     </form>
 
     <h3>existing keys</h3>
     <ul id="key-list">
-        {{range .PubKeys}}
+        {{ range .PubKeys }}
             <li>
-                <strong>{{.Name}}</strong><br>
-                <code>{{.Key}}</code>
+                <strong>{{ .Name }}</strong><br />
+                <code>{{ .Key }}</code>
             </li>
-        {{else}}
+        {{ else }}
             <p>no ssh keys added yet</p>
-        {{end}}
+        {{ end }}
     </ul>
-{{end}}
+{{ end }}
diff --git a/appview/pages/templates/user/login.html b/appview/pages/templates/user/login.html
index 7451552e..547ecfe3 100644
--- a/appview/pages/templates/user/login.html
+++ b/appview/pages/templates/user/login.html
@@ -26,12 +26,7 @@
                         required
                     />
 
-                    <button
-                        class="bg-blue-500 text-white font-bold py-2 px-4 rounded"
-                        type="submit"
-                    >
-                        login
-                    </button>
+                    <button class="btn my-2" type="submit">login</button>
                 </form>
             </main>
         </body>
diff --git a/input.css b/input.css
index e9d7da8a..ccf7f443 100644
--- a/input.css
+++ b/input.css
@@ -27,17 +27,17 @@
     @layer components {
         .btn {
             @apply relative z-10 inline-flex min-h-[36px] cursor-pointer items-center
-                justify-center border-0 bg-transparent px-3 pb-[0.3rem] text-base
-                text-gray-800 before:absolute before:inset-0 before:-z-10
-                before:block before:rounded before:border before:border-cyan-200
-                before:bg-white before:shadow-[0_4px_3px_0_rgba(20,20,96,0.1),inset_0_-5px_0_0_#ebebf6]
-                before:content-[''] hover:before:border-cyan-600
-                hover:before:bg-cyan-600
-                hover:before:shadow-[0_4px_3px_0_rgba(20,20,96,0.1),inset_0_-5px_0_0_#c2b3ff]
-                focus:outline-none focus-visible:before:outline
-                focus-visible:before:outline-4 focus-visible:before:outline-[#fc440f]
-                active:border-t-4 active:border-transparent active:py-1
-                active:before:shadow-none;
+            justify-center border-0 bg-transparent px-3 pb-[0.3rem] text-base
+            text-gray-900 before:absolute before:inset-0 before:-z-10
+            before:block before:rounded-sm before:border before:border-blue-200
+            before:bg-white before:shadow-[0_4px_3px_0_rgba(20,20,96,0.1),inset_0_-5px_0_0_#e5edff]
+            before:content-[''] hover:before:border-blue-300
+            hover:before:bg-blue-50
+            hover:before:shadow-[0_4px_3px_0_rgba(20,20,96,0.1),inset_0_-5px_0_0_#e5edff]
+            focus:outline-none focus-visible:before:outline
+            focus-visible:before:outline-4 focus-visible:before:outline-blue-500
+            active:border-t-4 active:border-transparent active:py-1
+            active:before:shadow-none;
         }
     }
 
-- 
2.54.0