ui: update Input, Select, Button, Sidebar components

src/lib/components/ui/Button.svelte

@@ -8,7 +8,15 @@
 
 	interface Props {
 		/** Button variant style */
-		variant?: 'primary' | 'secondary' | 'ghost' | 'text' | 'destructive' | 'notice' | 'subtle' | undefined
+		variant?:
+			| 'primary'
+			| 'secondary'
+			| 'ghost'
+			| 'text'
+			| 'destructive'
+			| 'notice'
+			| 'subtle'
+			| undefined
 		/** Button size */
 		size?: 'small' | 'medium' | 'large' | 'icon' | undefined
 		/** Whether button is contained */
@@ -119,10 +127,10 @@
 			{@render leftAccessory()}
 		</span>
 	{:else if hasLeftIcon && !iconOnly && icon}
-			<span class="accessory">
+		<span class="accessory">
-				<Icon name={icon} size={iconSizes[size]} />
+			<Icon name={icon} size={iconSizes[size]} />
-			</span>
+		</span>
-		{/if}
+	{/if}
 
 	{#if children && !iconOnly}
 		<span class="text">
@@ -137,10 +145,10 @@
 			{@render rightAccessory()}
 		</span>
 	{:else if hasRightIcon && !iconOnly && icon}
-			<span class="accessory">
+		<span class="accessory">
-				<Icon name={icon} size={iconSizes[size]} />
+			<Icon name={icon} size={iconSizes[size]} />
-			</span>
+		</span>
-		{/if}
+	{/if}
 </ButtonPrimitive.Root>
 
 <style lang="scss">
@@ -305,7 +313,7 @@
 
 	// Sizes
 	:global([data-button-root].small) {
-		padding: $unit $unit-2x;
+		padding: $unit calc($unit * 1.5);
 		font-size: $font-small;
 		min-height: calc($unit * 3.5);
 	}
@@ -417,6 +425,7 @@
 
 		&:hover:not(:disabled) {
 			background: var(--wind-bg-hover);
+			color: white;
 		}
 	}
 
@@ -426,6 +435,7 @@
 
 		&:hover:not(:disabled) {
 			background: var(--fire-bg-hover);
+			color: white;
 		}
 	}
 
@@ -435,6 +445,7 @@
 
 		&:hover:not(:disabled) {
 			background: var(--water-bg-hover);
+			color: white;
 		}
 	}
 
@@ -444,6 +455,7 @@
 
 		&:hover:not(:disabled) {
 			background: var(--earth-bg-hover);
+			color: white;
 		}
 	}
 
@@ -453,6 +465,7 @@
 
 		&:hover:not(:disabled) {
 			background: var(--dark-bg-hover);
+			color: white;
 		}
 	}
 
@@ -462,6 +475,7 @@
 
 		&:hover:not(:disabled) {
 			background: var(--light-bg-hover);
+			color: white;
 		}
 	}
 
@@ -472,6 +486,7 @@
 
 		&:hover:not(:disabled) {
 			background: var(--wind-bg-hover);
+			color: var(--wind-text-contrast);
 		}
 	}
 
@@ -481,6 +496,7 @@
 
 		&:hover:not(:disabled) {
 			background: var(--fire-bg-hover);
+			color: var(--fire-text-contrast);
 		}
 	}
 
@@ -490,6 +506,7 @@
 
 		&:hover:not(:disabled) {
 			background: var(--water-bg-hover);
+			color: var(--water-text-contrast);
 		}
 	}
 
@@ -499,6 +516,7 @@
 
 		&:hover:not(:disabled) {
 			background: var(--earth-bg-hover);
+			color: var(--earth-text-contrast);
 		}
 	}
 
@@ -508,6 +526,7 @@
 
 		&:hover:not(:disabled) {
 			background: var(--dark-bg-hover);
+			color: var(--dark-text-contrast);
 		}
 	}
 
@@ -517,6 +536,7 @@
 
 		&:hover:not(:disabled) {
 			background: var(--light-bg-hover);
+			color: var(--light-text-contrast);
 		}
 	}
 </style>

src/lib/components/ui/Input.svelte

@@ -112,16 +112,16 @@
 			</div>
 		{:else}
 			<input
-					bind:value
+				bind:value
-					class={inputClasses}
+				class={inputClasses}
-					{type}
+				{type}
-					{placeholder}
+				{placeholder}
-					{disabled}
+				{disabled}
-					{readonly}
+				{readonly}
-					{required}
+				{required}
-					maxlength={maxLength}
+				maxlength={maxLength}
-					{...restProps}
+				{...restProps}
-				/>
+			/>
 		{/if}
 
 		{#if error}
@@ -161,16 +161,16 @@
 	</div>
 {:else}
 	<input
-			bind:value
+		bind:value
-			class={inputClasses}
+		class={inputClasses}
-			{type}
+		{type}
-			{placeholder}
+		{placeholder}
-			{disabled}
+		{disabled}
-			{readonly}
+		{readonly}
-			{required}
+		{required}
-			maxlength={maxLength}
+		maxlength={maxLength}
-			{...restProps}
+		{...restProps}
-		/>
+	/>
 {/if}
 
 <style lang="scss">
@@ -235,7 +235,7 @@
 		@include smooth-transition($duration-quick, background-color);
 
 		&:not(.wrapper) {
-			padding: calc($unit * 1.5) $unit-2x;
+			padding: calc($unit * 1.25) $unit-2x;
 		}
 
 		&.fullHeight {

src/lib/components/ui/Select.svelte

@@ -289,6 +289,7 @@
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
+			font-weight: $normal;
 		}
 
 		.image {

src/lib/components/ui/Sidebar.svelte

@@ -2,6 +2,7 @@
 
 <script lang="ts">
 	import SidebarHeader from './SidebarHeader.svelte'
+	import Button from './Button.svelte'
 	import { SIDEBAR_WIDTH } from '$lib/stores/sidebar.svelte'
 	import type { Snippet } from 'svelte'
 
@@ -14,23 +15,59 @@
 		onClose?: () => void
 		/** Callback when close is requested (lowercase, deprecated - use onClose) */
 		onclose?: () => void
+		/** Callback when back is requested (shows arrow instead of X) */
+		onback?: () => void
+		/** Callback when save/done is requested */
+		onsave?: () => void
+		/** Label for the save button */
+		saveLabel?: string
+		/** Element for styling the save button */
+		element?: 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light'
 		/** Content to render in the sidebar */
 		children?: Snippet
-		/** Optional header actions */
-		headerActions?: Snippet
 		/** Whether the sidebar content should scroll. Default true. */
 		scrollable?: boolean
 	}
 
-	const { open = false, title, onClose, onclose, children, headerActions, scrollable = true }: Props = $props()
+	const { open = false, title, onClose, onclose, onback, onsave, saveLabel = 'Done', element, children, scrollable = true }: Props = $props()
 
 	// Support both onClose (camelCase) and onclose (lowercase) for backward compatibility
 	const handleClose = $derived(onClose ?? onclose)
 </script>
 
+{#snippet leftAccessory()}
+	{#if onback}
+		<Button
+			variant="ghost"
+			size="small"
+			iconOnly
+			icon="arrow-left"
+			onclick={onback}
+			aria-label="Go back"
+		/>
+	{:else if handleClose}
+		<Button
+			variant="ghost"
+			size="small"
+			iconOnly
+			icon="close"
+			onclick={handleClose}
+			aria-label="Close sidebar"
+		/>
+	{/if}
+{/snippet}
+
+{#snippet rightAccessory()}
+	{#if onsave}
+		<Button variant="ghost" size="small" {element} elementStyle={!!element} onclick={onsave}>
+			{saveLabel}
+		</Button>
+	{/if}
+{/snippet}
+
 <aside class="sidebar" class:open style:--sidebar-width={SIDEBAR_WIDTH}>
 	{#if title}
-		<SidebarHeader {title} onclose={handleClose} actions={headerActions} />
+		<SidebarHeader {title} {leftAccessory} {rightAccessory} />
 	{/if}
 
 	<div class="sidebar-content" class:scrollable>

src/lib/components/ui/SidebarHeader.svelte

@@ -1,36 +1,32 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-	import Button from './Button.svelte'
-	import closeIcon from '$src/assets/icons/close.svg?raw'
 	import type { Snippet } from 'svelte'
 
 	interface Props {
 		/** Title for the sidebar header */
 		title: string
-		/** Callback when close is requested */
+		/** Left accessory content (e.g., close/back button) */
-		onclose?: () => void
+		leftAccessory?: Snippet
-		/** Optional additional actions to render in the header */
+		/** Right accessory content (e.g., save/edit button) */
-		actions?: Snippet
+		rightAccessory?: Snippet
 	}
 
-	const { title, onclose, actions }: Props = $props()
+	const { title, leftAccessory, rightAccessory }: Props = $props()
 </script>
 
 <div class="sidebar-header">
 	<div class="header-left">
-		{#if actions}
+		{#if leftAccessory}
-			{@render actions()}
+			{@render leftAccessory()}
 		{/if}
 	</div>
 
 	<h2 class="sidebar-title">{title}</h2>
 
 	<div class="header-right">
-		{#if onclose}
+		{#if rightAccessory}
-			<button onclick={onclose} class="close-button" aria-label="Close sidebar">
+			{@render rightAccessory()}
-				{@html closeIcon}
-			</button>
 		{/if}
 	</div>
 </div>
@@ -42,9 +38,9 @@
 	@use '$src/themes/layout' as *;
 
 	.sidebar-header {
-		display: flex;
+		display: grid;
+		grid-template-columns: 1fr auto 1fr;
 		align-items: center;
-		justify-content: space-between;
 		padding: $unit-2x;
 		border-bottom: 1px solid var(--border-primary);
 		flex-shrink: 0;
@@ -57,11 +53,8 @@
 
 		.header-left,
 		.header-right {
-			width: 32px; // Same width as close button for balance
-			flex-shrink: 0;
 			display: flex;
 			align-items: center;
-			justify-content: center;
 		}
 
 		.header-left {
@@ -78,39 +71,10 @@
 			font-weight: $medium;
 			color: var(--text-primary);
 			text-align: center;
-			flex: 1;
+			white-space: nowrap;
-		}
+			overflow: hidden;
-
+			text-overflow: ellipsis;
-		.close-button {
+			padding: 0 $unit;
-			padding: $unit;
-			background: transparent;
-			border: none;
-			cursor: pointer;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			border-radius: 4px;
-			color: var(--text-secondary);
-			transition:
-				background-color 0.2s,
-				color 0.2s;
-			width: 32px;
-			height: 32px;
-
-			:global(svg) {
-				width: 14px;
-				height: 14px;
-				fill: currentColor;
-			}
-
-			&:hover {
-				background-color: var(--button-bg);
-				color: var(--text-primary);
-			}
-
-			&:active {
-				transform: translateY(1px);
-			}
 		}
 	}
 </style>