import { ref, watch } from 'vue'

export type PushServerViewMode = 'grid' | 'list'

const LS_KEY = 'nexus_push_server_view_v1'

function readStoredViewMode(): PushServerViewMode {
  try {
    const raw = localStorage.getItem(LS_KEY)
    return raw === 'list' ? 'list' : 'grid'
  } catch {
    return 'grid'
  }
}

const viewMode = ref<PushServerViewMode>(readStoredViewMode())

watch(viewMode, (mode) => {
  try {
    localStorage.setItem(LS_KEY, mode)
  } catch {
    /* ignore quota / private mode */
  }
})

export function usePushServerViewMode() {
  return { viewMode }
}
