feat: status details

pages/404.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-const router = useRouter()
-</script>
-
-<template>
-  <main p="x4 y10" text="center teal-700 dark:gray-200">
-    <div text-4xl>
-      <div i-carbon-warning inline-block />
-    </div>
-    <div>Not found</div>
-    <div>
-      <button btn text-sm m="3 t8" @click="router.back()">
-        Back
-      </button>
-    </div>
-  </main>
-</template>

pages/@[user]/[post].vue

@@ -4,13 +4,18 @@ const props = defineProps<{
 }>()
 
 const params = useRoute().params
+const id = computed(() => params.post as string)
 
 const masto = await useMasto()
-const { data: status } = await useAsyncData(() => masto.statuses.fetch(params.post as string))
+const { data: status } = await useAsyncData(`${id}-status`, () => masto.statuses.fetch(params.post as string))
+const { data: context } = await useAsyncData(`${id}-context`, () => masto.statuses.fetchContext(params.post as string))
 </script>
 
 <template>
-  <div w-130>
-    <StatusCard :status="status" />
-  </div>
+  <StatusDetails :status="status" />
+  <template v-for="comment of context?.descendants" :key="comment.id">
+    <StatusCard :status="comment" border="t border" pt-4 />
+  </template>
+  <pre>{{ status }}</pre>
+  <pre>{{ context }}</pre>
 </template>

pages/index.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
+const token = useCookie('nuxtodon-token')
+const router = useRouter()
+if (!token.value)
+  router.replace('/public')
+
 const masto = await useMasto()
-const { data: timelines } = await useAsyncData('public-timelines', () => masto.timelines.fetchPublic().then(r => r.value))
+const { data: timelines } = await useAsyncData('timelines-home', () => masto.timelines.fetchHome().then(r => r.value))
 </script>
 
 <template>
-  <div w-120>
-    <TimelineList :timelines="timelines" />
-  </div>
+  <TimelineList :timelines="timelines" />
 </template>

pages/login.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const server = useCookie('nuxtodon-server')
+const token = useCookie('nuxtodon-token')
+</script>
+
+<template>
+  <div p4>
+    <input
+      v-model="server"
+      placeholder="Server URL"
+      bg-transparent text-current
+      border="~ border" p="x2 y1" w-full
+      outline-none
+    >
+    <input
+      v-model="token"
+      placeholder="Token"
+      bg-transparent text-current
+      border="~ border" p="x2 y1" w-full
+      outline-none
+    >
+  </div>
+</template>

pages/public.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+const masto = await useMasto()
+const { data: timelines } = await useAsyncData('timelines-public', () => masto.timelines.fetchPublic().then(r => r.value))
+</script>
+
+<template>
+  <TimelineList :timelines="timelines" />
+</template>