windmill-components 1.46.3 → 1.55.0

package/components/propertyPicker/PropPicker.svelte

@@ -38,131 +38,155 @@ 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 pickableProperties.hasResume}
+				<span class="font-bold text-sm">Resume payloads</span>
+				<div class="overflow-y-auto mb-2">
+					<ObjectViewer
+						topLevelNode
+						pureViewer={!$propPickerConfig}
+						json={{
+							resume: 'The resume payload',
+							resumes: 'All resume payloads from all approvers'
+						}}
+						on:select={(e) => {
+							dispatch('select', `${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,10 +1,8 @@
-<script>import { createEventDispatcher } from 'svelte';
-import ObjectViewer from './ObjectViewer.svelte';
+<script>import ObjectViewer from './ObjectViewer.svelte';
 export let result;
-const dispatch = createEventDispatcher();
 </script>
 
-<div class="w-full">
+<div class="w-full px-2">
 	<span class="font-bold text-sm">Result</span>
 	<div class="overflow-y-auto mb-2 w-full">
 		<ObjectViewer json={{ result }} on:select />

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/propertyPicker/WarningMessage.svelte.d.ts

@@ -1,7 +1,9 @@
 /** @typedef {typeof __propDef.props}  WarningMessageProps */
 /** @typedef {typeof __propDef.events}  WarningMessageEvents */
 /** @typedef {typeof __propDef.slots}  WarningMessageSlots */
-export default class WarningMessage extends SvelteComponentTyped<{}, {
+export default class WarningMessage extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
 }
@@ -10,7 +12,9 @@ export type WarningMessageEvents = typeof __propDef.events;
 export type WarningMessageSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        [x: string]: never;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/scriptEditor/LogPanel.svelte

@@ -17,6 +17,7 @@ import HighlightCode from '../HighlightCode.svelte';
 import LogViewer from '../LogViewer.svelte';
 import { Pane } from 'svelte-splitpanes';
 import SplitPanesWrapper from '../splitPanes/SplitPanesWrapper.svelte';
+import { fade } from 'svelte/transition';
 export let path;
 export let lang;
 export let previewIsLoading = false;
@@ -53,10 +54,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">
 		<!--
@@ -65,17 +66,23 @@ function closeDrawer() {
 		-->
 		{#if selectedTab === 'logs'}
 			<SplitPanesWrapper horizontal>
-				<Pane class="!duration-[0ms]">
-					<LogViewer content={previewJob?.logs} isLoading={previewIsLoading} />
+				<Pane class="!duration-[0ms] relative">
+					<LogViewer
+						duration={previewJob?.['duration_ms']}
+						content={previewJob?.logs}
+						isLoading={previewIsLoading}
+					/>
 				</Pane>
 				<Pane class="!duration-[0ms]">
 					{#if previewJob != undefined && 'result' in previewJob && previewJob.result != undefined}
-						<pre class="overflow-x-auto break-words relative h-full p-2"
+						<pre
+							transition:fade={{ duration: 50 }}
+							class="overflow-x-auto break-words relative h-full p-2"
 							><DisplayResult result={previewJob.result} />
 						</pre>
 					{:else}
 						<div class="text-sm text-gray-600 p-2">
-							{previewIsLoading ? 'Waiting for result...' : 'Test to see the result here'}
+							{previewIsLoading ? '' : 'Test to see the result here'}
 						</div>
 					{/if}
 				</Pane>

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/CreateActionsScript.svelte

@@ -0,0 +1,29 @@
+<script>import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { ButtonPopup, ButtonPopupItem } from '../common';
+import Drawer from '../common/drawer/Drawer.svelte';
+import DrawerContent from '../common/drawer/DrawerContent.svelte';
+import WorkspaceScriptPicker from '../flows/pickers/WorkspaceScriptPicker.svelte';
+import { goto } from '$app/navigation';
+import { Code2 } from 'lucide-svelte';
+let drawer = undefined;
+</script>
+
+<!-- Buttons -->
+<div class="flex flex-row gap-2">
+	<ButtonPopup size="sm" spacingSize="xl" startIcon={{ icon: faPlus }} href="/scripts/add">
+		<svelte:fragment slot="main">New Script <Code2 class="ml-1.5" size={18} /></svelte:fragment>
+		<ButtonPopupItem on:click={() => drawer?.toggleDrawer?.()}>
+			Import from template
+		</ButtonPopupItem>
+	</ButtonPopup>
+</div>
+
+<!-- Template script list -->
+<Drawer bind:this={drawer} size="800px">
+	<DrawerContent title="Pick a template" on:close={() => drawer?.toggleDrawer?.()}>
+		<WorkspaceScriptPicker
+			isTemplate
+			on:pick={(e) => goto(`/scripts/add?template=${e.detail.path}`)}
+		/>
+	</DrawerContent>
+</Drawer>

package/components/scripts/CreateActionsScript.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 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/FavoriteMenu.svelte

@@ -0,0 +1,52 @@
+<script>import { classNames } from '../../utils';
+import { faCode, faStar, faTelevision, 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>
+	<button
+		slot="trigger"
+		type="button"
+		class={classNames(
+			'group w-full flex items-center text-white hover:bg-gray-50 hover:text-gray-900 focus:ring-4 focus:outline-none focus:ring-gray-300 px-2 py-2 text-sm font-medium rounded-md h-8 '
+		)}
+	>
+		<Icon
+			data={faStar}
+			class={classNames('flex-shrink-0 h-4 w-4', isCollapsed ? '-mr-1' : 'mr-2')}
+		/>
+
+		{#if !isCollapsed}
+			<span class={classNames('whitespace-pre truncate')}>Favorites</span>
+		{/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">
+							{#if favorite.kind == 'script'}
+								<Icon data={faCode} />
+							{:else if favorite.kind == 'flow'}
+								<Icon data={faBarsStaggered} />
+							{:else if favorite.kind == 'app'}
+								<Icon data={faTelevision} />
+							{/if}
+						</td>
+						<td class="text-gray-800 ml-2 grow text-xs center-center truncate">{favorite.label}</td>
+					</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
+			</div>
+		</div>
+	</div>
+</Menu>

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        isCollapsed?: boolean | undefined;
+        favoriteLinks?: {
+            label: string;
+            href: string;
+            kind: 'script' | 'flow' | 'app';
+        }[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FavoriteMenuProps = typeof __propDef.props;
+export type FavoriteMenuEvents = typeof __propDef.events;
+export type FavoriteMenuSlots = typeof __propDef.slots;
+export default class FavoriteMenu extends SvelteComponentTyped<FavoriteMenuProps, FavoriteMenuEvents, FavoriteMenuSlots> {
+}
+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}

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

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         label: string;
         href: string;
         icon: IconDefinition;
@@ -13,9 +14,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type MenuLinkProps = typeof __propDef.props;
-export declare type MenuLinkEvents = typeof __propDef.events;
-export declare type MenuLinkSlots = typeof __propDef.slots;
+export type MenuLinkProps = typeof __propDef.props;
+export type MenuLinkEvents = typeof __propDef.events;
+export type MenuLinkSlots = typeof __propDef.slots;
 export default class MenuLink extends SvelteComponentTyped<MenuLinkProps, MenuLinkEvents, MenuLinkSlots> {
 }
 export {};

package/components/sidebar/SidebarContent.svelte

@@ -1,32 +1,30 @@
-<script>import { faBookOpen, faCalendar, faCode, faCubes, faEye, faHomeAlt, faPlay, faRobot, faUsersCog, faWallet, faWind, faCog } from '@fortawesome/free-solid-svg-icons';
+<script>import { faBookOpen, faCalendar, faCubes, faEye, faHomeAlt, faPlay, faRobot, faUsersCog, faCog, faDollarSign } from '@fortawesome/free-solid-svg-icons';
 import { faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons';
 import MenuLink from './MenuLink.svelte';
-import { userStore } from '../../stores';
+import { superadmin, userStore } from '../../stores';
 const mainMenuLinks = [
     { label: 'Home', href: '/', icon: faHomeAlt },
-    { label: 'Scripts', href: '/scripts', icon: faCode },
-    { label: 'Flows', href: '/flows', icon: faWind },
     { label: 'Runs', href: '/runs', icon: faPlay },
-    { label: 'Schedules', href: '/schedules', icon: faCalendar },
-    { label: 'Variables', href: '/variables', icon: faWallet },
-    { label: 'Resources', href: '/resources', icon: faCubes }
+    { label: 'Variables', href: '/variables', icon: faDollarSign, disabled: $userStore?.operator },
+    { label: 'Resources', href: '/resources', icon: faCubes, disabled: $userStore?.operator }
 ];
 $: secondaryMenuLinks = [
-    { label: 'Groups', href: '/groups', icon: faUsersCog },
-    { label: 'Audit Logs', href: '/audit_logs', icon: faEye },
+    { label: 'Schedules', href: '/schedules', icon: faCalendar, disabled: $userStore?.operator },
+    { label: 'Groups', href: '/groups', icon: faUsersCog, disabled: $userStore?.operator },
+    { label: 'Audit Logs', href: '/audit_logs', icon: faEye, disabled: $userStore?.operator },
     {
         label: 'Workspace',
         href: '/workspace_settings',
         icon: faCog,
-        disabled: !$userStore?.is_admin
+        disabled: !($userStore?.is_admin || $superadmin)
     },
-    { label: 'Workers', href: '/workers', icon: faRobot }
+    { label: 'Workers', href: '/workers', icon: faRobot, disabled: $userStore?.operator }
 ];
 const thirdMenuLinks = [
-    { label: 'Documentation', href: 'https://docs.windmill.dev/docs/intro/', icon: faBookOpen },
-    { label: 'Feedbacks?', href: 'https://discord.gg/V7PM2YHsPB', icon: faDiscord },
+    { label: 'Docs', href: 'https://docs.windmill.dev/docs/intro/', icon: faBookOpen },
+    { label: 'Feedbacks', href: 'https://discord.gg/V7PM2YHsPB', icon: faDiscord },
     {
-        label: 'Issues?',
+        label: 'Issues',
         href: 'https://github.com/windmill-labs/windmill/issues/new',
         icon: faGithub
     }
@@ -34,21 +32,21 @@ const thirdMenuLinks = [
 export let isCollapsed = false;
 </script>
 
-<div class="flex-1 flex flex-col py-4 overflow-x-hidden scrollbar-hidden">
+<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-2">
-			{#each mainMenuLinks as menuLink}
-				<MenuLink {...menuLink} {isCollapsed} />
-			{/each}
-			<div class="h-8" />
-			{#each secondaryMenuLinks as menuLink}
-				<MenuLink {...menuLink} {isCollapsed} />
+		<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-y-2">
-			{#each thirdMenuLinks as menuLink}
-				<MenuLink {...menuLink} {isCollapsed} />
+		<div class="space-1-2">
+			{#each secondaryMenuLinks as menuLink (menuLink.href)}
+				<MenuLink class="text-xs" {...menuLink} {isCollapsed} />
+			{/each}
+			<div class="h-8" />
+			{#each thirdMenuLinks as menuLink (menuLink.href)}
+				<MenuLink class="text-xs" {...menuLink} {isCollapsed} />
 			{/each}
 		</div>
 	</nav>

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

@@ -8,9 +8,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type SidebarContentProps = typeof __propDef.props;
-export declare type SidebarContentEvents = typeof __propDef.events;
-export declare type SidebarContentSlots = typeof __propDef.slots;
+export type SidebarContentProps = typeof __propDef.props;
+export type SidebarContentEvents = typeof __propDef.events;
+export type SidebarContentSlots = typeof __propDef.slots;
 export default class SidebarContent extends SvelteComponentTyped<SidebarContentProps, SidebarContentEvents, SidebarContentSlots> {
 }
 export {};