initialize settings page

src/assets/scss/Global/variants.scss

@@ -11,7 +11,7 @@
   padding: $medium;
 }
 
-.pad-large {
+.pad-lg {
   padding: 1rem;
 }
 

src/assets/scss/_mixins.scss

@@ -29,7 +29,7 @@
   }
 }
 
-@mixin for-big-desktop-up {
+@mixin for-desktop-up {
   @media (min-width: 1800px) {
     @content;
   }

src/components/LeftSidebar/Navigation.vue

@@ -18,6 +18,7 @@
 <script setup lang="ts">
 import PlaylistSvg from "../../assets/icons/playlist.svg";
 import FolderSvg from "../../assets/icons/folder.svg";
+import SettingsSvg from "../../assets/icons/settings.svg";
 
 const menus = [
   {
@@ -31,6 +32,11 @@ const menus = [
     params: { path: "$home" },
     icon: FolderSvg,
   },
+  {
+    name: "settings",
+    route_name: "SettingsView",
+    icon: SettingsSvg,
+  },
 ];
 </script>
 

src/components/SettingsView/Components/Switch.vue

@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="switch rounded"
+    @click="toggled = !toggled"
+    :class="{ toggled: toggled }"
+  >
+    <div class="circle circular"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const toggled = ref(false);
+</script>
+
+<style lang="scss">
+.switch {
+  height: 2rem;
+  background-color: $gray;
+  width: 3.75rem;
+  padding: $smaller;
+  position: relative;
+  transition: all 0.25s ease;
+
+  .circle {
+    transition: all 0.25s ease;
+    height: 1.5rem;
+    aspect-ratio: 1;
+    background-color: $gray1;
+    position: absolute;
+    left: $smaller;
+  }
+}
+
+.toggled {
+  background-color: $darkblue;
+  transition-delay: 0.15s;
+
+  .circle {
+    background-color: $white;
+    left: calc((100% - ($smaller + 1.5rem)));
+  }
+}
+</style>

src/components/SettingsView/Content.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="settingscontent">
+    <Group
+      v-for="(group, index) in settingGroups[current].groups"
+      :key="index"
+      :group="group"
+    /><Group
+      v-for="(group, index) in settingGroups[current].groups"
+      :key="index"
+      :group="group"
+    /><Group
+      v-for="(group, index) in settingGroups[current].groups"
+      :key="index"
+      :group="group"
+    /><Group
+      v-for="(group, index) in settingGroups[current].groups"
+      :key="index"
+      :group="group"
+    /><Group
+      v-for="(group, index) in settingGroups[current].groups"
+      :key="index"
+      :group="group"
+    /><Group
+      v-for="(group, index) in settingGroups[current].groups"
+      :key="index"
+      :group="group"
+    /><Group
+      v-for="(group, index) in settingGroups[current].groups"
+      :key="index"
+      :group="group"
+    /><Group
+      v-for="(group, index) in settingGroups[current].groups"
+      :key="index"
+      :group="group"
+    /><Group
+      v-for="(group, index) in settingGroups[current].groups"
+      :key="index"
+      :group="group"
+    /><Group
+      v-for="(group, index) in settingGroups[current].groups"
+      :key="index"
+      :group="group"
+    /><Group
+      v-for="(group, index) in settingGroups[current].groups"
+      :key="index"
+      :group="group"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import settingGroups from "@/settings";
+import Group from "./Group.vue";
+
+defineProps<{
+  current: number;
+}>();
+</script>
+
+<style lang="scss">
+.settingscontent {
+  width: 100%;
+  max-width: 40rem;
+  padding-right: 1rem;
+  margin: 0 auto;
+
+
+}
+</style>

src/components/SettingsView/Group.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="settingsgroup">
+    <div>
+      <h4>{{ group.title }}</h4>
+      <div class="desc">{{ group.desc }}</div>
+    </div>
+    <div class="setting rounded bg-black pad-lg">
+      <div v-for="(setting, index) in group.settings" :key="index">
+        <div class="title">
+          {{ setting.title }}
+        </div>
+        <div class="options"><Switch /></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SettingGroup } from "@/interfaces/settings";
+import Switch from "./Components/Switch.vue";
+
+defineProps<{
+  group: SettingGroup;
+}>();
+</script>
+
+<style lang="scss">
+.settingsgroup {
+  display: grid;
+  gap: $small;
+  margin-top: 2rem;
+
+  h4 {
+    margin: $small auto;
+  }
+
+  .desc {
+    opacity: 0.5;
+    font-size: 0.9rem;
+  }
+
+  .setting > * {
+    display: grid;
+    grid-template-columns: 1fr max-content;
+
+    .title {
+      margin: auto 0;
+    }
+  }
+}
+</style>

src/components/SettingsView/Main.vue

@@ -1,3 +0,0 @@
-<template>
-<div class="settings">Hello, settings here 😁</div>
-</template>

src/components/SettingsView/Nav.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="settingsnav">
+    <div class="buttongroup rounded bg-black">
+      <button v-for="(group, index) in settingGroups" :key="index">
+        {{ group.title }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import settingGroups from "@/settings";
+</script>
+
+<style lang="scss">
+.settingsnav {
+  .buttongroup {
+    display: grid;
+    grid-auto-flow: column;
+    width: max-content;
+    margin: 0 auto;
+    overflow: hidden;
+
+    button {
+      padding: 0 1rem;
+      border-radius: 0;
+      width: 5rem;
+    }
+  }
+}
+</style>

src/components/nav/NavBar.vue

@@ -4,7 +4,14 @@
       <NavButtons />
       <div class="info">
         <APTitle v-show="showAPTitle" />
-        <Playlists v-show="$route.name == Routes.playlists" />
+        <SimpleTitle
+          v-show="$route.name == Routes.playlists"
+          :text="'Playlists'"
+        />
+        <SimpleTitle
+          v-show="$route.name == Routes.settings"
+          :text="'Settings'"
+        />
         <Folder v-show="$route.name == Routes.folder" :subPaths="subPaths" />
       </div>
     </div>
@@ -24,7 +31,7 @@ import { Routes } from "@/composables/enums";
 import { createSubPaths } from "@/utils";
 import { subPath } from "@/interfaces";
 import Folder from "./Titles/Folder.vue";
-import Playlists from "./Titles/Playlists.vue";
+import SimpleTitle from "./Titles/SimpleTitle.vue";
 import APTitle from "./Titles/APTitle.vue";
 import useNavStore from "@/stores/nav";
 
@@ -83,11 +90,13 @@ watch(
 
     .info {
       overflow: hidden;
+      margin: auto 0;
 
       .title {
         font-size: 1.5rem;
         font-weight: bold;
         display: flex;
+        align-items: center;
       }
     }
   }

src/components/nav/Titles/APTitle.vue

@@ -15,7 +15,6 @@ import usePStore from "@/stores/pages/playlist";
 import { computed } from "@vue/reactivity";
 import { useRoute } from "vue-router";
 
-
 const things = computed(() => {
   const route = useRoute();
   let thing = {
@@ -24,18 +23,22 @@ const things = computed(() => {
     source: playSources.album,
   };
 
-  if (route.name == Routes.album) {
+  switch (route.name) {
-    thing = {
+    case Routes.album:
-      source: playSources.album,
+      thing = {
-      text: useAlbumStore().info.title,
+        source: playSources.album,
-      store: useAlbumStore,
+        text: useAlbumStore().info.title,
-    };
+        store: useAlbumStore,
-  } else if (route.name == Routes.playlist) {
+      };
-    thing = {
+      break;
-      source: playSources.playlist,
+    case Routes.playlist:
-      text: usePStore().info.name,
+      thing = {
-      store: usePStore,
+        source: playSources.playlist,
-    };
+        text: usePStore().info.name,
+        store: usePStore,
+      };
+      break;
+      break;
   }
 
   return thing;

src/components/nav/Titles/Folder.vue

@@ -62,14 +62,9 @@ onUpdated(() => {
       height: 2.25rem;
       display: flex;
       align-items: center;
-      margin-left: $smaller;
       overflow: auto;
       padding-right: $smaller;
 
-      // @include for-desktop-down {
-      //   max-width: 9rem;
-      // }
-
       .icon {
         height: 2rem;
         aspect-ratio: 1;

src/components/nav/Titles/Playlists.vue

@@ -1,7 +0,0 @@
-<template>
-  <div
-    class="title"
-  >
-    Playlists
-  </div>
-</template>

src/components/nav/Titles/SimpleTitle.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="title">{{ text }}</div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  text: string;
+}>();
+</script>

src/interfaces/settings.ts

@@ -0,0 +1,29 @@
+export enum SettingType {
+  text,
+  select,
+  multiselect,
+  switch,
+}
+
+export interface SettingOption {
+  title: string;
+  value: any;
+}
+
+export interface Setting {
+  title: string;
+  type: SettingType;
+  options: SettingOption[];
+  action: (arg0?: SettingOption) => void;
+}
+
+export interface SettingGroup {
+  title?: string;
+  desc?: string;
+  settings: Setting[];
+}
+
+export interface SettingCategory {
+  title: string;
+  groups: SettingGroup[];
+}

src/settings/general/index.ts

@@ -0,0 +1,15 @@
+import { SettingCategory } from "@/interfaces/settings";
+import setNowPlayingComponent from "./now-playing";
+
+console.log(setNowPlayingComponent);
+
+export default {
+  title: "General",
+  groups: [
+    {
+      title: "Repeat queue",
+      desc: "Do you want to do that?",
+      settings: [setNowPlayingComponent()],
+    },
+  ],
+} as SettingCategory;

src/settings/general/now-playing.ts

@@ -0,0 +1,7 @@
+import { SettingType } from "@/interfaces/settings";
+
+export default () => ({
+  title: "Use Sidebar now playing card",
+  type: SettingType.switch,
+  action: () => console.log("should toggle something"),
+});

src/settings/index.ts

@@ -0,0 +1,3 @@
+import general from "./general";
+
+export default [general];

src/views/SettingsView.vue

@@ -1,3 +1,33 @@
 <template>
-<div class="settings">Hello, settings here 😁</div>
+  <div class="settingspage">
-</template>
+    <div class="scrollable">
+      <Content :current="0" />
+    </div>
+    <Nav />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Nav from "@/components/SettingsView/Nav.vue";
+import Content from "../components/SettingsView/Content.vue";
+</script>
+
+<style lang="scss">
+.settingspage {
+  height: 100%;
+  padding: 1rem;
+  display: grid;
+  grid-template-rows: 1fr max-content;
+  gap: 1rem;
+  background-color: $black;
+
+  .scrollable {
+    overflow: auto;
+    margin-top: 1rem;
+    
+    @include for-desktop-down {
+      margin-top: 0;
+    }
+  }
+}
+</style>

tsconfig.json

@@ -20,21 +20,8 @@
   "include": [
     "src/**/*.ts",
     "src/**/*.d.ts",
-    "src/**/*.tsx",
     "src/**/*.vue",
     "src/**/*.svg"
   ],
   "references": [{ "path": "./tsconfig.node.json" }]
-}
+}
-
-// {
-//   "compilerOptions": {
-//     "strict": false,
-//     "jsx": "preserve",
-//     "paths": {
-//       "baseUrl": ["./"],
-//       "@/*": ["./src/*"]
-//     }
-//   },
-//   "include": ["src/**/*"]
-// }