diff --git a/web/src/lib/components/collections/CreateCollectionModal.svelte b/web/src/lib/components/collections/CreateCollectionModal.svelte index c6135de5..2d319edd 100644 --- a/web/src/lib/components/collections/CreateCollectionModal.svelte +++ b/web/src/lib/components/collections/CreateCollectionModal.svelte @@ -2,7 +2,7 @@ import { api } from '$lib/api/client'; import type { CollectionCreate, FieldDef, CollectionSettings } from '$lib/types'; import { COLLECTION_TEMPLATES, type CollectionTemplate } from './collection-templates'; - import EmojiPicker from '$lib/components/common/EmojiPicker.svelte'; + import EmojiPickerButton from '$lib/components/common/EmojiPickerButton.svelte'; import FieldEditor, { type CollectionOption } from './FieldEditor.svelte'; import { blankField, @@ -30,7 +30,6 @@ let name = $state(''); let selectedIcon = $state(''); let description = $state(''); - let showEmojiPicker = $state(false); let fields = $state([]); let selectedSettings = $state(null); let creating = $state(false); @@ -55,7 +54,6 @@ description = ''; fields = []; selectedSettings = null; - showEmojiPicker = false; error = ''; void loadCollectionOptions(); } @@ -91,7 +89,6 @@ description = ''; fields = []; selectedSettings = null; - showEmojiPicker = false; error = ''; } @@ -294,7 +291,11 @@ type="button" onclick={() => selectTemplate(null)} > - + + Blank Start from scratch @@ -304,7 +305,7 @@ type="button" onclick={() => selectTemplate(template)} > - {template.icon} + {template.name} {template.description} @@ -318,17 +319,7 @@ {/if}
- +
- {#if showEmojiPicker} -
- { - selectedIcon = emoji; - showEmojiPicker = false; - }} - /> -
- {/if} - diff --git a/web/src/lib/components/collections/EditCollectionModal.svelte b/web/src/lib/components/collections/EditCollectionModal.svelte index 77652024..c3e9661b 100644 --- a/web/src/lib/components/collections/EditCollectionModal.svelte +++ b/web/src/lib/components/collections/EditCollectionModal.svelte @@ -2,7 +2,6 @@ import { api } from '$lib/api/client'; import type { Collection, CollectionUpdate, CollectionSettings, FieldDef, FieldMigration, QuickAction } from '$lib/types'; import { parseSchema, parseSettings } from '$lib/types'; - import EmojiPicker from '$lib/components/common/EmojiPicker.svelte'; import EmojiPickerButton from '$lib/components/common/EmojiPickerButton.svelte'; import FieldEditor, { type CollectionOption } from './FieldEditor.svelte'; import { @@ -55,7 +54,6 @@ let name = $state(''); let selectedIcon = $state(''); let description = $state(''); - let showEmojiPicker = $state(false); let saving = $state(false); let error = $state(''); @@ -182,7 +180,6 @@ originalDefault: f.default })); newFields = []; - showEmojiPicker = false; error = ''; activeTab = 'general'; confirmArchive = false; @@ -541,17 +538,7 @@
- +
- {#if showEmojiPicker} -
- { - selectedIcon = emoji; - showEmojiPicker = false; - }} - /> -
- {/if} -
{collection.prefix}
{/if} + + {#if !collection.is_default} +
+
+

Danger zone

+

+ Archiving removes this collection and all its items from the workspace. + This can't be undone from the UI. +

+
+ + {#if confirmArchive} +
+

+ Archive "{collection.name}" and all its items? +

+
+ + +
+
+ {:else} + + {/if} +
+ {/if} {:else if activeTab === 'fields'}
{#if existingFields.length === 0 && newFields.length === 0} -
No fields defined yet.
+
+ +

No fields yet

+

+ Fields define the structured data each item in this collection carries — + like status, priority, or a due date. +

+
{:else}
{#each existingFields as field, i (field.key)} @@ -718,7 +746,13 @@
{/each} {:else} -
No item actions defined.
+
+

No per-item actions yet.

+

+ Add one to surface a one-click agent prompt on every item in this + collection — e.g. "Summarize for standup" or "Draft release notes". +

+
{/if}
@@ -753,7 +787,13 @@ {/each} {:else} -
No collection actions defined.
+
+

No collection-level actions yet.

+

+ Collection actions apply to the whole list — e.g. "Triage new items" + or "Archive completed". +

+
{/if} @@ -761,20 +801,6 @@
- {#if !collection.is_default} - {#if confirmArchive} - - Archive "{collection.name}" and all its items? - - - - {:else} - - {/if} - {/if} -
{/if} -
- - {#if isNew} -
- - -
- {#if keyError} - - {:else if field.keyTouched} -
Keys can't be changed after save.
- {/if} - {/if} -
+ + + {#if keyError} + + {:else if field.keyTouched} +
Keys can't be changed after save.
+ {/if} + {/if} + {#if isComputed}
@@ -569,16 +573,9 @@ cursor: default; } - .field-header-left { + .field-label-input { flex: 1; min-width: 0; - display: flex; - flex-direction: column; - gap: 2px; - } - - .field-label-input { - width: 100%; padding: var(--space-1) var(--space-2); background: var(--bg-secondary); border: 1px solid transparent; @@ -597,12 +594,19 @@ outline: none; } - /* ── Key input row (new fields only) ───────────────────────────────────── */ + /* ── Key block (new fields only) ───────────────────────────────────────── */ - .field-key-row { + /* + * Full-width row below the header. Lives outside the header flex so + * the label / type-select / remove-button baseline stays consistent + * regardless of whether a key row is present. + */ + .field-key-block { display: flex; align-items: center; gap: var(--space-2); + padding: 0 var(--space-3) var(--space-2); + margin-top: calc(var(--space-3) * -1 + var(--space-1)); } .field-key-prefix { @@ -612,7 +616,9 @@ letter-spacing: 0.05em; color: var(--text-muted); font-family: var(--font-mono); - padding: 0 var(--space-2); + width: 28px; + text-align: right; + flex-shrink: 0; } .field-key-input { @@ -644,15 +650,18 @@ background: color-mix(in srgb, var(--accent-red, #ef4444) 4%, transparent); } - .field-key-error { - padding: 0 var(--space-2); + .field-key-error, + .field-key-hint { + padding: 0 var(--space-3) var(--space-2); + padding-left: calc(var(--space-3) + 28px + var(--space-2)); font-size: 0.72em; + } + + .field-key-error { color: var(--accent-red, #ef4444); } .field-key-hint { - padding: 0 var(--space-2); - font-size: 0.72em; color: var(--text-muted); font-style: italic; }