add now playing card settings

+ move left sidebar to separate component

src/components/SettingsView/Components/Switch.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
-    class="switch rounded"
-    @click="toggled = !toggled"
-    :class="{ toggled: toggled }"
-  >
+  <div class="switch rounded" :class="{ toggled: state }">
     <div class="circle circular"></div>
   </div>
 </template>
@@ -11,7 +7,9 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
-const toggled = ref(false);
+defineProps<{
+  state: boolean;
+}>();
 </script>
 
 <style lang="scss">

src/components/SettingsView/Content.vue

@@ -4,46 +4,6 @@
       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>
@@ -61,9 +21,6 @@ defineProps<{
 .settingscontent {
   width: 100%;
   max-width: 40rem;
-  padding-right: 1rem;
   margin: 0 auto;
-
-
 }
 </style>

src/components/SettingsView/Group.vue

@@ -9,14 +9,20 @@
         <div class="title">
           {{ setting.title }}
         </div>
-        <div class="options"><Switch /></div>
+        <div class="options">
+          <Switch
+            v-if="setting.type == SettingType.switch"
+            @click="setting.action()"
+            :state="setting.source()"
+          />
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { SettingGroup } from "@/interfaces/settings";
+import { SettingGroup, SettingType } from "@/interfaces/settings";
 import Switch from "./Components/Switch.vue";
 
 defineProps<{
@@ -30,6 +36,10 @@ defineProps<{
   gap: $small;
   margin-top: 2rem;
 
+  &:first-child {
+    margin-top: 0;
+  }
+
   h4 {
     margin: $small auto;
   }
@@ -39,6 +49,11 @@ defineProps<{
     font-size: 0.9rem;
   }
 
+  .setting {
+    display: grid;
+    gap: 1rem;
+  }
+
   .setting > * {
     display: grid;
     grid-template-columns: 1fr max-content;