windmill-components 1.46.3 → 1.52.0

package/components/progressBar/ProgressBar.svelte.d.ts

@@ -12,9 +12,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ProgressBarProps = typeof __propDef.props;
-export declare type ProgressBarEvents = typeof __propDef.events;
-export declare type ProgressBarSlots = typeof __propDef.slots;
+export type ProgressBarProps = typeof __propDef.props;
+export type ProgressBarEvents = typeof __propDef.events;
+export type ProgressBarSlots = typeof __propDef.slots;
 export default class ProgressBar extends SvelteComponentTyped<ProgressBarProps, ProgressBarEvents, ProgressBarSlots> {
 }
 export {};

package/components/progressBar/ProgressBarGeneralPart.svelte.d.ts

@@ -11,9 +11,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ProgressBarGeneralPartProps = typeof __propDef.props;
-export declare type ProgressBarGeneralPartEvents = typeof __propDef.events;
-export declare type ProgressBarGeneralPartSlots = typeof __propDef.slots;
+export type ProgressBarGeneralPartProps = typeof __propDef.props;
+export type ProgressBarGeneralPartEvents = typeof __propDef.events;
+export type ProgressBarGeneralPartSlots = typeof __propDef.slots;
 export default class ProgressBarGeneralPart extends SvelteComponentTyped<ProgressBarGeneralPartProps, ProgressBarGeneralPartEvents, ProgressBarGeneralPartSlots> {
 }
 export {};

package/components/progressBar/ProgressBarLoopAccessor.svelte.d.ts

@@ -11,9 +11,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ProgressBarLoopAccessorProps = typeof __propDef.props;
-export declare type ProgressBarLoopAccessorEvents = typeof __propDef.events;
-export declare type ProgressBarLoopAccessorSlots = typeof __propDef.slots;
+export type ProgressBarLoopAccessorProps = typeof __propDef.props;
+export type ProgressBarLoopAccessorEvents = typeof __propDef.events;
+export type ProgressBarLoopAccessorSlots = typeof __propDef.slots;
 export default class ProgressBarLoopAccessor extends SvelteComponentTyped<ProgressBarLoopAccessorProps, ProgressBarLoopAccessorEvents, ProgressBarLoopAccessorSlots> {
 }
 export {};

package/components/progressBar/ProgressBarLoopPart.svelte.d.ts

@@ -11,9 +11,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ProgressBarLoopPartProps = typeof __propDef.props;
-export declare type ProgressBarLoopPartEvents = typeof __propDef.events;
-export declare type ProgressBarLoopPartSlots = typeof __propDef.slots;
+export type ProgressBarLoopPartProps = typeof __propDef.props;
+export type ProgressBarLoopPartEvents = typeof __propDef.events;
+export type ProgressBarLoopPartSlots = typeof __propDef.slots;
 export default class ProgressBarLoopPart extends SvelteComponentTyped<ProgressBarLoopPartProps, ProgressBarLoopPartEvents, ProgressBarLoopPartSlots> {
 }
 export {};

package/components/progressBar/model.d.ts

@@ -4,29 +4,29 @@ export interface ProgressStateStoreValue {
     finished: boolean;
     error: boolean;
 }
-export declare type StepKind = 'general' | 'loop';
-declare type Step<T extends StepKind> = {
+export type StepKind = 'general' | 'loop';
+type Step<T extends StepKind> = {
     type: T;
     isDone: boolean;
 };
-export declare type GeneralStep = Step<'general'>;
-export declare type LoopStep = Step<'loop'> & {
+export type GeneralStep = Step<'general'>;
+export type LoopStep = Step<'loop'> & {
     index: number;
     length: number;
 };
-export declare type ProgressStep = GeneralStep | LoopStep;
+export type ProgressStep = GeneralStep | LoopStep;
 export declare function isLoopStep(step: ProgressStep | undefined): step is LoopStep;
-declare type State<T extends StepKind> = {
+type State<T extends StepKind> = {
     type: T;
     isDone: boolean;
     isDoneChanged: boolean;
 };
-export declare type GeneralState = State<'general'>;
-export declare type LoopState = LoopStep & {
+export type GeneralState = State<'general'>;
+export type LoopState = LoopStep & {
     index: number;
     indexChanged: boolean;
 };
-export declare type ProgressState = GeneralState | LoopState;
+export type ProgressState = GeneralState | LoopState;
 export declare function isLoopState(state: ProgressState | undefined): state is LoopState;
 export declare function getTween(initialValue?: number, duration?: number): import("svelte/motion").Tweened<number>;
 export {};

package/components/propertyPicker/ObjectViewer.svelte

@@ -1,5 +1,6 @@
-<script>import { truncate } from '../../utils';
+<script>import { pluralize, truncate } from '../../utils';
 import { createEventDispatcher } from 'svelte';
+import { Badge } from '../common';
 import { NEVER_TESTED_THIS_FAR } from '../flows/utils';
 import { getTypeAsString } from '../flows/utils';
 import { computeKey } from './utils';
@@ -12,6 +13,7 @@ export let pureViewer = false;
 export let collapsed = level == 3 || Array.isArray(json);
 export let rawKey = false;
 export let topBrackets = false;
+export let topLevelNode = false;
 const collapsedSymbol = '...';
 let keys;
 let isArray;
@@ -35,17 +37,30 @@ function selectProp(key) {
 {#if keys.length > 0}
 	<span class:hidden={collapsed}>
 		{#if level != 0}
-			<span class="cursor-pointer hover:bg-gray-200 px-1 rounded" on:click={collapse}> (-) </span>
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<span
+				class="cursor-pointer border border-gray-300 hover:bg-gray-200 px-1 rounded"
+				on:click={collapse}
+			>
+				-
+			</span>
 		{/if}
 		{#if level == 0 && topBrackets}<span class="h-0">{openBracket}</span>{/if}
 		<ul class="w-full">
 			{#each keys as key, index}
 				<li class="pt-1">
-					<button
-						on:click={() => selectProp(key)}
-						class="key {pureViewer ? 'cursor-auto' : ''} font-normal rounded px-1 hover:bg-blue-100"
-					>
-						{!isArray ? key : index}:
+					<button on:click={() => selectProp(key)}>
+						{#if topLevelNode}
+							<Badge baseClass="border border-blue-600" color="indigo">{key}</Badge>
+						{:else}
+							<span
+								class="key {pureViewer
+									? 'cursor-auto'
+									: 'border border-gray-300'} font-normal rounded px-1 hover:bg-blue-100"
+							>
+								{!isArray ? key : index}</span
+							>
+						{/if}:
 					</button>
 
 					{#if getTypeAsString(json[key]) === 'object'}
@@ -61,7 +76,7 @@ function selectProp(key) {
 						<button
 							class="val {pureViewer
 								? 'cursor-auto'
-								: ''} rounded px-1 hover:bg-blue-100 {getTypeAsString(json[key])}"
+								: ''} rounded hover:bg-blue-100 {getTypeAsString(json[key])}"
 							on:click={() => selectProp(key)}
 						>
 							{#if json[key] === NEVER_TESTED_THIS_FAR}
@@ -78,9 +93,19 @@ function selectProp(key) {
 		</ul>
 		{#if level == 0 && topBrackets}<span class="h-0">{closeBracket}</span>{/if}
 	</span>
-	<span class="cursor-pointer hover:bg-gray-200" class:hidden={!collapsed} on:click={collapse}>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<span
+		class="border border-blue-600 rounded px-1 cursor-pointer hover:bg-gray-200"
+		class:hidden={!collapsed}
+		on:click={collapse}
+	>
 		{openBracket}{collapsedSymbol}{closeBracket}
 	</span>
+	{#if collapsed}
+		<span class="text-gray-500 text-xs">
+			{pluralize(Object.keys(json).length, Array.isArray(json) ? 'item' : 'key')}
+		</span>
+	{/if}
 	{#if !isLast && collapsed}
 		<span class="text-black">,</span>
 	{/if}

package/components/propertyPicker/ObjectViewer.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         collapsed?: boolean | undefined;
         rawKey?: boolean | undefined;
         topBrackets?: boolean | undefined;
+        topLevelNode?: boolean | undefined;
     };
     events: {
         select: CustomEvent<any>;
@@ -17,9 +18,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ObjectViewerProps = typeof __propDef.props;
-export declare type ObjectViewerEvents = typeof __propDef.events;
-export declare type ObjectViewerSlots = typeof __propDef.slots;
+export type ObjectViewerProps = typeof __propDef.props;
+export type ObjectViewerEvents = typeof __propDef.events;
+export type ObjectViewerSlots = typeof __propDef.slots;
 export default class ObjectViewer extends SvelteComponentTyped<ObjectViewerProps, ObjectViewerEvents, ObjectViewerSlots> {
 }
 export {};

package/components/propertyPicker/PropPicker.svelte

@@ -38,131 +38,139 @@ async function loadResources() {
 }
 </script>
 
-{#if !notSelectable}
-	<div class="flex flex-row space-x-1">
-		{#if $propPickerConfig}
-			<Badge color="blue">
-				{`Selected: ${$propPickerConfig?.propName}`}
-			</Badge>
-			<Badge color="blue">
-				{`Mode: ${$propPickerConfig?.insertionMode}`}
-			</Badge>
-		{:else}
-			<Badge>&leftarrow; Select a step input</Badge>
+<div class="flex flex-col h-full">
+	<div class="px-2">
+		{#if !notSelectable}
+			<div class="flex flex-row space-x-1">
+				{#if $propPickerConfig}
+					<Badge large color="blue">
+						{`Selected: ${$propPickerConfig?.propName}`}
+					</Badge>
+					<Badge large color="blue">
+						{`Mode: ${$propPickerConfig?.insertionMode}`}
+					</Badge>
+				{:else}
+					<Badge large color="blue">&leftarrow; Select a step input</Badge>
+				{/if}
+			</div>
 		{/if}
-	</div>
-{/if}
-<input
-	type="text"
-	bind:value={search}
-	class="bg-gray-50 mt-1 border border-gray-300 text-gray-900 text-sm rounded-lg block px-2 mb-2 w-full"
-	placeholder="Search prop..."
-/>
-<div class:bg-gray-100={!$propPickerConfig && !notSelectable}>
-	<div class="flex justify-between items-center space-x-1">
-		<span class="font-bold text-sm">Flow Input</span>
-		<div class="flex space-x-2 items-center" />
-	</div>
-	<div class="overflow-y-auto mb-2">
-		<ObjectViewer
-			pureViewer={!$propPickerConfig}
-			json={flowInputsFiltered}
-			on:select={(e) => {
-				dispatch('select', `flow_input.${e.detail}`)
-			}}
+		<input
+			type="text"
+			bind:value={search}
+			class="bg-gray-50 mt-2 border border-gray-300 text-gray-900 text-sm rounded-lg block mb-2 w-full"
+			placeholder="Search prop..."
 		/>
 	</div>
-	{#if error}
-		<span class="font-bold text-sm">Error</span>
+	<div class="overflow-y-auto px-2 grow" class:bg-gray-100={!$propPickerConfig && !notSelectable}>
+		<div class="flex justify-between items-center space-x-1">
+			<span class="font-bold text-sm">Flow Input</span>
+			<div class="flex space-x-2 items-center" />
+		</div>
 		<div class="overflow-y-auto mb-2">
 			<ObjectViewer
 				pureViewer={!$propPickerConfig}
-				json={{ previous_result: { error: 'The error to handle' } }}
-				on:select
+				json={flowInputsFiltered}
+				on:select={(e) => {
+					dispatch('select', `flow_input.${e.detail}`)
+				}}
 			/>
 		</div>
-	{:else}
-		{#if previousId}
-			<span class="font-bold text-sm">Previous Result</span>
+		{#if error}
+			<span class="font-bold text-sm">Error</span>
 			<div class="overflow-y-auto mb-2">
 				<ObjectViewer
 					pureViewer={!$propPickerConfig}
-					json={Object.fromEntries(
-						Object.entries(resultByIdFiltered).filter(([k, v]) => k == previousId)
-					)}
-					on:select={(e) => {
-						dispatch('select', `results.${e.detail}`)
-					}}
+					json={{ previous_result: { error: 'The error to handle' } }}
+					on:select
 				/>
 			</div>
+		{:else}
+			{#if previousId}
+				<span class="font-bold text-sm">Previous Result</span>
+				<div class="overflow-y-auto mb-2">
+					<ObjectViewer
+						topLevelNode
+						pureViewer={!$propPickerConfig}
+						json={Object.fromEntries(
+							Object.entries(resultByIdFiltered).filter(([k, v]) => k == previousId)
+						)}
+						on:select={(e) => {
+							dispatch('select', `results.${e.detail}`)
+						}}
+					/>
+				</div>
+			{/if}
+			{#if Object.keys(pickableProperties.priorIds).length > 0}
+				<span class="font-bold text-sm">All Results</span>
+				<div class="overflow-y-auto mb-2">
+					<ObjectViewer
+						topLevelNode
+						pureViewer={!$propPickerConfig}
+						collapsed={true}
+						json={resultByIdFiltered}
+						on:select={(e) => {
+							dispatch('select', `results.${e.detail}`)
+						}}
+					/>
+				</div>
+			{/if}
 		{/if}
-		{#if Object.keys(pickableProperties.priorIds).length > 0}
-			<span class="font-bold text-sm">All Results</span>
+
+		{#if displayContext}
+			<span class="font-bold text-sm">Variables </span>
 			<div class="overflow-y-auto mb-2">
-				<ObjectViewer
-					pureViewer={!$propPickerConfig}
-					collapsed={true}
-					json={resultByIdFiltered}
-					on:select={(e) => {
-						dispatch('select', `results.${e.detail}`)
-					}}
-				/>
+				{#if displayVariable}
+					<Button
+						color="light"
+						size="xs"
+						variant="border"
+						on:click={() => {
+							displayVariable = false
+						}}>-</Button
+					>
+					<ObjectViewer
+						pureViewer={!$propPickerConfig}
+						rawKey={true}
+						json={variables}
+						on:select={(e) => dispatch('select', `variable('${e.detail}')`)}
+					/>
+				{:else}
+					<button
+						class="border border-blue-600 key font-normal rounded hover:bg-blue-100 px-1"
+						on:click={async () => {
+							await loadVariables()
+							displayVariable = true
+						}}>{'{...}'}</button
+					>
+				{/if}
+			</div>
+			<span class="font-bold text-sm">Resources</span>
+			<div class="overflow-y-auto mb-2">
+				{#if displayResources}
+					<Button
+						color="light"
+						variant="border"
+						size="xs"
+						on:click={() => {
+							displayResources = false
+						}}>-</Button
+					>
+					<ObjectViewer
+						pureViewer={!$propPickerConfig}
+						rawKey={true}
+						json={resources}
+						on:select={(e) => dispatch('select', `resource('${e.detail}')`)}
+					/>
+				{:else}
+					<button
+						class="border border-blue-600 px-1 key font-normal rounded hover:bg-blue-100"
+						on:click={async () => {
+							await loadResources()
+							displayResources = true
+						}}>{'{...}'}</button
+					>
+				{/if}
 			</div>
 		{/if}
-	{/if}
-
-	{#if displayContext}
-		<span class="font-bold text-sm">Variables </span>
-		<div class="overflow-y-auto mb-2">
-			{#if displayVariable}
-				<Button
-					color="light"
-					size="xs"
-					on:click={() => {
-						displayVariable = false
-					}}>(-)</Button
-				>
-				<ObjectViewer
-					pureViewer={!$propPickerConfig}
-					rawKey={true}
-					json={variables}
-					on:select={(e) => dispatch('select', `variable('${e.detail}')`)}
-				/>
-			{:else}
-				<button
-					class="key font-normal rounded px-1 hover:bg-blue-100 !p-0"
-					on:click={async () => {
-						await loadVariables()
-						displayVariable = true
-					}}>{'{...}'}</button
-				>
-			{/if}
-		</div>
-		<span class="font-bold text-sm">Resources</span>
-		<div class="overflow-y-auto mb-2">
-			{#if displayResources}
-				<Button
-					color="light"
-					size="xs"
-					on:click={() => {
-						displayResources = false
-					}}>(-)</Button
-				>
-				<ObjectViewer
-					pureViewer={!$propPickerConfig}
-					rawKey={true}
-					json={resources}
-					on:select={(e) => dispatch('select', `resource('${e.detail}')`)}
-				/>
-			{:else}
-				<button
-					class="key font-normal rounded px-1 hover:bg-blue-100 !p-0"
-					on:click={async () => {
-						await loadResources()
-						displayResources = true
-					}}>{'{...}'}</button
-				>
-			{/if}
-		</div>
-	{/if}
+	</div>
 </div>

package/components/propertyPicker/PropPicker.svelte.d.ts

@@ -14,9 +14,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type PropPickerProps = typeof __propDef.props;
-export declare type PropPickerEvents = typeof __propDef.events;
-export declare type PropPickerSlots = typeof __propDef.slots;
+export type PropPickerProps = typeof __propDef.props;
+export type PropPickerEvents = typeof __propDef.events;
+export type PropPickerSlots = typeof __propDef.slots;
 export default class PropPicker extends SvelteComponentTyped<PropPickerProps, PropPickerEvents, PropPickerSlots> {
 }
 export {};

package/components/propertyPicker/PropPickerResult.svelte

@@ -1,7 +1,6 @@
 <script>import { createEventDispatcher } from 'svelte';
 import ObjectViewer from './ObjectViewer.svelte';
 export let result;
-const dispatch = createEventDispatcher();
 </script>
 
 <div class="w-full">

package/components/propertyPicker/PropPickerResult.svelte.d.ts

@@ -10,9 +10,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type PropPickerResultProps = typeof __propDef.props;
-export declare type PropPickerResultEvents = typeof __propDef.events;
-export declare type PropPickerResultSlots = typeof __propDef.slots;
+export type PropPickerResultProps = typeof __propDef.props;
+export type PropPickerResultEvents = typeof __propDef.events;
+export type PropPickerResultSlots = typeof __propDef.slots;
 export default class PropPickerResult extends SvelteComponentTyped<PropPickerResultProps, PropPickerResultEvents, PropPickerResultSlots> {
 }
 export {};

package/components/scriptEditor/LogPanel.svelte

@@ -53,10 +53,10 @@ function closeDrawer() {
 	</DrawerContent>
 </Drawer>
 
-<Tabs bind:selected={selectedTab}>
-	<Tab value="logs"><span class="text-xs">Logs/Result</span></Tab>
-	<Tab value="history"><span class="text-xs">History</span></Tab>
-	<Tab value="last_save"><span class="text-xs">Last save</span></Tab>
+<Tabs bind:selected={selectedTab} class="mt-1">
+	<Tab value="logs" size="xs">Logs/Result</Tab>
+	<Tab value="history" size="xs">History</Tab>
+	<Tab value="last_save" size="xs">Last save</Tab>
 
 	<svelte:fragment slot="content">
 		<!--

package/components/scriptEditor/LogPanel.svelte.d.ts

@@ -15,9 +15,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type LogPanelProps = typeof __propDef.props;
-export declare type LogPanelEvents = typeof __propDef.events;
-export declare type LogPanelSlots = typeof __propDef.slots;
+export type LogPanelProps = typeof __propDef.props;
+export type LogPanelEvents = typeof __propDef.events;
+export type LogPanelSlots = typeof __propDef.slots;
 export default class LogPanel extends SvelteComponentTyped<LogPanelProps, LogPanelEvents, LogPanelSlots> {
     get setFocusToLogs(): () => void;
 }

package/components/scripts/{CreateActions.svelte → CreateActionsScript.svelte}

@@ -1,23 +1,17 @@
 <script>import { goto } from '$app/navigation';
-import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { faPlus, faScroll } from '@fortawesome/free-solid-svg-icons';
 import Fuse from 'fuse.js';
 import { Script } from '../../gen';
 import { ScriptService } from '../../gen';
 import { workspaceStore, hubScripts } from '../../stores';
-import { sendUserToast } from '../../utils';
-import { Button, ButtonPopup, ButtonPopupItem } from '../common';
-import ItemPicker from '../ItemPicker.svelte';
+import { ButtonPopup, ButtonPopupItem } from '../common';
 import Drawer from '../common/drawer/Drawer.svelte';
 import DrawerContent from '../common/drawer/DrawerContent.svelte';
-import SimpleEditor from '../SimpleEditor.svelte';
-import { flowStore, initFlow } from '../flows/flowStore';
+import Icon from 'svelte-awesome';
 const drawers = {
-    hub: undefined,
-    template: undefined,
-    json: undefined
+    template: undefined
 };
 let hubItems;
-let pendingJson;
 let templateScripts = [];
 let templateFilter = '';
 let filteredTemplates;
@@ -31,12 +25,6 @@ $: filteredTemplates =
     templateFilter.length > 0
         ? templateFuse.search(templateFilter).map((value) => value.item)
         : templateScripts;
-function importJson() {
-    Object.assign($flowStore, JSON.parse(pendingJson));
-    initFlow($flowStore);
-    sendUserToast('OpenFlow imported from JSON');
-    drawers.json?.toggleDrawer();
-}
 async function loadTemplateScripts() {
     templateScripts = await ScriptService.listScripts({
         workspace: $workspaceStore,
@@ -48,34 +36,14 @@ async function loadTemplateScripts() {
 
 <!-- Buttons -->
 <div class="flex flex-row gap-2">
-	<ButtonPopup size="sm" startIcon={{ icon: faPlus }} href="/scripts/add">
-		<svelte:fragment slot="main">New script</svelte:fragment>
-		<ButtonPopupItem on:click={() => drawers.hub?.openDrawer()}>
-			Import script from WindmillHub
-		</ButtonPopupItem>
+	<ButtonPopup size="sm" spacingSize="xl" startIcon={{ icon: faPlus }} href="/scripts/add">
+		<svelte:fragment slot="main">New Script</svelte:fragment>
 		<ButtonPopupItem on:click={() => drawers.template?.toggleDrawer()}>
-			Import script from template
-		</ButtonPopupItem>
-		<ButtonPopupItem on:click={() => drawers.json?.toggleDrawer()}>
-			Import script from raw JSON
+			Import from template
 		</ButtonPopupItem>
 	</ButtonPopup>
 </div>
 
-<!-- Initially hidden elements in a drawer -->
-<!-- WindmillHub script list -->
-<ItemPicker
-	bind:this={drawers.hub}
-	pickCallback={(path) => {
-		console.log('pick', { path })
-		goto('/scripts/add?hub=' + path)
-	}}
-	itemName={'Script'}
-	extraField="summary"
-	loadItems={async () => {
-		return hubItems
-	}}
-/>
 <!-- Template script list -->
 <Drawer bind:this={drawers.template} size="800px" on:open={loadTemplateScripts}>
 	<DrawerContent title="Pick a template" on:close={() => drawers.template?.toggleDrawer()}>
@@ -105,10 +73,3 @@ async function loadTemplateScripts() {
 		</div>
 	</DrawerContent>
 </Drawer>
-<!-- Raw JSON -->
-<Drawer bind:this={drawers.json} size="800px">
-	<DrawerContent title="Import JSON" on:close={() => drawers.json?.toggleDrawer()}>
-		<SimpleEditor bind:code={pendingJson} lang="json" class="h-full" />
-		<span slot="submission"><Button size="sm" on:click={importJson}>Import</Button></span>
-	</DrawerContent>
-</Drawer>

package/components/scripts/CreateActionsScript.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CreateActionsScriptProps = typeof __propDef.props;
+export type CreateActionsScriptEvents = typeof __propDef.events;
+export type CreateActionsScriptSlots = typeof __propDef.slots;
+export default class CreateActionsScript extends SvelteComponentTyped<CreateActionsScriptProps, CreateActionsScriptEvents, CreateActionsScriptSlots> {
+}
+export {};

package/components/sidebar/MenuLink.svelte

@@ -21,8 +21,11 @@ navigating.subscribe(() => {
 	<a
 		{href}
 		class={classNames(
-			'group flex items-center px-2 py-2 text-sm font-medium rounded-md h-8',
-			isSelected ? 'bg-gray-50 text-gray-900' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
+			'group flex items-center px-2 py-2 text-sm font-light rounded-md h-8',
+			isSelected
+				? 'bg-gray-50 text-gray-900'
+				: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900',
+			$$props.class
 		)}
 		target={href.includes('http') ? '_blank' : null}
 	>
@@ -38,8 +41,8 @@ navigating.subscribe(() => {
 		{#if !isCollapsed}
 			<span
 				class={classNames(
-					'whitespace-pre text-white',
-					isSelected ? ' text-gray-700 font-bold' : 'text-white group-hover:text-gray-500'
+					'whitespace-pre text-white truncate',
+					isSelected ? ' text-gray-700 font-bold' : 'text-white group-hover:text-gray-900'
 				)}
 			>
 				{label}