reactive ui tweaks architecture

NUXT/layouts/default.vue

@@ -1,7 +1,7 @@
 <template>
-  <v-app style="background: black !important;">
+  <v-app style="background: black !important">
     <v-card
-      style="height: 4rem !important; display: flex; box-shadow: none !important;"
+      style="height: 4rem !important; display: flex; box-shadow: none !important"
       color="accent white--text"
       class="topNav rounded-0"
     >
@@ -19,50 +19,86 @@
 
       <v-spacer />
 
-
-      <v-btn text class="toolbarAction mr-2 fill-height" color="white" @click="searchBtn()"><v-icon>mdi-magnify</v-icon></v-btn>
-      <v-btn text class="toolbarAction fill-height" color="white" v-show="!search" to="/settings"><v-icon>mdi-dots-vertical</v-icon></v-btn>
-
+      <v-btn
+        text
+        class="toolbarAction mr-2 fill-height"
+        color="white"
+        @click="searchBtn()"
+        ><v-icon>mdi-magnify</v-icon></v-btn
+      >
+      <v-btn
+        text
+        class="toolbarAction fill-height"
+        color="white"
+        v-show="!search"
+        to="/settings"
+        ><v-icon>mdi-dots-vertical</v-icon></v-btn
+      >
     </v-card>
 
-
-    <div style="height: calc(100% - 1rem); margin-top: 1rem; padding-top: 3rem; background: linear-gradient(var(--v-accent-base) 0%, var(--v-accent2-base) 100%); border-radius: 1rem;">
     <div
-        class="background scroll-y"
-        style="padding: 0; height: calc(100vh - 8rem); overflow-x: hidden;"
+      style="
+        height: 100%;
+        margin-top: 4rem;
+        background: linear-gradient(var(--v-accent-base) 0%, var(--v-accent2-base) 100%);
+      "
     >
-
+      <div
+        class="background"
+        style="
+          padding: 0;
+          overflow: hidden;
+          height: calc(100vh - 8rem);
+          transition-duration: 0.3s;
+          transition-property: border-radius;
+        "
+        :style="{
+          borderRadius: `${roundTweak / 2}rem`,
+        }"
+      >
+        <!-- element above removes artifacting from things like v-ripple via overflow:hidden -->
+        <!-- scrollbox below must be a standalone div -->
+        <div class="scroll-y" style="height: 100%">
           <nuxt v-show="!search" />
-        <div style="min-width: 180px;" v-if="search">
+          <div style="min-width: 180px" v-if="search">
             <v-list-item v-for="(item, index) in response" :key="index">
-            <v-btn text dense class="info--text searchButton text-left text-capitalize" @click="youtubeSearch(item)" v-text="item[0]" />
+              <v-btn
+                text
+                dense
+                class="info--text searchButton text-left text-capitalize"
+                @click="youtubeSearch(item)"
+                v-text="item[0]"
+              />
             </v-list-item>
           </div>
-
+        </div>
       </div>
     </div>
 
     <bottomNavigation v-if="!search" />
 
     <updateChecker />
-
   </v-app>
 </template>
 
 <style>
 * {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+    Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
 .scroll-y {
   overflow-y: scroll !important; /* has to be scroll, not auto */
   -webkit-overflow-scrolling: touch !important;
 }
-html, body {
+html,
+body {
   background: black;
   overflow: hidden;
 }
 
-p, span, div {
+p,
+span,
+div {
   -webkit-user-select: none; /* Safari */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* IE10+/Edge */
@@ -95,7 +131,7 @@ p, span, div {
   margin: 0;
   position: absolute;
   transform: translateY(-10%);
-  width: 75%
+  width: 75%;
 }
 .searchButton {
   width: 100%;
@@ -104,7 +140,8 @@ p, span, div {
 </style>
 
 <script>
-import { App as CapacitorApp } from '@capacitor/app';
+import { App as CapacitorApp } from "@capacitor/app";
+import { mapState } from "vuex";
 export default {
   data: () => ({
     search: false,
@@ -112,11 +149,13 @@ export default {
     text: null,
     response: [],
   }),
-
+  beforeCreate() {
+    // initializes UI tweaks to the saved state
+    this.$store.commit("tweaks/initTweaks");
+  },
   mounted() {
     //---   Back Button Listener   ---//
-    CapacitorApp.addListener('backButton', ({canGoBack}) => {
-
+    CapacitorApp.addListener("backButton", ({ canGoBack }) => {
       //---   Back Closes Search   ---//
       if (this.search) {
         this.search = false;
@@ -130,19 +169,22 @@ export default {
     });
   },
   computed: {
+    ...mapState({
+      roundTweak: (state) => state.tweaks.roundTweak,
+    }),
     page: function () {
       const splitPath = this.$route.path.split("/");
       let pageName = splitPath[splitPath.length - 1];
       pageName = pageName.charAt(0).toUpperCase() + pageName.slice(1);
       return pageName || "Home";
-    }
+    },
   },
 
   methods: {
     textChanged() {
       this.$youtube.autoComplete(this.text, (res) => {
-        const data = res.replace(/^.*?\(/,'').replace(/\)$/,''); //Format Response
-        this.response = JSON.parse(data)[1]
+        const data = res.replace(/^.*?\(/, "").replace(/\)$/, ""); //Format Response
+        this.response = JSON.parse(data)[1];
       });
     },
 
@@ -162,8 +204,7 @@ export default {
       } else {
         this.search = true;
       }
-    }
-
-  }
-}
+    },
+  },
+};
 </script>

NUXT/nuxt.config.js

@@ -55,7 +55,7 @@ export default {
   vuetify: {
     customVariables: ['~/assets/variables.scss'],
     theme: {
-      dark: false,
+      dark: true,
       options: { customProperties: true },
       themes: {
         light: {
@@ -70,7 +70,7 @@ export default {
           primary: colors.red.darken2, //colors.blue.darken2
           primaryAlt: "#533",
           accent: "#333333",
-          accent2: "#33333",
+          accent2: "#333333",
           background: "#222",
           info: "#fff",
         }

NUXT/pages/mods/tweaks.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="py-1">
+    <v-card class="px-8 pt-6 ma-4">
+      <h3>Rounded Corners</h3>
+      <!-- // TODO: add tweaks for other components -->
+      <v-switch class="mt-6" disabled label="Reverse (disabled)" />
+      <v-slider
+        disabled
+        class="mr-2"
+        label="Outer (disabled)"
+        :max="4"
+        step="1"
+        thumb-size="64"
+      ></v-slider>
+      <v-slider
+        class="mr-2"
+        label="Inner"
+        v-model="roundTweak"
+        :max="4"
+        step="1"
+        thumb-size="64"
+      >
+        <template v-slot:thumb-label="{ value }">
+          <div
+            class="pa-4 white text-red red-text red--text"
+            :style="{ borderRadius: value * 3 + 'px !important' }"
+          ></div>
+        </template>
+      </v-slider>
+    </v-card>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    roundTweak: {
+      get() {
+        return this.$store.state.tweaks.roundTweak;
+      },
+      set(value) {
+        this.$store.commit("tweaks/setRoundTweak", value);
+      },
+    },
+  },
+};
+</script>

NUXT/pages/search.vue

@@ -1,6 +1,5 @@
 <template>
-  <div class="py-1">
-
+  <div>
     <center v-if="videos.length == 0">
       <v-skeleton-loader type="card-avatar, article, actions" />
       <v-skeleton-loader type="card-avatar, article, actions" />
@@ -9,11 +8,11 @@
     <v-list-item v-for="(video, index) in videos" :key="index">
       <v-card class="entry" :to="`/watch?v=${video.id}`">
         <v-card-text>
-          <div style="position: relative;">
+          <div style="position: relative">
             <v-img :src="video.thumbnails[video.thumbnails.length - 1].url" />
-            <div v-text="video.runtime" class="videoRuntimeFloat" style="color: #fff;" />
+            <div v-text="video.runtime" class="videoRuntimeFloat" style="color: #fff" />
           </div>
-          <div v-text="video.title" style="margin-top: 0.5em;" />
+          <div v-text="video.title" style="margin-top: 0.5em" />
           <div v-text="`${video.views} • ${video.uploaded}`" />
         </v-card-text>
       </v-card>
@@ -40,15 +39,15 @@
 export default {
   data() {
     return {
-      videos: []
-    }
+      videos: [],
+    };
   },
   mounted() {
-    const searchQuestion = this.$route.query.q
+    const searchQuestion = this.$route.query.q;
     const vm = this;
     this.$youtube.search(searchQuestion, (data) => {
       vm.videos = data;
-    })
-  }
-}
+    });
+  },
+};
 </script>

NUXT/pages/settings.vue

@@ -31,7 +31,7 @@ export default {
         { name: "General", icon: "mdi-cog", to: "", disabled: true },
         { name: "Theme", icon: "mdi-brush-variant", to: "/mods/theme" },
         { name: "Player", icon: "mdi-motion-play-outline", to: "", disabled: true },
-        { name: "UI Tweaker", icon: "mdi-television-guide", to: "", disabled: true },
+        { name: "UI Tweaker", icon: "mdi-television-guide", to: "/mods/tweaks" },
         { name: "Startup Options", icon: "mdi-restart", to: "/mods/startup" },
         { name: "Plugins", icon: "mdi-puzzle", to: "", disabled: true},
         { name: "Updates", icon: "mdi-cloud-download-outline", to: "/mods/updates" },

NUXT/store/tweaks/index.js

@@ -0,0 +1,18 @@
+export const state = () => ({
+    roundTweak: 0
+})
+export const mutations = {
+    initTweaks(state) {
+        // NOTE: localStorage is not reactive, so it will only be used on first load
+        // currently called beforeCreate() in pages/default.vue
+        if (process.client) {
+            state.roundTweak = localStorage.getItem("roundTweak") || 0
+        }
+    },
+    setRoundTweak (state, payload) {
+        if (!isNaN(payload)) {
+            state.roundTweak = payload
+            localStorage.setItem("roundTweak", payload)
+        }
+    }
+}