78 lines
2.3 KiB
Vue
78 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed } from 'vue'
|
|
import { useUser } from '@KTXC/composables/useUser'
|
|
|
|
type FolderViewMode = 'tree' | 'page'
|
|
|
|
const { settings, setSetting } = useUser()
|
|
|
|
const theme = ref('Auto')
|
|
const showPreview = ref(true)
|
|
const compactMode = ref(false)
|
|
|
|
const folderViewMode = computed({
|
|
get: () => {
|
|
const allSettings = settings.value?.all || {}
|
|
const mailSettings = allSettings.mail || {}
|
|
return (mailSettings.folderViewMode as FolderViewMode) || 'tree'
|
|
},
|
|
set: (value: FolderViewMode) => setSetting('mail.folderViewMode', value)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="pa-4">
|
|
<h3 class="text-h6 mb-4">Display Settings</h3>
|
|
<v-list>
|
|
<v-list-item>
|
|
<v-list-item-title>Theme</v-list-item-title>
|
|
<v-list-item-subtitle>Choose your preferred theme</v-list-item-subtitle>
|
|
<template #append>
|
|
<v-select
|
|
v-model="theme"
|
|
:items="['Light', 'Dark', 'Auto']"
|
|
density="compact"
|
|
variant="outlined"
|
|
style="width: 150px"
|
|
/>
|
|
</template>
|
|
</v-list-item>
|
|
|
|
<v-list-item>
|
|
<v-list-item-title>Message preview</v-list-item-title>
|
|
<v-list-item-subtitle>Show message preview in list</v-list-item-subtitle>
|
|
<template #append>
|
|
<v-switch v-model="showPreview" color="primary" hide-details />
|
|
</template>
|
|
</v-list-item>
|
|
|
|
<v-list-item>
|
|
<v-list-item-title>Compact mode</v-list-item-title>
|
|
<v-list-item-subtitle>Use compact message list layout</v-list-item-subtitle>
|
|
<template #append>
|
|
<v-switch v-model="compactMode" color="primary" hide-details />
|
|
</template>
|
|
</v-list-item>
|
|
|
|
<v-list-item>
|
|
<v-list-item-title>Folder navigation style</v-list-item-title>
|
|
<v-list-item-subtitle>Choose how folders are displayed</v-list-item-subtitle>
|
|
<template #append>
|
|
<v-select
|
|
v-model="folderViewMode"
|
|
:items="[
|
|
{ value: 'tree', title: 'Tree' },
|
|
{ value: 'page', title: 'Page' }
|
|
]"
|
|
item-value="value"
|
|
item-title="title"
|
|
density="compact"
|
|
variant="outlined"
|
|
style="width: 150px"
|
|
/>
|
|
</template>
|
|
</v-list-item>
|
|
</v-list>
|
|
</div>
|
|
</template>
|