feat: add internal notes for collection attributes (#11945)

src/lib/components/AttributeNote.svelte

@@ -0,0 +1,375 @@
+<script lang="ts">
+    /**
+     * AttributeNote.svelte
+     *
+     * Reusable inline note component for a single collection attribute/column.
+     * Renders as a subtle "Add note" trigger when empty, or shows the note text
+     * with an edit pencil icon when a note exists.
+     *
+     * Usage:
+     *   <AttributeNote
+     *       databaseId={$page.params.database}
+     *       collectionId={$page.params.collection}
+     *       attributeKey={attribute.key}
+     *   />
+     *
+     * Issue: https://github.com/appwrite/appwrite/issues/11945
+     */
+
+    import { attributeNotes } from '$lib/stores/attributeNotes';
+
+    interface Props {
+        databaseId: string;
+        collectionId: string;
+        attributeKey: string;
+    }
+
+    let { databaseId, collectionId, attributeKey }: Props = $props();
+
+    // Current persisted note value
+    let note = $state(attributeNotes.getNote(databaseId, collectionId, attributeKey));
+
+    // Whether the inline editor is open
+    let editing = $state(false);
+
+    // Draft copy while the user types
+    let draft = $state(note);
+
+    $effect(() => {
+        const nextNote = attributeNotes.getNote(databaseId, collectionId, attributeKey);
+
+        note = nextNote;
+
+        // Only overwrite draft if user is NOT editing
+        if (!editing) {
+            draft = nextNote;
+        }
+    });
+
+    // Textarea ref for auto-focus
+    let textareaRef = $state<HTMLTextAreaElement | null>(null);
+
+    $effect(() => {
+        if (editing && textareaRef) {
+            textareaRef.focus();
+            // Place cursor at end
+            const len = textareaRef.value.length;
+            textareaRef.setSelectionRange(len, len);
+        }
+    });
+
+    function openEditor() {
+        draft = note;
+        editing = true;
+    }
+
+    function saveNote() {
+        const trimmed = draft.trim();
+        attributeNotes.setNote(databaseId, collectionId, attributeKey, trimmed);
+        note = trimmed;
+        editing = false;
+    }
+
+    function cancelEdit() {
+        draft = note;
+        editing = false;
+    }
+
+    function handleKeydown(event: KeyboardEvent) {
+        if (event.key === 'Escape') {
+            cancelEdit();
+        } else if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
+            saveNote();
+        }
+    }
+
+    function clearNote() {
+        attributeNotes.setNote(databaseId, collectionId, attributeKey, '');
+        note = '';
+        editing = false;
+    }
+</script>
+
+<div class="attribute-note">
+    {#if editing}
+        <div class="attribute-note__editor">
+            <textarea
+                bind:this={textareaRef}
+                bind:value={draft}
+                class="attribute-note__textarea"
+                aria-label={`Note for ${attributeKey}`}
+                placeholder="Add a note about this column (optional)…"
+                rows="3"
+                maxlength="500"
+                onkeydown={handleKeydown}></textarea>
+            <div class="attribute-note__editor-actions">
+                <span class="attribute-note__hint">Ctrl+Enter / Cmd+Enter to save · Esc to cancel</span>
+                <div class="attribute-note__buttons">
+                    {#if note}
+                        <button
+                            type="button"
+                            class="attribute-note__btn attribute-note__btn--danger"
+                            onclick={clearNote}
+                            title="Remove note">
+                            Remove
+                        </button>
+                    {/if}
+                    <button
+                        type="button"
+                        class="attribute-note__btn attribute-note__btn--secondary"
+                        onclick={cancelEdit}>
+                        Cancel
+                    </button>
+                    <button
+                        type="button"
+                        class="attribute-note__btn attribute-note__btn--primary"
+                        onclick={saveNote}>
+                        Save
+                    </button>
+                </div>
+            </div>
+        </div>
+    {:else if note}
+        <button
+            type="button"
+            class="attribute-note__display"
+            onclick={openEditor}
+            title="Click to edit note">
+            <span class="attribute-note__icon attribute-note__icon--note" aria-hidden="true">
+                <!-- Sticky note icon (inline SVG, no external deps) -->
+                <svg
+                    width="12"
+                    height="12"
+                    viewBox="0 0 20 20"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M4 2h12a2 2 0 0 1 2 2v10l-4 4H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linejoin="round" />
+                    <path d="M14 14v4l4-4h-4z" fill="currentColor" opacity="0.4" />
+                    <path
+                        d="M6 7h8M6 10h6"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="round" />
+                </svg>
+            </span>
+            <span class="attribute-note__text">{note}</span>
+            <span class="attribute-note__icon attribute-note__icon--edit" aria-hidden="true">
+                <!-- Pencil icon -->
+                <svg
+                    width="11"
+                    height="11"
+                    viewBox="0 0 20 20"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M14.69 2.21a1.5 1.5 0 0 1 2.1 2.1L6 15.1 2 16l.9-4L14.69 2.21z"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linejoin="round" />
+                </svg>
+            </span>
+        </button>
+    {:else}
+        <button
+            type="button"
+            class="attribute-note__add"
+            onclick={openEditor}
+            title="Add a note to this column">
+            <span class="attribute-note__icon" aria-hidden="true">
+                <svg
+                    width="11"
+                    height="11"
+                    viewBox="0 0 20 20"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M10 4v12M4 10h12"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round" />
+                </svg>
+            </span>
+            Add note
+        </button>
+    {/if}
+</div>
+
+<style>
+    .attribute-note {
+        display: inline-flex;
+        flex-direction: column;
+        max-width: 100%;
+    }
+
+    /* ── "Add note" trigger ─────────────────────────────────────── */
+    .attribute-note__add {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 2px 6px;
+        border: 1px dashed var(--color-border, #e0e0e0);
+        border-radius: 4px;
+        background: transparent;
+        color: var(--color-text-tertiary, #999);
+        font-size: 11px;
+        line-height: 1.4;
+        cursor: pointer;
+        transition:
+            color 0.15s,
+            border-color 0.15s;
+        white-space: nowrap;
+    }
+    .attribute-note__add:hover {
+        color: var(--color-text-secondary, #666);
+        border-color: var(--color-border-strong, #bbb);
+    }
+
+    /* ── Existing note display ──────────────────────────────────── */
+    .attribute-note__display {
+        display: inline-flex;
+        align-items: flex-start;
+        gap: 5px;
+        padding: 4px 6px;
+        border: 1px solid transparent;
+        border-radius: 4px;
+        background: var(--color-surface-note, rgba(255, 200, 0, 0.08));
+        color: var(--color-text-secondary, #555);
+        font-size: 12px;
+        line-height: 1.4;
+        cursor: pointer;
+        text-align: left;
+        max-width: 320px;
+        transition:
+            background 0.15s,
+            border-color 0.15s;
+        word-break: break-word;
+    }
+    .attribute-note__display:hover {
+        background: var(--color-surface-note-hover, rgba(255, 200, 0, 0.15));
+        border-color: var(--color-border, #e0e0e0);
+    }
+
+    .attribute-note__text {
+        flex: 1;
+        white-space: pre-wrap;
+        /* Clamp to 3 lines with ellipsis */
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    /* ── Icons ───────────────────────────────────────────────────── */
+    .attribute-note__icon {
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+        margin-top: 1px;
+        color: var(--color-text-tertiary, #aaa);
+    }
+    .attribute-note__icon--edit {
+        opacity: 0;
+        transition: opacity 0.15s;
+    }
+    .attribute-note__display:hover .attribute-note__icon--edit {
+        opacity: 1;
+    }
+
+    /* ── Inline editor ───────────────────────────────────────────── */
+    .attribute-note__editor {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        width: 320px;
+    }
+
+    .attribute-note__textarea {
+        width: 100%;
+        padding: 8px 10px;
+        border: 1px solid var(--color-border-strong, #ccc);
+        border-radius: 6px;
+        background: var(--color-surface-input, #fff);
+        color: var(--color-text-primary, #111);
+        font-size: 12px;
+        line-height: 1.5;
+        font-family: inherit;
+        resize: vertical;
+        min-height: 72px;
+        box-sizing: border-box;
+        transition:
+            border-color 0.15s,
+            box-shadow 0.15s;
+    }
+    .attribute-note__textarea:focus {
+        outline: none;
+        border-color: var(--color-primary, #e05a4b);
+        box-shadow: 0 0 0 2px rgba(224, 90, 75, 0.15);
+    }
+
+    .attribute-note__editor-actions {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+    }
+
+    .attribute-note__hint {
+        font-size: 10px;
+        color: var(--color-text-tertiary, #aaa);
+        flex-shrink: 0;
+    }
+
+    .attribute-note__buttons {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        flex-shrink: 0;
+    }
+
+    .attribute-note__btn {
+        padding: 4px 10px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        border: 1px solid transparent;
+        transition:
+            background 0.15s,
+            border-color 0.15s,
+            color 0.15s;
+        line-height: 1.4;
+    }
+
+    .attribute-note__btn--primary {
+        background: var(--color-primary, #e05a4b);
+        color: #fff;
+        border-color: var(--color-primary, #e05a4b);
+    }
+    .attribute-note__btn--primary:hover {
+        background: var(--color-primary-dark, #c94b3d);
+        border-color: var(--color-primary-dark, #c94b3d);
+    }
+
+    .attribute-note__btn--secondary {
+        background: transparent;
+        color: var(--color-text-secondary, #555);
+        border-color: var(--color-border, #ddd);
+    }
+    .attribute-note__btn--secondary:hover {
+        background: var(--color-surface-hover, #f5f5f5);
+    }
+
+    .attribute-note__btn--danger {
+        background: transparent;
+        color: var(--color-danger, #e05a4b);
+        border-color: transparent;
+    }
+    .attribute-note__btn--danger:hover {
+        background: var(--color-surface-danger, rgba(224, 90, 75, 0.08));
+        border-color: var(--color-danger, #e05a4b);
+    }
+</style>