From a82f7d6a05c7056a88f237c6d76268c5b9df0e13 Mon Sep 17 00:00:00 2001
From: huff-laptop <benni.huff@gmail.com>
Date: Tue, 5 May 2026 11:56:10 +0200
Subject: [PATCH] mobile styling improvements implemented

---
 app/components/Nav/HorizontalNav.vue      | 60 +++++++++++++++--------
 app/components/Settings/SettingsSheet.vue | 20 ++++++--
 app/components/Utils/Sheet.vue            | 11 ++++-
 app/composables/useIsPwa.ts               | 17 +++++++
 app/composables/useSettings.ts            |  2 +
 i18n/locales/de.json                      |  5 +-
 i18n/locales/en.json                      |  5 +-
 7 files changed, 92 insertions(+), 28 deletions(-)
 create mode 100644 app/composables/useIsPwa.ts

diff --git a/app/components/Nav/HorizontalNav.vue b/app/components/Nav/HorizontalNav.vue
index 2c8f48d..1b1866d 100644
--- a/app/components/Nav/HorizontalNav.vue
+++ b/app/components/Nav/HorizontalNav.vue
@@ -4,34 +4,52 @@
 	const isSettingsSheetOpen = defineModel<boolean>("isSettingsSheetOpen");
 	const isFilterSheetOpen = defineModel<boolean>("isFilterSheetOpen");
 	const isNewSheetOpen = defineModel<boolean>("isNewSheetOpen");
+
+	const { standalone } = useIsPwa();
+	const { settings } = useSettings();
 </script>
 
 <template>
-	<div class="bg-surface fixed bottom-0 flex h-12 w-dvw justify-between">
-		<div class="relativ -z-10 flex">
-			<button
-				type="button"
-				data-testid="settings-button"
-				class="bg-secondary hover:bg-secondary-hover relative m-1 flex aspect-square h-10 cursor-pointer items-center justify-center rounded transition-colors"
-				@click="() => isSettingsSheetOpen = true"
-			>
-				<Icon name="material-symbols:settings-outline-rounded" size="24" />
-			</button>
+	<div class="flex justify-center">
+		<div
+			class="bg-surface fixed bottom-0 flex h-12 w-dvw justify-between"
+			:class="{
+        'bottom-6 max-w-[90vw] h-18 px-2 flex items-center rounded-4xl border border-white/10 shadow-2xl': settings.design === 'modern',
+        'bottom-12 bg-transparent': standalone && !(settings.design === 'modern')
+      }"
+		>
+			<div class="relativ -z-10 flex">
+				<button
+					type="button"
+					data-testid="settings-button"
+					class="bg-secondary hover:bg-secondary-hover relative m-1 flex aspect-square h-10 cursor-pointer items-center justify-center rounded transition-colors"
+					:class="{'rounded-3xl': settings.design === 'modern', 'h-12': settings.design === 'modern'}"
+					@click="() => isSettingsSheetOpen = true"
+				>
+					<Icon name="material-symbols:settings-outline-rounded" size="24" />
+				</button>
+				<button
+					type="button"
+					class="bg-secondary hover:bg-secondary-hover relative m-1 flex aspect-square h-10 cursor-pointer items-center justify-center rounded transition-colors"
+					:class="{'rounded-3xl': settings.design === 'modern', 'h-12': settings.design === 'modern'}"
+					@click="() => isFilterSheetOpen = true"
+				>
+					<Icon
+						v-if="isFiltering"
+						name="material-symbols:filter-alt"
+						size="24"
+					/>
+					<Icon v-else name="material-symbols:filter-alt-outline" size="24" />
+				</button>
+			</div>
 			<button
 				type="button"
-				class="bg-secondary hover:bg-secondary-hover relative m-1 flex aspect-square h-10 cursor-pointer items-center justify-center rounded transition-colors"
-				@click="() => isFilterSheetOpen = true"
+				class="bg-primary hover:bg-primary-hover relative m-1 flex aspect-square h-10 cursor-pointer items-center justify-center rounded transition-colors"
+				:class="{'rounded-3xl': settings.design === 'modern', 'h-12': settings.design === 'modern'}"
+				@click="() => isNewSheetOpen = true"
 			>
-				<Icon v-if="isFiltering" name="material-symbols:filter-alt" size="24" />
-				<Icon v-else name="material-symbols:filter-alt-outline" size="24" />
+				<Icon name="material-symbols:add-2-rounded" size="24" />
 			</button>
 		</div>
-		<button
-			type="button"
-			class="bg-primary hover:bg-primary-hover relative m-1 flex aspect-square h-10 cursor-pointer items-center justify-center rounded transition-colors"
-			@click="() => isNewSheetOpen = true"
-		>
-			<Icon name="material-symbols:add-2-rounded" size="24" />
-		</button>
 	</div>
 </template>
diff --git a/app/components/Settings/SettingsSheet.vue b/app/components/Settings/SettingsSheet.vue
index 6639d20..ceefbd6 100644
--- a/app/components/Settings/SettingsSheet.vue
+++ b/app/components/Settings/SettingsSheet.vue
@@ -52,7 +52,7 @@
 
 <template>
 	<Sheet :is-open="isOpen" title="Settings Sheet" @close="close">
-		<div data-testid="settings-sheet" class="flex flex-col gap-1">
+		<div data-testid="settings-sheet" class="flex flex-col gap-4">
 			<div class="flex gap-1">
 				<div>
 					<h2 class="text-muted-text text-lg">{{ t("login") }}</h2>
@@ -66,15 +66,17 @@
 						class="bg-surface border-secondary h-8 cursor-pointer rounded border px-2 text-white"
 						:value="locale"
 						@change="
-              onLanguageChange(($event.target as HTMLSelectElement).value)
-            "
+							onLanguageChange(($event.target as HTMLSelectElement).value)
+						"
 					>
 						<option v-for="lang in locales" :key="lang.code" :value="lang.code">
 							{{ t(`languageNames.${lang.code}`) }}
 						</option>
 					</select>
 				</div>
+			</div>
 
+			<div class="flex gap-1">
 				<div>
 					<h2 class="text-muted-text text-lg">{{ t("push") }}</h2>
 					<button
@@ -87,6 +89,17 @@
 					</button>
 				</div>
 
+				<div>
+					<h2 class="text-muted-text text-lg">{{ t("design") }}</h2>
+					<select
+						v-model="settings.design"
+						class="bg-surface border-secondary h-8 cursor-pointer rounded border px-2 text-white"
+					>
+						<option value="classic">{{ t(`classic`) }}</option>
+						<option value="modern">{{ t(`modern`) }}</option>
+					</select>
+				</div>
+
 				<div>
 					<h2 class="text-muted-text text-lg">{{ t("insertionPoint") }}</h2>
 					<select
@@ -98,6 +111,7 @@
 					</select>
 				</div>
 			</div>
+
 			<Categories />
 			<Tags />
 			<ApiKeys />
diff --git a/app/components/Utils/Sheet.vue b/app/components/Utils/Sheet.vue
index f881f8c..92e62bd 100644
--- a/app/components/Utils/Sheet.vue
+++ b/app/components/Utils/Sheet.vue
@@ -22,6 +22,8 @@
 	const emit = defineEmits<{ close: [] }>();
 
 	const useModal = useMediaQuery("(min-width: 40rem)");
+
+	const { standalone } = useIsPwa();
 </script>
 
 <template>
@@ -33,7 +35,7 @@
 					@click="emit('close')"
 				/>
 				<DrawerContent
-					class="bg-surface fixed bottom-0 z-30 flex h-96 w-dvw flex-col gap-2 rounded-t-lg drop-shadow-lg"
+					class="bg-surface fixed bottom-0 z-30 flex h-106 w-dvw flex-col gap-2 rounded-t-lg drop-shadow-lg"
 				>
 					<div class="h-full">
 						<VisuallyHidden>
@@ -41,7 +43,12 @@
 							<DrawerDescription>{{ title }}</DrawerDescription>
 						</VisuallyHidden>
 						<DrawerHandle class="my-2" />
-						<div class="h-full overflow-auto px-2 pb-7"><slot /></div>
+						<div
+							class="h-full overflow-auto px-2 pb-7"
+							:class="{'pb-17': standalone}"
+						>
+							<slot />
+						</div>
 					</div>
 				</DrawerContent>
 			</DrawerPortal>
diff --git a/app/composables/useIsPwa.ts b/app/composables/useIsPwa.ts
new file mode 100644
index 0000000..1e454c4
--- /dev/null
+++ b/app/composables/useIsPwa.ts
@@ -0,0 +1,17 @@
+import { onMounted, ref } from "vue";
+
+interface NavigatorStandalone extends Navigator {
+	standalone?: boolean;
+}
+
+export function useIsPwa() {
+	const standalone = ref(false);
+
+	onMounted(() => {
+		standalone.value =
+			window.matchMedia("(display-mode: standalone)").matches ||
+			(window.navigator as NavigatorStandalone).standalone!;
+	});
+
+	return { standalone };
+}
diff --git a/app/composables/useSettings.ts b/app/composables/useSettings.ts
index bbcf5b9..1406593 100644
--- a/app/composables/useSettings.ts
+++ b/app/composables/useSettings.ts
@@ -1,10 +1,12 @@
 type Settings = {
 	insertionPoint: "top" | "bottom";
+	design: "classic" | "modern";
 };
 
 export function useSettings() {
 	const settings = useLocalStorage<Settings>("settings", {
 		insertionPoint: "bottom",
+		design: "classic",
 	});
 	return { settings };
 }
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
index 0305638..dcc2507 100644
--- a/i18n/locales/de.json
+++ b/i18n/locales/de.json
@@ -34,5 +34,8 @@
 	"tagSelect": {
 		"notUsedYet": "Nicht verwendet"
 	},
-	"push": "Webpush"
+	"push": "Webpush",
+	"design": "Design",
+	"classic": "Klassisch",
+	"modern": "Modern"
 }
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index afa47ec..32096f0 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -34,5 +34,8 @@
 	"push": "Webpush",
 	"tagSelect": {
 		"notUsedYet": "Not used yet"
-	}
+	},
+	"design": "Design",
+	"classic": "Klassisch",
+	"modern": "Modern"
 }
-- 
2.51.2