Add dialog functionality and improve the favourite feature

Added a new dialog.js file to handle dialog based interactions. The favourite feature has been enhanced, removing the need for users to manually enter the path while adding elements to favourites. Instead, a dialog box opens for users to select the directory. Furthermore, a confirmation is now prompted when users try to remove a favourite, improving UX and preventing accidental deletions. These changes were reflected in index.html and favourites.js.

src/index.html

@@ -28,7 +28,6 @@
     <div class="h-full flex">
       <dialog data-ui="favourite-dialog" class="flex flex-col gap-2 bg-green-500 backdrop-blur-lg mt-16 w-44">
         <input type="text" aria-label="Name" data-ui="favourite-name" />
-        <input type="text" aria-label="Path" data-ui="favourite-path" />
         <div class="w-44 flex">
           <button data-ui="favourite-submit" class="bg-white w-1/2">Add</button>
           <button data-ui="favourite-close" class="bg-white w-1/2">Close</button>

src/libs/dialog.js

@@ -0,0 +1,9 @@
+import {tauriDialog} from "./tauri.js";
+
+export const {
+    ask,
+    confirm,
+    message,
+    open,
+    save,
+} = tauriDialog;

src/parts/favourites.js

@@ -2,6 +2,8 @@ import {getElements, getOneElementOrThrow} from "../libs/element.js";
 import {addFavourite, getFavourites, removeFavouriteByIndex} from "../libs/config.js";
 import {getTemplate} from "../libs/template.js";
 import {navigate} from "../libs/navigation.js";
+import {ask, open} from "../libs/dialog.js";
+import {basename} from "../libs/path.js";
 
 export const renderFavourite = () => {
     const favouriteList = getOneElementOrThrow(document, '[data-ui=favourites]');
@@ -20,10 +22,13 @@ export const renderFavourite = () => {
         if (system) {
             removeEl.remove();
         } else {
-            removeEl.addEventListener('click', () => {
+            removeEl.addEventListener('click', async () => {
+                const confirm = await ask(`Remove ${name} from favourites?`);
+                if (confirm) {
                     removeFavouriteByIndex(index);
 
                     renderFavourite();
+                }
             });
         }
 
@@ -37,18 +42,18 @@ export const renderFavourite = () => {
      */
     const dialog = getOneElementOrThrow(document, '[data-ui=favourite-dialog]');
     dialog.close();
-    addEl.addEventListener('click', () => {
+    addEl.addEventListener('click', async () => {
         const nameEl = getOneElementOrThrow(dialog, '[data-ui=favourite-name]');
-        const pathEl = getOneElementOrThrow(dialog, '[data-ui=favourite-path]');
         const submitEl = getOneElementOrThrow(dialog, '[data-ui=favourite-submit]');
         const closeEl = getOneElementOrThrow(dialog, '[data-ui=favourite-close]');
 
+        const path = await open({ directory: true })
+        nameEl.value = await basename(path);
+
         dialog.showModal();
 
         const handleClose = () => {
             nameEl.value = '';
-            pathEl.value = '';
-
             dialog.close();
         }
 
@@ -56,7 +61,6 @@ export const renderFavourite = () => {
 
         submitEl.addEventListener('click', () => {
             const { value: name } = nameEl;
-            const { value: path } = pathEl;
 
             if (name.trim() && path.trim()) {
                 const favourites = getFavourites();