duckylib 0.1.12 → 0.1.13

package/dist/components/buttons/UserToast.svelte

@@ -8,13 +8,26 @@
     import { MediaQuery } from "svelte/reactivity";
     import Symbol from "../text/Symbol.svelte";
     import Row from "../containers/Row.svelte";
+    import Text from "../text/Text.svelte"
+
+    interface ContextMenuEntry {
+        label: string;
+        symbol: string;
+        href: string;
+        disabled: boolean;
+    }
+
+    interface ContextMenuSection {
+        items: ContextMenuEntry[];
+    }
 
     interface UserToastProps {
         user: Auth.User;
+        contextMenu: ContextMenuSection[];
         onlogout?: () => Promise<void>;
     }
 
-    let { user, onlogout }: UserToastProps = $props();
+    let { user, onlogout, contextMenu }: UserToastProps = $props();
 
     let showContextMenu = $state(false);
 
@@ -61,19 +74,40 @@
             <!-- svelte-ignore a11y_click_events_have_key_events -->
             <!-- svelte-ignore a11y_no_static_element_interactions -->
             <contextentry data-disabled="true" id="informative-username">
-                <span class="material-symbols-outlined">account_circle</span>
-                {user.username}
+                <Symbol name="account_circle" inheritColor={true} />
+                <Text weight="bolder" sizeEm={1.1}>{user.username}</Text>
             </contextentry>
+            <hr />
         {/if}
+        {#each contextMenu as section}
+            {#each section.items as item}
+                <!-- svelte-ignore a11y_click_events_have_key_events -->
+                <!-- svelte-ignore a11y_no_static_element_interactions -->
+                <contextentry
+                    data-disabled="{item.disabled}"
+                    id="{item.label.replaceAll(/ +/gim, "-").toLowerCase()}"
+                    onclick={async () => {
+                        if(browser) window.location.replace(item.href)
+                    }}
+                >
+                    <Symbol name={item.symbol} inheritColor={true} />
+                    <Text weight="bolder" sizeEm={1}>{item.label}</Text>
+
+                </contextentry>
+                <hr />
+            {/each}
+        {/each}
         <!-- svelte-ignore a11y_click_events_have_key_events -->
         <!-- svelte-ignore a11y_no_static_element_interactions -->
         <contextentry
             data-disabled="false"
             id="log-out"
-            onclick={async () => {if(onlogout) await onlogout()}}
+            onclick={async () => {
+                if (onlogout) await onlogout();
+            }}
         >
-            <span class="material-symbols-outlined">logout</span>
-            <red>Log Out</red>
+            <Symbol name="logout" inheritColor={true} />
+                    <Text weight="bold" sizeEm={1} classList={["red"]}>Log Out</Text>
         </contextentry>
         <hr />
         <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -197,7 +231,7 @@
         margin-right: auto;
         background-color: var(--overlay-0);
         opacity: 0.6;
-        margin: 0.66em 0;
+        margin: 0.4em 0;
         margin-left: 0.33em;
         width: 92%;
         border: none;
@@ -236,7 +270,7 @@
 
         width: 95%;
         cursor: pointer;
-        padding: 0.1em 0.33em;
+        padding: 0em 0.33em;
         margin: 0.1em 0em;
 
         border-radius: 8px;

package/dist/components/buttons/UserToast.svelte.d.ts

@@ -1,6 +1,16 @@
 import type { Auth } from "../../types.ts";
+interface ContextMenuEntry {
+    label: string;
+    symbol: string;
+    href: string;
+    disabled: boolean;
+}
+interface ContextMenuSection {
+    items: ContextMenuEntry[];
+}
 interface UserToastProps {
     user: Auth.User;
+    contextMenu: ContextMenuSection[];
     onlogout?: () => Promise<void>;
 }
 declare const UserToast: import("svelte").Component<UserToastProps, {}, "">;

package/dist/components/containers/navigation/Header.svelte

@@ -12,6 +12,17 @@
     import { PUBLIC_MOBILE_SIZE_PX, PUBLIC_TABLET_SIZE_PX } from "$env/static/public";
     import SearchBar, { type QueryMapKeys, type SearchResult } from "./SearchBar.svelte";
 
+    interface ContextMenuEntry {
+        label: string;
+        symbol: string;
+        href: string;
+        disabled: boolean;
+    }
+
+    interface ContextMenuSection {
+        items: ContextMenuEntry[];
+    }
+
     export interface HeaderNavigation {
         label: string;
         pathname: string;
@@ -41,6 +52,7 @@
         loginButtonLabel?: string;
         onlogin?: (() => Promise<void>) | null;
         onlogout?: (() => Promise<void>) | null;
+        userContextMenu?: ContextMenuSection[]
 
         nav?: HeaderNavigation[];
     }
@@ -74,6 +86,7 @@
         loginButtonLabel,
         onlogin = null,
         onlogout = null,
+        userContextMenu = [],
 
         nav = [],
     }: HeaderProps = $props();
@@ -166,7 +179,7 @@
                 <Row widthPx="fit">
 
                     {#if user !== null && onlogout}
-                        <UserToast {user} {onlogout} />
+                        <UserToast contextMenu={userContextMenu} {user} {onlogout} />
                     {:else if onlogin}
                         <LoginButton {onlogin} label={loginButtonLabel ? loginButtonLabel : "Log In"} />
                     {/if}

package/dist/components/containers/navigation/Header.svelte.d.ts

@@ -1,5 +1,14 @@
 import type { Snippet } from "svelte";
 import { type QueryMapKeys, type SearchResult } from "./SearchBar.svelte";
+interface ContextMenuEntry {
+    label: string;
+    symbol: string;
+    href: string;
+    disabled: boolean;
+}
+interface ContextMenuSection {
+    items: ContextMenuEntry[];
+}
 export interface HeaderNavigation {
     label: string;
     pathname: string;
@@ -25,6 +34,7 @@ interface HeaderProps {
     loginButtonLabel?: string;
     onlogin?: (() => Promise<void>) | null;
     onlogout?: (() => Promise<void>) | null;
+    userContextMenu?: ContextMenuSection[];
     nav?: HeaderNavigation[];
 }
 declare const Header: import("svelte").Component<HeaderProps, {}, "">;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "duckylib",
-	"version": "0.1.12",
+	"version": "0.1.13",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",