Convert timezone and language settings to SettingItems

dashboard/src/views/AppstoreView.vue

@@ -1,7 +1,7 @@
 <script setup>
 
 import { ref, computed, useTemplateRef, onMounted } from 'vue';
-import { Button, ButtonGroup, TextInput } from 'pankow';
+import { Button, TextInput } from 'pankow';
 import AppstoreModel from '../models/AppstoreModel.js';
 import AppInstallDialog from '../components/AppInstallDialog.vue';
 import ApplinkDialog from '../components/ApplinkDialog.vue';
@@ -85,10 +85,10 @@ onMounted(async () => {
     <div class="filter-bar">
       <div></div>
       <TextInput ref="searchInput" @keydown.esc="search = ''" v-model="search" :placeholder="$t('appstore.searchPlaceholder')" style="max-width: 100%; width: 500px;"/>
-      <ButtonGroup>
-        <Button outline icon="fas fa-exchange-alt" @click="onInstall(proxyApp)">{{ $t('apps.addAppproxyAction') }}</Button>
-        <Button outline icon="fas fa-link" @click="onApplinkDialogOpen()">{{ $t('apps.addApplinkAction') }}</Button>
-      </ButtonGroup>
+      <div>
+        <Button secondary plain icon="fas fa-exchange-alt" @click="onInstall(proxyApp)">{{ $t('apps.addAppproxyAction') }}</Button>
+        <Button secondary plain icon="fas fa-link" @click="onApplinkDialogOpen()">{{ $t('apps.addApplinkAction') }}</Button>
+      </div>
     </div>
 
     <!-- TODO mark unstable apps -->

dashboard/src/views/EmailView.vue

@@ -415,7 +415,7 @@ onMounted(async () => {
       </TableView>
     </Section>
 
-    <Section :title="$t('emails.settings.title')">
+    <Section :title="$t('emails.settings.title')" :padding="false">
       <SettingsItem>
         <FormGroup style="flex-grow: 1;">
           <label>{{ $t('emails.settings.location') }}</label>

dashboard/src/views/SettingsView.vue

@@ -5,8 +5,9 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, watch } from 'vue';
-import { Dropdown } from 'pankow';
+import { SingleSelect } from 'pankow';
 import moment from 'moment-timezone';
+import SettingsItem from '../components/SettingsItem.vue';
 import Section from '../components/Section.vue';
 import CloudronAccount from '../components/CloudronAccount.vue';
 import SystemUpdate from '../components/SystemUpdate.vue';
@@ -20,12 +21,6 @@ const allTimezones = moment.tz.names().map(t => { return { id: t }; });
 const timeZone = ref('');
 const currentTimeZone = ref('');
 
-function prettyTimeZone(timeZone) {
-  const tz = window.timezones.find(function (t) { return t.id === timeZone; });
-  if (!tz) return '';
-  return tz.display;
-}
-
 watch(timeZone, async (newTimeZone, oldTimeZone) => {
   if (!oldTimeZone) return;
 
@@ -87,21 +82,29 @@ onMounted(async () => {
 
 <template>
   <div class="content">
+    <Section :title="$t('settings.title')" :padding="false">
+      <SettingsItem>
+        <FormGroup>
+          <label>{{ $t('settings.timezone.title') }}</label>
+          <div v-html="$t('settings.timezone.description', { timeZone })"></div>
+        </FormGroup>
+        <div style="display: flex; gap: 6px; align-items: center;">
+          <SingleSelect style="min-width: 160px" v-model="timeZone" :options="allTimezones" option-key="id" option-label="id" />
+        </div>
+      </SettingsItem>
 
-    <h1>{{ $t('settings.title') }}</h1>
+      <SettingsItem>
+        <FormGroup>
+          <label>{{ $t('settings.language.title') }}</label>
+          <div>{{ $t('settings.language.description') }}</div>
+        </FormGroup>
+        <div style="display: flex; gap: 6px; align-items: center;">
+          <SingleSelect v-model="language" :options="allLanguages" option-key="id" option-label="display" />
+        </div>
+      </SettingsItem>
+    </Section>
 
     <CloudronAccount />
-
-    <Section :title="$t('settings.timezone.title')">
-      <p v-html="$t('settings.timezone.description', { timeZone })"></p>
-      <Dropdown v-model="timeZone" :options="allTimezones" option-key="id" option-label="id" />
-    </Section>
-
-    <Section :title="$t('settings.language.title')">
-      <p>{{ $t('settings.language.description') }}</p>
-      <Dropdown v-model="language" :options="allLanguages" option-key="id" option-label="display" />
-    </Section>
-
     <SystemUpdate />
     <PrivateRegistry />
   </div>