before_redesign

src/pages/account/SettingsPage.vue

@@ -1,9 +1,8 @@
 <template>
-    <pn-page-template>
+  <pn-page-template>
     <template #title>
       {{ $t('settings__title') }}
     </template>
-
     <q-list>
       <q-item-label header>{{ $t('settings__software_title') }}</q-item-label>
 
@@ -37,6 +36,29 @@
         />
       </pn-item-btm-dialog>
 
+      <pn-item-btm-dialog
+        title="settings__display_mode"
+        icon="mdi-overscan"
+        iconColor="primary"
+        >
+        <template #value>
+          {{ $t(displayModeLabel) }}
+        </template>
+        <pn-list-selector
+          v-model="displayMode"
+          :options="displayModeOptions"
+        />
+        <q-banner
+          v-if="$isAndroid"
+          class="bg-negative text-white q-mt-lg"
+          >
+          <template #avatar>
+            <q-icon name="mdi-alert-circle-outline"/>
+          </template>
+          {{ $t('settings__display_mode_android_warning') }}
+        </q-banner>
+      </pn-item-btm-dialog>
+
       <template v-if="authStore.isAuth">
         <q-item-label
           class="q-mt-md"
@@ -115,6 +137,19 @@
     await settingsStore.updateSettings({ fontSize: newValue })
   })
 
+  const displayMode = ref<'full' | 'window'>('window')
+  const displayModeOptions = [
+    { value: 'full', label: 'settings__display_mode_full' },
+    { value: 'window', label: 'settings__display_mode_window' }
+  ]
+  const displayModeLabel = computed(() =>
+    displayModeOptions.find(el => el.value === displayMode.value)?.label ?? ''
+  )
+  
+  watch(displayMode, async (newValue) => {
+    await settingsStore.updateSettings({ displayMode: newValue })
+  })
+
   const timeZoneBot = ref<{ tz: string, offset: number,offsetString: string }>()
 
   watch(timeZoneBot, async (newValue) => {
@@ -123,9 +158,10 @@
   
   onMounted(() => {
     locale.value = settingsStore.settings.locale
-    localeBot.value = settingsStore.settings.localeBot
     fontSize.value = settingsStore.settings.fontSize
+    displayMode.value = settingsStore.settings.displayMode
     timeZoneBot.value = settingsStore.settings.timeZoneBot
+    localeBot.value = settingsStore.settings.localeBot
   })
 
 </script>