looks good to me

Author: typed-sigterm

app/composables/use-topic.ts

@@ -0,0 +1,30 @@
+import type { Supa } from '~/utils/supabase';
+import type { FullTopic } from '~/utils/topics';
+
+async function createTopic(supa: Supa) {
+  const { data } = await supa
+    .from('topics')
+    .insert({
+      title: 'New Topic',
+      description: '',
+    })
+    .select('id')
+    .single()
+    .throwOnError();
+
+  return data.id;
+}
+
+export default async (id?: string): Promise<FullTopic> => {
+  const supa = useSupabaseClient();
+  if (!id)
+    id = await createTopic(supa);
+
+  return (await useSupabaseClient()
+    .from('topics')
+    .select('*, tasks(*), timeline_nodes(*)')
+    .eq('id', id!)
+    .single()
+    .throwOnError()
+  ).data;
+};

app/layouts/default.vue

@@ -1,23 +1,19 @@
 <script setup lang="ts">
 import type { NavigationMenuItem } from '@nuxt/ui';
 
+const supa = useSupabaseClient();
 const user = useSupabaseUser();
 
-const open = ref(false);
-
-const links: [NavigationMenuItem[], NavigationMenuItem[] ] = [[{
-  label: 'Topic 1',
-  to: '/topic/1',
-}], [{
+const links = ref<[NavigationMenuItem[], NavigationMenuItem[]]>([[], [{
   label: 'New Topic',
   icon: 'i-lucide-plus',
-  onSelect: async () => navigateTo(`/topic/${await createTopic()}`),
-}/* , {  label: 'Feedback',  icon: 'i-lucide-message-circle',  to: 'https://github.com/nuxt-ui-pro/dashboard',  target: '_blank',} */]];
+  onSelect: async () => navigateTo(`/topic/${await createTopic(supa)}`),
+}/* , {  label: 'Feedback',  icon: 'i-lucide-message-circle',  to: 'https://github.com/nuxt-ui-pro/dashboard',  target: '_blank',} */]]);
 
 const groups = computed(() => [{
   id: 'links',
   label: 'Go to',
-  items: links.flat().map((item) => {
+  items: links.value.flat().map((item) => {
     return typeof item.to === 'string' && item.to.startsWith('/topic/')
       ? { ...item, icon: 'i-lucide-target' }
       : item;
@@ -33,13 +29,28 @@ const groups = computed(() => [{
     target: '_blank',
   }],
 }]);
+
+onMounted(async () => {
+  if (!user.value)
+    return;
+  const { data } = await supa
+    .from('topics')
+    .select('id, title')
+    .eq('owner', user.value.id)
+    .order('created_at', { ascending: false })
+    .throwOnError();
+  links.value[0] = data.map((topic) => ({
+    label: topic.title,
+    icon: 'i-lucide-target',
+    to: `/topic/${topic.id}`,
+  }));
+})
 </script>
 
 <template>
   <UDashboardGroup unit="rem">
     <UDashboardSidebar
       id="default"
-      v-model:open="open"
       resizable
       class="bg-(--ui-bg-elevated)/25"
       :ui="{ footer: 'lg:border-t lg:border-(--ui-border)' }"

app/pages/topic/[id].vue

@@ -1,16 +1,20 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+const route = useRoute();
 
-const state = ref({
-  title: 'Topic 1',
-  description: '...',
-});
+const { data: topic } = useAsyncData(() => useTopic(route.params.id as string));
+
+function generate() {
+  $fetch('/api/request-tasks', {
+    method: 'post',
+    body: { id: topic.value?.id },
+  });
+}
 </script>
 
 <template>
   <UDashboardPanel id="topic">
     <template #header>
-      <UDashboardNavbar :title="state.title">
+      <UDashboardNavbar :title="topic?.title">
         <template #right>
           <UButton variant="outline" color="neutral">
             Delete Topic
@@ -20,25 +24,64 @@ const state = ref({
     </template>
 
     <template #body>
-      <UForm class="space-y-4" :state>
+      <UForm v-if="topic" class="space-y-4" :state="topic">
         <UFormField label="Description" hint="Describe it..." size="xl">
-          <UTextarea v-model="state.description" class="w-full" />
+          <UTextarea v-model="topic.description" class="w-full" />
         </UFormField>
 
         <div class="grid grid-cols-[1fr_auto_1fr] items-center w-full gap-3">
           <UFormField label="Timeline" size="xl" hint="What did you do...">
-            todo
+            todo list
           </UFormField>
 
           <div class="h-8 border-l ring-inset" />
 
-          <UFormField label="Recommended Tasks" size="xl">
-            todo
+          <UFormField label="Recommended Tasks" size="xl" :ui="{ label: 'items-start' }">
+            <ul>
+              <template v-for="(task) in topic.tasks">
+                <UCheckbox
+                  v-if="task.status === 'pending'"
+                  :key="task.id"
+                  class="w-full"
+                  :default-value="false"
+                  as="li"
+                  @update:model-value="task.status = 'accepted'"
+                >
+                  <template #label>
+                    <UButton variant="soft" color="neutral" size="xs" icon="lucide:trash-2" />
+                    {{ ' ' }}
+                    <span class="align-top">{{ task.title }}</span>
+                  </template>
+                </UCheckbox>
+              </template>
+            </ul>
+
+            <template #hint>
+              <UButton @click="generate">
+                Generate suggestions
+              </UButton>
+            </template>
           </UFormField>
         </div>
 
         <UFormField label="Tasks" size="xl">
-          todo
+          <ul>
+            <template v-for="(task) in topic.tasks">
+              <UCheckbox
+                v-if="task.status === 'accepted' || task.status === 'completed'"
+                :key="task.id"
+                :default-value="false"
+                as="li"
+                @update:model-value="(v) => task.status = v ? 'completed' : 'accepted'"
+              >
+                <template #label>
+                  <UButton variant="soft" color="neutral" size="xs" icon="lucide:trash-2" />
+                  {{ ' ' }}
+                  <span class="align-top">{{ task.title }}</span>
+                </template>
+              </UCheckbox>
+            </template>
+          </ul>
         </UFormField>
       </UForm>
     </template>

app/plugins/data-loader.ts

@@ -0,0 +1,13 @@
+// https://uvr.esm.is/data-loaders/nuxt.html#nuxt
+import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders';
+
+export default defineNuxtPlugin({
+  name: 'data-loaders',
+  dependsOn: ['nuxt:router'],
+  setup(nuxtApp) {
+    nuxtApp.vueApp.use(DataLoaderPlugin, {
+      router: nuxtApp.vueApp.config.globalProperties.$router,
+      isSSR: import.meta.server,
+    });
+  },
+});

app/utils/supabase.ts

@@ -0,0 +1,4 @@
+import type { SupabaseClient } from '@supabase/supabase-js';
+import type { Database } from '~/types/database.types';
+
+export type Supa = SupabaseClient<Database, 'public', Database['public']>;

app/utils/topics.ts

@@ -1,4 +1,14 @@
-import type { SupabaseClient } from "@supabase/supabase-js"
+import type { SupabaseClient } from '@supabase/supabase-js';
+import type { MergeDeep } from 'type-fest';
+import type { Tables } from '~/types/database.types';
+
+export type FullTopic = MergeDeep<
+  Tables<'topics'>,
+  {
+    tasks: Tables<'tasks'>[]
+    timeline_nodes: Tables<'timeline_nodes'>[]
+  }
+>;
 
 export async function createTopic(supa: SupabaseClient) {
   const { data } = await supa
@@ -9,7 +19,15 @@ export async function createTopic(supa: SupabaseClient) {
     })
     .select('id')
     .single()
-    .throwOnError()
+    .throwOnError();
 
   return data.id;
 }
+
+export function deleteTopic(supa: SupabaseClient, id: string) {
+  return supa
+    .from('topics')
+    .delete()
+    .eq('id', id)
+    .throwOnError();
+}