listview component

components.d.ts

@@ -9,11 +9,14 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    Autocomplete: typeof import('./src/components/Autocomplete.vue')['default']
+    Autocomplete: typeof import('./src/components/Note/Autocomplete.vue')['default']
-    Hamburger: typeof import('./src/components/Hamburger.vue')['default']
+    Hamburger: typeof import('./src/components/TopBar/Hamburger.vue')['default']
-    Logo: typeof import('./src/components/Logo.vue')['default']
+    List: typeof import('./src/components/ViewModes/List.vue')['default']
+    ListView: typeof import('./src/components/ViewModes/ListView.vue')['default']
+    Logo: typeof import('./src/components/TopBar/Logo.vue')['default']
+    Mindmap: typeof import('./src/components/ViewModes/Mindmap.vue')['default']
     Modal: typeof import('./src/components/Modal.vue')['default']
-    Note: typeof import('./src/components/Note.vue')['default']
+    Note: typeof import('./src/components/ViewModes/Note.vue')['default']
     NoteEditor: typeof import('./src/components/Note/NoteEditor.vue')['default']
     NoteReferences: typeof import('./src/components/Note/NoteReferences.vue')['default']
     NoteToolbar: typeof import('./src/components/Note/NoteToolbar.vue')['default']

src/App.vue

@@ -21,12 +21,14 @@ const sideBarCollapsed = ref(false)
       :class="sideBarCollapsed ? 'ml-0' : 'ml-sidebar'"
     >
       <Note
-        v-if="activeNote"
+        v-if="activeViewMode.name === 'Note' && activeNote"
         :key="activeNote.id"
         :note="activeNote"
         class=""
         @update="(note) => updateNote(note.id, note)"
       />
+      <ListView v-else-if="activeViewMode.name === 'List'" />
+      <ListView v-else-if="activeViewMode.name === 'Mindmap'" />
     </main>
   </div>
 </template>

src/components/Note/NoteEditor.vue

@@ -14,7 +14,7 @@ import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat'
 import ContextedPlugin from '@/ckeditor/ContextedPlugin'
 import { mdToHtml, htmlToMd } from '@/utils/markdown'
 import { getNoteByTitle, setActiveNote, addNote } from '@/composables/useNotes'
-import Autocomplete from '@/components/Autocomplete.vue'
+import Autocomplete from '@/components/Note/Autocomplete.vue'
 
 const props = defineProps<{ note: Note }>()
 

src/components/ViewModes/ListView.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="overflow-x-auto">
+    <table class="table-compact table w-full">
+      <!-- head -->
+      <thead>
+        <tr>
+          <th>
+            <label>
+              <input type="checkbox" class="checkbox-primary checkbox checkbox-sm" />
+            </label>
+          </th>
+          <th>Note title</th>
+          <th>References</th>
+          <th>Modified</th>
+        </tr>
+      </thead>
+      <tbody>
+        <!-- row 1 -->
+        <tr class="hover">
+          <th>
+            <label>
+              <input type="checkbox" class="checkbox-primary checkbox checkbox-sm" />
+            </label>
+          </th>
+          <td>Cy Ganderton</td>
+          <td>Quality Control Specialist</td>
+          <td>Blue</td>
+        </tr>
+        <!-- row 2 -->
+        <tr class="hover">
+          <th>
+            <label>
+              <input type="checkbox" class="checkbox-primary checkbox checkbox-sm" />
+            </label>
+          </th>
+          <td>Hart Hagerty</td>
+          <td>Desktop Support Technician</td>
+          <td>Purple</td>
+        </tr>
+        <!-- row 3 -->
+        <tr class="hover">
+          <th>
+            <label>
+              <input type="checkbox" class="checkbox-primary checkbox checkbox-sm" />
+            </label>
+          </th>
+          <td>Brice Swyre</td>
+          <td>Tax Accountant</td>
+          <td>Red</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>