/**
 * 界面偏好，存在 localStorage 里。
 *
 * 目前只有一项：工具栏和导航是只显示图标，还是图标加文字。
 * 默认是「完整」——这个工具是隔一阵子才动一次的，纯图标对偶尔来一次的人不友好；
 * 想要紧凑的人自己去设置里切。
 */
import { ref, watch } from 'vue'

export type Density = 'full' | 'compact'

const KEY = 'patchbay.density'

const stored = localStorage.getItem(KEY)
export const density = ref<Density>(stored === 'compact' ? 'compact' : 'full')

watch(density, (value) => {
  localStorage.setItem(KEY, value)
})

export function toggleDensity(): void {
  density.value = density.value === 'full' ? 'compact' : 'full'
}