refactor: organize frontend project structure

- feat: add toggle for conversation sidebar
- save sidebar state in localstorage.

frontend/src/components/datatable/DataTable.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="w-full">
+    <div class="rounded-md border shadow">
+      <Table>
+        <TableHeader>
+          <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
+            <TableHead v-for="header in headerGroup.headers" :key="header.id" class="font-semibold">
+              <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header"
+                :props="header.getContext()" />
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <template v-if="table.getRowModel().rows?.length">
+            <TableRow v-for="row in table.getRowModel().rows" :key="row.id"
+              :data-state="row.getIsSelected() ? 'selected' : undefined" class="hover:bg-muted/50">
+              <TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
+                <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+              </TableCell>
+            </TableRow>
+          </template>
+          <template v-else>
+            <TableRow>
+              <TableCell :colspan="columns.length" class="h-24 text-center">
+                <div class="text-muted-foreground">{{ emptyText }}</div>
+              </TableCell>
+            </TableRow>
+          </template>
+        </TableBody>
+      </Table>
+    </div>
+  </div>
+</template>
+
+
+<script setup>
+import { FlexRender, getCoreRowModel, useVueTable } from '@tanstack/vue-table'
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@/components/ui/table'
+
+const props = defineProps({
+  columns: Array,
+  data: Array,
+  emptyText: {
+    type: String,
+    default: 'No results.'
+  }
+})
+
+const table = useVueTable({
+  get data () {
+    return props.data
+  },
+  get columns () {
+    return props.columns
+  },
+  getCoreRowModel: getCoreRowModel()
+})
+</script>