From 9485830da237dc44956da0c38930a5c8ea41a600 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 24 Nov 2022 16:07:51 +0800
Subject: [PATCH] ui: navbar for status detail

---
 pages/status/[status].vue | 48 ++++++++++++++++++++-------------------
 1 file changed, 25 insertions(+), 23 deletions(-)

diff --git a/pages/status/[status].vue b/pages/status/[status].vue
index d6e74a35..5b8c1dee 100644
--- a/pages/status/[status].vue
+++ b/pages/status/[status].vue
@@ -10,30 +10,32 @@ const { data: context } = useAsyncData(`context:${id}`, () => masto.statuses.fet
 </script>
 
 <template>
-  <template v-if="status">
-    <template v-if="context">
-      <template v-for="comment of context?.ancestors" :key="comment.id">
-        <StatusCard :status="comment" border="t base" py3 />
+  <MainContent>
+    <template v-if="status">
+      <template v-if="context">
+        <template v-for="comment of context?.ancestors" :key="comment.id">
+          <StatusCard :status="comment" border="t base" py3 />
+        </template>
+      </template>
+
+      <StatusDetails ref="main" :status="status" border="t base" />
+      <PublishWidget
+        v-if="currentUser"
+        border="t base"
+        :draft-key="`reply-${id}`"
+        :placeholder="`Reply to ${status?.account ? getDisplayName(status?.account) : 'this thread'}`"
+        :in-reply-to-id="id"
+      />
+
+      <template v-if="context">
+        <template v-for="comment of context?.descendants" :key="comment.id">
+          <StatusCard :status="comment" border="t base" py3 />
+        </template>
       </template>
     </template>
 
-    <StatusDetails ref="main" :status="status" border="t base" />
-    <PublishWidget
-      v-if="currentUser"
-      border="t base"
-      :draft-key="`reply-${id}`"
-      :placeholder="`Reply to ${status?.account ? getDisplayName(status?.account) : 'this thread'}`"
-      :in-reply-to-id="id"
-    />
-
-    <template v-if="context">
-      <template v-for="comment of context?.descendants" :key="comment.id">
-        <StatusCard :status="comment" border="t base" py3 />
-      </template>
-    </template>
-  </template>
-
-  <CommonNotFound v-else>
-    Status not found
-  </CommonNotFound>
+    <CommonNotFound v-else>
+      Status not found
+    </CommonNotFound>
+  </MainContent>
 </template>