refactor: organize frontend project structure

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

frontend/src/components/table/SimpleTable.vue

@@ -0,0 +1,53 @@
+<template>
+    <table class="min-w-full divide-y divide-gray-200">
+        <thead class="bg-gray-50">
+            <tr>
+                <th v-for="(header, index) in headers" :key="index" scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    {{ header }}
+                </th>
+                <th scope="col" class="relative px-6 py-3"></th>
+            </tr>
+        </thead>
+        <tbody class="bg-white divide-y divide-gray-200">
+            <tr v-for="(item, index) in data" :key="index">
+                <td v-for="key in keys" :key="key" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                    {{ item[key] }}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <Button size="xs" variant="ghost" @click.prevent="deleteItem(item)">
+                        <Trash2 class="h-4 w-4" />
+                    </Button>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</template>
+
+<script setup>
+import { Trash2 } from 'lucide-vue-next';
+import { defineProps, defineEmits } from 'vue';
+
+defineProps({
+    headers: {
+        type: Array,
+        required: true,
+        default: () => []
+    },
+    keys: {
+        type: Array,
+        required: true,
+        default: () => []
+    },
+    data: {
+        type: Array,
+        required: true,
+        default: () => []
+    }
+});
+
+const emit = defineEmits(['deleteItem']);
+
+function deleteItem(item) {
+    emit('deleteItem', item);
+}
+</script>