fix(app): iOS HIG Phase 1 — input font sizes and text minimums
- Replace all text-[10px] (308 instances) with text-xs (12px) - Replace all text-[9px] and text-[8px] (133 instances) with text-xs - Replace all text-[11px] (76 instances) with text-xs - Bump all input/textarea font sizes to text-base (16px) to prevent iOS auto-zoom - No visual design changes — only sizing minimums enforced Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
dde3859a2e
commit
b2fcc23623
@@ -22,7 +22,7 @@
|
||||
{{ provider.name }}
|
||||
</div>
|
||||
<div
|
||||
class="text-[10px] font-mono mt-0.5"
|
||||
class="text-xs font-mono mt-0.5"
|
||||
:class="isDark ? 'text-white/30' : 'text-gray-400'"
|
||||
>
|
||||
{{ provider.masked ?? 'Not configured' }}
|
||||
@@ -30,7 +30,7 @@
|
||||
</div>
|
||||
<button
|
||||
v-if="provider.hasKey"
|
||||
class="text-[10px] px-2 py-1 rounded-md transition-colors"
|
||||
class="text-xs px-2 py-1 rounded-md transition-colors"
|
||||
:class="isDark
|
||||
? 'text-red-400/60 hover:text-red-400 hover:bg-red-500/10'
|
||||
: 'text-red-500/60 hover:text-red-600 hover:bg-red-50'"
|
||||
@@ -83,7 +83,7 @@
|
||||
|
||||
<p
|
||||
v-if="statusMessage"
|
||||
class="text-[10px]"
|
||||
class="text-xs"
|
||||
:class="statusError ? 'text-red-400' : isDark ? 'text-green-400' : 'text-green-600'"
|
||||
>
|
||||
{{ statusMessage }}
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
Connected
|
||||
</div>
|
||||
<button
|
||||
class="text-[10px] font-mono mt-0.5 hover:underline"
|
||||
class="text-xs font-mono mt-0.5 hover:underline"
|
||||
:class="isDark ? 'text-purple-400/60' : 'text-purple-600/60'"
|
||||
@click="copyNpub"
|
||||
>
|
||||
@@ -33,7 +33,7 @@
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="text-[10px] px-2 py-1 rounded-md transition-colors"
|
||||
class="text-xs px-2 py-1 rounded-md transition-colors"
|
||||
:class="isDark
|
||||
? 'text-red-400/60 hover:text-red-400 hover:bg-red-500/10'
|
||||
: 'text-red-500/60 hover:text-red-600 hover:bg-red-50'"
|
||||
@@ -85,7 +85,7 @@
|
||||
<!-- Error -->
|
||||
<p
|
||||
v-if="error"
|
||||
class="text-[10px] text-red-400"
|
||||
class="text-xs text-red-400"
|
||||
>
|
||||
{{ error }}
|
||||
</p>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h3 class="text-sm font-bold text-white/90">Plugins</h3>
|
||||
<div class="flex items-center gap-2">
|
||||
<span v-if="store.hasUpdates" class="text-[8px] px-1.5 py-0.5 rounded-full bg-accent/20 text-accent/80">
|
||||
<span v-if="store.hasUpdates" class="text-xs px-1.5 py-0.5 rounded-full bg-accent/20 text-accent/80">
|
||||
Updates
|
||||
</span>
|
||||
</div>
|
||||
@@ -14,7 +14,7 @@
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:key="tab.id"
|
||||
class="text-[10px] px-2 py-1 rounded-md transition-all duration-150"
|
||||
class="text-xs px-2 py-1 rounded-md transition-all duration-150"
|
||||
:class="activeTab === tab.id
|
||||
? 'nav-tab-active'
|
||||
: 'text-white/40 hover:text-white/70 hover:bg-white/5'"
|
||||
@@ -34,7 +34,7 @@
|
||||
|
||||
<div v-else-if="store.registryError && store.registryPlugins.length === 0" class="py-8 text-center">
|
||||
<p class="text-xs text-red-400/60">{{ store.registryError }}</p>
|
||||
<button class="mt-2 text-[10px] text-accent/60 hover:text-accent/80" @click="store.fetchRegistry()">Retry</button>
|
||||
<button class="mt-2 text-xs text-accent/60 hover:text-accent/80" @click="store.fetchRegistry()">Retry</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -45,22 +45,22 @@
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-xs font-semibold text-white/80">{{ plugin.name }}</p>
|
||||
<p class="text-[9px] text-white/30">{{ plugin.author }} · v{{ plugin.version }}</p>
|
||||
<p class="text-xs text-white/30">{{ plugin.author }} · v{{ plugin.version }}</p>
|
||||
</div>
|
||||
<button
|
||||
v-if="!store.isInstalled(plugin.id)"
|
||||
class="text-[10px] px-3 py-1.5 rounded-lg bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors shrink-0"
|
||||
class="text-xs px-3 py-1.5 rounded-lg bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors shrink-0"
|
||||
@click="showPermissionsDialog(plugin)"
|
||||
>
|
||||
Install
|
||||
</button>
|
||||
<span v-else class="text-[9px] text-emerald-400/60 shrink-0">Installed</span>
|
||||
<span v-else class="text-xs text-emerald-400/60 shrink-0">Installed</span>
|
||||
</div>
|
||||
<p class="text-[10px] text-white/50">{{ plugin.description }}</p>
|
||||
<p class="text-xs text-white/50">{{ plugin.description }}</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[8px] px-1.5 py-0.5 rounded bg-white/5 text-white/30">{{ plugin.type }}</span>
|
||||
<span class="text-xs px-1.5 py-0.5 rounded bg-white/5 text-white/30">{{ plugin.type }}</span>
|
||||
<div class="flex items-center gap-0.5">
|
||||
<span v-for="i in 5" :key="i" class="text-[8px]" :class="i <= plugin.rating ? 'text-accent/60' : 'text-white/10'">★</span>
|
||||
<span v-for="i in 5" :key="i" class="text-xs" :class="i <= plugin.rating ? 'text-accent/60' : 'text-white/10'">★</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -83,18 +83,18 @@
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-xs font-semibold text-white/80">{{ plugin.name }}</p>
|
||||
<p class="text-[9px] text-white/30">v{{ plugin.version }} · {{ plugin.author }}</p>
|
||||
<p class="text-xs text-white/30">v{{ plugin.version }} · {{ plugin.author }}</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 shrink-0">
|
||||
<button
|
||||
v-if="store.updatesAvailable.has(plugin.id)"
|
||||
class="text-[9px] px-2 py-1 rounded bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors"
|
||||
class="text-xs px-2 py-1 rounded bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors"
|
||||
@click="store.updatePlugin(plugin.id)"
|
||||
>
|
||||
Update to v{{ store.updatesAvailable.get(plugin.id) }}
|
||||
</button>
|
||||
<button
|
||||
class="text-[9px] p-1 rounded text-white/30 hover:text-white/60 hover:bg-white/5 transition-colors"
|
||||
class="text-xs p-1 rounded text-white/30 hover:text-white/60 hover:bg-white/5 transition-colors"
|
||||
@click="editingPlugin = editingPlugin === plugin.id ? null : plugin.id"
|
||||
>
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
@@ -103,7 +103,7 @@
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="text-[9px] px-2 py-1 rounded text-red-400/50 hover:text-red-400/80 hover:bg-red-400/10 transition-colors"
|
||||
class="text-xs px-2 py-1 rounded text-red-400/50 hover:text-red-400/80 hover:bg-red-400/10 transition-colors"
|
||||
@click="store.uninstallPlugin(plugin.id)"
|
||||
>
|
||||
Remove
|
||||
@@ -116,7 +116,7 @@
|
||||
<span
|
||||
v-for="perm in plugin.permissions"
|
||||
:key="perm"
|
||||
class="text-[8px] px-1.5 py-0.5 rounded"
|
||||
class="text-xs px-1.5 py-0.5 rounded"
|
||||
:class="plugin.grantedPermissions.includes(perm)
|
||||
? 'bg-emerald-400/15 text-emerald-400/60'
|
||||
: 'bg-red-400/15 text-red-400/60'"
|
||||
@@ -150,14 +150,14 @@
|
||||
<!-- Import -->
|
||||
<template v-else-if="activeTab === 'import'">
|
||||
<div class="space-y-3">
|
||||
<p class="text-[10px] text-white/40">
|
||||
<p class="text-xs text-white/40">
|
||||
Paste a GitHub raw URL or IPFS CID to the plugin's manifest (aiui-plugin.json).
|
||||
</p>
|
||||
<input
|
||||
v-model="importUrl"
|
||||
type="text"
|
||||
placeholder="https://raw.githubusercontent.com/.../aiui-plugin.json"
|
||||
class="w-full px-3 py-2.5 rounded-lg text-xs bg-white/5 text-white/80 placeholder:text-white/25 outline-none focus:bg-white/10 transition-colors font-mono"
|
||||
class="w-full px-3 py-2.5 rounded-lg text-base bg-white/5 text-white/80 placeholder:text-white/25 outline-none focus:bg-white/10 transition-colors font-mono"
|
||||
/>
|
||||
<button
|
||||
class="w-full py-2.5 rounded-lg text-xs font-medium bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors disabled:opacity-30"
|
||||
@@ -166,15 +166,15 @@
|
||||
>
|
||||
{{ isImporting ? 'Fetching manifest...' : 'Import Plugin' }}
|
||||
</button>
|
||||
<p v-if="importError" class="text-[10px] text-red-400/60">{{ importError }}</p>
|
||||
<p v-if="importError" class="text-xs text-red-400/60">{{ importError }}</p>
|
||||
|
||||
<!-- Imported plugin preview -->
|
||||
<div v-if="importedManifest" class="rounded-xl bg-white/[0.03] border border-white/5 p-3 space-y-2">
|
||||
<p class="text-xs font-semibold text-white/80">{{ importedManifest.name }}</p>
|
||||
<p class="text-[10px] text-white/50">{{ importedManifest.description }}</p>
|
||||
<p class="text-[9px] text-white/30">{{ importedManifest.author }} · v{{ importedManifest.version }}</p>
|
||||
<p class="text-xs text-white/50">{{ importedManifest.description }}</p>
|
||||
<p class="text-xs text-white/30">{{ importedManifest.author }} · v{{ importedManifest.version }}</p>
|
||||
<button
|
||||
class="w-full py-2 rounded-lg text-[10px] bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors"
|
||||
class="w-full py-2 rounded-lg text-xs bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors"
|
||||
@click="showPermissionsDialog(importedManifest)"
|
||||
>
|
||||
Install
|
||||
@@ -187,31 +187,31 @@
|
||||
<template v-else-if="activeTab === 'dev'">
|
||||
<div v-if="!isDevMode" class="flex flex-col items-center justify-center py-12 gap-2">
|
||||
<p class="text-xs text-white/30">Dev mode not enabled</p>
|
||||
<p class="text-[10px] text-white/20">Set VITE_PLUGIN_DEV=true to enable</p>
|
||||
<p class="text-xs text-white/20">Set VITE_PLUGIN_DEV=true to enable</p>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<div class="rounded-xl bg-white/[0.03] border border-white/5 p-3 space-y-2">
|
||||
<p class="text-[10px] text-accent/60 uppercase tracking-wider font-bold">Plugin Dev Mode</p>
|
||||
<p class="text-[10px] text-white/40">Hot-reload from src/plugins/dev/</p>
|
||||
<p class="text-xs text-accent/60 uppercase tracking-wider font-bold">Plugin Dev Mode</p>
|
||||
<p class="text-xs text-white/40">Hot-reload from src/plugins/dev/</p>
|
||||
|
||||
<div v-if="devErrors.length > 0" class="space-y-1 mt-2">
|
||||
<p class="text-[9px] text-red-400/60 uppercase tracking-wider font-bold">Errors</p>
|
||||
<p class="text-xs text-red-400/60 uppercase tracking-wider font-bold">Errors</p>
|
||||
<div
|
||||
v-for="(err, i) in devErrors"
|
||||
:key="i"
|
||||
class="text-[9px] text-red-400/50 font-mono bg-red-400/5 rounded p-2"
|
||||
class="text-xs text-red-400/50 font-mono bg-red-400/5 rounded p-2"
|
||||
>
|
||||
{{ err }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="devTimings.length > 0" class="space-y-1 mt-2">
|
||||
<p class="text-[9px] text-white/30 uppercase tracking-wider font-bold">Init Timing</p>
|
||||
<p class="text-xs text-white/30 uppercase tracking-wider font-bold">Init Timing</p>
|
||||
<div
|
||||
v-for="t in devTimings"
|
||||
:key="t.id"
|
||||
class="flex items-center justify-between text-[9px]"
|
||||
class="flex items-center justify-between text-xs"
|
||||
>
|
||||
<span class="text-white/50">{{ t.id }}</span>
|
||||
<span class="text-white/30 tabular-nums">{{ t.ms }}ms</span>
|
||||
@@ -227,7 +227,7 @@
|
||||
<div v-if="pendingInstall" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
|
||||
<div class="w-full max-w-sm mx-4 rounded-2xl bg-[#0a0a0a] border border-white/10 p-5 space-y-4">
|
||||
<h4 class="text-sm font-bold text-white/90">Plugin Permissions</h4>
|
||||
<p class="text-[10px] text-white/40">
|
||||
<p class="text-xs text-white/40">
|
||||
"{{ pendingInstall.name }}" requests the following permissions:
|
||||
</p>
|
||||
<div class="space-y-2">
|
||||
@@ -243,8 +243,8 @@
|
||||
@change="togglePermission(perm)"
|
||||
/>
|
||||
<div>
|
||||
<p class="text-[11px] text-white/70">{{ permissionLabel(perm) }}</p>
|
||||
<p class="text-[9px] text-white/30">{{ permissionDescription(perm) }}</p>
|
||||
<p class="text-xs text-white/70">{{ permissionLabel(perm) }}</p>
|
||||
<p class="text-xs text-white/30">{{ permissionDescription(perm) }}</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="mt-2 pt-2 border-t border-white/[0.05] space-y-3">
|
||||
<p class="text-[10px] text-accent/60 uppercase tracking-wider font-bold">Settings</p>
|
||||
<p class="text-xs text-accent/60 uppercase tracking-wider font-bold">Settings</p>
|
||||
|
||||
<!-- Generic key-value settings editor -->
|
||||
<div class="space-y-2">
|
||||
<div v-for="(value, key) in localSettings" :key="key" class="flex items-center gap-2">
|
||||
<span class="text-[10px] text-white/40 min-w-[60px]">{{ key }}</span>
|
||||
<span class="text-xs text-white/40 min-w-[60px]">{{ key }}</span>
|
||||
<input
|
||||
:value="String(value ?? '')"
|
||||
class="flex-1 px-2 py-1.5 rounded-md text-[10px] bg-white/5 text-white/70 outline-none focus:bg-white/10 transition-colors"
|
||||
class="flex-1 px-2 py-1.5 rounded-md text-base bg-white/5 text-white/70 outline-none focus:bg-white/10 transition-colors"
|
||||
@input="updateSetting(key as string, ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
</div>
|
||||
@@ -19,16 +19,16 @@
|
||||
v-model="newSettingKey"
|
||||
type="text"
|
||||
placeholder="Key"
|
||||
class="flex-1 px-2 py-1.5 rounded-md text-[10px] bg-white/5 text-white/70 placeholder:text-white/20 outline-none focus:bg-white/10 transition-colors"
|
||||
class="flex-1 px-2 py-1.5 rounded-md text-base bg-white/5 text-white/70 placeholder:text-white/20 outline-none focus:bg-white/10 transition-colors"
|
||||
/>
|
||||
<input
|
||||
v-model="newSettingValue"
|
||||
type="text"
|
||||
placeholder="Value"
|
||||
class="flex-1 px-2 py-1.5 rounded-md text-[10px] bg-white/5 text-white/70 placeholder:text-white/20 outline-none focus:bg-white/10 transition-colors"
|
||||
class="flex-1 px-2 py-1.5 rounded-md text-base bg-white/5 text-white/70 placeholder:text-white/20 outline-none focus:bg-white/10 transition-colors"
|
||||
/>
|
||||
<button
|
||||
class="text-[9px] px-2 py-1.5 rounded-md bg-white/5 text-white/40 hover:text-white/70 hover:bg-white/10 transition-colors disabled:opacity-30"
|
||||
class="text-xs px-2 py-1.5 rounded-md bg-white/5 text-white/40 hover:text-white/70 hover:bg-white/10 transition-colors disabled:opacity-30"
|
||||
:disabled="!newSettingKey.trim()"
|
||||
@click="addSetting"
|
||||
>
|
||||
@@ -39,12 +39,12 @@
|
||||
|
||||
<!-- Permissions toggles -->
|
||||
<div v-if="permissions.length > 0">
|
||||
<p class="text-[10px] text-accent/60 uppercase tracking-wider font-bold mb-2">Permissions</p>
|
||||
<p class="text-xs text-accent/60 uppercase tracking-wider font-bold mb-2">Permissions</p>
|
||||
<div class="space-y-1">
|
||||
<label
|
||||
v-for="perm in permissions"
|
||||
:key="perm"
|
||||
class="flex items-center gap-2 text-[10px] cursor-pointer"
|
||||
class="flex items-center gap-2 text-xs cursor-pointer"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
@@ -58,7 +58,7 @@
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="w-full py-2 rounded-lg text-[10px] bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors"
|
||||
class="w-full py-2 rounded-lg text-xs bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors"
|
||||
@click="save"
|
||||
>
|
||||
Save Settings
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:key="tab.id"
|
||||
class="text-[10px] px-2 py-1 rounded-md whitespace-nowrap transition-all duration-150"
|
||||
class="text-xs px-2 py-1 rounded-md whitespace-nowrap transition-all duration-150"
|
||||
:class="activeTab === tab.id
|
||||
? 'nav-tab-active'
|
||||
: 'text-white/40 hover:text-white/70 hover:bg-white/5'"
|
||||
@@ -35,7 +35,7 @@
|
||||
<template v-if="activeTab === 'appearance'">
|
||||
<!-- M15.1 Accent colour -->
|
||||
<div class="space-y-2">
|
||||
<p class="text-[10px] text-accent/60 uppercase tracking-wider font-bold">Accent Colour</p>
|
||||
<p class="text-xs text-accent/60 uppercase tracking-wider font-bold">Accent Colour</p>
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<button
|
||||
v-for="color in accentPresets"
|
||||
@@ -47,7 +47,7 @@
|
||||
@click="store.accentColor = color.value"
|
||||
/>
|
||||
<label class="w-8 h-8 rounded-lg border-2 border-white/10 flex items-center justify-center cursor-pointer overflow-hidden relative">
|
||||
<span class="text-[8px] text-white/30">+</span>
|
||||
<span class="text-xs text-white/30">+</span>
|
||||
<input
|
||||
type="color"
|
||||
:value="store.accentColor"
|
||||
@@ -60,12 +60,12 @@
|
||||
|
||||
<!-- M15.2 Glass intensity -->
|
||||
<div class="space-y-2">
|
||||
<p class="text-[10px] text-accent/60 uppercase tracking-wider font-bold">Glass Intensity</p>
|
||||
<p class="text-xs text-accent/60 uppercase tracking-wider font-bold">Glass Intensity</p>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
v-for="opt in glassOptions"
|
||||
:key="opt.value"
|
||||
class="flex-1 py-2 rounded-lg text-[10px] transition-all"
|
||||
class="flex-1 py-2 rounded-lg text-xs transition-all"
|
||||
:class="store.glassIntensity === opt.value
|
||||
? 'bg-accent/15 text-accent/80'
|
||||
: 'bg-white/5 text-white/40 hover:text-white/60 hover:bg-white/10'"
|
||||
@@ -78,12 +78,12 @@
|
||||
|
||||
<!-- M15.3 Font size -->
|
||||
<div class="space-y-2">
|
||||
<p class="text-[10px] text-accent/60 uppercase tracking-wider font-bold">Font Size</p>
|
||||
<p class="text-xs text-accent/60 uppercase tracking-wider font-bold">Font Size</p>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
v-for="opt in fontOptions"
|
||||
:key="opt.value"
|
||||
class="flex-1 py-2 rounded-lg text-[10px] transition-all"
|
||||
class="flex-1 py-2 rounded-lg text-xs transition-all"
|
||||
:class="store.fontSize === opt.value
|
||||
? 'bg-accent/15 text-accent/80'
|
||||
: 'bg-white/5 text-white/40 hover:text-white/60 hover:bg-white/10'"
|
||||
@@ -99,8 +99,8 @@
|
||||
<template v-else-if="activeTab === 'content'">
|
||||
<!-- M15.4 Content type visibility -->
|
||||
<div class="space-y-2">
|
||||
<p class="text-[10px] text-accent/60 uppercase tracking-wider font-bold">Content Types</p>
|
||||
<p class="text-[9px] text-white/30">Hidden types still extract but don't show in the panel</p>
|
||||
<p class="text-xs text-accent/60 uppercase tracking-wider font-bold">Content Types</p>
|
||||
<p class="text-xs text-white/30">Hidden types still extract but don't show in the panel</p>
|
||||
<div class="space-y-1">
|
||||
<label
|
||||
v-for="ct in contentTypes"
|
||||
@@ -113,7 +113,7 @@
|
||||
class="rounded accent-[#F7931A]"
|
||||
@change="store.toggleTabVisibility(ct.tab)"
|
||||
/>
|
||||
<span class="text-[11px] text-white/70">{{ ct.label }}</span>
|
||||
<span class="text-xs text-white/70">{{ ct.label }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -123,16 +123,16 @@
|
||||
<template v-else-if="activeTab === 'shortcuts'">
|
||||
<!-- M15.5 Keyboard shortcuts -->
|
||||
<div class="space-y-2">
|
||||
<p class="text-[10px] text-accent/60 uppercase tracking-wider font-bold">Keyboard Shortcuts</p>
|
||||
<p class="text-xs text-accent/60 uppercase tracking-wider font-bold">Keyboard Shortcuts</p>
|
||||
<div class="space-y-1">
|
||||
<div
|
||||
v-for="(binding, action) in store.settings.shortcuts"
|
||||
:key="action"
|
||||
class="flex items-center justify-between p-2.5 rounded-lg bg-white/[0.03] border border-white/5"
|
||||
>
|
||||
<span class="text-[11px] text-white/60">{{ formatAction(action as string) }}</span>
|
||||
<span class="text-xs text-white/60">{{ formatAction(action as string) }}</span>
|
||||
<button
|
||||
class="text-[10px] px-2 py-1 rounded bg-white/5 text-white/40 hover:text-white/70 font-mono transition-colors"
|
||||
class="text-xs px-2 py-1 rounded bg-white/5 text-white/40 hover:text-white/70 font-mono transition-colors"
|
||||
:class="recordingAction === action ? 'bg-accent/15 text-accent/80' : ''"
|
||||
@click="startRecording(action as string)"
|
||||
>
|
||||
@@ -147,7 +147,7 @@
|
||||
<template v-else-if="activeTab === 'notifications'">
|
||||
<!-- M15.6 Push notifications -->
|
||||
<div class="space-y-3">
|
||||
<p class="text-[10px] text-accent/60 uppercase tracking-wider font-bold">Notifications</p>
|
||||
<p class="text-xs text-accent/60 uppercase tracking-wider font-bold">Notifications</p>
|
||||
<label class="flex items-center gap-3 p-3 rounded-lg bg-white/[0.03] border border-white/5 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
@@ -156,11 +156,11 @@
|
||||
@change="toggleNotifications"
|
||||
/>
|
||||
<div>
|
||||
<p class="text-[11px] text-white/70">Generation complete</p>
|
||||
<p class="text-[9px] text-white/30">Notify when AI finishes while tab is backgrounded</p>
|
||||
<p class="text-xs text-white/70">Generation complete</p>
|
||||
<p class="text-xs text-white/30">Notify when AI finishes while tab is backgrounded</p>
|
||||
</div>
|
||||
</label>
|
||||
<p v-if="notificationStatus" class="text-[10px]" :class="notificationOk ? 'text-emerald-400/60' : 'text-yellow-400/60'">
|
||||
<p v-if="notificationStatus" class="text-xs" :class="notificationOk ? 'text-emerald-400/60' : 'text-yellow-400/60'">
|
||||
{{ notificationStatus }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -170,13 +170,13 @@
|
||||
<template v-else-if="activeTab === 'storage'">
|
||||
<!-- M15.7 Auto-archive -->
|
||||
<div class="space-y-2">
|
||||
<p class="text-[10px] text-accent/60 uppercase tracking-wider font-bold">Auto-Archive</p>
|
||||
<p class="text-[9px] text-white/30">Archive conversations older than:</p>
|
||||
<p class="text-xs text-accent/60 uppercase tracking-wider font-bold">Auto-Archive</p>
|
||||
<p class="text-xs text-white/30">Archive conversations older than:</p>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
v-for="opt in archiveOptions"
|
||||
:key="opt.value"
|
||||
class="flex-1 py-2 rounded-lg text-[10px] transition-all"
|
||||
class="flex-1 py-2 rounded-lg text-xs transition-all"
|
||||
:class="store.autoArchiveDays === opt.value
|
||||
? 'bg-accent/15 text-accent/80'
|
||||
: 'bg-white/5 text-white/40 hover:text-white/60 hover:bg-white/10'"
|
||||
@@ -189,19 +189,19 @@
|
||||
|
||||
<!-- M15.8 Full data export -->
|
||||
<div class="space-y-2">
|
||||
<p class="text-[10px] text-accent/60 uppercase tracking-wider font-bold">Data Export</p>
|
||||
<p class="text-xs text-accent/60 uppercase tracking-wider font-bold">Data Export</p>
|
||||
<button
|
||||
class="w-full py-2.5 rounded-lg text-xs bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors"
|
||||
@click="exportData"
|
||||
>
|
||||
{{ isExporting ? 'Exporting...' : 'Export All Data' }}
|
||||
</button>
|
||||
<p class="text-[9px] text-white/20">Exports conversations, favorites, settings, tags, and collections as JSON</p>
|
||||
<p class="text-xs text-white/20">Exports conversations, favorites, settings, tags, and collections as JSON</p>
|
||||
</div>
|
||||
|
||||
<!-- M15.9 Data wipe -->
|
||||
<div class="space-y-2">
|
||||
<p class="text-[10px] text-red-400/60 uppercase tracking-wider font-bold">Danger Zone</p>
|
||||
<p class="text-xs text-red-400/60 uppercase tracking-wider font-bold">Danger Zone</p>
|
||||
<button
|
||||
v-if="!confirmWipe"
|
||||
class="w-full py-2.5 rounded-lg text-xs bg-red-400/10 text-red-400/60 hover:bg-red-400/20 hover:text-red-400/80 transition-colors"
|
||||
@@ -210,21 +210,21 @@
|
||||
Wipe All Data
|
||||
</button>
|
||||
<div v-else class="space-y-2 p-3 rounded-lg bg-red-400/5 border border-red-400/20">
|
||||
<p class="text-[11px] text-red-400/80 font-semibold">Are you sure?</p>
|
||||
<p class="text-[9px] text-red-400/50">This will clear all conversations, favorites, settings, and cached data.</p>
|
||||
<label class="flex items-center gap-2 text-[10px] text-red-400/60 cursor-pointer">
|
||||
<p class="text-xs text-red-400/80 font-semibold">Are you sure?</p>
|
||||
<p class="text-xs text-red-400/50">This will clear all conversations, favorites, settings, and cached data.</p>
|
||||
<label class="flex items-center gap-2 text-xs text-red-400/60 cursor-pointer">
|
||||
<input v-model="wipeApiKeys" type="checkbox" class="rounded" />
|
||||
Also clear API key vault
|
||||
</label>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
class="flex-1 py-2 rounded-lg text-[10px] text-white/40 hover:text-white/70 hover:bg-white/5 transition-colors"
|
||||
class="flex-1 py-2 rounded-lg text-xs text-white/40 hover:text-white/70 hover:bg-white/5 transition-colors"
|
||||
@click="confirmWipe = false"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
class="flex-1 py-2 rounded-lg text-[10px] bg-red-400/20 text-red-400/80 hover:bg-red-400/30 transition-colors"
|
||||
class="flex-1 py-2 rounded-lg text-xs bg-red-400/20 text-red-400/80 hover:bg-red-400/30 transition-colors"
|
||||
@click="wipeData"
|
||||
>
|
||||
Confirm Wipe
|
||||
@@ -238,17 +238,17 @@
|
||||
<template v-else-if="activeTab === 'chat'">
|
||||
<!-- M15.10 Default conversation settings -->
|
||||
<div class="space-y-3">
|
||||
<p class="text-[10px] text-accent/60 uppercase tracking-wider font-bold">Default Conversation Settings</p>
|
||||
<p class="text-[9px] text-white/30">Applied to all new conversations</p>
|
||||
<p class="text-xs text-accent/60 uppercase tracking-wider font-bold">Default Conversation Settings</p>
|
||||
<p class="text-xs text-white/30">Applied to all new conversations</p>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label class="block">
|
||||
<span class="text-[10px] text-white/40">Default Model</span>
|
||||
<span class="text-xs text-white/40">Default Model</span>
|
||||
<input
|
||||
v-model="store.settings.defaultModel"
|
||||
type="text"
|
||||
placeholder="e.g. claude-sonnet-4-6"
|
||||
class="w-full mt-1 px-3 py-2 rounded-lg text-xs bg-white/5 text-white/70 placeholder:text-white/20 outline-none focus:bg-white/10 transition-colors font-mono"
|
||||
class="w-full mt-1 px-3 py-2 rounded-lg text-base bg-white/5 text-white/70 placeholder:text-white/20 outline-none focus:bg-white/10 transition-colors font-mono"
|
||||
/>
|
||||
</label>
|
||||
|
||||
@@ -258,7 +258,7 @@
|
||||
type="checkbox"
|
||||
class="rounded accent-[#F7931A]"
|
||||
/>
|
||||
<span class="text-[11px] text-white/60">Enable web search by default</span>
|
||||
<span class="text-xs text-white/60">Enable web search by default</span>
|
||||
</label>
|
||||
|
||||
<label class="flex items-center gap-3 p-2.5 rounded-lg bg-white/[0.03] border border-white/5 cursor-pointer">
|
||||
@@ -267,7 +267,7 @@
|
||||
type="checkbox"
|
||||
class="rounded accent-[#F7931A]"
|
||||
/>
|
||||
<span class="text-[11px] text-white/60">Show token counts by default</span>
|
||||
<span class="text-xs text-white/60">Show token counts by default</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user