From 11182d0cf230185fe8fa47945bb986fd1cd16fd8 Mon Sep 17 00:00:00 2001
From: joshuaboud <joshuaboud@hotmail.com>
Date: Tue, 17 May 2022 12:56:14 -0300
Subject: [PATCH] fix loading settings from fresh install

---
 navigator-vue/src/components/SettingsMenu.vue | 252 +++++++++---------
 1 file changed, 127 insertions(+), 125 deletions(-)

diff --git a/navigator-vue/src/components/SettingsMenu.vue b/navigator-vue/src/components/SettingsMenu.vue
index 64d8b1b..5b56571 100644
--- a/navigator-vue/src/components/SettingsMenu.vue
+++ b/navigator-vue/src/components/SettingsMenu.vue
@@ -11,132 +11,134 @@
 		@apply="showMenu = false"
 	>
 		<div class="flex flex-col gap-content items-start">
-			<div class="inline-flex flex-col gap-content">
-				<LabelledSwitch v-model="darkMode">Dark mode</LabelledSwitch>
-				<LabelledSwitch v-model="settings.directoryView.showHidden">Show hidden files</LabelledSwitch>
-				<LabelledSwitch
-					v-model="booleanAnalogs.directoryView.view.bool"
-				>List view</LabelledSwitch>
-				<LabelledSwitch v-model="settings.directoryView.separateDirs">Separate directories while sorting</LabelledSwitch>
-			</div>
-			<div v-if="booleanAnalogs.directoryView.view.bool" class="self-stretch">
-				<div>List view columns</div>
-				<div
-					class="flex justify-start text-sm rounded-lg divide-x divide-default border border-default shadow"
-				>
-					<div class="flex flex-col grow items-stretch">
-						<div class="font-semibold px-2">Visible</div>
-						<div
-							class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2"
-							v-if="settings.directoryView.cols.mode"
-							@click="settings.directoryView.cols.mode = !settings.directoryView.cols.mode"
-						>
-							Mode
-							<ChevronRightIcon class="size-icon-sm icon-default" />
+			<template v-if="settings.directoryView">
+				<div class="inline-flex flex-col gap-content">
+					<LabelledSwitch v-model="darkMode">Dark mode</LabelledSwitch>
+					<LabelledSwitch v-model="settings.directoryView.showHidden">Show hidden files</LabelledSwitch>
+					<LabelledSwitch v-model="booleanAnalogs.directoryView.view.bool">List view</LabelledSwitch>
+					<LabelledSwitch
+						v-model="settings.directoryView.separateDirs"
+					>Separate directories while sorting</LabelledSwitch>
+				</div>
+				<div v-if="booleanAnalogs.directoryView.view.bool" class="self-stretch">
+					<div>List view columns</div>
+					<div
+						class="flex justify-start text-sm rounded-lg divide-x divide-default border border-default shadow"
+					>
+						<div class="flex flex-col grow items-stretch">
+							<div class="font-semibold px-2">Visible</div>
+							<div
+								class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2"
+								v-if="settings.directoryView.cols.mode"
+								@click="settings.directoryView.cols.mode = !settings.directoryView.cols.mode"
+							>
+								Mode
+								<ChevronRightIcon class="size-icon-sm icon-default" />
+							</div>
+							<div
+								class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2"
+								v-if="settings.directoryView.cols.owner"
+								@click="settings.directoryView.cols.owner = !settings.directoryView.cols.owner"
+							>
+								Owner
+								<ChevronRightIcon class="size-icon-sm icon-default" />
+							</div>
+							<div
+								class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2"
+								v-if="settings.directoryView.cols.group"
+								@click="settings.directoryView.cols.group = !settings.directoryView.cols.group"
+							>
+								Group
+								<ChevronRightIcon class="size-icon-sm icon-default" />
+							</div>
+							<div
+								class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2"
+								v-if="settings.directoryView.cols.size"
+								@click="settings.directoryView.cols.size = !settings.directoryView.cols.size"
+							>
+								Size
+								<ChevronRightIcon class="size-icon-sm icon-default" />
+							</div>
+							<div
+								class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2"
+								v-if="settings.directoryView.cols.ctime"
+								@click="settings.directoryView.cols.ctime = !settings.directoryView.cols.ctime"
+							>
+								Created
+								<ChevronRightIcon class="size-icon-sm icon-default" />
+							</div>
+							<div
+								class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2"
+								v-if="settings.directoryView.cols.mtime"
+								@click="settings.directoryView.cols.mtime = !settings.directoryView.cols.mtime"
+							>
+								Modified
+								<ChevronRightIcon class="size-icon-sm icon-default" />
+							</div>
+							<div
+								class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2"
+								v-if="settings.directoryView.cols.atime"
+								@click="settings.directoryView.cols.atime = !settings.directoryView.cols.atime"
+							>
+								Accessed
+								<ChevronRightIcon class="size-icon-sm icon-default" />
+							</div>
 						</div>
-						<div
-							class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2"
-							v-if="settings.directoryView.cols.owner"
-							@click="settings.directoryView.cols.owner = !settings.directoryView.cols.owner"
-						>
-							Owner
-							<ChevronRightIcon class="size-icon-sm icon-default" />
-						</div>
-						<div
-							class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2"
-							v-if="settings.directoryView.cols.group"
-							@click="settings.directoryView.cols.group = !settings.directoryView.cols.group"
-						>
-							Group
-							<ChevronRightIcon class="size-icon-sm icon-default" />
-						</div>
-						<div
-							class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2"
-							v-if="settings.directoryView.cols.size"
-							@click="settings.directoryView.cols.size = !settings.directoryView.cols.size"
-						>
-							Size
-							<ChevronRightIcon class="size-icon-sm icon-default" />
-						</div>
-						<div
-							class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2"
-							v-if="settings.directoryView.cols.ctime"
-							@click="settings.directoryView.cols.ctime = !settings.directoryView.cols.ctime"
-						>
-							Created
-							<ChevronRightIcon class="size-icon-sm icon-default" />
-						</div>
-						<div
-							class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2"
-							v-if="settings.directoryView.cols.mtime"
-							@click="settings.directoryView.cols.mtime = !settings.directoryView.cols.mtime"
-						>
-							Modified
-							<ChevronRightIcon class="size-icon-sm icon-default" />
-						</div>
-						<div
-							class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2"
-							v-if="settings.directoryView.cols.atime"
-							@click="settings.directoryView.cols.atime = !settings.directoryView.cols.atime"
-						>
-							Accessed
-							<ChevronRightIcon class="size-icon-sm icon-default" />
-						</div>
-					</div>
-					<div class="flex flex-col grow text-right items-stretch">
-						<div class="font-semibold px-2">Hidden</div>
-						<div
-							class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2 justify-end"
-							v-if="!settings.directoryView.cols.mode"
-							@click="settings.directoryView.cols.mode = !settings.directoryView.cols.mode"
-						>
-							<ChevronLeftIcon class="size-icon-sm icon-default" />Mode
-						</div>
-						<div
-							class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2 justify-end"
-							v-if="!settings.directoryView.cols.owner"
-							@click="settings.directoryView.cols.owner = !settings.directoryView.cols.owner"
-						>
-							<ChevronLeftIcon class="size-icon-sm icon-default" />Owner
-						</div>
-						<div
-							class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2 justify-end"
-							v-if="!settings.directoryView.cols.group"
-							@click="settings.directoryView.cols.group = !settings.directoryView.cols.group"
-						>
-							<ChevronLeftIcon class="size-icon-sm icon-default" />Group
-						</div>
-						<div
-							class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2 justify-end"
-							v-if="!settings.directoryView.cols.size"
-							@click="settings.directoryView.cols.size = !settings.directoryView.cols.size"
-						>
-							<ChevronLeftIcon class="size-icon-sm icon-default" />Size
-						</div>
-						<div
-							class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2 justify-end"
-							v-if="!settings.directoryView.cols.ctime"
-							@click="settings.directoryView.cols.ctime = !settings.directoryView.cols.ctime"
-						>
-							<ChevronLeftIcon class="size-icon-sm icon-default" />Created
-						</div>
-						<div
-							class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2 justify-end"
-							v-if="!settings.directoryView.cols.mtime"
-							@click="settings.directoryView.cols.mtime = !settings.directoryView.cols.mtime"
-						>
-							<ChevronLeftIcon class="size-icon-sm icon-default" />Modified
-						</div>
-						<div
-							class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2 justify-end"
-							v-if="!settings.directoryView.cols.atime"
-							@click="settings.directoryView.cols.atime = !settings.directoryView.cols.atime"
-						>
-							<ChevronLeftIcon class="size-icon-sm icon-default" />Accessed
+						<div class="flex flex-col grow text-right items-stretch">
+							<div class="font-semibold px-2">Hidden</div>
+							<div
+								class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2 justify-end"
+								v-if="!settings.directoryView.cols.mode"
+								@click="settings.directoryView.cols.mode = !settings.directoryView.cols.mode"
+							>
+								<ChevronLeftIcon class="size-icon-sm icon-default" />Mode
+							</div>
+							<div
+								class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2 justify-end"
+								v-if="!settings.directoryView.cols.owner"
+								@click="settings.directoryView.cols.owner = !settings.directoryView.cols.owner"
+							>
+								<ChevronLeftIcon class="size-icon-sm icon-default" />Owner
+							</div>
+							<div
+								class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2 justify-end"
+								v-if="!settings.directoryView.cols.group"
+								@click="settings.directoryView.cols.group = !settings.directoryView.cols.group"
+							>
+								<ChevronLeftIcon class="size-icon-sm icon-default" />Group
+							</div>
+							<div
+								class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2 justify-end"
+								v-if="!settings.directoryView.cols.size"
+								@click="settings.directoryView.cols.size = !settings.directoryView.cols.size"
+							>
+								<ChevronLeftIcon class="size-icon-sm icon-default" />Size
+							</div>
+							<div
+								class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2 justify-end"
+								v-if="!settings.directoryView.cols.ctime"
+								@click="settings.directoryView.cols.ctime = !settings.directoryView.cols.ctime"
+							>
+								<ChevronLeftIcon class="size-icon-sm icon-default" />Created
+							</div>
+							<div
+								class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2 justify-end"
+								v-if="!settings.directoryView.cols.mtime"
+								@click="settings.directoryView.cols.mtime = !settings.directoryView.cols.mtime"
+							>
+								<ChevronLeftIcon class="size-icon-sm icon-default" />Modified
+							</div>
+							<div
+								class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2 justify-end"
+								v-if="!settings.directoryView.cols.atime"
+								@click="settings.directoryView.cols.atime = !settings.directoryView.cols.atime"
+							>
+								<ChevronLeftIcon class="size-icon-sm icon-default" />Accessed
+							</div>
 						</div>
 					</div>
 				</div>
-			</div>
+			</template>
 		</div>
 	</ModalPopup>
 </template>
@@ -191,17 +193,17 @@ export default {
 			...storedSettings,
 			directoryView: {
 				...defaultSettings.directoryView,
-				...storedSettings.directoryView,
+				...(storedSettings.directoryView ?? {}),
 				cols: {
 					...defaultSettings.directoryView.cols,
-					...storedSettings.directoryView.cols,
+					...(storedSettings.directoryView?.cols ?? {}),
 				}
 			},
 		});
 
 		watch(settings, () => {
 			localStorage.setItem(settingsStorageKey, JSON.stringify(settings));
-			booleanAnalogs.directoryView.view.bool = settings.directoryView.view === booleanAnalogs.directoryView.view.trueValue;
+			booleanAnalogs.directoryView.view.bool = settings.directoryView?.view === booleanAnalogs.directoryView.view.trueValue;
 		}, { immediate: true });
 
 		watch(booleanAnalogs, () => {