refactor to ui components

src/components/ViewModes/ListView.vue

@@ -41,26 +41,26 @@ const deleteSelectedNotes = (closeModal: () => void) => {
           <div class="whitespace-nowrap font-semibold">{{ countSelectedNotes }} selected</div>
         </template>
       </div>
-      <Modal v-if="countSelectedNotes > 0">
+      <UIModal v-if="countSelectedNotes > 0">
         <template #activator="{ open }">
-          <button class="btn-toolbar btn-sm btn" @click="open">Delete</button>
+          <UIButton size="sm" @click="open">Delete</UIButton>
         </template>
         <template #default>Are you sure you want to delete the selected notes?</template>
         <template #actions="{ close }">
-          <button class="btn-primary btn-sm btn" @click="deleteSelectedNotes(close)">
+          <UIButton size="sm" color="primary" @click="deleteSelectedNotes(close)">
             Delete selected notes
-          </button>
-          <button class="btn-sm btn" @click="close">Close</button>
+          </UIButton>
+          <UIButton size="sm" @click="close">Close</UIButton>
         </template>
-      </Modal>
-      <input
-        type="text"
-        placeholder="Start typing to filter"
-        class="input-bordered input input-sm my-1 ml-auto mr-1 max-w-xs flex-grow"
+      </UIModal>
+      <UITextInput
+        size="sm"
         v-model="filter"
-      />
+        placeholder="Start typing to filter"
+        class="my-1 ml-auto mr-1 max-w-xs flex-grow"
+      ></UITextInput>
     </div>
-    <table class="table-compact table w-full">
+    <UITable density="compact" class="w-full">
       <thead>
         <tr>
           <th class="w-[48px]"></th>
@@ -101,6 +101,6 @@ const deleteSelectedNotes = (closeModal: () => void) => {
           <td>{{ formatDate(note.modified) }}</td>
         </tr>
       </tbody>
-    </table>
+    </UITable>
   </div>
 </template>