adds profile page

web/src/lib/components/base/dropdown.svelte

@@ -16,7 +16,7 @@
 
     let isOpen = false;
 
-    function toggleMenu(e: MouseEvent) {
+    export function toggleMenu(e: MouseEvent) {
         e.stopPropagation();
         e.preventDefault();
         isOpen = !isOpen;
@@ -35,15 +35,16 @@
 <svelte:window on:mouseup={() => (isOpen = false)} />
 
 <div class="dropdown relative">
-    <button
-        class="btn-icon flex items-center justify-center"
-        on:click={toggleMenu}
-        type="button"
-    >
-        <slot>
+    <slot {toggleMenu}>
+        <button
+            class="btn-icon flex items-center justify-center"
+            on:click={toggleMenu}
+            type="button"
+        >
             <i class="fa fa-ellipsis-vertical text-{size}"></i>
-        </slot>
-    </button>
+        </button>
+    </slot>
+
     {#if isOpen}
         <ul
             class="menu absolute bg-menu-background border border-input-border rounded-l-xl rounded-b-xl shadow-md right-0 overflow-hidden mt-2"
@@ -51,13 +52,10 @@
             style="z-index: 1001"
         >
             {#each items as item}
-                <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-                <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
                 <li
                     class="menu-item flex items-center px-4 py-3 cursor-pointer hover:bg-menu-item-background-hover focus:bg-menu-item-background-focus transition-colors"
-                    tabindex="0"
+                    role="presentation"
                     on:mouseup|stopPropagation={() => handleItemClick(item)}
-                    on:keydown|stopPropagation={() => handleItemClick(item)}
                 >
                     {#if item.icon}
                         <i class="fa fa-{item.icon} mr-3"></i>

web/src/lib/components/base/modal.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     export let id: string;
     export let title: string;
+    export let size: string = "2xl";
     export function openModal() {
         document.body.style.position = "fixed";
         document.body.style.width = "100%";
@@ -24,7 +25,7 @@
     {id}
     tabindex="-1"
     aria-hidden="true"
-    class="relative w-full max-w-2xl max-h-full rounded-xl text-content"
+    class="relative w-full max-w-{size} max-h-full rounded-xl text-content"
 >
     <!-- Modal content -->
     <div class="relative bg-background shadow">

web/src/lib/components/base/toast.svelte

@@ -9,18 +9,19 @@
 
 {#if $toast}
     <div
-        class="fixed px-4 py-3 shadow-xl rounded-xl border bottom-4 right-4 bg-white text-gray-500 flex items-center"
+        class="fixed px-4 py-3 shadow-xl rounded-xl border bottom-4 right-4 bg-white text-gray-500 flex items-center max-w-md"
         style="z-index: 1001;"
         in:fade={{ duration: 250 }}
         out:fade={{ duration: 250 }}
     >
-        <span>
-            <i
-                class="fa fa-{$toast.icon} p-3 mr-2 rounded-lg"
-                class:success-toast={$toast.type == "success"}
-                class:error-toast={$toast.type == "error"}
-            ></i>{$toast.text}</span
-        >
+        <i
+            class="fa fa-{$toast.icon} p-3 mr-2 rounded-lg"
+            class:success-toast={$toast.type == "success"}
+            class:error-toast={$toast.type == "error"}
+        ></i>
+        <p class="mr-4">
+            {$toast.text}
+        </p>
         <button
             type="button"
             class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white ml-6"