towsty/aigen
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add Classic | Studio displayMode preference and Settings cards.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Towsty
2026-09-18 13:07:13 -05:00
co-authored by Cursor
parent b194b3cefa
commit 292d53a20e
5 changed files with 200 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/SettingsForm.vue
+35 -2
View File
@@ -20,6 +20,37 @@
:class="noticeError ? 'border-red-400/30 bg-red-950/40 text-red-100' : 'border-emerald-400/20 bg-emerald-950/30 text-emerald-100'"
>{{ notice }}</p>
<section v-if="activePanel === 'display'" class="glass rounded-3xl p-5 sm:p-6">
<h2 class="font-display text-xl font-bold">Display</h2>
<p class="mt-1 text-sm text-zinc-400">Layout only. Jobs, engines, and library IDs stay the same.</p>
<div class="mt-4 grid gap-3 sm:grid-cols-2">
<button
type="button"
class="rounded-2xl border p-4 text-left outline-none ring-amber-300/40 focus-visible:ring-2"
:class="storedDisplayMode === 'classic'
? 'border-amber-300/60 bg-amber-400/10'
: 'border-white/10 bg-zinc-950/50 hover:border-white/25'"
:aria-pressed="storedDisplayMode === 'classic'"
@click="setDisplayMode('classic')"
>
<span class="block font-display text-lg font-semibold text-zinc-50">Classic</span>
<span class="mt-1 block text-xs text-zinc-400">Packed header, compact selects, tight gaps.</span>
</button>
<button
type="button"
class="rounded-2xl border p-4 text-left outline-none ring-amber-300/40 focus-visible:ring-2"
:class="storedDisplayMode === 'studio'
? 'border-amber-300/60 bg-amber-400/10'
: 'border-white/10 bg-zinc-950/50 hover:border-white/25'"
:aria-pressed="storedDisplayMode === 'studio'"
@click="setDisplayMode('studio')"
>
<span class="block font-display text-lg font-semibold text-zinc-50">Studio</span>
<span class="mt-1 block text-xs text-zinc-400">Task and model rails, locks by slots, eye toggles.</span>
</button>
</div>
</section>
<section v-if="activePanel === 'gpu'" class="glass rounded-3xl p-5 sm:p-6">
<h2 class="font-display text-xl font-bold">GPU & defaults</h2>
<div class="mt-4 space-y-3 rounded-2xl border border-white/10 bg-zinc-950/50 px-4 py-3">
@@ -422,11 +453,12 @@ export interface SettingsFolder {
unlocked: boolean
}
type SettingsPanel = 'gpu' | 'storage' | 'login' | 'folders' | 'loras' | 'keeps' | 'prompts'
type SettingsPanel = 'display' | 'gpu' | 'storage' | 'login' | 'folders' | 'loras' | 'keeps' | 'prompts'
type LoraKindFilter = 'all' | 'image' | 'video'
const route = useRoute()
const router = useRouter()
const { storedDisplayMode, setDisplayMode } = useDisplayMode()
const folders = ref<SettingsFolder[]>([])
const authMode = ref('')
@@ -435,7 +467,7 @@ const notice = ref('')
const noticeError = ref(false)
let noticeTimer: ReturnType<typeof setTimeout> | null = null
const panelIds: SettingsPanel[] = ['gpu', 'storage', 'login', 'folders', 'loras', 'keeps', 'prompts']
const panelIds: SettingsPanel[] = ['display', 'gpu', 'storage', 'login', 'folders', 'loras', 'keeps', 'prompts']
function parsePanel(raw: unknown): SettingsPanel {
const value = String(raw || '')
@@ -456,6 +488,7 @@ const activePanel = computed({
const navItems = computed(() => {
const items: Array<{ id: SettingsPanel; label: string }> = [
{ id: 'display', label: 'Display' },
{ id: 'gpu', label: 'GPU & defaults' },
{ id: 'storage', label: 'Storage' }
]