From 8c85d5dd8a91f480c10ea8318ccbe194ac30f25f Mon Sep 17 00:00:00 2001
From: Anirudh Oppiliappan <anirudh@tangled.org>
Date: Sun, 18 Jan 2026 10:35:08 +0000
Subject: [PATCH] appview/pages: make strings page follow repo style

Tiny avatar, description and paddings are now uniform across repo and
string pages.

Signed-off-by: Anirudh Oppiliappan <anirudh@tangled.org>
---
 appview/pages/templates/strings/string.html | 40 ++++++++++++++++++++++++----------------
 1 file(s) changed, 24 insertion(s)(+), 16 deletion(s)(-)

diff --git a/appview/pages/templates/strings/string.html b/appview/pages/templates/strings/string.html
--- a/appview/pages/templates/strings/string.html
+++ b/appview/pages/templates/strings/string.html
@@ -10,30 +10,43 @@
 
 {{ define "content" }}
 {{ $ownerId := resolve .Owner.DID.String }}
-  <section id="string-header" class="mb-4 py-2 px-6 dark:text-white">
-    <div class="text-lg flex items-center justify-between">
-      <div>
-        <a href="/strings/{{ $ownerId }}">{{ $ownerId }}</a>
-        <span class="select-none">/</span>
-        <a href="/strings/{{ $ownerId }}/{{ .String.Rkey }}" class="font-bold">{{ .String.Filename }}</a>
+  <section id="string-header" class="mb-2 py-2 px-4 dark:text-white">
+    <div class="text-lg flex flex-col sm:flex-row items-start gap-4 justify-between">
+      <!-- left items -->
+      <div class="flex flex-col gap-2">
+        <!-- string owner / string name -->
+        <div class="flex items-center gap-2 flex-wrap">
+          {{ template "user/fragments/picHandleLink" .Owner.DID.String }}
+          <span class="select-none">/</span>
+          <a href="/strings/{{ $ownerId }}/{{ .String.Rkey }}" class="font-bold">{{ .String.Filename }}</a>
+        </div>
+
+        <span class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-gray-600 dark:text-gray-300">
+          {{ if .String.Description }}
+            {{ .String.Description }}
+          {{ else }}
+            <span class="italic">this string has no description</span>
+          {{ end }}
+        </span>
       </div>
-      <div class="flex gap-2 items-stretch text-base">
+
+      <div class="w-full sm:w-fit grid grid-cols-3 gap-2 z-auto">
         {{ if and .LoggedInUser (eq .LoggedInUser.Did .String.Did) }}
-          <a class="btn flex items-center gap-2 no-underline hover:no-underline p-2 group"
+          <a class="btn text-sm no-underline hover:no-underline flex items-center gap-2 group"
              hx-boost="true"
              href="/strings/{{ .String.Did }}/{{ .String.Rkey }}/edit">
-            {{ i "pencil" "size-4" }}
+            {{ i "pencil" "w-4 h-4" }}
             <span class="hidden md:inline">edit</span>
             {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
           </a>
           <button
-            class="btn text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 gap-2 group p-2"
+            class="btn text-sm text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 flex items-center gap-2 group"
             title="Delete string"
             hx-delete="/strings/{{ .String.Did }}/{{ .String.Rkey }}/"
             hx-swap="none"
             hx-confirm="Are you sure you want to delete the string `{{ .String.Filename }}`?"
           >
-            {{ i "trash-2" "size-4" }}
+            {{ i "trash-2" "w-4 h-4" }}
             <span class="hidden md:inline">delete</span>
             {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
           </button>
@@ -44,11 +57,6 @@
                 "StarCount" .StarCount) }}
       </div>
     </div>
-    <span>
-      {{ with .String.Description }}
-        {{ . }}
-      {{ end }}
-    </span>
   </section>
   <section class="bg-white dark:bg-gray-800 px-6 py-4 rounded relative w-full dark:text-white">
     <div class="flex flex-col md:flex-row md:justify-between md:items-center text-gray-500 dark:text-gray-400 text-sm md:text-base pb-2 mb-3 text-base border-b border-gray-200 dark:border-gray-700">

--
tangled.sh