feat: improve layout (#19)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

components/main/MainContent.vue

@@ -1,5 +1,6 @@
 <template>
-  <div flex flex-col>
+  <div relative>
+    <div sticky top-0 bg="#222" z10>
       <div flex justify-between>
         <div p3 flex gap-1>
           <slot name="title" />
@@ -8,6 +9,9 @@
           <slot name="actions" />
         </div>
       </div>
+    </div>
+    <div>
       <slot />
     </div>
+  </div>
 </template>

components/publish/PublishWidget.vue

@@ -17,7 +17,7 @@ async function publish() {
 </script>
 
 <template>
-  <div flex flex-col gap-4 :class="isSending ? ' pointer-events-none' : ''">
+  <div xl:w-70 flex flex-col gap-4 :class="isSending ? ' pointer-events-none' : ''">
     <textarea
       v-model="draftPost"
       placeholder="What's on your mind?"

layouts/default.vue

@@ -1,15 +1,19 @@
 <template>
-  <div h-full of-hidden>
+  <div h-full>
-    <main grid="~ lg:cols-[1fr_40rem_1fr]" max-w-80rem mxa h-full>
+    <main flex w-full mxa h-full lg:max-w-80rem>
-      <div>
+      <div class="w-1/4" hidden lg:flex flex-col items-end>
+        <div fixed>
           <slot name="left">
             <AccountMe />
           </slot>
         </div>
-      <div h-full of-auto border="l r border">
+      </div>
+      <div class="lg:w-3/4" flex>
+        <div h-full border="l r border" class="w-full md:w-2/3">
           <slot />
         </div>
-      <div flex="~ col">
+        <div hidden md:flex="~ col" class="w-1/3">
+          <div fixed>
             <slot name="right">
               <NavTitle p5 />
               <NavSide border="y border" py8 />
@@ -17,6 +21,8 @@
               <NavFooter />
             </slot>
           </div>
+        </div>
+      </div>
     </main>
   </div>
 </template>

pages/tags/[tag].vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const params = useRoute().params
+const tag = $computed(() => params.tag as string)
+const masto = await useMasto()
+const paginator = masto.timelines.getHashtagIterable(tag)
+</script>
+
+<template>
+  <MainContent>
+    <template #title>
+      <div i-ri:hashtag h-6 mr-1 /><span>{{ tag }}</span>
+    </template>
+    <template #actions>
+      <div color-gray i-ri:equalizer-fill mr-1 h-6 />
+    </template>
+    <slot>
+      <TimelinePaginator :paginator="paginator" />
+    </slot>
+  </MainContent>
+</template>

styles/global.css

@@ -23,3 +23,8 @@
 ::-webkit-scrollbar-thumb:hover {
   background: #666;
 }
+
+/* Force vertical scrollbar to be always visible to avoid layout shift while loading the content */
+html {
+  overflow-y: scroll;
+}