feat: another wave of features (#61)

## Explanation This PR bundles several user-facing improvements and feature additions for the v0.3.0 release, including quality-of-life improvements to the UI, new slash commands, better state persistence, and auto-update checking. ## Included Changes - **Resizable chat input** with drag handle (#58 partial) - **Arrow key navigation fix** - cursor keys now navigate text when user has typed input (#58) - **Scroll position persistence** per conversation tab - **/skill command** for invoking Claude Code skills (#57) - **Stats persistence fix** - stats now persist across session changes, only reset on disconnect (#59) - **Auto-update checker** on startup (#17) - **Resizable character panel** with full-height sprites (#10) - **Font size and zoom settings** with keyboard shortcuts (Ctrl++/Ctrl+-/Ctrl+0) (#19) ## Closes Closes #10, #17, #19, #57, #58, #59 ## Attestations - [x] I have read and agree to the Code of Conduct - [x] I have read and agree to the Community Guidelines - [x] My contribution complies with the Contributor Covenant - [x] I have run the linter and resolved any errors - [x] My pull request uses an appropriate title, matching the conventional commit standards - [x] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request - [x] All new and existing tests pass locally with my changes - [x] Code coverage remains at or above the configured threshold ## Documentation N/A - Internal app features ## Versioning Minor - My pull request introduces new non-breaking features. --- ✨ This PR was created with help from Hikari~ 🌸 Co-authored-by: Hikari <hikari@nhcarrigan.com> Reviewed-on: #61 Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com> Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>
2026-01-23 19:07:22 -08:00
parent 06810537a9
commit 3f30997f0e
34 changed files with 1562 additions and 306 deletions
@@ -1,5 +1,13 @@
 <script lang="ts">
-  import { configStore, type HikariConfig, type Theme } from "$lib/stores/config";
+  import {
+    configStore,
+    type HikariConfig,
+    type Theme,
+    applyFontSize,
+    MIN_FONT_SIZE,
+    MAX_FONT_SIZE,
+    DEFAULT_FONT_SIZE,
+  } from "$lib/stores/config";
  import { claudeStore } from "$lib/stores/claude";
  import { getCurrentWindow } from "@tauri-apps/api/window";

@@ -15,6 +23,9 @@
    notifications_enabled: true,
    notification_volume: 0.7,
    always_on_top: false,
+    update_checks_enabled: true,
+    character_panel_width: null,
+    font_size: 14,
  });

  let isOpen = $state(false);
@@ -386,23 +397,61 @@
      <h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
        Appearance
      </h3>
-      <div class="flex gap-2">
-        <button
-          onclick={() => handleThemeChange("dark")}
-          class="flex-1 px-4 py-2 rounded-lg border transition-colors {config.theme === 'dark'
-            ? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
-            : 'bg-[var(--bg-primary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)]'}"
-        >
-          Dark
-        </button>
-        <button
-          onclick={() => handleThemeChange("light")}
-          class="flex-1 px-4 py-2 rounded-lg border transition-colors {config.theme === 'light'
-            ? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
-            : 'bg-[var(--bg-primary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)]'}"
-        >
-          Light
-        </button>
+
+      <!-- Theme Selection -->
+      <div class="mb-4">
+        <label class="block text-sm text-[var(--text-secondary)] mb-2">Theme</label>
+        <div class="flex gap-2">
+          <button
+            onclick={() => handleThemeChange("dark")}
+            class="flex-1 px-4 py-2 rounded-lg border transition-colors {config.theme === 'dark'
+              ? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
+              : 'bg-[var(--bg-primary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)]'}"
+          >
+            Dark
+          </button>
+          <button
+            onclick={() => handleThemeChange("light")}
+            class="flex-1 px-4 py-2 rounded-lg border transition-colors {config.theme === 'light'
+              ? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
+              : 'bg-[var(--bg-primary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)]'}"
+          >
+            Light
+          </button>
+        </div>
+      </div>
+
+      <!-- Font Size -->
+      <div class="mb-4">
+        <label for="font-size" class="block text-sm text-[var(--text-secondary)] mb-2">
+          Terminal Font Size
+        </label>
+        <div class="flex items-center gap-3">
+          <input
+            id="font-size"
+            type="range"
+            bind:value={config.font_size}
+            oninput={() => applyFontSize(config.font_size)}
+            min={MIN_FONT_SIZE}
+            max={MAX_FONT_SIZE}
+            step="1"
+            class="flex-1 h-2 bg-[var(--bg-primary)] rounded-lg appearance-none cursor-pointer"
+          />
+          <span class="text-sm text-gray-300 w-12 text-right">{config.font_size}px</span>
+          <button
+            onclick={() => {
+              config.font_size = DEFAULT_FONT_SIZE;
+              applyFontSize(DEFAULT_FONT_SIZE);
+            }}
+            class="px-2 py-1 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded hover:border-[var(--accent-primary)] text-[var(--text-secondary)] transition-colors"
+            title="Reset to default (14px)"
+          >
+            Reset
+          </button>
+        </div>
+        <p class="text-xs text-[var(--text-tertiary)] mt-1">
+          Use Ctrl++ / Ctrl+- to quickly adjust, Ctrl+0 to reset
+        </p>
      </div>
    </section>

@@ -427,6 +476,21 @@
          Keep the window above other windows
        </p>
      </div>
+
+      <!-- Update Checks Toggle -->
+      <div class="mb-4">
+        <label class="flex items-center gap-3 cursor-pointer">
+          <input
+            type="checkbox"
+            bind:checked={config.update_checks_enabled}
+            class="w-4 h-4 text-[var(--accent-primary)] bg-[var(--bg-primary)] border-[var(--border-color)] rounded focus:ring-[var(--accent-primary)] focus:ring-2"
+          />
+          <span class="text-sm text-[var(--text-primary)]">Check for updates on startup</span>
+        </label>
+        <p class="text-xs text-[var(--text-tertiary)] mt-1 ml-7">
+          Notify when a new version is available
+        </p>
+      </div>
    </section>

    <!-- Notifications Section -->