removed ripple effect, cleaned app a bit

.vscode/settings.json

@@ -15,5 +15,6 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  },
+  "todo-tree.tree.scanMode": "workspace"
 }

quasar.config.js

@@ -99,7 +99,9 @@ module.exports = configure(function (/* ctx */) {
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
     framework: {
-      config: {},
+      config: {
+        ripple: false,
+      },
 
       // iconSet: 'material-icons', // Quasar icon set
       // lang: 'en-US', // Quasar language pack

src/components/GlobalWindowButtons/GlobalWindowButtons.vue

@@ -7,7 +7,6 @@
     <!-- Minimize button -->
     <q-btn
       flat
-      :ripple="false"
       dark
       size="xs"
       class="globalWindowButtons__minimize"
@@ -26,7 +25,6 @@
     <!-- MinMax button -->
     <q-btn
       flat
-      :ripple="false"
       dark
       size="xs"
       class="globalWindowButtons__resize"
@@ -45,7 +43,6 @@
     <!-- Close button -->
     <q-btn
       flat
-      :ripple="false"
       dark
       size="xs"
       class="globalWindowButtons__close"

src/globals.d.ts

@@ -2,8 +2,6 @@ import { I_extraEnvVariablesAPI } from 'app/interfaces/I_extraEnvVariablesAPI'
 import { I_faWindowControlAPI } from 'app/interfaces/I_faWindowControlAPI'
 import { I_faDevToolsControl } from 'app/interfaces/I_faDevToolsControl'
 
-export {}
-
 declare global{
     interface Window {
           faWindowControlAPI: I_faWindowControlAPI,

src/layouts/ComponentTestingLayout.vue

@@ -6,10 +6,5 @@
   </q-layout>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'ComponentTestingLayout'
-})
 </script>

src/layouts/MainLayout.vue

@@ -1,29 +1,16 @@
 <template>
-  <q-layout view="lHh Lpr lFf">
+  <q-layout view="hHh Lpr lFf">
     <GlobalWindowButtons />
-    <q-header elevated>
+    <q-header
-      <q-toolbar>
+      elevated
-        <q-btn
+      class="bg-dark"
-          flat
+    >
-          dense
+      <AppControlMenus />
-          round
-          icon="menu"
-          aria-label="Menu"
-          @click="toggleLeftDrawer"
-        />
-
-        <q-toolbar-title>
-          {{ $t('app.name') }}
-        </q-toolbar-title>
-
-        <div>Quasar v{{ $q.version }}</div>
-      </q-toolbar>
     </q-header>
 
     <q-drawer
-      v-model="leftDrawerOpen"
       show-if-above
-      bordered
+      dark
     >
       <q-list>
         <q-item-label
@@ -40,26 +27,8 @@
   </q-layout>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, ref } from 'vue'
 import GlobalWindowButtons from 'components/GlobalWindowButtons/GlobalWindowButtons.vue'
+import AppControlMenus from 'components/AppControlMenus/AppControlMenus.vue'
 
-export default defineComponent({
-  name: 'MainLayout',
-
-  components: {
-    GlobalWindowButtons
-  },
-
-  setup () {
-    const leftDrawerOpen = ref(false)
-
-    return {
-      leftDrawerOpen,
-      toggleLeftDrawer () {
-        leftDrawerOpen.value = !leftDrawerOpen.value
-      }
-    }
-  }
-})
 </script>

src/pages/IndexPage.vue

@@ -1,17 +1,6 @@
 <template>
   <q-page class="row">
     <FantasiaMascotImage width="400px" />
-    <div>
-      <q-btn
-        class="q-mt-xl"
-        color="primary"
-        outline
-        size="xl"
-        @click="toggle()"
-      >
-        Toggle
-      </q-btn>
-    </div>
 
     <div>
       <div
@@ -27,8 +16,4 @@
 <script lang="ts" setup>
 import FantasiaMascotImage from 'src/components/FantasiaMascotImage/FantasiaMascotImage.vue'
 
-const toggle = () => {
-  window.faDevToolsControlAPI.toggleDevTools()
-}
-
 </script>