design: better list

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
-              <router-link
+              :to="{
-                :to="{
+                name: 'PublicNoteView',
-                  name: 'PublicNoteView',
+                params: { did: note.did, rkey: note.rkey },
-                  params: { did: note.did, rkey: note.rkey },
+              }"
-                }"
+              class="btn btn-link"
-                class="btn btn-link"
+              >{{ note.title }}</router-link
-                >{{ note.title }}</router-link
+            >
-              >
+            <div class="text-xs opacity-80 alias">
-            </div>
-            <div class="text-xs uppercase font-semibold opacity-60">
               <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>

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;