ui: navbar for status detail

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>