From 946ba8451893e61f16018523f2926e43c00b8be7 Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Tue, 8 Sep 2026 13:00:53 +0200
Subject: [PATCH] feat: prepare new popups

---
 web/src/components/player/CurrentSong.vue     |  1 -
 .../components/shared/InformationPopup.vue    | 25 +++++++++++++++++++
 web/src/components/shared/SettingsPopup.vue   | 21 ++++++++++++++++
 web/src/ts/shared/index.ts                    |  2 +-
 4 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 web/src/components/shared/InformationPopup.vue
 create mode 100644 web/src/components/shared/SettingsPopup.vue

diff --git a/web/src/components/player/CurrentSong.vue b/web/src/components/player/CurrentSong.vue
index e367324..0245a9f 100644
--- a/web/src/components/player/CurrentSong.vue
+++ b/web/src/components/player/CurrentSong.vue
@@ -50,7 +50,6 @@
         max-height: calc(100% - 9rem);
 
         >img, .fa-solid {
-            max-width: 60%;
             height: 100%;
             font-size: 40vh;
         }
diff --git a/web/src/components/shared/InformationPopup.vue b/web/src/components/shared/InformationPopup.vue
new file mode 100644
index 0000000..ffaf2a1
--- /dev/null
+++ b/web/src/components/shared/InformationPopup.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+    import PopupElement from '../popups/PopupElement.vue';
+
+    const show = defineModel<boolean>();
+    const props = defineProps<{
+        'title': string;
+        'message'?: string;
+    }>();
+
+    const close = () => {
+        show.value = false;
+    };
+</script>
+
+<template>
+    <div>
+        <PopupElement v-model="show">
+            <h2>{{ props.title }}</h2>
+            <p>{{ props.message }}</p>
+            <button @click="close">
+                Ok
+            </button>
+        </PopupElement>
+    </div>
+</template>
diff --git a/web/src/components/shared/SettingsPopup.vue b/web/src/components/shared/SettingsPopup.vue
new file mode 100644
index 0000000..e3685c0
--- /dev/null
+++ b/web/src/components/shared/SettingsPopup.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+    import PopupElement from '../popups/PopupElement.vue';
+
+    const show = defineModel<boolean>();
+
+    const close = () => {
+        show.value = false;
+    };
+</script>
+
+<template>
+    <div>
+        <!-- TODO: Beacon request when exiting browser (and confirm popup for that!) -->
+        <PopupElement v-model="show">
+            <h2>Settings</h2>
+            <button @click="close">
+                Ok
+            </button>
+        </PopupElement>
+    </div>
+</template>
diff --git a/web/src/ts/shared/index.ts b/web/src/ts/shared/index.ts
index 76a6188..a3082c1 100644
--- a/web/src/ts/shared/index.ts
+++ b/web/src/ts/shared/index.ts
@@ -24,7 +24,7 @@ let hasConnected = false;
 let retries = 0;
 
 // TODO: Persist settings in local storage
-// TODO: Polling instead of sse
+// TODO: Polling instead of sse as option
 
 const connect = (): Promise<void> => {
     return new Promise( ( resolve, reject ) => {