windmill-components 1.56.1 → 1.56.5

package/components/flows/content/FlowModuleHeader.svelte

@@ -3,7 +3,8 @@ import { classNames } from '../../../utils';
 import { faBed, faCodeBranch, faSave, faStop } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
-import { PhoneIncoming, Repeat } from 'lucide-svelte';
+import { Bed, PhoneIncoming, Repeat, Square } from 'lucide-svelte';
+import Popover from '../../Popover.svelte';
 export let module;
 const dispatch = createEventDispatcher();
 let width = 0;
@@ -12,30 +13,46 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 
 <div class="flex flex-row space-x-2" bind:clientWidth={width}>
 	{#if module.value.type === 'script' || module.value.type === 'rawscript'}
-		<button
-			class={classNames('badge', module.stop_after_if ? 'badge-on' : 'badge-off')}
-			on:click={() => dispatch('toggleStopAfterIf')}
-		>
-			<Icon data={faStop} scale={0.8} />
-		</button>
-		<button
-			class={classNames('badge', moduleRetry ? 'badge-on' : 'badge-off', 'center-center')}
+		<Popover
+			class="center-center rounded border p-2 
+			{moduleRetry
+				? 'bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-200'
+				: 'bg-white text-gray-800 border-gray-300 hover:bg-gray-100'}"
 			on:click={() => dispatch('toggleRetry')}
 		>
 			<Repeat size={14} />
-		</button>
-		<button
-			class={classNames('badge', Boolean(module.sleep) ? 'badge-on' : 'badge-off')}
-			on:click={() => dispatch('toggleSleep')}
+			<svelte:fragment slot="text">Retries</svelte:fragment>
+		</Popover>
+		<Popover
+			class="center-center rounded border p-2
+			{module.stop_after_if
+				? 'bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-200'
+				: 'bg-white text-gray-800 border-gray-300 hover:bg-gray-100'}"
+			on:click={() => dispatch('toggleStopAfterIf')}
 		>
-			<Icon data={faBed} scale={0.8} />
-		</button>
-		<button
-			class={classNames('badge', Boolean(module.suspend) ? 'badge-on' : 'badge-off')}
+			<Square size={14} />
+			<svelte:fragment slot="text">Early stop/break</svelte:fragment>
+		</Popover>
+		<Popover
+			class="center-center rounded border p-2 
+			{module.suspend
+				? 'bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-200'
+				: 'bg-white text-gray-800 border-gray-300 hover:bg-gray-100'}"
 			on:click={() => dispatch('toggleSuspend')}
 		>
 			<PhoneIncoming size={14} />
-		</button>
+			<svelte:fragment slot="text">Suspend</svelte:fragment>
+		</Popover>
+		<Popover
+			class="center-center rounded border p-2
+			{module.sleep
+				? 'bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-200'
+				: 'bg-white text-gray-800 border-gray-300 hover:bg-gray-100'}"
+			on:click={() => dispatch('toggleSleep')}
+		>
+			<Bed size={14} />
+			<svelte:fragment slot="text">Sleep</svelte:fragment>
+		</Popover>
 	{/if}
 	{#if module.value.type === 'script'}
 		<div class="w-2" />
@@ -64,69 +81,3 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 		</Button>
 	{/if}
 </div>
-
-<style>
-	.badge {
-
-    display: flex;
-
-    cursor: pointer;
-
-    align-items: center;
-
-    white-space: nowrap;
-
-    border-radius: 0.25rem;
-
-    border-width: 1px;
-
-    padding-left: 0.625rem;
-
-    padding-right: 0.625rem;
-
-    padding-top: 0.125rem;
-
-    padding-bottom: 0.125rem;
-
-    font-size: 0.875rem;
-
-    line-height: 1.25rem;
-
-    font-weight: 500
-}
-
-	.badge-on {
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(219 234 254 / var(--tw-bg-opacity));
-
-    --tw-text-opacity: 1;
-
-    color: rgb(30 64 175 / var(--tw-text-opacity))
-}
-
-	.badge-on:hover {
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(191 219 254 / var(--tw-bg-opacity))
-}
-
-	.badge-off {
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-
-    --tw-text-opacity: 1;
-
-    color: rgb(31 41 55 / var(--tw-text-opacity))
-}
-
-	.badge-off:hover {
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(229 231 235 / var(--tw-bg-opacity))
-}</style>

package/components/flows/content/FlowModuleHeader.svelte.d.ts

@@ -5,10 +5,10 @@ declare const __propDef: {
         module: FlowModule;
     };
     events: {
-        toggleStopAfterIf: CustomEvent<any>;
         toggleRetry: CustomEvent<any>;
-        toggleSleep: CustomEvent<any>;
+        toggleStopAfterIf: CustomEvent<any>;
         toggleSuspend: CustomEvent<any>;
+        toggleSleep: CustomEvent<any>;
         fork: CustomEvent<any>;
         createScriptFromInlineScript: CustomEvent<any>;
     } & {

package/components/flows/flowStore.d.ts

@@ -1,6 +1,6 @@
 import type { Flow, FlowModule } from '../../gen';
 export type FlowMode = 'push' | 'pull';
 export declare const flowStore: import("svelte/store").Writable<Flow>;
-export declare function dfs(modules: FlowModule[]): string[];
+export declare function dfs<T>(modules: FlowModule[], f: (x: FlowModule) => T): T[];
 export declare function initFlow(flow: Flow): Promise<void>;
 export declare function copyFirstStepSchema(): Promise<void>;

package/components/flows/flowStore.js

@@ -11,23 +11,23 @@ export const flowStore = writable({
     archived: false,
     extra_perms: {}
 });
-export function dfs(modules) {
+export function dfs(modules, f) {
     let result = [];
     for (const module of modules) {
         if (module.value.type == 'forloopflow') {
-            result = result.concat(module.id);
-            result = result.concat(dfs(module.value.modules));
+            result = result.concat(f(module));
+            result = result.concat(dfs(module.value.modules, f));
         }
         else if (module.value.type == 'branchone') {
-            result = result.concat(module.id);
-            result = result.concat(dfs(module.value.branches.map((b) => b.modules).flat().concat(module.value.default)));
+            result = result.concat(f(module));
+            result = result.concat(dfs(module.value.branches.map((b) => b.modules).flat().concat(module.value.default), f));
         }
         else if (module.value.type == 'branchall') {
-            result = result.concat(module.id);
-            result = result.concat(dfs(module.value.branches.map((b) => b.modules).flat()));
+            result = result.concat(f(module));
+            result = result.concat(dfs(module.value.branches.map((b) => b.modules).flat(), f));
         }
         else {
-            result.push(module.id);
+            result.push(f(module));
         }
     }
     return result;

package/components/flows/header/FlowPreviewButtons.svelte

@@ -20,7 +20,8 @@ $: upToDisabled =
             'settings-graph',
             'inputs',
             'schedules',
-            'failure'
+            'failure',
+            'constants'
         ].includes($selectedId) ||
         $selectedId?.includes('branch');
 let is_owner = false;

package/components/flows/map/FlowConstantsItem.svelte

@@ -0,0 +1,15 @@
+<script>import { getContext } from 'svelte';
+import Icon from 'svelte-awesome';
+import { faDollarSign } from '@fortawesome/free-solid-svg-icons';
+import { classNames } from '../../../utils';
+const { select, selectedId } = getContext('FlowEditorContext');
+$: settingsClass = classNames('border w-full rounded-sm p-2 bg-white border-gray-400 text-sm cursor-pointer flex items-center', $selectedId == 'constants' ? 'outline outline-offset-1 outline-2  outline-slate-900' : '');
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div on:click={() => select('constants')} class={settingsClass}>
+	<Icon data={faDollarSign} class="mr-2" />
+	<span class="text-xs flex flex-row justify-between w-full gap-2 items-center truncate">
+		All Static Inputs
+	</span>
+</div>

package/components/flows/map/FlowConstantsItem.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowConstantsItemProps = typeof __propDef.props;
+export type FlowConstantsItemEvents = typeof __propDef.events;
+export type FlowConstantsItemSlots = typeof __propDef.slots;
+export default class FlowConstantsItem extends SvelteComponentTyped<FlowConstantsItemProps, FlowConstantsItemEvents, FlowConstantsItemSlots> {
+}
+export {};

package/components/flows/map/FlowInputsItem.svelte

@@ -1,13 +1,12 @@
 <script>import { getContext } from 'svelte';
 import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte';
 import Icon from 'svelte-awesome';
-import { faFlagCheckered, faPen } from '@fortawesome/free-solid-svg-icons';
+import { faFlagCheckered } from '@fortawesome/free-solid-svg-icons';
 const { select, selectedId } = getContext('FlowEditorContext');
 </script>
 
 <FlowModuleSchemaItem
 	on:click={() => select('inputs')}
-	isFirst
 	hasLine
 	selected={$selectedId === 'inputs'}
 	bold

package/components/flows/map/FlowModuleSchemaItem.svelte

@@ -1,10 +1,9 @@
 <script>import Badge from '../../common/badge/Badge.svelte';
 import Popover from '../../Popover.svelte';
 import { classNames } from '../../../utils';
-import { faBed, faRepeat, faStop, faTimesCircle } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
-import Icon from 'svelte-awesome';
-import { PhoneIncoming, Repeat } from 'lucide-svelte';
+import { fade } from 'svelte/transition';
+import { Bed, PhoneIncoming, Repeat, Square, X } from 'lucide-svelte';
 export let isFirst = false;
 export let isLast = false;
 export let hasLine = true;
@@ -40,39 +39,52 @@ const dispatch = createEventDispatcher();
 		<div class="absolute text-sm right-12 -bottom-3 flex flex-row gap-1 z-20">
 			{#if retry}
 				<Popover notClickable>
-					<div class="bg-white rounded border text-gray-700 px-1 center-center">
+					<div
+						transition:fade={{duration: 200}}
+						class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+					>
 						<Repeat size={14} />
 					</div>
-					<span slot="text">Retries</span>
+					<svelte:fragment slot="text">Retries</svelte:fragment>
 				</Popover>
 			{/if}
 			{#if earlyStop}
 				<Popover notClickable>
-					<div class="bg-white rounded border text-gray-700 px-1">
-						<Icon scale={0.8} data={faStop} />
+					<div
+						transition:fade={{duration: 200}}
+						class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+					>
+						<Square size={14} />
 					</div>
-					<span slot="text">Early Stop/Break</span>
+					<svelte:fragment slot="text">Early stop/break</svelte:fragment>
 				</Popover>
 			{/if}
-			{#if sleep}
+			{#if suspend}
 				<Popover notClickable>
-					<div class="bg-white rounded border text-gray-700 px-1">
-						<Icon scale={0.8} data={faBed} />
+					<div
+						transition:fade={{duration: 200}}
+						class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+					>
+						<PhoneIncoming size={14} />
 					</div>
-					<span slot="text">Sleep</span>
+					<svelte:fragment slot="text">Suspend</svelte:fragment>
 				</Popover>
 			{/if}
-			{#if suspend}
+			{#if sleep}
 				<Popover notClickable>
-					<div class="bg-white rounded border text-gray-700 px-1 center-center">
-						<PhoneIncoming size={12} />
+					<div
+						transition:fade={{duration: 200}}
+						class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+					>
+						<Bed size={14} />
 					</div>
-					<span slot="text">Suspend</span>
+					<svelte:fragment slot="text">Sleep</svelte:fragment>
 				</Popover>
 			{/if}
 		</div>
 		<div
-			class="flex justify-between items-center w-full overflow-hidden rounded-sm border border-gray-400 p-2 bg-white text-2xs module"
+			class="flex justify-between items-center w-full overflow-hidden rounded-sm 
+			border border-gray-400 p-2 bg-white text-2xs module"
 		>
 			{#if $$slots.icon}
 				<slot name="icon" />
@@ -85,16 +97,13 @@ const dispatch = createEventDispatcher();
 				{/if}
 				{#if deletable}
 					<button
-						class="absolute -top-2 right-0 rounded-full h-4 w-4 trash center-center bg-white {selected
-							? ''
-							: '!hidden'}"
+						class="absolute -top-2 right-0 rounded-full h-4 w-4 trash center-center 
+						border-[1.5px] border-gray-700 bg-white duration-150 hover:bg-red-400 hover:text-white 
+						hover:border-red-700 {selected ? '' : '!hidden'}"
 						on:click={(event) => dispatch('delete', event)}
-						><Icon
-							data={faTimesCircle}
-							class="text-gray-600 hover:text-red-600"
-							scale={0.9}
-						/></button
 					>
+						<X size={12} strokeWidth={2} />
+					</button>
 				{/if}
 			</div>
 		</div>

package/components/flows/map/FlowModuleSchemaMap.svelte

@@ -9,10 +9,14 @@ import FlowSettingsItem from './FlowSettingsItem.svelte';
 import FlowInputsItem from './FlowInputsItem.svelte';
 import InsertModuleButton from './InsertModuleButton.svelte';
 import { slide } from 'svelte/transition';
+import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte';
+import { Icon } from 'svelte-awesome';
+import { faDollarSign } from '@fortawesome/free-solid-svg-icons';
+import FlowConstantsItem from './FlowConstantsItem.svelte';
 export let root = false;
 export let modules;
 let indexToRemove = undefined;
-const { select } = getContext('FlowEditorContext');
+const { select, selectedId } = getContext('FlowEditorContext');
 async function insertNewModuleAtIndex(index, kind) {
     await idMutex.runExclusive(async () => {
         var module = emptyModule(kind == 'flow');
@@ -85,12 +89,17 @@ $: confirmationModalOpen = indexToRemove !== undefined;
 <div class="flex flex-col h-full relative">
 	{#if root}
 		<div
-			class="z-10 sticky top-0 bg-gray-50 flex-initial inline-flex px-3 py-2 items-center h-full max-h-12 border-b border-gray-300"
+			class="z-10 sticky inline-flex top-0 bg-gray-50 flex-initial  px-3 py-2 items-center h-full max-h-12 border-b border-gray-300"
 		>
 			<FlowSettingsItem />
 		</div>
+		<div
+			class="z-10 sticky inline-flex top-0 bg-gray-50 flex-initial  px-3 py-2 items-center h-full max-h-12 border-b border-gray-300"
+		>
+			<FlowConstantsItem />
+		</div>
 	{/if}
-	<ul class="w-full flex-auto   {root ? 'px-2 pb-2 pt-3' : ''} py-1">
+	<ul class="w-full flex-auto {root ? 'px-2 pb-2 pt-3' : ''} py-1">
 		{#if root}
 			<li>
 				<FlowInputsItem />
@@ -139,5 +148,6 @@ $: confirmationModalOpen = indexToRemove !== undefined;
 			removeAtIndex(indexToRemove)
 			indexToRemove = undefined
 		}
+		$selectedId = 'settings-graph'
 	}}
 />

package/components/flows/map/FlowSettingsItem.svelte

@@ -1,10 +1,10 @@
 <script>import { getContext } from 'svelte';
 import Icon from 'svelte-awesome';
-import { faCalendarAlt, faSliders } from '@fortawesome/free-solid-svg-icons';
+import { faSliders } from '@fortawesome/free-solid-svg-icons';
 import { classNames } from '../../../utils';
 import { Badge } from '../../common';
 import { flowStore } from '../flowStore';
-const { select, selectedId, schedule } = getContext('FlowEditorContext');
+const { select, selectedId } = getContext('FlowEditorContext');
 $: settingsClass = classNames('border w-full rounded-sm p-2 bg-white border-gray-400 text-sm cursor-pointer flex items-center', $selectedId?.startsWith('settings')
     ? 'outline outline-offset-1 outline-2  outline-slate-900'
     : '');

package/components/flows/pickers/PickHubScript.svelte

@@ -82,6 +82,6 @@ const maxItems = 40;
 	{/if}
 {:else}
 	{#each Array(10).fill(0) as _}
-		<Skeleton layout={[[4], 0.5]} />
+		<Skeleton layout={[0.5, [4]]} />
 	{/each}
 {/if}

package/components/sidebar/FavoriteMenu.svelte

@@ -1,12 +1,13 @@
 <script>import { classNames } from '../../utils';
-import { faCode, faStar, faTelevision, faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
+import { Code2, LayoutDashboard } from 'lucide-svelte';
+import { faStar, faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
 import Menu from '../common/menu/Menu.svelte';
 export let isCollapsed = false;
 export let favoriteLinks = [];
 </script>
 
-<Menu placement="bottom-start" let:close noMinW>
+<Menu placement="bottom-start" let:close>
 	<button
 		slot="trigger"
 		type="button"
@@ -24,29 +25,32 @@ export let favoriteLinks = [];
 		{/if}
 	</button>
 
-	<div class="divide-y divide-gray-100  overflow-hidden" role="none">
-		<table class="w-full">
-			{#each favoriteLinks ?? [] as favorite (favorite.href)}
-				<tr>
-					<a href={favorite.href} on:click={close} class="inline-flex flex-row px-4 py-2">
-						<td class="center-center">
+	<div class="overflow-hidden" role="none">
+		{#if !favoriteLinks.length}
+			<div class="py-1" role="none">
+				<div class="text-gray-600 block px-4 py-2 text-xs" role="menuitem" tabindex="-1">
+					Add Scripts/Flows/Apps here by starring them
+				</div>
+			</div>
+		{:else}
+			<div class="py-1 w-full max-w-full">
+				{#each favoriteLinks ?? [] as favorite (favorite.href)}
+					<a href={favorite.href} on:click={close} class="w-full inline-flex flex-row px-4 py-2 hover:bg-gray-100">
+						<span class="center-center">
 							{#if favorite.kind == 'script'}
-								<Icon data={faCode} />
+								<Code2 size={16} />
 							{:else if favorite.kind == 'flow'}
 								<Icon data={faBarsStaggered} />
 							{:else if favorite.kind == 'app'}
-								<Icon data={faTelevision} />
+								<LayoutDashboard size={16} />
 							{/if}
-						</td>
-						<td class="text-gray-800 ml-2 grow text-xs center-center truncate">{favorite.label}</td>
+						</span>
+						<span class="text-gray-800 ml-2 grow min-w-0 text-xs truncate">
+							{favorite.label}
+						</span>
 					</a>
-				</tr>
-			{/each}
-		</table>
-		<div class="py-1" role="none">
-			<div class="text-gray-600 block px-4 py-2 text-xs" role="menuitem" tabindex="-1">
-				Add Scripts/Flows/Apps here by starring them
+				{/each}
 			</div>
-		</div>
+		{/if}
 	</div>
 </Menu>

package/components/sidebar/MenuLink.svelte

@@ -1,5 +1,5 @@
 <script>import { classNames } from '../../utils';
-import { navigating } from '$app/stores';
+import { navigating, page } from '$app/stores';
 import Icon from 'svelte-awesome';
 export let label;
 export let href;
@@ -9,10 +9,10 @@ export let disabled = false;
 let isSelected = false;
 navigating.subscribe(() => {
     if (href === '/') {
-        isSelected = window.location.pathname === href;
+        isSelected = $page.url.pathname === href;
     }
     else {
-        isSelected = window.location.pathname.includes(href);
+        isSelected = $page.url.pathname.includes(href);
     }
 });
 </script>
@@ -41,7 +41,7 @@ navigating.subscribe(() => {
 		{#if !isCollapsed}
 			<span
 				class={classNames(
-					'whitespace-pre text-white truncate',
+					'whitespace-pre truncate',
 					isSelected ? ' text-gray-700 font-bold' : 'text-white group-hover:text-gray-900'
 				)}
 			>

package/components/sidebar/MenuLink.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
 declare const __propDef: {
     props: {
         [x: string]: any;

package/components/sidebar/SidebarContent.svelte

@@ -1,4 +1,4 @@
-<script>import { faBookOpen, faCalendar, faCubes, faEye, faHomeAlt, faPlay, faRobot, faUsersCog, faCog, faDollarSign, faFolderTree } from '@fortawesome/free-solid-svg-icons';
+<script>import { faBookOpen, faCalendar, faCubes, faEye, faHomeAlt, faPlay, faRobot, faUsersCog, faCog, faDollarSign, faFolderOpen } from '@fortawesome/free-solid-svg-icons';
 import { faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons';
 import MenuLink from './MenuLink.svelte';
 import { userStore } from '../../stores';
@@ -10,7 +10,7 @@ const mainMenuLinks = [
 ];
 $: secondaryMenuLinks = [
     { label: 'Schedules', href: '/schedules', icon: faCalendar, disabled: $userStore?.operator },
-    { label: 'Folders', href: '/folders', icon: faFolderTree, disabled: $userStore?.operator },
+    { label: 'Folders', href: '/folders', icon: faFolderOpen, disabled: $userStore?.operator },
     { label: 'Groups', href: '/groups', icon: faUsersCog, disabled: $userStore?.operator },
     { label: 'Audit Logs', href: '/audit_logs', icon: faEye, disabled: $userStore?.operator },
     {
@@ -33,22 +33,22 @@ const thirdMenuLinks = [
 export let isCollapsed = false;
 </script>
 
-<div class="flex-1 flex flex-col pb-4 overflow-x-hidden scrollbar-hidden">
-	<nav class="h-full flex justify-between flex-col px-2">
-		<div class="space-y-1 pt-4">
-			{#each mainMenuLinks as menuLink (menuLink.href)}
-				<MenuLink class="text-md" {...menuLink} {isCollapsed} />
-			{/each}
-			<div class="h-2" />
-		</div>
-		<div class="space-1-2">
+<nav class="grow flex md:justify-between flex-col overflow-x-hidden scrollbar-hidden px-2 md:pb-4">
+	<div class="space-y-1 pt-4 mb-6 md:mb-10">
+		{#each mainMenuLinks as menuLink (menuLink.href)}
+			<MenuLink class="!text-md" {...menuLink} {isCollapsed} />
+		{/each}
+	</div>
+	<div>
+		<div class="mb-6 md:mb-10">
 			{#each secondaryMenuLinks as menuLink (menuLink.href)}
-				<MenuLink class="text-xs" {...menuLink} {isCollapsed} />
+				<MenuLink class="!text-xs" {...menuLink} {isCollapsed} />
 			{/each}
-			<div class="h-8" />
+		</div>
+		<div>
 			{#each thirdMenuLinks as menuLink (menuLink.href)}
-				<MenuLink class="text-xs" {...menuLink} {isCollapsed} />
+				<MenuLink class="!text-xs" {...menuLink} {isCollapsed} />
 			{/each}
 		</div>
-	</nav>
-</div>
+	</div>
+</nav>

package/components/sidebar/WorkspaceMenu.svelte

@@ -24,22 +24,24 @@ export let isCollapsed = false;
 	</button>
 
 	<div class="divide-y divide-gray-100" role="none">
-		<table class="w-full">
-			{#each $userWorkspaces as workspace}
-				<tr
-					class="text-xs cursor-pointer"
-					on:click={() => {
-						workspaceStore.set(workspace.id)
-						close()
-					}}
-				>
-					<td class="text-gray-500 font-mono pl-4 pr-1 py-2 text-xs whitespace-nowrap"
-						>{workspace.id}</td
+		<div class="py-1">
+			<table class="w-full">
+				{#each $userWorkspaces as workspace}
+					<tr
+						class="text-xs cursor-pointer hover:bg-gray-100"
+						on:click={() => {
+							workspaceStore.set(workspace.id)
+							close()
+						}}
 					>
-					<td class="text-gray-700 pr-4 py-2 w-full">{workspace.name}</td>
-				</tr>
-			{/each}
-		</table>
+						<td class="text-gray-500 font-mono pl-4 pr-1 py-2 text-xs whitespace-nowrap"
+							>{workspace.id}</td
+						>
+						<td class="text-gray-700 pr-4 py-2 w-full">{workspace.name}</td>
+					</tr>
+				{/each}
+			</table>
+		</div>
 		<div class="py-1" role="none">
 			<a
 				href="/user/create_workspace"

package/logout.d.ts

@@ -1,2 +1,3 @@
 export declare function logoutWithRedirect(rd?: string): Promise<void>;
 export declare function logout(): Promise<void>;
+export declare function clearUser(): Promise<void>;