design: remodel public list and public notes

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>