From a238583563bdcc32d45c73f17a9c7d0e90a59ce7 Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Sat, 25 Mar 2023 21:16:58 +0100
Subject: [PATCH 1/9] chore: remove custom css & define font in tailwind config

---
 src/App.vue         | 49 ++++++++++++------------
 src/style.css       | 93 ---------------------------------------------
 tailwind.config.cjs |  3 ++
 3 files changed, 28 insertions(+), 117 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 291ff04b..4a09b759 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useAuth0 } from "@auth0/auth0-vue";
 import { watch } from "vue";
+import Toolbar from "./components/AppToolbar.vue";
 
 // logout
 const { isLoading, loginWithRedirect, isAuthenticated } = useAuth0();
@@ -10,34 +11,34 @@ watch(isLoading, async (loading) => {
     await loginWithRedirect();
   }
 });
+
+const navLinks = [
+  { to: "/", name: "Home" },
+  { to: "/browse", name: "Browse" },
+  { to: "/search", name: "Search" },
+];
 </script>
 
 <template>
   <div class="flex">
-    <nav>
-      <router-link to="/">Home</router-link>
-      <router-link to="/browse">Browse</router-link>
-      <router-link to="/search">Search</router-link>
+    <nav
+      class="bg-gray-50 border-r border-gray-100 p-4 sticky top-0 h-screen min-w-[200px]"
+    >
+      <router-link
+        v-for="link in navLinks"
+        :key="link.name"
+        :to="link.to"
+        class="p-2 rounded-lg flex"
+        active-class="bg-lime-400"
+      >
+        {{ link.name }}
+      </router-link>
     </nav>
-    <main class="overflow-scroll p-5">
-      <router-view v-if="isAuthenticated" />
-    </main>
+    <div>
+      <Toolbar />
+      <main class="p-5 grow">
+        <router-view v-if="isAuthenticated" />
+      </main>
+    </div>
   </div>
 </template>
-
-<style scoped>
-nav a {
-  display: block;
-  color: black;
-  font-style: normal;
-  font-weight: 700;
-  font-size: 18px;
-  line-height: 24px;
-  padding: 12px;
-}
-
-nav a.router-link-active {
-  background: #a4e16a;
-  border-radius: 12px;
-}
-</style>
diff --git a/src/style.css b/src/style.css
index ed0766f5..76fcadcc 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,96 +1,3 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
-
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body,
-html {
-  margin: 0;
-  height: 100%;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-h2 {
-  padding-left: 20px;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-}
-nav {
-  flex-basis: 200px;
-  flex-shrink: 0;
-  background: #f5f6f7;
-  border-right: 1px solid rgba(129, 136, 143, 0.1);
-  padding: 12px;
-  padding-top: 30px;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 6c232c99..f072a865 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -2,6 +2,9 @@
 module.exports = {
   content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
   theme: {
+    fontFamily: {
+      sans: ['Inter', 'Avenir', 'Helvetica', 'Arial', 'sans-serif']
+    },
     extend: {},
   },
   plugins: [],

From 9e8da2ba31e03fa3e8def05171d236ef7fb78290 Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Sat, 25 Mar 2023 21:17:10 +0100
Subject: [PATCH 2/9] feat: create toolbar component

---
 src/components/AppToolbar.vue | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 src/components/AppToolbar.vue

diff --git a/src/components/AppToolbar.vue b/src/components/AppToolbar.vue
new file mode 100644
index 00000000..38cc3bd5
--- /dev/null
+++ b/src/components/AppToolbar.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+
+// TODO: replace placeholder profile menu
+const showMenu = ref(false);
+function toggleMenu() {
+  showMenu.value = !showMenu.value;
+}
+</script>
+
+<template>
+  <header
+    class="p-4 sticky top-0 bg-white/80 backdrop-blur-lg border-b border-gray-100 leading-none flex justify-between align-center"
+  >
+    <strong>{{ route.name || "Home" }}</strong>
+    <div class="relative">
+      <button @click="toggleMenu">Profile</button>
+      <div
+        v-if="showMenu"
+        class="p-2 rounded-lg border border-gray-100 bg-white absolute"
+      >
+        test
+      </div>
+    </div>
+  </header>
+</template>

From 17e83f723bc34566a81e17c95f6da06a61e56de3 Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Sat, 25 Mar 2023 21:58:03 +0100
Subject: [PATCH 3/9] fix(toolbar): add toolbarTitle meta field

---
 src/App.vue                   |  2 +-
 src/components/AppToolbar.vue |  4 ++--
 src/router.ts                 | 15 +++++++++++++++
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4a09b759..fdfd5465 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -34,7 +34,7 @@ const navLinks = [
         {{ link.name }}
       </router-link>
     </nav>
-    <div>
+    <div class="grow">
       <Toolbar />
       <main class="p-5 grow">
         <router-view v-if="isAuthenticated" />
diff --git a/src/components/AppToolbar.vue b/src/components/AppToolbar.vue
index 38cc3bd5..8b0e0aaa 100644
--- a/src/components/AppToolbar.vue
+++ b/src/components/AppToolbar.vue
@@ -13,9 +13,9 @@ function toggleMenu() {
 
 <template>
   <header
-    class="p-4 sticky top-0 bg-white/80 backdrop-blur-lg border-b border-gray-100 leading-none flex justify-between align-center"
+    class="py-4 px-5 sticky top-0 bg-white/80 backdrop-blur-lg border-b border-gray-100 leading-none flex justify-between align-center"
   >
-    <strong>{{ route.name || "Home" }}</strong>
+    <strong>{{ route.meta.toolbarTitle }}</strong>
     <div class="relative">
       <button @click="toggleMenu">Profile</button>
       <div
diff --git a/src/router.ts b/src/router.ts
index e019255a..4f3ced0d 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -6,26 +6,41 @@ const router = createRouter({
     {
       path: "/",
       component: () => import("@/views/HomeView.vue"),
+      meta: {
+        toolbarTitle: 'Home'
+      }
     },
     {
       path: "/browse",
       component: () => import("@/views/BrowseView.vue"),
+      meta: {
+        toolbarTitle: 'Browse'
+      }
     },
     {
       path: "/search",
       component: () => import("@/views/SearchView.vue"),
+      meta: {
+        toolbarTitle: 'Search'
+      }
     },
     {
       name: "CuratedPlaylistDetails",
       path: "/playlist/curated/:playlistId",
       component: () => import("@/views/Playlist/CuratedPlaylistDetails.vue"),
       props: true,
+      meta: {
+        toolbarTitle: 'Playlist'
+      }
     },
     {
       name: "PrivatePlaylist",
       path: "/playlist/private/:id",
       component: () => import("@/views/Playlist/PrivatePlaylist.vue"),
       props: true,
+      meta: {
+        toolbarTitle: 'Playlist',
+      }
     },
   ],
 });

From b2e9cf780ff534beb5c0ae909955cdc151aa5b5f Mon Sep 17 00:00:00 2001
From: Simon Schick <simonsimcity@gmail.com>
Date: Wed, 5 Apr 2023 13:28:20 +0200
Subject: [PATCH 4/9] Added typing for route-meta

---
 src/router.ts | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/router.ts b/src/router.ts
index 4f3ced0d..cb867ef8 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -1,5 +1,11 @@
 import { createRouter, createWebHistory } from "vue-router";
 
+declare module "vue-router" {
+  interface RouteMeta {
+    toolbarTitle: string;
+  }
+}
+
 const router = createRouter({
   history: createWebHistory(),
   routes: [
@@ -7,22 +13,22 @@ const router = createRouter({
       path: "/",
       component: () => import("@/views/HomeView.vue"),
       meta: {
-        toolbarTitle: 'Home'
-      }
+        toolbarTitle: "Home",
+      },
     },
     {
       path: "/browse",
       component: () => import("@/views/BrowseView.vue"),
       meta: {
-        toolbarTitle: 'Browse'
-      }
+        toolbarTitle: "Browse",
+      },
     },
     {
       path: "/search",
       component: () => import("@/views/SearchView.vue"),
       meta: {
-        toolbarTitle: 'Search'
-      }
+        toolbarTitle: "Search",
+      },
     },
     {
       name: "CuratedPlaylistDetails",
@@ -30,8 +36,8 @@ const router = createRouter({
       component: () => import("@/views/Playlist/CuratedPlaylistDetails.vue"),
       props: true,
       meta: {
-        toolbarTitle: 'Playlist'
-      }
+        toolbarTitle: "Playlist",
+      },
     },
     {
       name: "PrivatePlaylist",
@@ -39,8 +45,8 @@ const router = createRouter({
       component: () => import("@/views/Playlist/PrivatePlaylist.vue"),
       props: true,
       meta: {
-        toolbarTitle: 'Playlist',
-      }
+        toolbarTitle: "Playlist",
+      },
     },
   ],
 });

From 5ec85120c302465cfaed4682be2842d4de84ffda Mon Sep 17 00:00:00 2001
From: Simon Schick <simonsimcity@gmail.com>
Date: Wed, 5 Apr 2023 13:28:43 +0200
Subject: [PATCH 5/9] More descriptive todo comment

---
 src/components/AppToolbar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AppToolbar.vue b/src/components/AppToolbar.vue
index 8b0e0aaa..9a801ed3 100644
--- a/src/components/AppToolbar.vue
+++ b/src/components/AppToolbar.vue
@@ -4,7 +4,7 @@ import { useRoute } from "vue-router";
 
 const route = useRoute();
 
-// TODO: replace placeholder profile menu
+// TODO: Replace placeholder by profile menu #8
 const showMenu = ref(false);
 function toggleMenu() {
   showMenu.value = !showMenu.value;

From 33123bf583be45d06ff4e3db84c3989305fa7b92 Mon Sep 17 00:00:00 2001
From: Simon Schick <simonsimcity@gmail.com>
Date: Wed, 5 Apr 2023 13:35:11 +0200
Subject: [PATCH 6/9] Applied linting

---
 tailwind.config.cjs | 2 +-
 tsconfig.node.json  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index f072a865..0ac416c1 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -3,7 +3,7 @@ module.exports = {
   content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
   theme: {
     fontFamily: {
-      sans: ['Inter', 'Avenir', 'Helvetica', 'Arial', 'sans-serif']
+      sans: ["Inter", "Avenir", "Helvetica", "Arial", "sans-serif"],
     },
     extend: {},
   },
diff --git a/tsconfig.node.json b/tsconfig.node.json
index 641fc75c..113fd585 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -9,5 +9,5 @@
     "moduleResolution": "Node",
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts", "stylelint.config.cjs"]
+  "include": ["vite.config.ts", "stylelint.config.cjs", "tailwind.config.cjs"]
 }

From b27768680f72865daf45b75ec21614d1c41d2c0e Mon Sep 17 00:00:00 2001
From: Simon Schick <simonsimcity@gmail.com>
Date: Tue, 11 Apr 2023 17:16:19 +0200
Subject: [PATCH 7/9] Translate introduced strings

---
 src/App.vue                                   |  2 +-
 src/components/AppToolbar.vue                 |  2 +-
 src/components/privatePlaylist.vue            |  2 +-
 src/locales/de.json                           |  2 ++
 src/locales/en.json                           |  2 ++
 src/plugins/i18n.ts                           |  2 +-
 src/router.ts                                 | 23 ++++++++++++++-----
 src/views/Playlist/CuratedPlaylistDetails.vue |  2 +-
 8 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 91e8256f..f41adbad 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { useAuth0 } from "@auth0/auth0-vue";
 import { Ref, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import privatePlaylist from "@/components/privatePlaylist.vue";
 import ChangeLocale from "./components/ChangeLocale.vue";
 import Toolbar from "./components/AppToolbar.vue";
-import { useI18n } from "vue-i18n";
 
 // logout
 const { isLoading, loginWithRedirect, isAuthenticated } = useAuth0();
diff --git a/src/components/AppToolbar.vue b/src/components/AppToolbar.vue
index 9a801ed3..765bf5e9 100644
--- a/src/components/AppToolbar.vue
+++ b/src/components/AppToolbar.vue
@@ -17,7 +17,7 @@ function toggleMenu() {
   >
     <strong>{{ route.meta.toolbarTitle }}</strong>
     <div class="relative">
-      <button @click="toggleMenu">Profile</button>
+      <button @click="toggleMenu">{{ $t("nav.profile") }}</button>
       <div
         v-if="showMenu"
         class="p-2 rounded-lg border border-gray-100 bg-white absolute"
diff --git a/src/components/privatePlaylist.vue b/src/components/privatePlaylist.vue
index 6a6fd975..92a38fd9 100644
--- a/src/components/privatePlaylist.vue
+++ b/src/components/privatePlaylist.vue
@@ -17,7 +17,7 @@ new TrackCollectionApi()
 
 <template>
   <div>
-    <h3>Playlists</h3>
+    <h3>{{ $t("nav.playlist") }}</h3>
     <ul>
       <li v-for="collection in collections" :key="collection.id || 0">
         <RouterLink
diff --git a/src/locales/de.json b/src/locales/de.json
index 7d955a09..17dff156 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -2,6 +2,8 @@
   "nav": {
     "home": "Home",
     "browse": "Stöbern",
+    "playlist": "Playliste",
+    "profile": "Profil",
     "search": "Suche"
   }
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index 57c4f569..8de8766d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -2,6 +2,8 @@
   "nav": {
     "home": "Home",
     "browse": "Browse",
+    "playlist": "Playlist",
+    "profile": "Profile",
     "search": "Search"
   }
 }
diff --git a/src/plugins/i18n.ts b/src/plugins/i18n.ts
index 5a1dfcdb..0f35bcee 100644
--- a/src/plugins/i18n.ts
+++ b/src/plugins/i18n.ts
@@ -2,7 +2,7 @@ import { createI18n } from "vue-i18n";
 import en from "../locales/en.json";
 import de from "../locales/de.json";
 
-const i18n = createI18n<[{}], "en" | "de">({
+const i18n = createI18n<[{}], "en" | "de", false>({
   legacy: false,
   locale: "en",
   messages: {
diff --git a/src/router.ts b/src/router.ts
index cb867ef8..50fb7f68 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -1,11 +1,22 @@
+import { Ref, ref, watch } from "vue";
 import { createRouter, createWebHistory } from "vue-router";
+import i18n from "./plugins/i18n";
 
 declare module "vue-router" {
   interface RouteMeta {
-    toolbarTitle: string;
+    toolbarTitle: Ref<string>;
   }
 }
 
+const { locale, t } = i18n.global;
+const rT = (translate: () => string) => {
+  const translation: Ref<string> = ref(translate());
+  watch(locale, () => {
+    translation.value = translate();
+  });
+  return translation;
+};
+
 const router = createRouter({
   history: createWebHistory(),
   routes: [
@@ -13,21 +24,21 @@ const router = createRouter({
       path: "/",
       component: () => import("@/views/HomeView.vue"),
       meta: {
-        toolbarTitle: "Home",
+        toolbarTitle: rT(() => t("nav.home")),
       },
     },
     {
       path: "/browse",
       component: () => import("@/views/BrowseView.vue"),
       meta: {
-        toolbarTitle: "Browse",
+        toolbarTitle: rT(() => t("nav.browse")),
       },
     },
     {
       path: "/search",
       component: () => import("@/views/SearchView.vue"),
       meta: {
-        toolbarTitle: "Search",
+        toolbarTitle: rT(() => t("nav.search")),
       },
     },
     {
@@ -36,7 +47,7 @@ const router = createRouter({
       component: () => import("@/views/Playlist/CuratedPlaylistDetails.vue"),
       props: true,
       meta: {
-        toolbarTitle: "Playlist",
+        toolbarTitle: rT(() => t("nav.playlist")),
       },
     },
     {
@@ -45,7 +56,7 @@ const router = createRouter({
       component: () => import("@/views/Playlist/PrivatePlaylist.vue"),
       props: true,
       meta: {
-        toolbarTitle: "Playlist",
+        toolbarTitle: rT(() => t("nav.playlist")),
       },
     },
   ],
diff --git a/src/views/Playlist/CuratedPlaylistDetails.vue b/src/views/Playlist/CuratedPlaylistDetails.vue
index 24e5d4df..84d20688 100644
--- a/src/views/Playlist/CuratedPlaylistDetails.vue
+++ b/src/views/Playlist/CuratedPlaylistDetails.vue
@@ -29,7 +29,7 @@ new PlaylistApi()
 </script>
 
 <template>
-  <h1>Playlist</h1>
+  <h1>{{ $t("nav.playlist") }}</h1>
   <div class="flex flex-row flex-wrap">
     <ProtectedImage
       v-if="playlist.cover"

From 7f21f462ad3e581a8a78bf263a7b588baab2a24a Mon Sep 17 00:00:00 2001
From: Simon Schick <simonsimcity@gmail.com>
Date: Tue, 11 Apr 2023 17:21:03 +0200
Subject: [PATCH 8/9] Unwrap computed title-ref on toolbar

For some reason, we have to unwrap the ref returned by the route so it doesn't wrap it by quotation marks - I guess, because the route itself has a ref for meta-data..? Might be related to https://github.com/vuejs/core/issues/4400
---
 src/components/AppToolbar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AppToolbar.vue b/src/components/AppToolbar.vue
index 765bf5e9..81898164 100644
--- a/src/components/AppToolbar.vue
+++ b/src/components/AppToolbar.vue
@@ -15,7 +15,7 @@ function toggleMenu() {
   <header
     class="py-4 px-5 sticky top-0 bg-white/80 backdrop-blur-lg border-b border-gray-100 leading-none flex justify-between align-center"
   >
-    <strong>{{ route.meta.toolbarTitle }}</strong>
+    <strong>{{ route.meta.toolbarTitle?.value }}</strong>
     <div class="relative">
       <button @click="toggleMenu">{{ $t("nav.profile") }}</button>
       <div

From b71c94a274cca30bc9f4a65ef3db977c0e71655d Mon Sep 17 00:00:00 2001
From: Simon Schick <simonsimcity@gmail.com>
Date: Thu, 13 Apr 2023 11:53:07 +0200
Subject: [PATCH 9/9] Renamed and explicitly typed a function

---
 src/router.ts | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/router.ts b/src/router.ts
index 50fb7f68..1dfbfbac 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -9,7 +9,9 @@ declare module "vue-router" {
 }
 
 const { locale, t } = i18n.global;
-const rT = (translate: () => string) => {
+const reactiveTranslation: (translate: () => string) => Ref<string> = (
+  translate
+) => {
   const translation: Ref<string> = ref(translate());
   watch(locale, () => {
     translation.value = translate();
@@ -24,21 +26,21 @@ const router = createRouter({
       path: "/",
       component: () => import("@/views/HomeView.vue"),
       meta: {
-        toolbarTitle: rT(() => t("nav.home")),
+        toolbarTitle: reactiveTranslation(() => t("nav.home")),
       },
     },
     {
       path: "/browse",
       component: () => import("@/views/BrowseView.vue"),
       meta: {
-        toolbarTitle: rT(() => t("nav.browse")),
+        toolbarTitle: reactiveTranslation(() => t("nav.browse")),
       },
     },
     {
       path: "/search",
       component: () => import("@/views/SearchView.vue"),
       meta: {
-        toolbarTitle: rT(() => t("nav.search")),
+        toolbarTitle: reactiveTranslation(() => t("nav.search")),
       },
     },
     {
@@ -47,7 +49,7 @@ const router = createRouter({
       component: () => import("@/views/Playlist/CuratedPlaylistDetails.vue"),
       props: true,
       meta: {
-        toolbarTitle: rT(() => t("nav.playlist")),
+        toolbarTitle: reactiveTranslation(() => t("nav.playlist")),
       },
     },
     {
@@ -56,7 +58,7 @@ const router = createRouter({
       component: () => import("@/views/Playlist/PrivatePlaylist.vue"),
       props: true,
       meta: {
-        toolbarTitle: rT(() => t("nav.playlist")),
+        toolbarTitle: reactiveTranslation(() => t("nav.playlist")),
       },
     },
   ],