@kennofizet/apphub-frontend 0.1.0

package/src/modules/desktop/components/AppHubSettingsApp.vue

@@ -0,0 +1,319 @@
+<template>
+  <div class="apphub-settings-app">
+    <header class="apphub-settings-app__header">
+      <h2 class="apphub-settings-app__title">{{ labels.title }}</h2>
+      <p class="apphub-settings-app__subtitle">{{ labels.subtitle }}</p>
+    </header>
+
+    <div class="apphub-settings-app__layout">
+      <nav class="apphub-settings-app__nav" :aria-label="labels.nav_label">
+        <button
+          v-for="item in menuItems"
+          :key="item.id"
+          type="button"
+          class="apphub-settings-app__nav-item"
+          :class="{ 'apphub-settings-app__nav-item--active': section === item.id }"
+          @click="section = item.id"
+        >
+          <span class="apphub-settings-app__nav-icon" aria-hidden="true">{{ item.icon }}</span>
+          <span class="apphub-settings-app__nav-label">{{ item.label }}</span>
+        </button>
+      </nav>
+
+      <div class="apphub-settings-app__body">
+        <AppHubSettingsScreenPanel v-if="section === 'screen'" />
+        <AppHubSettingsKeyboardPanel v-else-if="section === 'keyboard'" />
+        <AppHubSettingsStartMenuPanel v-else-if="section === 'start'" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, inject, ref } from 'vue'
+import { t } from '../../../i18n/index.js'
+import { resolveLang } from '../../../i18n/resolveLang.js'
+import AppHubSettingsKeyboardPanel from './settings/AppHubSettingsKeyboardPanel.vue'
+import AppHubSettingsScreenPanel from './settings/AppHubSettingsScreenPanel.vue'
+import AppHubSettingsStartMenuPanel from './settings/AppHubSettingsStartMenuPanel.vue'
+
+const section = ref('screen')
+const lang = computed(() => resolveLang(inject('apphubOptions', {})?.language, 'vi'))
+
+const labels = computed(() => ({
+  title: t('hub_settings_app_title', lang.value),
+  subtitle: t('hub_settings_app_subtitle', lang.value),
+  nav_label: t('hub_settings_app_nav', lang.value),
+  menu_screen: t('hub_settings_menu_screen', lang.value),
+  menu_keyboard: t('hub_settings_menu_keyboard', lang.value),
+  menu_pin_favorite: t('hub_settings_menu_pin_favorite', lang.value),
+}))
+
+const menuItems = computed(() => [
+  { id: 'screen', label: labels.value.menu_screen, icon: '🖥' },
+  { id: 'start', label: labels.value.menu_pin_favorite, icon: '📌' },
+  { id: 'keyboard', label: labels.value.menu_keyboard, icon: '⌨' },
+])
+</script>
+
+<style scoped>
+.apphub-settings-app {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  color: var(--ah-text-secondary, #cbd5e1);
+  background: var(--ah-surface, #1e293b);
+}
+
+.apphub-settings-app__header {
+  flex: 0 0 auto;
+  padding: 20px 24px 12px;
+  border-bottom: 1px solid var(--ah-border-subtle, rgba(255, 255, 255, 0.08));
+}
+
+.apphub-settings-app__title {
+  margin: 0;
+  font-size: 1.35rem;
+  color: var(--ah-text, #f0f4fc);
+}
+
+.apphub-settings-app__subtitle {
+  margin: 6px 0 0;
+  font-size: 0.88rem;
+  color: var(--ah-text-muted, #94a3b8);
+}
+
+.apphub-settings-app__layout {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+
+.apphub-settings-app__nav {
+  flex: 0 0 200px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px;
+  border-right: 1px solid var(--ah-border-subtle, rgba(255, 255, 255, 0.08));
+  overflow-y: auto;
+}
+
+.apphub-settings-app__nav-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--ah-text-muted, #94a3b8);
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.apphub-settings-app__nav-item:hover {
+  background: var(--ah-hover, rgba(255, 255, 255, 0.08));
+  color: var(--ah-text, #f0f4fc);
+}
+
+.apphub-settings-app__nav-item--active {
+  background: var(--ah-hover-strong, rgba(255, 255, 255, 0.12));
+  border-color: var(--ah-border, rgba(255, 255, 255, 0.1));
+  color: var(--ah-text, #f0f4fc);
+}
+
+.apphub-settings-app__nav-icon {
+  flex-shrink: 0;
+  font-size: 1.1rem;
+}
+
+.apphub-settings-app__body {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  padding: 16px 24px 24px;
+}
+
+@media (max-width: 520px) {
+  .apphub-settings-app__layout {
+    flex-direction: column;
+  }
+
+  .apphub-settings-app__nav {
+    flex: 0 0 auto;
+    flex-direction: row;
+    flex-wrap: wrap;
+    border-right: none;
+    border-bottom: 1px solid var(--ah-border-subtle, rgba(255, 255, 255, 0.08));
+  }
+
+  .apphub-settings-app__nav-item {
+    flex: 1 1 auto;
+    min-width: 140px;
+  }
+}
+</style>
+
+<style>
+.apphub-settings-panel__title {
+  margin: 0 0 8px;
+  font-size: 1rem;
+  color: var(--ah-text, #f0f4fc);
+}
+
+.apphub-settings-panel__hint {
+  margin: 0 0 16px;
+  font-size: 0.85rem;
+  color: var(--ah-text-muted, #94a3b8);
+  line-height: 1.5;
+}
+
+.apphub-settings-panel .apphub-desktop-settings {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.apphub-settings-panel .apphub-desktop-settings__row {
+  padding: 10px 12px;
+  border-radius: 6px;
+}
+
+.apphub-settings-panel__row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  margin-bottom: 12px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.apphub-settings-panel__row:hover {
+  background: var(--ah-hover, rgba(255, 255, 255, 0.06));
+}
+
+.apphub-settings-panel__field {
+  margin-bottom: 20px;
+}
+
+.apphub-settings-panel__label {
+  display: block;
+  margin-bottom: 6px;
+  font-size: 0.85rem;
+  color: var(--ah-text-muted, #94a3b8);
+}
+
+.apphub-settings-panel__select {
+  width: 100%;
+  max-width: 320px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  border: 1px solid var(--ah-border, #475569);
+  background: var(--ah-surface-raised, #0f172a);
+  color: var(--ah-text, #e2e8f0);
+}
+
+.apphub-settings-panel__table {
+  width: 100%;
+  max-width: 520px;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+  margin-bottom: 16px;
+}
+
+.apphub-settings-panel__table th,
+.apphub-settings-panel__table td {
+  padding: 10px 12px;
+  text-align: left;
+  border-bottom: 1px solid var(--ah-border-subtle, rgba(255, 255, 255, 0.08));
+}
+
+.apphub-settings-panel__table th {
+  color: var(--ah-text-muted, #94a3b8);
+  font-weight: 600;
+}
+
+.apphub-settings-panel__kbd {
+  display: inline-block;
+  padding: 3px 8px;
+  border-radius: 4px;
+  background: var(--ah-hover, rgba(0, 0, 0, 0.25));
+  border: 1px solid var(--ah-border-subtle, rgba(255, 255, 255, 0.1));
+  font-family: inherit;
+  font-size: 0.8rem;
+}
+
+.apphub-settings-panel__note {
+  margin: 8px 0 0;
+  font-size: 0.8rem;
+  color: var(--ah-text-muted, #94a3b8);
+  line-height: 1.5;
+}
+
+.apphub-settings-panel__callout {
+  margin: 0 0 16px;
+  padding: 10px 12px;
+  border-radius: 6px;
+  border: 1px solid rgba(251, 191, 36, 0.35);
+  background: rgba(251, 191, 36, 0.1);
+  font-size: 0.85rem;
+  color: var(--ah-text-secondary, #cbd5e1);
+  line-height: 1.5;
+}
+
+.apphub-settings-panel__msg {
+  color: var(--ah-text-muted, #94a3b8);
+  font-size: 0.875rem;
+}
+
+.apphub-settings-panel__pin-list {
+  list-style: none;
+  margin: 0 0 16px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: 520px;
+}
+
+.apphub-settings-panel__pin-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: var(--ah-hover, rgba(255, 255, 255, 0.04));
+  border: 1px solid var(--ah-border-subtle, rgba(255, 255, 255, 0.08));
+}
+
+.apphub-settings-panel__pin-icon {
+  flex-shrink: 0;
+  font-size: 1.25rem;
+}
+
+.apphub-settings-panel__pin-name {
+  flex: 1;
+  min-width: 0;
+  font-size: 0.9rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.apphub-settings-panel__pin-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.8rem;
+  color: var(--ah-text-muted, #94a3b8);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+</style>

package/src/modules/desktop/components/AppHubStartButton.vue

@@ -0,0 +1,24 @@
+<template>
+  <button
+    type="button"
+    class="apphub-start-btn"
+    :class="{ 'apphub-start-btn--active': active }"
+    :title="title"
+    :aria-label="title"
+    :aria-expanded="active"
+    @click.stop="emit('toggle')"
+  >
+    <svg class="apphub-start-btn__logo" viewBox="0 0 24 24" aria-hidden="true">
+      <path fill="currentColor" d="M3 3h8.5v8.5H3V3zm9.5 0H21v8.5h-8.5V3zM3 12.5h8.5V21H3v-8.5zm9.5 0H21V21h-8.5v-8.5z" />
+    </svg>
+  </button>
+</template>
+
+<script setup>
+defineProps({
+  active: { type: Boolean, default: false },
+  title: { type: String, default: 'Start' },
+})
+
+const emit = defineEmits(['toggle'])
+</script>

package/src/modules/desktop/components/AppHubStartMenu.vue

@@ -0,0 +1,182 @@
+<template>
+  <div v-if="open" class="apphub-start" @click.stop="emit('close')">
+    <div class="apphub-start__panel" @click.stop>
+      <aside class="apphub-start__left">
+        <div class="apphub-start__search-wrap">
+          <svg class="apphub-start__search-icon" viewBox="0 0 24 24" aria-hidden="true">
+            <path
+              fill="currentColor"
+              d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+            />
+          </svg>
+          <input
+            v-model="query"
+            type="search"
+            class="apphub-start__search"
+            :placeholder="searchPlaceholder"
+            @keydown.esc="emit('close')"
+          />
+        </div>
+
+        <div class="apphub-start__lists">
+          <template v-if="isSearching">
+            <p class="apphub-start__section-label">{{ searchResultsLabel }}</p>
+            <ul class="apphub-start__list">
+              <li v-for="app in searchResults" :key="app.id">
+                <button type="button" class="apphub-start__list-item" @click="onOpen(app)">
+                  <span class="apphub-start__list-icon-wrap">
+                    <span class="apphub-start__list-icon">{{ app.icon }}</span>
+                  </span>
+                  <span class="apphub-start__list-name">{{ app.name }}</span>
+                </button>
+              </li>
+              <li v-if="!searchResults.length" class="apphub-start__empty">{{ emptyLabel }}</li>
+            </ul>
+          </template>
+
+          <template v-else>
+            <p class="apphub-start__section-label">{{ favoritesLabel }}</p>
+            <ul class="apphub-start__list">
+              <li v-for="app in favoriteApps" :key="`fav-${app.id}`">
+                <button type="button" class="apphub-start__list-item" @click="onOpen(app)">
+                  <span class="apphub-start__list-icon-wrap">
+                    <span class="apphub-start__list-icon">{{ app.icon }}</span>
+                  </span>
+                  <span class="apphub-start__list-name">{{ app.name }}</span>
+                </button>
+              </li>
+              <li v-if="!favoriteApps.length" class="apphub-start__empty">{{ emptyLabel }}</li>
+            </ul>
+
+            <p class="apphub-start__section-label apphub-start__section-label--spaced">{{ recentLabel }}</p>
+            <ul class="apphub-start__list">
+              <li v-for="app in recentApps" :key="`recent-${app.id}`">
+                <button type="button" class="apphub-start__list-item" @click="onOpen(app)">
+                  <span class="apphub-start__list-icon-wrap">
+                    <span class="apphub-start__list-icon">{{ app.icon }}</span>
+                  </span>
+                  <span class="apphub-start__list-name">{{ app.name }}</span>
+                </button>
+              </li>
+              <li v-if="!recentApps.length" class="apphub-start__empty">{{ emptyLabel }}</li>
+            </ul>
+          </template>
+        </div>
+      </aside>
+
+      <section class="apphub-start__right">
+        <button
+          v-if="featuredApp"
+          type="button"
+          class="apphub-start__hero"
+          @click="onOpen(featuredApp)"
+        >
+          <span class="apphub-start__hero-icon">{{ featuredApp.icon }}</span>
+          <span class="apphub-start__hero-body">
+            <strong class="apphub-start__hero-title">{{ featuredApp.name }}</strong>
+            <span class="apphub-start__hero-hint">{{ featuredApp.hint }}</span>
+          </span>
+          <span class="apphub-start__hero-arrow" aria-hidden="true">›</span>
+        </button>
+
+        <button
+          v-if="guideApp"
+          type="button"
+          class="apphub-start__hero apphub-start__hero--guide"
+          @click="onOpen(guideApp)"
+        >
+          <span class="apphub-start__hero-icon">{{ guideApp.icon }}</span>
+          <span class="apphub-start__hero-body">
+            <strong class="apphub-start__hero-title">{{ guideApp.name }}</strong>
+            <span class="apphub-start__hero-hint">{{ guideApp.hint }}</span>
+          </span>
+          <span class="apphub-start__hero-arrow" aria-hidden="true">›</span>
+        </button>
+
+        <button
+          v-if="settingsApp"
+          type="button"
+          class="apphub-start__hero apphub-start__hero--settings"
+          @click="onOpen(settingsApp)"
+        >
+          <span class="apphub-start__hero-icon">{{ settingsApp.icon }}</span>
+          <span class="apphub-start__hero-body">
+            <strong class="apphub-start__hero-title">{{ settingsApp.name }}</strong>
+            <span class="apphub-start__hero-hint">{{ settingsApp.hint }}</span>
+          </span>
+          <span class="apphub-start__hero-arrow" aria-hidden="true">›</span>
+        </button>
+
+        <p v-if="suggestedApps.length" class="apphub-start__section-label">{{ suggestedLabel }}</p>
+        <div v-if="suggestedApps.length" class="apphub-start__grid">
+          <button
+            v-for="app in suggestedApps"
+            :key="app.id"
+            type="button"
+            class="apphub-start__app-tile"
+            @click="onOpen(app)"
+          >
+            <span class="apphub-start__app-tile-icon">{{ app.icon }}</span>
+            <span class="apphub-start__app-tile-name">{{ app.name }}</span>
+          </button>
+        </div>
+        <p v-else-if="!featuredApp && !guideApp && !settingsApp" class="apphub-start__empty apphub-start__empty--right">
+          {{ emptyLabel }}
+        </p>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps({
+  open: { type: Boolean, default: false },
+  favoriteApps: { type: Array, default: () => [] },
+  recentApps: { type: Array, default: () => [] },
+  suggestedApps: { type: Array, default: () => [] },
+  catalogApps: { type: Array, default: () => [] },
+  visibleInStartIds: { type: Array, default: () => [] },
+  searchPlaceholder: { type: String, default: '' },
+  favoritesLabel: { type: String, default: '' },
+  recentLabel: { type: String, default: '' },
+  searchResultsLabel: { type: String, default: '' },
+  suggestedLabel: { type: String, default: '' },
+  emptyLabel: { type: String, default: '' },
+})
+
+const emit = defineEmits(['close', 'open-app'])
+
+const query = ref('')
+
+watch(() => props.open, (isOpen) => {
+  if (!isOpen) query.value = ''
+})
+
+const visibleSet = computed(() => new Set(props.visibleInStartIds ?? []))
+
+const catalog = computed(() => props.catalogApps ?? [])
+
+const isSearching = computed(() => query.value.trim().length > 0)
+
+const searchResults = computed(() => {
+  const q = query.value.trim().toLowerCase()
+  if (!q) return []
+  return catalog.value.filter((app) => app.name?.toLowerCase().includes(q))
+})
+
+function findVisibleBuiltin(module) {
+  const app = catalog.value.find((a) => a.builtin && a.module === module)
+  return app && visibleSet.value.has(app.id) ? app : null
+}
+
+const featuredApp = computed(() => findVisibleBuiltin('app-store'))
+const guideApp = computed(() => findVisibleBuiltin('guide'))
+const settingsApp = computed(() => findVisibleBuiltin('settings'))
+
+function onOpen(app) {
+  emit('open-app', app)
+  emit('close')
+}
+</script>

package/src/modules/desktop/components/AppHubTaskbarPins.vue

@@ -0,0 +1,23 @@
+<template>
+  <div v-if="apps.length" class="apphub-taskbar-pins" role="toolbar" :aria-label="ariaLabel">
+    <button
+      v-for="app in apps"
+      :key="app.id"
+      type="button"
+      class="apphub-taskbar-pins__btn"
+      :title="app.name"
+      @click="emit('open-app', app)"
+    >
+      <span class="apphub-taskbar-pins__icon" aria-hidden="true">{{ app.icon }}</span>
+    </button>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  apps: { type: Array, default: () => [] },
+  ariaLabel: { type: String, default: '' },
+})
+
+const emit = defineEmits(['open-app'])
+</script>

package/src/modules/desktop/components/settings/AppHubSettingsKeyboardPanel.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="apphub-settings-panel">
+    <h3 class="apphub-settings-panel__title">{{ labels.title }}</h3>
+    <p class="apphub-settings-panel__hint">{{ labels.hint }}</p>
+
+    <p class="apphub-settings-panel__callout">{{ labels.browser_note }}</p>
+
+    <label class="apphub-settings-panel__row">
+      <input
+        type="checkbox"
+        :checked="hub.keyboardSettings.enabled"
+        @change="onEnabledChange"
+      />
+      <span>{{ labels.enabled }}</span>
+    </label>
+
+    <p class="apphub-settings-panel__note">{{ labels.modifier_note }}</p>
+
+    <table class="apphub-settings-panel__table">
+      <thead>
+        <tr>
+          <th>{{ labels.col_action }}</th>
+          <th>{{ labels.col_keys }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="row in shortcutRows" :key="row.id">
+          <td>{{ row.label }}</td>
+          <td><kbd class="apphub-settings-panel__kbd">{{ row.keys }}</kbd></td>
+        </tr>
+      </tbody>
+    </table>
+
+    <p class="apphub-settings-panel__note">{{ labels.titlebar_note }}</p>
+  </div>
+</template>
+
+<script setup>
+import { computed, inject } from 'vue'
+import { t } from '../../../../i18n/index.js'
+import { resolveLang } from '../../../../i18n/resolveLang.js'
+import { useDesktopHubSettings } from '../../composables/useDesktopHubSettings.js'
+
+const hub = useDesktopHubSettings()
+const lang = computed(() => resolveLang(inject('apphubOptions', {})?.language, 'vi'))
+
+const labels = computed(() => ({
+  title: t('hub_settings_keyboard_title', lang.value),
+  hint: t('hub_settings_keyboard_hint', lang.value),
+  browser_note: t('hub_settings_keyboard_browser_note', lang.value),
+  enabled: t('hub_settings_keyboard_enabled', lang.value),
+  modifier_note: t('hub_settings_keyboard_modifier_note', lang.value),
+  col_action: t('hub_settings_keyboard_col_action', lang.value),
+  col_keys: t('hub_settings_keyboard_col_keys', lang.value),
+  titlebar_note: t('hub_settings_keyboard_titlebar_note', lang.value),
+  snap_left: t('hub_settings_keyboard_snap_left', lang.value),
+  snap_right: t('hub_settings_keyboard_snap_right', lang.value),
+  snap_up: t('hub_settings_keyboard_snap_up', lang.value),
+  snap_down: t('hub_settings_keyboard_snap_down', lang.value),
+  modifier_ctrl_alt: t('hub_settings_keyboard_modifier_ctrl_alt', lang.value),
+}))
+
+const shortcutRows = computed(() => {
+  const mod = labels.value.modifier_ctrl_alt
+  const l = lang.value
+  return [
+    { id: 'left', label: labels.value.snap_left, keys: t('hub_settings_keyboard_key_left', l, { mod }) },
+    { id: 'right', label: labels.value.snap_right, keys: t('hub_settings_keyboard_key_right', l, { mod }) },
+    { id: 'up', label: labels.value.snap_up, keys: t('hub_settings_keyboard_key_up', l, { mod }) },
+    { id: 'down', label: labels.value.snap_down, keys: t('hub_settings_keyboard_key_down', l, { mod }) },
+  ]
+})
+
+function persist() {
+  hub.saveKeyboardSettings?.()
+}
+
+function onEnabledChange(event) {
+  hub.keyboardSettings.enabled = event.target.checked
+  persist()
+}
+</script>

package/src/modules/desktop/components/settings/AppHubSettingsScreenPanel.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="apphub-settings-panel">
+    <h3 class="apphub-settings-panel__title">{{ labels.title }}</h3>
+    <p class="apphub-settings-panel__hint">{{ labels.hint }}</p>
+
+    <AppHubDesktopSettings
+      :snap-to-grid="hub.desktopSettings.snapToGrid"
+      :snap-label="labels.snap_grid"
+      :theme="activeTheme"
+      :theme-label="labels.light_mode"
+      :show-theme-toggle="showThemeToggle"
+      @update:snap-to-grid="hub.setSnapToGrid"
+      @update:theme="hub.setTheme"
+    />
+
+    <AppHubDesktopDevOriginBar v-if="devOriginVisible" placement="settings" class="apphub-settings-panel__dev-origin" />
+  </div>
+</template>
+
+<script setup>
+import { computed, inject, unref } from 'vue'
+import { t } from '../../../../i18n/index.js'
+import { resolveLang } from '../../../../i18n/resolveLang.js'
+import { useDesktopHubSettings } from '../../composables/useDesktopHubSettings.js'
+import { useDevOriginToggle } from '../../../../composables/useDevOriginToggle.js'
+import AppHubDesktopSettings from '../AppHubDesktopSettings.vue'
+import AppHubDesktopDevOriginBar from '../AppHubDesktopDevOriginBar.vue'
+
+const hub = useDesktopHubSettings()
+const { visible: devOriginVisible } = useDevOriginToggle()
+const lang = computed(() => resolveLang(inject('apphubOptions', {})?.language, 'vi'))
+const activeTheme = computed(() => unref(hub.activeTheme) ?? 'dark')
+const showThemeToggle = computed(() => unref(hub.showThemeToggle) !== false)
+
+const labels = computed(() => ({
+  title: t('hub_settings_screen_title', lang.value),
+  hint: t('hub_settings_screen_hint', lang.value),
+  snap_grid: t('settings_snap_grid', lang.value),
+  light_mode: t('settings_light_mode', lang.value),
+}))
+</script>