feat: better header for public note

src/components/WelcomeWorld.vue

@@ -1,3 +1,15 @@
+<script lang="ts" setup>
+import RepoList from "@/components/RepoList.vue"
+import SignInGithub from "@/components/SignInGithub.vue"
+import ThemeSwap from "@/components/ThemeSwap.vue"
+import { useForm } from "@/hooks/useForm.hook"
+import { useGitHubLogin } from "@/hooks/useGitHubLogin.hook"
+import LastVisited from "@/modules/history/components/LastVisited.vue"
+
+const { isLogged } = useGitHubLogin()
+const { userInput, repoInput, submit } = useForm()
+</script>
+
 <template>
   <div class="welcome-world">
     <h1 class="title is-1">
@@ -70,18 +82,6 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import RepoList from "@/components/RepoList.vue"
-import SignInGithub from "@/components/SignInGithub.vue"
-import ThemeSwap from "@/components/ThemeSwap.vue"
-import { useForm } from "@/hooks/useForm.hook"
-import { useGitHubLogin } from "@/hooks/useGitHubLogin.hook"
-import LastVisited from "@/modules/history/components/LastVisited.vue"
-
-const { isLogged } = useGitHubLogin()
-const { userInput, repoInput, submit } = useForm()
-</script>
-
 <style lang="scss" scoped>
 h1 {
   img {

src/views/PublicNoteListByDidView.vue

@@ -52,8 +52,8 @@ const author = computedAsync(async () => getUniqueAka(did.value))
   display: flex;
   flex: 1;
   flex-direction: column;
-  margin-left: 1rem;
-  margin-right: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
 
   h1 {
     margin-top: 1rem;
@@ -84,5 +84,9 @@ const author = computedAsync(async () => getUniqueAka(did.value))
       justify-content: flex-end;
     }
   }
+
+  @media screen and (min-width: 769px) {
+    overflow-y: auto;
+  }
 }
 </style>

src/views/PublicNoteListView.vue

@@ -58,8 +58,8 @@ const { notes, isLoading, canLoadMore, onLoadMore, getAlias } =
   display: flex;
   flex: 1;
   flex-direction: column;
-  margin-left: 1rem;
-  margin-right: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
 
   h1 {
     margin-top: 1rem;
@@ -90,5 +90,9 @@ const { notes, isLoading, canLoadMore, onLoadMore, getAlias } =
       justify-content: flex-end;
     }
   }
+
+  @media screen and (min-width: 769px) {
+    overflow-y: auto;
+  }
 }
 </style>

src/views/PublicNoteView.vue

@@ -12,6 +12,7 @@ import { downloadFont } from "@/utils/downloadFont"
 import { computedAsync } from "@vueuse/core"
 import { computed, nextTick, watch } from "vue"
 import { useResizeContainer } from "@/hooks/useResizeContainer.hook"
+import ThemeSwap from "@/components/ThemeSwap.vue"
 
 const props = defineProps<{ did: string; rkey: string }>()
 const did = computed(() => props.did)
@@ -79,14 +80,12 @@ watch(
 <template>
   <div class="public-note-view repo-note note-container">
     <div class="note article">
-      <div class="repo-title-breadcrumb">
-        <a
-          class="title-stacked-note-link"
-          @click.prevent="scrollToFocusedNote()"
-          v-if="author && title"
-          >{{ title }}</a
-        >
-      </div>
+      <div class="header">
+        <back-button
+          :fallback="{ name: 'PublicNoteListByDidView', params: { did } }"
+          :prefer-fallback="false"
+        />
+        <theme-swap />
 
         <span
           class="badge badge-author badge-soft badge-accent"
@@ -100,12 +99,17 @@ watch(
           </router-link>
           <span v-if="publishedAt">&nbsp;•&nbsp;{{ publishedAt }}</span>
         </span>
-      <article class="note-display" v-html="content"></article>
+      </div>
+      <div class="repo-title-breadcrumb">
+        <a
+          class="title-stacked-note-link"
+          @click.prevent="scrollToFocusedNote()"
+          v-if="author && title"
+          >{{ title }}</a
+        >
+      </div>
 
-      <back-button
-        :fallback="{ name: 'PublicNoteListByDidView', params: { did } }"
-        :prefer-fallback="false"
-      />
+      <article class="note-display" v-html="content"></article>
     </div>
     <stacked-public-note
       v-for="(stackedNote, index) in stackedNotes"
@@ -122,11 +126,10 @@ watch(
   display: flex;
   flex: 1;
 
-  .back-button {
-    position: absolute;
-    left: 1.5rem;
-    top: 0.5rem;
+  .header {
+    margin-top: 1rem;
     display: flex;
+    justify-content: space-between;
     align-items: center;
   }
 
@@ -134,12 +137,6 @@ watch(
     font-size: 1.5rem;
   }
 
-  .badge-author {
-    position: absolute;
-    top: 0.5rem;
-    right: 2rem;
-  }
-
   .article {
     position: sticky;
     padding: 0 2rem;