feat: naomi did too much at once (#53)

- feat: add slash commands
- feat: toggle window always on top
- fix: save settings button closes settings panel
- feat: input history (both text and commands)
- feat: add keyboard shortcuts
- feat: add confirmation modal when closing connected tabs
- fix: better text colours in light mode
- fix: handle multiple tabs requesting permission

Closes #6
Closes #13
Closes #21
Closes #28

Reviewed-on: #53
Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com>
Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>

src/lib/components/SlashCommandMenu.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import type { SlashCommand } from "$lib/commands/slashCommands";
+
+  interface Props {
+    commands: SlashCommand[];
+    selectedIndex: number;
+    onSelect: (command: SlashCommand) => void;
+  }
+
+  let { commands, selectedIndex, onSelect }: Props = $props();
+</script>
+
+{#if commands.length > 0}
+  <div class="slash-command-menu">
+    <div class="menu-header">Commands</div>
+    {#each commands as command, index (command.name)}
+      <button
+        type="button"
+        class="menu-item"
+        class:selected={index === selectedIndex}
+        onclick={() => onSelect(command)}
+        onmouseenter={() => (selectedIndex = index)}
+      >
+        <span class="command-name">/{command.name}</span>
+        <span class="command-description">{command.description}</span>
+      </button>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .slash-command-menu {
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    right: 0;
+    margin-bottom: 8px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);
+    z-index: 100;
+  }
+
+  .menu-header {
+    padding: 8px 12px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-tertiary);
+    background: var(--bg-tertiary);
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    padding: 10px 12px;
+    text-align: left;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+  }
+
+  .menu-item:hover,
+  .menu-item.selected {
+    background: var(--bg-tertiary);
+  }
+
+  .command-name {
+    font-family: monospace;
+    font-weight: 600;
+    color: var(--accent-primary);
+    min-width: 80px;
+  }
+
+  .command-description {
+    color: var(--text-secondary);
+    font-size: 13px;
+  }
+</style>