add welcome modal

src/App.vue

@@ -22,7 +22,12 @@
 
 <script setup lang="ts">
 import { onStartTyping } from "@vueuse/core";
-import { RouteLocationNormalized, useRoute, useRouter } from "vue-router";
+import { useRouter } from "vue-router";
+
+import useContextStore from "@/stores/context";
+import useQStore from "@/stores/queue";
+import useModalStore from "@/stores/modal";
+import useShortcuts from "@/composables/useKeyboard";
 
 import ContextMenu from "@/components/contextMenu.vue";
 import Navigation from "@/components/LeftSidebar/Navigation.vue";
@@ -34,15 +39,13 @@ import Notification from "@/components/Notification.vue";
 import RightSideBar from "@/components/RightSideBar/Main.vue";
 import SearchInput from "@/components/RightSideBar/SearchInput.vue";
 import Tabs from "@/components/RightSideBar/Tabs.vue";
-import useContextStore from "@/stores/context";
-import useQStore from "@/stores/queue";
+import { onMounted } from "vue";
 
-import useShortcuts from "@/composables/useKeyboard";
-
-const context_store = useContextStore();
 const queue = useQStore();
-const app_dom = document.getElementById("app");
 const router = useRouter();
+const modal = useModalStore();
+const context_store = useContextStore();
+const app_dom = document.getElementById("app");
 
 queue.readQueue();
 useShortcuts(useQStore);
@@ -62,6 +65,10 @@ onStartTyping(() => {
   elem.focus();
   elem.value = "";
 });
+
+onMounted(() => {
+  modal.showWelcomeModal();
+});
 </script>
 
 <style lang="scss">

src/components/WelcomeModal.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="welcome-to-alice">
+    <h3 class="t-center">
+      Welcome to
+      <span class="app-name">Alice</span>
+      <span class="release">alpha</span>
+    </h3>
+    <p>
+      Alice is a web based music player that is designed to provide a home 🏡 for
+      all your local music files 💿️.
+    </p>
+    <hr />
+    <p>
+      To get started, you need to have
+      <a href="https://github.com/geoffrey45/alice-core" target="_blank"
+        ><span class="inline-code">alice server </span></a
+      >
+      running on your computer, and accessible via
+      <a href="http://localhost:1970"
+        ><span class="inline-code">localhost:1970</span></a
+      >.
+    </p>
+    <p>
+      On top of that, you need to enable loading mixed content in your browser
+      to to load local images 🖼️. Firefox usually supports this by default, but you
+      may need to enable it in Chrome.
+    </p>
+    <hr />
+    <br />
+    <div class="instructions rounded">
+      <div class="t-center">How to enable loading mixed content in</div>
+      <div class="button-group">
+        <a
+          href="https://support.mozilla.org/en-US/kb/enable-javascript-to-load-mixed-content-sites-like-https-and-http"
+          target="_blank"
+        >
+          <button>🦊 Firefox</button>
+        </a>
+        <a
+          href="https://support.google.com/chrome/answer/95617?hl=en"
+          target="_blank"
+        >
+          <button>🦝 Chrome</button>
+        </a>
+      </div>
+    </div>
+
+    <div class="bottom-banner">
+      <div class="creator t-center">
+        Designed and developed by
+        <span class="name"
+          ><a href="https://github.com/geoffrey45">Geoffrey Mungai</a>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts"></script>
+<style lang="scss">
+.welcome-to-alice {
+  p {
+    line-height: 1.5rem;
+  }
+
+  .inline-code {
+    font-size: 0.9rem;
+    color: $red;
+    border-radius: $smaller;
+    font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
+      "Consolas", "Liberation Mono";
+  }
+
+  hr {
+    border: none;
+    border-bottom: 1px $gray3 solid;
+  }
+
+  .app-name {
+    font-size: 1.5rem;
+    color: $red;
+  }
+
+  .release {
+    margin-left: $smaller;
+    font-size: 0.7rem;
+    color: $gray1;
+  }
+
+  .bottom-banner {
+    font-size: small;
+    margin-top: 1rem;
+    opacity: 0.25;
+
+    a {
+      color: $red;
+    }
+  }
+
+  .instructions {
+    background-color: $gray4;
+    padding: $small;
+
+    .button-group {
+      margin-top: 1rem;
+      display: flex;
+      justify-content: space-evenly;
+      gap: 1rem;
+
+      button {
+        padding: 0 $medium;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>

src/components/modal.vue

@@ -16,6 +16,7 @@
         @hideModal="hideModal"
         @title="title"
       />
+      <WelcomeModal v-if="modal.component == modal.options.welcome" />
     </div>
   </div>
 </template>
@@ -24,6 +25,7 @@
 import useModalStore from "../stores/modal";
 import NewPlaylist from "./modals/NewPlaylist.vue";
 import UpdatePlaylist from "./modals/updatePlaylist.vue";
+import WelcomeModal from "./WelcomeModal.vue";
 
 const modal = useModalStore();
 

src/stores/modal.ts

@@ -4,6 +4,7 @@ import { Playlist, Track } from "../interfaces";
 enum ModalOptions {
   newPlaylist = "newPlaylist",
   updatePlaylist = "editPlaylist",
+  welcome = "welcome",
 }
 
 export default defineStore("newModal", {
@@ -25,7 +26,7 @@ export default defineStore("newModal", {
       if (track) {
         this.props.track = track;
       }
-      
+
       this.visible = true;
     },
     showEditPlaylistModal(playlist: Playlist) {
@@ -33,6 +34,10 @@ export default defineStore("newModal", {
       this.props = playlist;
       this.visible = true;
     },
+    showWelcomeModal() {
+      this.component = ModalOptions.welcome;
+      this.visible = true;
+    },
     hideModal() {
       this.visible = false;
     },