feat: prepare new popups

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;
         }

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>

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>

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 ) => {