fix: better header

src/components/HomeButton.vue

@@ -6,23 +6,13 @@ const goHome = () => router.push({ name: "Home" })
 </script>
 
 <template>
-  <a class="btn btn-sm" @click="goHome">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      class="icon icon-tabler icon-tabler-home"
-      width="28"
-      height="28"
-      viewBox="0 0 24 24"
-      stroke-width="1.5"
-      stroke="currentColor"
-      fill="none"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-      <path d="M5 12l-2 0l9 -9l9 9l-2 0" />
-      <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
-      <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
-    </svg>
+  <a class="btn btn-ghost btn-circle btn-lg" @click="goHome">
+    <img src="/favicon.png" alt="Remanso icon" />
   </a>
 </template>
+
+<style>
+img {
+  box-shadow: none;
+}
+</style>

src/views/PublicNoteListByDidView.vue

@@ -59,9 +59,7 @@ const author = computedAsync(async () => getAuthor(did.value))
   }
 
   .back-button {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
+    position: absolute;
   }
 
   @media screen and (min-width: 769px) {

src/views/PublicNoteListView.vue

@@ -33,8 +33,6 @@ const following = useFollowingNoteList(follows, followingEnabled)
   <main class="public-note-list-view">
     <div class="header">
       <home-button class="back-button" />
-      <h1><img src="/favicon.png" alt="Remanso icon" /></h1>
-      <sign-in-atproto />
     </div>
 
     <div v-if="isLoggedIn" role="tablist" class="tabs tabs-border">
@@ -52,6 +50,7 @@ const following = useFollowingNoteList(follows, followingEnabled)
         @click="tab = 'following'"
         >Following</a
       >
+      <sign-in-atproto class="handle" />
     </div>
 
     <PublicNoteList
@@ -101,12 +100,14 @@ const following = useFollowingNoteList(follows, followingEnabled)
 </template>
 
 <style scoped lang="scss">
-h1 {
-  img {
-    width: 64px;
-    height: 64px;
-    box-shadow: none;
+.tabs {
+  position: relative;
 }
+
+.handle {
+  position: absolute;
+  right: 0;
+  align-self: center;
 }
 
 .public-note-list-view {
@@ -117,7 +118,7 @@ h1 {
   padding-right: 1rem;
 
   .header {
-    margin-top: 1rem;
+    margin: 0.5rem auto 0;
     display: flex;
     justify-content: space-between;
     align-items: center;

src/views/PublicNoteView.vue

@@ -128,7 +128,6 @@ watch(
           :fallback="{ name: 'PublicNoteListByDidView', params: { did } }"
           :prefer-fallback="false"
         />
-        <theme-swap />
 
         <span
           class="badge badge-author badge-soft badge-accent"
@@ -150,7 +149,9 @@ watch(
           </template>
         </span>
         <div class="badge skeleton h-4 w-50" v-else></div>
+        <theme-swap />
       </div>
+      <div class="meta"></div>
       <div class="repo-title-breadcrumb">
         <a
           class="title-stacked-note-link"