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;
+  padding-left: 1rem;
-  margin-right: 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;
+  padding-left: 1rem;
-  margin-right: 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,6 +80,26 @@ watch(
 <template>
   <div class="public-note-view repo-note note-container">
     <div class="note article">
+      <div class="header">
+        <back-button
+          :fallback="{ name: 'PublicNoteListByDidView', params: { did } }"
+          :prefer-fallback="false"
+        />
+        <theme-swap />
+
+        <span
+          class="badge badge-author badge-soft badge-accent"
+          v-if="author && content"
+        >
+          <router-link
+            :to="{ name: 'PublicNoteListByDidView', params: { did: did } }"
+            class="link link-hover"
+          >
+            {{ author.alias }}
+          </router-link>
+          <span v-if="publishedAt">&nbsp;•&nbsp;{{ publishedAt }}</span>
+        </span>
+      </div>
       <div class="repo-title-breadcrumb">
         <a
           class="title-stacked-note-link"
@@ -88,24 +109,7 @@ watch(
         >
       </div>
 
-      <span
-        class="badge badge-author badge-soft badge-accent"
-        v-if="author && content"
-      >
-        <router-link
-          :to="{ name: 'PublicNoteListByDidView', params: { did: did } }"
-          class="link link-hover"
-        >
-          {{ author.alias }}
-        </router-link>
-        <span v-if="publishedAt">&nbsp;•&nbsp;{{ publishedAt }}</span>
-      </span>
       <article class="note-display" v-html="content"></article>
-
-      <back-button
-        :fallback="{ name: 'PublicNoteListByDidView', params: { did } }"
-        :prefer-fallback="false"
-      />
     </div>
     <stacked-public-note
       v-for="(stackedNote, index) in stackedNotes"
@@ -122,11 +126,10 @@ watch(
   display: flex;
   flex: 1;
 
-  .back-button {
+  .header {
-    position: absolute;
+    margin-top: 1rem;
-    left: 1.5rem;
-    top: 0.5rem;
     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;