diff --git a/frontend/src/routes/test_dev/ui_components/+page.svelte b/frontend/src/routes/test_dev/ui_components/+page.svelte index b3e98e1484..671146e18a 100644 --- a/frontend/src/routes/test_dev/ui_components/+page.svelte +++ b/frontend/src/routes/test_dev/ui_components/+page.svelte @@ -65,19 +65,326 @@ let version = $derived(page.url.searchParams.get('version') ?? 'minimal') -
- +
+ +
+
+
+

Theme Selector

+ +
- {#if version == 'minimal'} + {@render themeInfo()} +
+
+ + +
+
{@render formContent()}
+
+
+ +{#snippet themeInfo()} + {#if version == 'minimalistic'} +
+

Minimalistic

+
+
+ Colors: + Nord palette, subtle backgrounds +
+
+ Typography: + Clean, readable hierarchy +
+
+ Spacing: + Generous padding, breathing room +
+
+ Features: + Enhanced toggle, connect emphasis +
+
+
+ {:else if version == 'sharp_minimal'} +
+

Sharp Minimal

+
+
+ Design: + Crisp edges, high contrast +
+
+ Interaction: + Bold connect button, clear states +
+
+ Layout: + Tight spacing, maximum efficiency +
+
+
+ {:else if version == 'precision'} +
+

Precision

+
+
+ Approach: + Data-driven, exact alignment +
+
+ Visual: + Grid-based, mathematical spacing +
+
+ Interaction: + Precise controls, clear feedback +
+
+
+ {:else} +
+

{version.charAt(0).toUpperCase() + version.slice(1).replace('_', ' ')}

+

Legacy design variation

+
+ {/if} +{/snippet} + +{#snippet formContent()} + {#if version == 'minimalistic'} + +
+ {#each Object.entries(schema.properties) as [key, value]} + {@render input({ key, value })} + {/each} +
+ + {#snippet input({ key, value })} +
+ +
+
+ + +
{value.type}
+
+ + {@render actions?.()} +
+ + + +
{value.description}
+
+ {/snippet} + + {#snippet actions()} +
+ + {@render toggleButton?.()} +
+ {#snippet toggleButton()} +
+ + +
+ {/snippet} + {/snippet} + {:else if version == 'sharp_minimal'} + +
+ {#each Object.entries(schema.properties) as [key, value]} + {@render input({ key, value })} + {/each} +
+ + {#snippet input({ key, value })} +
+
+
+ + {#if schema.required.includes(key)} + REQ + {/if} + + {value.type} + +
+ {@render toggle()} +
+
+ +
+ {#if value.description} +
+

{value.description}

+
+ {/if} +
+ {/snippet} + + {#snippet toggle()} +
+ + + +
+ + +
+
+ {/snippet} + {:else if version == 'precision'} + +
+ {#each Object.entries(schema.properties) as [key, value]} + {@render input({ key, value })} + {/each} +
+ + {#snippet input({ key, value })} +
+ +
+ +
{value.type}
+
+ + +
+ + {#if value.description} +

{value.description}

+ {/if} +
+ + +
+ {@render toggle()} +
+
+ {/snippet} + + {#snippet toggle()} +
+ + + + +
+ + +
+
+ {/snippet} + {:else if version == 'minimal'}
{#each Object.entries(schema.properties) as [key, value]} {@render input({ key, value })} @@ -320,7 +627,9 @@
{#snippet input({ key, value })} -
+
@@ -415,10 +724,14 @@ {#snippet actions()}
- -
@@ -447,7 +760,7 @@
{/snippet} {/if} -
+{/snippet}