design: remodel public list and public notes

src/components/WelcomeWorld.vue

@@ -4,6 +4,14 @@
 
     <repo-list />
 
+    <p>
+      Lite notes are
+
+      <router-link :to="{ name: 'PublicNoteListView' }" class="btn btn-link"
+        >now public</router-link
+      >!
+    </p>
+
     <last-visited />
 
     <div class="get-started">
@@ -19,9 +27,6 @@
       <router-link v-if="isLogged" :to="{ name: 'RepoList' }" class="btn"
         >Manage your repos</router-link
       >
-      <router-link :to="{ name: 'PublicNoteListView' }" class="btn"
-        >Public notes</router-link
-      >
     </div>
 
     <form class="github-form" @submit.prevent>

src/views/PublicNoteListView.vue

@@ -24,25 +24,73 @@ const getAlias = (did: string) => aka.value.get(did) ?? ""
 </script>
 
 <template>
-  <div v-if="isLoading"></div>
-  <div class="public-note-view" v-else>
-    <ul>
-      <li v-for="note in state.notes">
-        {{ getAlias(note.did) }}:
-        <router-link
-          :to="{
-            name: 'PublicNoteView',
-            params: { did: note.did, rkey: note.rkey },
-          }"
-          class="btn btn-link"
-          >{{ note.title }}</router-link
-        >
-      </li>
-    </ul>
-  </div>
+  <main class="public-note-view">
+    <h1>Lite public notes</h1>
+    <div v-if="isLoading"></div>
+    <div v-else>
+      <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">
+              <span v-if="getAlias(note.did)">
+                {{ getAlias(note.did) }}
+              </span>
+              <div v-else class="skeleton h-4 w-20"></div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <router-link
+      :to="{ name: 'Home' }"
+      class="button is-small is-white back-button"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon icon-tabler icon-tabler-arrow-narrow-left"
+        width="28"
+        height="28"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <line x1="5" y1="12" x2="19" y2="12" />
+        <line x1="5" y1="12" x2="9" y2="16" />
+        <line x1="5" y1="12" x2="9" y2="8" />
+      </svg>
+      return home
+    </router-link>
+  </main>
 </template>
 
 <style scoped lang="scss">
 .public-note-view {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  margin-left: 1rem;
+
+  h1 {
+    margin-top: 1rem;
+  }
+
+  a {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
 }
 </style>

src/views/PublicNoteView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { markdownBuilder } from "@/hooks/useMarkdown.hook"
+import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook"
 import { getUniqueAka } from "@/modules/atproto/getAka"
 import { getUrl } from "@/modules/atproto/getUrl"
 import { computedAsync } from "@vueuse/core"
@@ -39,6 +40,7 @@ export interface Ref {
 const props = defineProps<{ did: string; rkey: string }>()
 const did = computed(() => props.did)
 const rkey = computed(() => props.rkey)
+const { scrollToFocusedNote } = useRouteQueryStackedNotes()
 
 const alias = computedAsync(async () => getUniqueAka(did.value))
 const url = computedAsync(async () =>
@@ -49,7 +51,7 @@ const rawContent = computedAsync(async () =>
 )
 const { toHTML } = markdownBuilder()
 
-// const title = computed(() => rawContent.value?.value.title)
+const title = computed(() => rawContent.value?.value.title)
 const content = computed(() =>
   rawContent.value?.value.content
     ? toHTML(rawContent.value?.value.content)
@@ -59,12 +61,90 @@ const content = computed(() =>
 
 <template>
   <div class="public-note-view">
-    <span v-if="alias">{{ alias }}</span>
-    <div v-html="content"></div>
+    <div class="note article">
+      <div class="repo-title-breadcrumb">
+        <a
+          class="title-stacked-note-link"
+          @click.prevent="scrollToFocusedNote()"
+          v-if="alias && title"
+          >{{ alias }} | {{ title }}</a
+        >
+      </div>
+      <article v-html="content" class="note"></article>
+    </div>
   </div>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss">
 .public-note-view {
+  display: flex;
+  flex: 1;
+
+  .article {
+    padding: 0 2rem;
+    scrollbar-width: none;
+  }
+
+  &.content {
+    .title,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    strong {
+      color: var(--color-base-content);
+    }
+
+    table {
+      color: var(--color-base-content);
+      background-color: var(--color-base-100);
+
+      thead {
+        th {
+          color: var(--color-base-content);
+        }
+      }
+    }
+
+    blockquote {
+      background-color: var(--color-base-100);
+      color: var(--color-base-content);
+    }
+  }
+
+  .note {
+    position: sticky;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    height: 100vh;
+    position: sticky;
+
+    .title {
+      text-align: left;
+    }
+  }
+
+  @media screen and (min-width: 769px) {
+    .repo-title-breadcrumb {
+      padding: 0.5rem 1rem 0;
+      transform-origin: 0 0;
+      transform: rotate(90deg);
+      font-size: 0.8em;
+
+      a {
+        color: var(--color-base-content);
+        display: block;
+        text-align: center;
+      }
+    }
+
+    .note {
+      min-width: var(--note-width);
+      max-width: var(--note-width);
+    }
+  }
 }
 </style>