e.key === "Escape" && onClose()} >
e.stopPropagation()} onkeydown={(e) => e.stopPropagation()} role="dialog" aria-labelledby="snippet-library-title" tabindex="-1" >
{#if editingSnippet || isCreating}
{/if}
{#if isCreating} Create Snippet {:else if editingSnippet} Edit Snippet {:else} Snippet Library {/if}
{#if !editingSnippet && !isCreating}
New Snippet
{/if}
{#if editingSnippet || isCreating}
Name
Category
{#if showNewCategoryInput}
{:else}
{#each $categories as category (category)}
{category}
{/each}
Custom
{/if}
{showNewCategoryInput ? "Use Existing" : "New Category"}
Content
Cancel
{isCreating ? "Create" : "Save"}
{:else}
Categories
handleSelectCategory(null)} class="w-full text-left px-3 py-2 rounded-lg text-sm transition-colors {$selectedCategory === null ? 'bg-[var(--accent-primary)]/10 text-[var(--accent-primary)]' : 'text-[var(--text-secondary)] hover:bg-[var(--bg-secondary)]'}" > All Snippets
{#each $categories as category (category)}
handleSelectCategory(category)} class="w-full text-left px-3 py-2 rounded-lg text-sm transition-colors {$selectedCategory === category ? 'bg-[var(--accent-primary)]/10 text-[var(--accent-primary)]' : 'text-[var(--text-secondary)] hover:bg-[var(--bg-secondary)]'}" > {category}
{/each}
{#if $isLoading}
Loading snippets...
{:else if $snippets.length === 0}
No snippets in this category
Create your first snippet
{:else}
{#each $snippets as snippet (snippet.id)}
{snippet.name}
{#if snippet.is_default}
Default
{/if}
{snippet.category}
{snippet.content}
handleInsert(snippet)} class="btn-trans-gradient px-3 py-1.5 text-xs font-medium rounded" title="Insert this snippet" > Insert
handleStartEdit(snippet)} class="p-1.5 text-[var(--text-tertiary)] hover:text-[var(--text-primary)] transition-colors" title="Edit snippet" >
{#if !snippet.is_default} {#if showDeleteConfirm === snippet.id}
handleDelete(snippet.id)} class="px-2 py-1 text-xs font-medium bg-red-500 text-white rounded hover:bg-red-600 transition-colors" > Confirm
(showDeleteConfirm = null)} class="px-2 py-1 text-xs font-medium bg-[var(--bg-tertiary)] text-[var(--text-secondary)] rounded hover:bg-[var(--bg-secondary)] transition-colors" > Cancel
{:else}
(showDeleteConfirm = snippet.id)} class="p-1.5 text-[var(--text-tertiary)] hover:text-red-400 transition-colors" title="Delete snippet" >
{/if} {/if}
{/each}
{/if}
{/if}