From 7ab4d64deab6ae0bad5b09132f6be73714c44e3c Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Fri, 13 Feb 2026 23:54:56 +0100
Subject: [PATCH] design: better list

---
 src/views/PublicNoteListView.vue | 40 ++++++++++++++++++++++----------
 src/views/PublicNoteView.vue     |  3 +--
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/views/PublicNoteListView.vue b/src/views/PublicNoteListView.vue
index 7ed6821..b368f18 100644
--- a/src/views/PublicNoteListView.vue
+++ b/src/views/PublicNoteListView.vue
@@ -31,17 +31,15 @@ const getAlias = (did: string) => aka.value.get(did) ?? ""
       <ul class="list rounded-box shadow-sm">
         <li v-for="note in state.notes" class="list-row">
           <div class="list-col">
-            <div>
-              <router-link
-                :to="{
-                  name: 'PublicNoteView',
-                  params: { did: note.did, rkey: note.rkey },
-                }"
-                class="btn btn-link"
-                >{{ note.title }}</router-link
-              >
-            </div>
-            <div class="text-xs uppercase font-semibold opacity-60">
+            <router-link
+              :to="{
+                name: 'PublicNoteView',
+                params: { did: note.did, rkey: note.rkey },
+              }"
+              class="btn btn-link"
+              >{{ note.title }}</router-link
+            >
+            <div class="text-xs opacity-80 alias">
               <span v-if="getAlias(note.did)">
                 {{ getAlias(note.did) }}
               </span>
@@ -87,10 +85,28 @@ const getAlias = (did: string) => aka.value.get(did) ?? ""
     margin-top: 1rem;
   }
 
-  a {
+  a.back-button {
     display: flex;
     gap: 0.5rem;
     align-items: center;
   }
+
+  li {
+    display: flex;
+
+    .list-col {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
+
+    a {
+      text-align: left;
+    }
+
+    .alias {
+      text-align: right;
+    }
+  }
 }
 </style>
diff --git a/src/views/PublicNoteView.vue b/src/views/PublicNoteView.vue
index 6a63d7d..6505a92 100644
--- a/src/views/PublicNoteView.vue
+++ b/src/views/PublicNoteView.vue
@@ -70,6 +70,7 @@ const content = computed(() =>
           >{{ title }}</a
         >
       </div>
+      <span class="badge badge-accent">{{ alias }}</span>
       <article v-html="content"></article>
     </div>
   </div>
@@ -118,12 +119,10 @@ const content = computed(() =>
   }
 
   .note {
-    position: sticky;
     display: flex;
     flex-direction: column;
     overflow-y: auto;
     height: 100vh;
-    position: sticky;
 
     .title {
       text-align: left;