feat: improve layout (#19)

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

components/main/MainContent.vue

@@ -1,13 +1,17 @@
 <template>
-  <div flex flex-col>
-    <div flex justify-between>
-      <div p3 flex gap-1>
-        <slot name="title" />
-      </div>
-      <div p3 flex>
-        <slot name="actions" />
+  <div relative>
+    <div sticky top-0 bg="#222" z10>
+      <div flex justify-between>
+        <div p3 flex gap-1>
+          <slot name="title" />
+        </div>
+        <div p3 flex>
+          <slot name="actions" />
+        </div>
       </div>
     </div>
-    <slot />
+    <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,21 +1,27 @@
 <template>
-  <div h-full of-hidden>
-    <main grid="~ lg:cols-[1fr_40rem_1fr]" max-w-80rem mxa h-full>
-      <div>
-        <slot name="left">
-          <AccountMe />
-        </slot>
+  <div h-full>
+    <main flex w-full mxa h-full lg:max-w-80rem>
+      <div class="w-1/4" hidden lg:flex flex-col items-end>
+        <div fixed>
+          <slot name="left">
+            <AccountMe />
+          </slot>
+        </div>
       </div>
-      <div h-full of-auto border="l r border">
-        <slot />
-      </div>
-      <div flex="~ col">
-        <slot name="right">
-          <NavTitle p5 />
-          <NavSide border="y border" py8 />
-          <div flex-auto />
-          <NavFooter />
-        </slot>
+      <div class="lg:w-3/4" flex>
+        <div h-full border="l r border" class="w-full md:w-2/3">
+          <slot />
+        </div>
+        <div hidden md:flex="~ col" class="w-1/3">
+          <div fixed>
+            <slot name="right">
+              <NavTitle p5 />
+              <NavSide border="y border" py8 />
+              <div flex-auto />
+              <NavFooter />
+            </slot>
+          </div>
+        </div>
       </div>
     </main>
   </div>

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;
+}