generated from nhcarrigan/template
feat: add multiple productivity features and UI enhancements (#68)
## Summary This PR adds a collection of productivity features and UI enhancements to improve the Hikari Desktop experience: ### New Features - **Clipboard History** (#25) - Track and manage copied code snippets with language detection, search, filtering, and pinning - **Quick Actions Panel** (#15) - Buttons for common quick actions like "Review PR", "Run tests", "Explain file", with customizable actions - **Git Integration Panel** (#24) - View current branch, changed/staged files, quick git actions (commit, push, pull), and branch management - **Session Import/Export** (#8) - Export conversations to JSON and import previously saved sessions - **Snippet Library** (#22) - Save and reuse common prompts with categories and quick insert - **Session History** (#14) - Auto-save conversations with browsable history and search - **High Contrast Mode** (#20) - Accessibility theme with improved visibility - **Minimize to System Tray** (#11) - System tray support with right-click menu ### UI Enhancements - Trans-pride gradient theme applied across UI elements - Copy button added to code blocks - Linter formatting and eslint-disable comments for cleaner code ## Closes Closes #8 Closes #11 Closes #14 Closes #15 Closes #20 Closes #22 Closes #24 Closes #25 Closes #34 Closes #35 Closes #36 Closes #37 Closes #69 Closes #70 ## Test Plan - [ ] Verify clipboard history captures code from code block copy buttons - [ ] Verify clipboard history captures manually selected text from terminal - [ ] Test snippet library CRUD operations and insertion - [ ] Test quick actions panel with default and custom actions - [ ] Test git panel shows correct status, branch, and performs git operations - [ ] Test session history auto-save and restore - [ ] Test session import/export roundtrip - [ ] Verify high contrast mode provides adequate contrast - [ ] Test minimize to tray functionality and tray menu - [ ] Verify trans-pride gradient theme displays correctly in all themes --- *✨ This PR was created with help from Hikari~ 🌸* Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com> Reviewed-on: #68 Co-authored-by: Hikari <hikari@nhcarrigan.com> Co-committed-by: Hikari <hikari@nhcarrigan.com>
This commit was merged in pull request #68.
This commit is contained in:
@@ -3,7 +3,9 @@
|
||||
configStore,
|
||||
type HikariConfig,
|
||||
type Theme,
|
||||
type CustomThemeColors,
|
||||
applyFontSize,
|
||||
applyCustomThemeColors,
|
||||
MIN_FONT_SIZE,
|
||||
MAX_FONT_SIZE,
|
||||
DEFAULT_FONT_SIZE,
|
||||
@@ -23,11 +25,30 @@
|
||||
notifications_enabled: true,
|
||||
notification_volume: 0.7,
|
||||
always_on_top: false,
|
||||
minimize_to_tray: false,
|
||||
update_checks_enabled: true,
|
||||
character_panel_width: null,
|
||||
font_size: 14,
|
||||
streamer_mode: false,
|
||||
streamer_hide_paths: false,
|
||||
compact_mode: false,
|
||||
profile_name: null,
|
||||
profile_avatar_path: null,
|
||||
profile_bio: null,
|
||||
custom_theme_colors: {
|
||||
bg_primary: null,
|
||||
bg_secondary: null,
|
||||
bg_terminal: null,
|
||||
accent_primary: null,
|
||||
accent_secondary: null,
|
||||
text_primary: null,
|
||||
text_secondary: null,
|
||||
border_color: null,
|
||||
},
|
||||
});
|
||||
|
||||
let showCustomThemeEditor = $state(false);
|
||||
|
||||
let isOpen = $state(false);
|
||||
let isSaving = $state(false);
|
||||
let saveError: string | null = $state(null);
|
||||
@@ -84,9 +105,33 @@
|
||||
|
||||
async function handleThemeChange(theme: Theme) {
|
||||
config.theme = theme;
|
||||
await configStore.setTheme(theme);
|
||||
showCustomThemeEditor = theme === "custom";
|
||||
await configStore.setTheme(theme, config.custom_theme_colors);
|
||||
}
|
||||
|
||||
function handleCustomColorChange(key: keyof CustomThemeColors, value: string) {
|
||||
config.custom_theme_colors = {
|
||||
...config.custom_theme_colors,
|
||||
[key]: value || null,
|
||||
};
|
||||
// Live preview
|
||||
if (config.theme === "custom") {
|
||||
applyCustomThemeColors(config.custom_theme_colors);
|
||||
}
|
||||
}
|
||||
|
||||
// Default dark theme colors for color picker defaults
|
||||
const defaultDarkColors: Required<Record<keyof CustomThemeColors, string>> = {
|
||||
bg_primary: "#1a1a2e",
|
||||
bg_secondary: "#16213e",
|
||||
bg_terminal: "#0f0f1a",
|
||||
accent_primary: "#e94560",
|
||||
accent_secondary: "#ff6b9d",
|
||||
text_primary: "#ffffff",
|
||||
text_secondary: "#a0a0a0",
|
||||
border_color: "#2a2a4a",
|
||||
};
|
||||
|
||||
function toggleTool(tool: string) {
|
||||
if (config.auto_granted_tools.includes(tool)) {
|
||||
config.auto_granted_tools = config.auto_granted_tools.filter((t) => t !== tool);
|
||||
@@ -186,47 +231,60 @@
|
||||
<div class="mb-4">
|
||||
<label for="api-key" class="block text-sm text-[var(--text-secondary)] mb-1">
|
||||
API Key <span class="text-[var(--text-tertiary)]">(optional override)</span>
|
||||
{#if config.streamer_mode}
|
||||
<span class="text-yellow-500 text-xs ml-2">🔒 Hidden (Streamer Mode)</span>
|
||||
{/if}
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
id="api-key"
|
||||
type={showApiKey ? "text" : "password"}
|
||||
bind:value={config.api_key}
|
||||
placeholder="Falls back to ~/.claude settings"
|
||||
class="w-full px-3 py-2 pr-10 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-primary)]"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (showApiKey = !showApiKey)}
|
||||
class="absolute right-2 top-1/2 -translate-y-1/2 text-[var(--text-tertiary)] hover:text-[var(--text-primary)]"
|
||||
aria-label={showApiKey ? "Hide API key" : "Show API key"}
|
||||
>
|
||||
{#if showApiKey}
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
|
||||
/>
|
||||
</svg>
|
||||
{:else}
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
|
||||
/>
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
{#if config.streamer_mode}
|
||||
<input
|
||||
id="api-key"
|
||||
type="password"
|
||||
value="••••••••••••••••••••••••"
|
||||
disabled
|
||||
class="w-full px-3 py-2 pr-10 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg text-[var(--text-tertiary)] focus:outline-none cursor-not-allowed"
|
||||
/>
|
||||
{:else}
|
||||
<input
|
||||
id="api-key"
|
||||
type={showApiKey ? "text" : "password"}
|
||||
bind:value={config.api_key}
|
||||
placeholder="Falls back to ~/.claude settings"
|
||||
class="w-full px-3 py-2 pr-10 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-primary)]"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (showApiKey = !showApiKey)}
|
||||
class="absolute right-2 top-1/2 -translate-y-1/2 text-[var(--text-tertiary)] hover:text-[var(--text-primary)]"
|
||||
aria-label={showApiKey ? "Hide API key" : "Show API key"}
|
||||
>
|
||||
{#if showApiKey}
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
|
||||
/>
|
||||
</svg>
|
||||
{:else}
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
|
||||
/>
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -385,7 +443,7 @@
|
||||
<button
|
||||
onclick={addCustomTool}
|
||||
disabled={!newToolName.trim()}
|
||||
class="px-3 py-1.5 text-sm bg-[var(--accent-primary)] hover:bg-[var(--accent-secondary)] text-white rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
class="btn-trans-gradient px-3 py-1.5 text-sm rounded-lg"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
@@ -400,11 +458,12 @@
|
||||
|
||||
<!-- Theme Selection -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm text-[var(--text-secondary)] mb-2">Theme</label>
|
||||
<div class="flex gap-2">
|
||||
<span class="block text-sm text-[var(--text-secondary)] mb-2">Theme</span>
|
||||
<div class="flex flex-wrap gap-2" role="group" aria-label="Theme selection">
|
||||
<button
|
||||
onclick={() => handleThemeChange("dark")}
|
||||
class="flex-1 px-4 py-2 rounded-lg border transition-colors {config.theme === 'dark'
|
||||
class="flex-1 min-w-[70px] px-3 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)]'}"
|
||||
>
|
||||
@@ -412,15 +471,187 @@
|
||||
</button>
|
||||
<button
|
||||
onclick={() => handleThemeChange("light")}
|
||||
class="flex-1 px-4 py-2 rounded-lg border transition-colors {config.theme === 'light'
|
||||
class="flex-1 min-w-[70px] px-3 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>
|
||||
<button
|
||||
onclick={() => handleThemeChange("high-contrast")}
|
||||
class="flex-1 min-w-[70px] px-3 py-2 rounded-lg border transition-colors {config.theme ===
|
||||
'high-contrast'
|
||||
? '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)]'}"
|
||||
title="High contrast mode for improved accessibility"
|
||||
>
|
||||
Contrast
|
||||
</button>
|
||||
<button
|
||||
onclick={() => handleThemeChange("custom")}
|
||||
class="flex-1 min-w-[70px] px-3 py-2 rounded-lg border transition-colors {config.theme ===
|
||||
'custom'
|
||||
? '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)]'}"
|
||||
title="Create your own custom theme"
|
||||
>
|
||||
Custom
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom Theme Editor -->
|
||||
{#if config.theme === "custom" || showCustomThemeEditor}
|
||||
<div class="mb-4 p-3 bg-[var(--bg-primary)] rounded-lg border border-[var(--border-color)]">
|
||||
<h4 class="text-sm font-medium text-[var(--text-primary)] mb-3">Custom Theme Colors</h4>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="color-input-group">
|
||||
<label class="text-xs text-[var(--text-secondary)]" for="color-bg-primary"
|
||||
>Background</label
|
||||
>
|
||||
<div class="flex gap-2 items-center">
|
||||
<input
|
||||
id="color-bg-primary"
|
||||
type="color"
|
||||
value={config.custom_theme_colors.bg_primary || defaultDarkColors.bg_primary}
|
||||
oninput={(e) => handleCustomColorChange("bg_primary", e.currentTarget.value)}
|
||||
class="color-picker"
|
||||
/>
|
||||
<span class="text-xs text-[var(--text-tertiary)] font-mono">
|
||||
{config.custom_theme_colors.bg_primary || defaultDarkColors.bg_primary}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-input-group">
|
||||
<label class="text-xs text-[var(--text-secondary)]" for="color-bg-secondary"
|
||||
>Secondary BG</label
|
||||
>
|
||||
<div class="flex gap-2 items-center">
|
||||
<input
|
||||
id="color-bg-secondary"
|
||||
type="color"
|
||||
value={config.custom_theme_colors.bg_secondary || defaultDarkColors.bg_secondary}
|
||||
oninput={(e) => handleCustomColorChange("bg_secondary", e.currentTarget.value)}
|
||||
class="color-picker"
|
||||
/>
|
||||
<span class="text-xs text-[var(--text-tertiary)] font-mono">
|
||||
{config.custom_theme_colors.bg_secondary || defaultDarkColors.bg_secondary}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-input-group">
|
||||
<label class="text-xs text-[var(--text-secondary)]" for="color-bg-terminal"
|
||||
>Terminal BG</label
|
||||
>
|
||||
<div class="flex gap-2 items-center">
|
||||
<input
|
||||
id="color-bg-terminal"
|
||||
type="color"
|
||||
value={config.custom_theme_colors.bg_terminal || defaultDarkColors.bg_terminal}
|
||||
oninput={(e) => handleCustomColorChange("bg_terminal", e.currentTarget.value)}
|
||||
class="color-picker"
|
||||
/>
|
||||
<span class="text-xs text-[var(--text-tertiary)] font-mono">
|
||||
{config.custom_theme_colors.bg_terminal || defaultDarkColors.bg_terminal}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-input-group">
|
||||
<label class="text-xs text-[var(--text-secondary)]" for="color-border">Border</label>
|
||||
<div class="flex gap-2 items-center">
|
||||
<input
|
||||
id="color-border"
|
||||
type="color"
|
||||
value={config.custom_theme_colors.border_color || defaultDarkColors.border_color}
|
||||
oninput={(e) => handleCustomColorChange("border_color", e.currentTarget.value)}
|
||||
class="color-picker"
|
||||
/>
|
||||
<span class="text-xs text-[var(--text-tertiary)] font-mono">
|
||||
{config.custom_theme_colors.border_color || defaultDarkColors.border_color}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-input-group">
|
||||
<label class="text-xs text-[var(--text-secondary)]" for="color-accent-primary"
|
||||
>Accent Primary</label
|
||||
>
|
||||
<div class="flex gap-2 items-center">
|
||||
<input
|
||||
id="color-accent-primary"
|
||||
type="color"
|
||||
value={config.custom_theme_colors.accent_primary ||
|
||||
defaultDarkColors.accent_primary}
|
||||
oninput={(e) => handleCustomColorChange("accent_primary", e.currentTarget.value)}
|
||||
class="color-picker"
|
||||
/>
|
||||
<span class="text-xs text-[var(--text-tertiary)] font-mono">
|
||||
{config.custom_theme_colors.accent_primary || defaultDarkColors.accent_primary}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-input-group">
|
||||
<label class="text-xs text-[var(--text-secondary)]" for="color-accent-secondary"
|
||||
>Accent Secondary</label
|
||||
>
|
||||
<div class="flex gap-2 items-center">
|
||||
<input
|
||||
id="color-accent-secondary"
|
||||
type="color"
|
||||
value={config.custom_theme_colors.accent_secondary ||
|
||||
defaultDarkColors.accent_secondary}
|
||||
oninput={(e) =>
|
||||
handleCustomColorChange("accent_secondary", e.currentTarget.value)}
|
||||
class="color-picker"
|
||||
/>
|
||||
<span class="text-xs text-[var(--text-tertiary)] font-mono">
|
||||
{config.custom_theme_colors.accent_secondary ||
|
||||
defaultDarkColors.accent_secondary}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-input-group">
|
||||
<label class="text-xs text-[var(--text-secondary)]" for="color-text-primary"
|
||||
>Text Primary</label
|
||||
>
|
||||
<div class="flex gap-2 items-center">
|
||||
<input
|
||||
id="color-text-primary"
|
||||
type="color"
|
||||
value={config.custom_theme_colors.text_primary || defaultDarkColors.text_primary}
|
||||
oninput={(e) => handleCustomColorChange("text_primary", e.currentTarget.value)}
|
||||
class="color-picker"
|
||||
/>
|
||||
<span class="text-xs text-[var(--text-tertiary)] font-mono">
|
||||
{config.custom_theme_colors.text_primary || defaultDarkColors.text_primary}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-input-group">
|
||||
<label class="text-xs text-[var(--text-secondary)]" for="color-text-secondary"
|
||||
>Text Secondary</label
|
||||
>
|
||||
<div class="flex gap-2 items-center">
|
||||
<input
|
||||
id="color-text-secondary"
|
||||
type="color"
|
||||
value={config.custom_theme_colors.text_secondary ||
|
||||
defaultDarkColors.text_secondary}
|
||||
oninput={(e) => handleCustomColorChange("text_secondary", e.currentTarget.value)}
|
||||
class="color-picker"
|
||||
/>
|
||||
<span class="text-xs text-[var(--text-tertiary)] font-mono">
|
||||
{config.custom_theme_colors.text_secondary || defaultDarkColors.text_secondary}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-[var(--text-tertiary)] mt-3">
|
||||
Changes preview live. Click Save Settings to persist.
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Font Size -->
|
||||
<div class="mb-4">
|
||||
<label for="font-size" class="block text-sm text-[var(--text-secondary)] mb-2">
|
||||
@@ -477,6 +708,21 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Minimize to Tray Toggle -->
|
||||
<div class="mb-4">
|
||||
<label class="flex items-center gap-3 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={config.minimize_to_tray}
|
||||
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)]">Minimize to system tray</span>
|
||||
</label>
|
||||
<p class="text-xs text-[var(--text-tertiary)] mt-1 ml-7">
|
||||
Hide to tray instead of closing when you click the X button
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Update Checks Toggle -->
|
||||
<div class="mb-4">
|
||||
<label class="flex items-center gap-3 cursor-pointer">
|
||||
@@ -493,6 +739,45 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Privacy / Streamer Mode Section -->
|
||||
<section class="mb-6">
|
||||
<h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
|
||||
Privacy / Streamer Mode
|
||||
</h3>
|
||||
|
||||
<!-- Streamer Mode Toggle -->
|
||||
<div class="mb-4">
|
||||
<label class="flex items-center gap-3 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={config.streamer_mode}
|
||||
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)]">Enable streamer mode</span>
|
||||
</label>
|
||||
<p class="text-xs text-[var(--text-tertiary)] mt-1 ml-7">
|
||||
Hide sensitive information like API keys when streaming (Ctrl+Shift+S to toggle)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Hide Paths Toggle -->
|
||||
{#if config.streamer_mode}
|
||||
<div class="mb-4">
|
||||
<label class="flex items-center gap-3 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={config.streamer_hide_paths}
|
||||
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)]">Also hide file paths</span>
|
||||
</label>
|
||||
<p class="text-xs text-[var(--text-tertiary)] mt-1 ml-7">
|
||||
Mask directory paths (e.g., /home/user → /home/****)
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<!-- Notifications Section -->
|
||||
<section class="mb-6">
|
||||
<h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
|
||||
@@ -543,7 +828,7 @@
|
||||
<button
|
||||
onclick={handleSave}
|
||||
disabled={isSaving}
|
||||
class="w-full py-3 bg-[var(--accent-primary)] hover:bg-[var(--accent-secondary)] text-white font-medium rounded-lg transition-colors disabled:opacity-50"
|
||||
class="btn-trans-gradient w-full py-3 font-medium rounded-lg"
|
||||
>
|
||||
{isSaving ? "Saving..." : "Save Settings"}
|
||||
</button>
|
||||
@@ -580,4 +865,39 @@
|
||||
background: var(--text-tertiary);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Color picker styling */
|
||||
.color-input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.color-picker {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.color-picker::-webkit-color-swatch-wrapper {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.color-picker::-webkit-color-swatch {
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.color-picker::-moz-color-swatch {
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.color-picker:hover {
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user