feat(gui-v2): add list view

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/nc-gui-v2/pages/projects/index.vue

@@ -59,7 +59,7 @@ const navDrawerOptions = [
 
         <div class="self-end flex text-2xl">
           <MaterialSymbolsFormatListBulletedRounded
-            :class="route.name === 'projects-list' ? 'text-primary' : ''"
+            :class="route.name === 'projects-index-list' ? 'text-primary' : ''"
             class="cursor-pointer p-1 hover:bg-gray-300/50 rounded-full"
             @click="navigateTo('/projects/list')"
           />
@@ -71,7 +71,7 @@ const navDrawerOptions = [
         </div>
       </div>
 
-      <v-divider class="lg:(!mb-8)" />
+      <v-divider class="!mb-4 lg:(!mb-8)" />
 
       <NuxtPage :projects="projects" />
     </v-container>

packages/nc-gui-v2/pages/projects/index/list.vue

@@ -6,9 +6,36 @@ interface Props {
   projects: ProjectType[]
 }
 
-const props = defineProps<Props>()
+const { projects } = defineProps<Props>()
+
+const { $e } = useNuxtApp()
+
+const openProject = async (project: ProjectType) => {
+  await navigateTo(`/nc/${project.id}`)
+  $e('a:project:open', { count: projects.length })
+}
 </script>
 
 <template>
-  <div>List view</div>
+  <div>
+    <div class="grid grid-cols-3 gap-2 prose-md p-2 font-semibold">
+      <div>{{ $t('general.title') }}</div>
+      <div>Status</div>
+      <div>Updated At</div>
+    </div>
+
+    <v-divider class="col-span-3" />
+
+    <template v-for="project of projects" :key="project.id">
+      <div
+        class="cursor-pointer grid grid-cols-3 gap-2 prose-md hover:(bg-gray-100 shadow-sm) p-2 transition-color ease-in duration-100"
+        @click="openProject(project)"
+      >
+        <div class="font-semibold">{{ project.title || 'Untitled' }}</div>
+        <div>{{ project.status }}</div>
+        <div>{{ project.updated_at }}</div>
+      </div>
+      <v-divider class="col-span-3" />
+    </template>
+  </div>
 </template>