From f9b25ec884ff030b3b0d0e094221340e0d803e72 Mon Sep 17 00:00:00 2001
From: Lars Baunwall <larslb@thinkability.dk>
Date: Thu, 22 Feb 2024 21:06:50 +0100
Subject: [PATCH] Clean up components and views. Make sure everything uses the
 Vue Composition API

---
 src/ui/src/components/AnglePointer.vue        |  74 +++++++
 src/ui/src/components/DebugOverlay.vue        |  23 ++
 .../components/{default.vue => Default.vue}   |   6 +-
 src/ui/src/components/MainArc.vue             |  37 ++++
 src/ui/src/components/VolumeArc.vue           |  30 +++
 src/ui/src/components/debug-overlay.vue       |  35 ----
 src/ui/src/components/main-circle-arc.vue     |  50 -----
 src/ui/src/components/volume-arc.vue          |  48 -----
 src/ui/src/main.ts                            |  10 +-
 src/ui/src/views/DeviceSimulator.vue          |   2 +-
 src/ui/src/views/MainMenuShell.vue            | 133 ++++++++++++
 .../{components/music.vue => views/Music.vue} |   0
 .../{components/radio.vue => views/Radio.vue} |   0
 src/ui/src/views/Shell.vue                    |   4 +-
 src/ui/src/views/bs5.vue                      | 197 ------------------
 15 files changed, 308 insertions(+), 341 deletions(-)
 create mode 100644 src/ui/src/components/AnglePointer.vue
 create mode 100644 src/ui/src/components/DebugOverlay.vue
 rename src/ui/src/components/{default.vue => Default.vue} (100%)
 create mode 100644 src/ui/src/components/MainArc.vue
 create mode 100644 src/ui/src/components/VolumeArc.vue
 delete mode 100644 src/ui/src/components/debug-overlay.vue
 delete mode 100644 src/ui/src/components/main-circle-arc.vue
 delete mode 100644 src/ui/src/components/volume-arc.vue
 create mode 100644 src/ui/src/views/MainMenuShell.vue
 rename src/ui/src/{components/music.vue => views/Music.vue} (100%)
 rename src/ui/src/{components/radio.vue => views/Radio.vue} (100%)
 delete mode 100644 src/ui/src/views/bs5.vue

diff --git a/src/ui/src/components/AnglePointer.vue b/src/ui/src/components/AnglePointer.vue
new file mode 100644
index 0000000..bd52962
--- /dev/null
+++ b/src/ui/src/components/AnglePointer.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { useUIStore } from '../stores/ui.ts';
+import arcs from "../utils/arcs.ts";
+
+const uiStore = useUIStore();
+
+const props = withDefaults(defineProps<{
+  radius: number
+}>(), {
+  radius: 1000,
+});
+</script>
+
+<template>
+  <svg id="anglePointer" width="1024" height="768" style="position: absolute; z-index: 100;">
+    <defs>
+      <radialGradient id="lineGradient">
+        <stop offset="0%" stop-color="rgba(102,153,255,0.45)" />
+        <stop offset="90%" stop-color="rgba(0,0,0,0)" />
+      </radialGradient>
+      <radialGradient id="dotGradient">
+        <stop offset="0%" stop-color="rgba(128,204,255,0.9)" />
+        <stop offset="40%" stop-color="rgba(128,204,255,0.4)" />
+        <stop offset="100%" stop-color="rgba(128,204,255,0)" />
+      </radialGradient>
+      <filter id="exposureFilter" x="0" y="0" width="100%" height="100%">
+        <feComponentTransfer>
+          <feFuncR type="linear" slope="2" />
+          <feFuncG type="linear" slope="2" />
+          <feFuncB type="linear" slope="2" />
+        </feComponentTransfer>
+      </filter>
+      <filter id="blurPointerFilter">
+        <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
+      </filter>
+      <filter id="blurPointFilter">
+        <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
+      </filter>
+    </defs>
+    <ellipse id="pointerDot"
+             :style="{
+               '--cx': `${arcs.getArcPoint(radius, 0, uiStore.wheelPointerAngle).x}px`,
+               '--cy': `${arcs.getArcPoint(radius, 0, uiStore.wheelPointerAngle).y}px`,
+               'transform': `rotate(${uiStore.wheelPointerAngle - 90}deg)`
+             }"
+             :rx="45"
+             :ry="25"
+             fill="url(#dotGradient)"
+             filter="url(#blurPointFilter)"
+    />
+    <ellipse id="pointerLine"
+             :style="{
+               '--cx': `${arcs.getArcPoint(radius, 0, uiStore.wheelPointerAngle).x}px`,
+               '--cy': `${arcs.getArcPoint(radius, 0, uiStore.wheelPointerAngle).y}px`,
+               'transform': `rotate(${uiStore.wheelPointerAngle - 90}deg)`
+             }"
+             :rx="40"
+             :ry="400"
+             fill="url(#lineGradient)"
+             filter="url(#exposureFilter) url(#blurPointerFilter)"
+    />
+  </svg>
+</template>
+
+<style scoped>
+
+#pointerDot, #pointerLine {
+  transition: all 100ms ease;
+  transform-origin: var(--cx) var(--cy);
+  cx: var(--cx);
+  cy: var(--cy);
+}
+
+</style>
\ No newline at end of file
diff --git a/src/ui/src/components/DebugOverlay.vue b/src/ui/src/components/DebugOverlay.vue
new file mode 100644
index 0000000..5c6d520
--- /dev/null
+++ b/src/ui/src/components/DebugOverlay.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useUIStore } from '../stores/ui';
+const uiStore = useUIStore();
+</script>
+
+<template>
+  <div style="z-index: 10000; position: fixed; top: 0%; right: 0%; opacity: 0.1; ">
+    <input type="number" v-model="uiStore.wheelPointerAngle" />
+    <input type="number" v-model="uiStore.volume" />
+  </div>
+  <div
+      style="z-index: 10000; position: fixed; top: 50%; right: 50px; opacity: 0.1; ">
+    <input style="transform: translateY(-50%) rotate(270deg);" type="range" min="150" max="210" step="0.001" v-model="uiStore.wheelPointerAngle" />
+  </div>
+  <div
+      style="z-index: 10000; position: fixed; top: 50%; right: 0px; opacity: 0.1; ">
+    <input style="transform: translateY(-50%) rotate(270deg);" type="range" min="0" max="100" step="1" v-model="uiStore.volume" />
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/ui/src/components/default.vue b/src/ui/src/components/Default.vue
similarity index 100%
rename from src/ui/src/components/default.vue
rename to src/ui/src/components/Default.vue
index 64d7214..63445cf 100644
--- a/src/ui/src/components/default.vue
+++ b/src/ui/src/components/Default.vue
@@ -1,12 +1,12 @@
+<script setup lang="ts">
+</script>
+
 <template>
   <div>
     Empty
   </div>
 </template>
 
-<script setup lang="ts">
-</script>
-
 <style scoped>
 
 </style>
\ No newline at end of file
diff --git a/src/ui/src/components/MainArc.vue b/src/ui/src/components/MainArc.vue
new file mode 100644
index 0000000..d9c0590
--- /dev/null
+++ b/src/ui/src/components/MainArc.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import {ref, withDefaults} from 'vue';
+import arcs from '../utils/arcs';
+
+const props = withDefaults(defineProps<{
+  radius?: number
+}>(), {
+  radius: 1000,
+});
+
+
+const startArcAngle = ref(158);
+const endArcAngle = ref(202);
+
+function describeArc(startAngle: number, endAngle: number) {
+  return arcs.describeArc(arcs.cx, arcs.cy, props.radius, startAngle, endAngle);
+}
+</script>
+
+<template>
+  <svg width="1024" height="768" style="position: absolute; z-index: 90;">
+    <defs>
+      <linearGradient id="gradient" gradientTransform="rotate(90)">
+        <stop offset="0%" stop-color="rgba(102,153,255,0)"/>
+        <stop offset="5%" stop-color="rgba(102,153,255,1)"/>
+        <stop offset="95%" stop-color="rgba(0,255,204,1)"/>
+        <stop offset="100%" stop-color="rgba(0,255,204,0)"/>
+      </linearGradient>
+    </defs>
+    <!-- Arc path for reference -->
+    <path :d="describeArc(startArcAngle, endArcAngle)" fill="none" stroke="url(#gradient)"
+          stroke-width="3" stroke-linecap="round"/>
+  </svg>
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/ui/src/components/VolumeArc.vue b/src/ui/src/components/VolumeArc.vue
new file mode 100644
index 0000000..dfe1372
--- /dev/null
+++ b/src/ui/src/components/VolumeArc.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {computed, ref} from 'vue';
+import arcs from '../utils/arcs';
+import { useUIStore } from '../stores/ui';
+
+const uiStore = useUIStore();
+
+const radius = ref(270);
+const startArcAngle = ref(95);
+const endArcAngle = ref(265);
+
+const translateVolume = computed(() => ((uiStore.volume - 0) * (endArcAngle.value - startArcAngle.value)) / (100 - 0) + startArcAngle.value);
+</script>
+
+<template>
+  <svg width="1024" height="768" style="position: absolute; z-index: 90; opacity: 0.5;">
+    <defs>
+      <linearGradient id="gradient">
+        <stop offset="5%" stop-color="rgba(102,153,255,0.3)" />
+        <stop offset="95%" stop-color="rgba(102,153,204,0.3)" />
+      </linearGradient>
+    </defs>
+    <!-- Arc path for reference -->
+    <path :d="arcs.describeArc(arcs.cx, arcs.cy, radius, startArcAngle, translateVolume)" fill="none" stroke="url(#gradient)"
+          stroke-width="10" stroke-linecap="round" />
+  </svg>
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/ui/src/components/debug-overlay.vue b/src/ui/src/components/debug-overlay.vue
deleted file mode 100644
index 5c96ce7..0000000
--- a/src/ui/src/components/debug-overlay.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-    <div style="z-index: 10000; position: fixed; top: 0%; right: 0%; opacity: 0.1; ">
-        <input type="number" v-model="uiStore.wheelPointerAngle" />
-        <input type="number" v-model="uiStore.volume" />
-    </div>
-    <div
-        style="z-index: 10000; position: fixed; top: 50%; right: 50px; opacity: 0.1; ">
-        <input style="transform: translateY(-50%) rotate(270deg);" type="range" min="150" max="210" step="0.001" v-model="uiStore.wheelPointerAngle" />
-    </div>
-    <div
-        style="z-index: 10000; position: fixed; top: 50%; right: 0px; opacity: 0.1; ">
-        <input style="transform: translateY(-50%) rotate(270deg);" type="range" min="0" max="100" step="1" v-model="uiStore.volume" />
-    </div>
-</template>
-    
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { useUIStore } from '../stores/ui';
-
-export default defineComponent({
-    name: 'BS5DebugOverlay',
-    setup() {
-        const uiStore = useUIStore();
-        return { uiStore };
-    },
-    data() {
-        return {
-        };
-    },
-    computed: {
-    }
-});
-</script>
-    
-<style scoped></style>
\ No newline at end of file
diff --git a/src/ui/src/components/main-circle-arc.vue b/src/ui/src/components/main-circle-arc.vue
deleted file mode 100644
index 78cc0db..0000000
--- a/src/ui/src/components/main-circle-arc.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-    <svg width="1024" height="768" style="position: absolute; z-index: 90;">
-        <defs>
-            <linearGradient id="gradient" gradientTransform="rotate(90)">
-                <stop offset="0%" stop-color="rgba(102,153,255,0)" />
-                <stop offset="5%" stop-color="rgba(102,153,255,1)" />
-                <stop offset="95%" stop-color="rgba(0,255,204,1)" />
-                <stop offset="100%" stop-color="rgba(0,255,204,0)" />
-            </linearGradient>
-        </defs>
-        <!-- Arc path for reference -->
-        <path :d="describeArc(startArcAngle, endArcAngle)" fill="none" stroke="url(#gradient)"
-            stroke-width="3" stroke-linecap="round" />
-    </svg>
-</template>
-  
-<script lang="ts">
-import { defineComponent } from 'vue';
-import arcs from '../utils/arcs';
-
-export default defineComponent({
-    name: 'MainCircleArc',
-    props: {
-      radius: {
-        type: Number,
-        required: true,
-        default: 1000,
-      }
-    },
-    setup() {
-        return {};
-    },
-    data() {
-        return {
-            startArcAngle: 158,
-            endArcAngle: 202,
-        };
-    },
-    computed: {
-    },
-    methods: {
-        describeArc(startAngle: number, endAngle: number) {
-            return arcs.describeArc(arcs.cx, arcs.cy, this.radius, startAngle, endAngle);
-        },
-    },
-});
-</script>
-  
-<style scoped>
-</style>../utils/arcs
\ No newline at end of file
diff --git a/src/ui/src/components/volume-arc.vue b/src/ui/src/components/volume-arc.vue
deleted file mode 100644
index 1147ddc..0000000
--- a/src/ui/src/components/volume-arc.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-    <svg width="1024" height="768" style="position: absolute; z-index: 90; opacity: 0.5;">
-        <defs>
-            <linearGradient id="gradient">
-                <stop offset="5%" stop-color="rgba(102,153,255,0.3)" />
-                <stop offset="95%" stop-color="rgba(102,153,204,0.3)" />
-            </linearGradient>
-        </defs>
-        <!-- Arc path for reference -->
-        <path :d="describeArc(radius, startArcAngle, translateVolume)" fill="none" stroke="url(#gradient)"
-            stroke-width="10" stroke-linecap="round" />
-    </svg>
-</template>
-  
-<script lang="ts">
-import { defineComponent } from 'vue';
-import arcs from '../utils/arcs';
-import { useUIStore } from '../stores/ui';
-
-export default defineComponent({
-    name: 'VolumeArc',
-    setup() {
-        const uiStore = useUIStore();
-        return { uiStore };
-    },
-    data() {
-        return {
-            radius: 270,
-            startArcAngle: 95,
-            endArcAngle: 265,
-        };
-    },
-    computed: {
-        translateVolume(): number {
-            // Map the input value from 0-100 to 90-270
-            return ((this.uiStore.volume - 0) * (this.endArcAngle - this.startArcAngle)) / (100 - 0) + this.startArcAngle;
-        }
-    },
-    methods: {
-        describeArc(radius: number, startAngle: number, endAngle: number) {
-            return arcs.describeArc(arcs.cx, arcs.cy, radius, startAngle, endAngle);            
-        }
-    },
-});
-</script>
-  
-<style scoped>
-</style>
\ No newline at end of file
diff --git a/src/ui/src/main.ts b/src/ui/src/main.ts
index d0e6d25..4b53c7b 100644
--- a/src/ui/src/main.ts
+++ b/src/ui/src/main.ts
@@ -7,14 +7,14 @@ import App from "./App.vue";
 
 import {Subject, filter, bufferCount} from "rxjs";
 
-import DefaultView from "./components/default.vue";
-import MusicView from "./components/music.vue";
-import RadioView from "./components/radio.vue";
+import DefaultView from "./components/Default.vue";
+import MusicView from "./views/Music.vue";
+import RadioView from "./views/Radio.vue";
 import { listen } from "@tauri-apps/api/event";
 import { useUIStore } from "./stores/ui";
 import { translateToRange } from "./utils/arcs";
 import DeviceSim from "./views/DeviceSimulator.vue";
-import Bs5Shell from "./views/bs5.vue";
+import MainMenuShell from "./views/MainMenuShell.vue";
 import Shell from "./views/Shell.vue";
 
 const router = createRouter({
@@ -29,7 +29,7 @@ const router = createRouter({
                 if(shell === 'sim') {
                     return { component: DeviceSim, shell: 'sim' };
                 } else {
-                    return { component: Bs5Shell, shell: 'default' };
+                    return { component: MainMenuShell, shell: 'default' };
                 }
             },
             children: [ 
diff --git a/src/ui/src/views/DeviceSimulator.vue b/src/ui/src/views/DeviceSimulator.vue
index 1b22971..1b4d5e5 100644
--- a/src/ui/src/views/DeviceSimulator.vue
+++ b/src/ui/src/views/DeviceSimulator.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import BS5Shell from "./bs5.vue";
+import BS5Shell from "./MainMenuShell.vue";
 import {useUIStore} from "../stores/ui.ts";
 
 const uiStore = useUIStore();
diff --git a/src/ui/src/views/MainMenuShell.vue b/src/ui/src/views/MainMenuShell.vue
new file mode 100644
index 0000000..1befb52
--- /dev/null
+++ b/src/ui/src/views/MainMenuShell.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="container">
+    <MainCircleArc :radius="radius"/>
+    <ArcContentFlow :radius=300>
+      <template v-slot:0>
+        <div>Test 1</div>
+      </template>
+      <template v-slot:1>
+        <div>Test 2</div>
+      </template>
+      <template v-slot:2>
+        <div>Test 3</div>
+      </template>
+    </ArcContentFlow>
+    <VolumeArc/>
+    <AnglePointer :radius="radius"/>
+    <div style="position: absolute; top: 20px; left: 180px; z-index: 1; width: 820px; height: 700px;">
+      <router-view v-slot="{ Component }">
+        <transition name="slide-up" mode="out-in">
+          <component :is="Component"/>
+        </transition>
+      </router-view>
+    </div>
+
+    <div v-for="(item, index) in menuItems" :key="index" class="list-item" :style="menuItemStyle(index)"
+         :class="{ selectedItem: isSelectedItem(index) }">
+      {{ item.title }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, CSSProperties, ref} from 'vue';
+import {useRoute, useRouter} from 'vue-router';
+import {useUIStore} from '../stores/ui.ts';
+import arcs from '../utils/arcs.ts';
+import MainCircleArc from '../components/MainArc.vue';
+import VolumeArc from '../components/VolumeArc.vue';
+import ArcContentFlow from '../components/ArcContentFlow.vue';
+import AnglePointer from "../components/AnglePointer.vue";
+
+const router = useRouter();
+const uiStore = useUIStore();
+
+const route = useRoute();
+
+const menuItems = ref([
+  {title: 'SETTINGS', path: ''},
+  {title: 'SOURCES', path: ''},
+  {title: 'N.RADIO', path: 'radio'},
+  {title: 'N.MUSIC', path: 'music'}
+]);
+const radius = ref(1000);
+const angleStep = ref(7);
+
+const startItemAngle = computed(() => {
+  const totalSpan = angleStep.value * (menuItems.value.length - 1);
+  return 180 - totalSpan / 2;
+});
+
+function menuItemStyle(index: number): CSSProperties {
+  const itemAngle = startItemAngle.value + index * angleStep.value;
+  const position = arcs.getArcPoint(radius.value, 20, itemAngle);
+  const divWidth = 100;
+  const divHeight = 50;
+  return {
+    position: 'absolute',
+    left: `${position.x - divWidth}px`,
+    top: `${position.y - divHeight / 2}px`,
+    width: `${divWidth}px`,
+    height: `${divHeight}px`,
+  };
+}
+
+const selectedMenuItem = ref(-1);
+
+function isSelectedItem(index: number) {
+  const itemAngle = startItemAngle.value + index * angleStep.value;
+  const diff = Math.abs(uiStore.wheelPointerAngle - itemAngle);
+  if (diff <= 2) {
+    if (selectedMenuItem.value !== index) {
+      uiStore.tick();
+      selectedMenuItem.value = index;
+      router.push({path: `/${route.params.shell ?? 'default'}/${menuItems.value[index].path}`});
+    }
+    return true;
+  }
+  return false;
+}
+
+</script>
+
+<style scoped>
+.container {
+  background-color: black;
+  width: 100%;
+  height: 1000px;
+  cursor: none;
+  overflow: hidden;
+}
+
+.list-item {
+  z-index: 1000;
+  font-weight: 100;
+  font-size: 14px;
+  color: white;
+  display: flex;
+  justify-content: right;
+  align-items: center;
+  transition: font-weight 0.5s ease-in-out;
+}
+
+.list-item.selectedItem {
+  font-weight: bold;
+  transition: font-weight 0.5s ease-in-out;
+}
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: all 0.25s ease-out;
+}
+
+.slide-up-enter-from {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+</style>
\ No newline at end of file
diff --git a/src/ui/src/components/music.vue b/src/ui/src/views/Music.vue
similarity index 100%
rename from src/ui/src/components/music.vue
rename to src/ui/src/views/Music.vue
diff --git a/src/ui/src/components/radio.vue b/src/ui/src/views/Radio.vue
similarity index 100%
rename from src/ui/src/components/radio.vue
rename to src/ui/src/views/Radio.vue
diff --git a/src/ui/src/views/Shell.vue b/src/ui/src/views/Shell.vue
index fae5143..13f4ab7 100644
--- a/src/ui/src/views/Shell.vue
+++ b/src/ui/src/views/Shell.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { defineProps } from 'vue';
-import Bs5Shell from "./bs5.vue";
+import MainMenuShell from "./MainMenuShell.vue";
 import { onMounted, onUnmounted, computed } from 'vue';
 
 const props = defineProps({
   component: {
     type: Object,
-    default: () => Bs5Shell,
+    default: () => MainMenuShell,
   },
   shell: {
     type: String,
diff --git a/src/ui/src/views/bs5.vue b/src/ui/src/views/bs5.vue
deleted file mode 100644
index da48243..0000000
--- a/src/ui/src/views/bs5.vue
+++ /dev/null
@@ -1,197 +0,0 @@
-<template>
-  <div class="container">
-  <MainCircleArc :radius="radius"/>
-  <ArcContentFlow :radius=300>
-    <template v-slot:0>
-      <div>Test 1</div>
-    </template>
-    <template v-slot:1>
-      <div>Test 2</div>
-    </template>
-    <template v-slot:2>
-      <div>Test 3</div>
-    </template>
-  </ArcContentFlow>
-  <VolumeArc />
-  <div style="position: absolute; top: 20px; left: 180px; z-index: 1; width: 820px; height: 700px;">
-    <router-view v-slot="{ Component }">
-      <transition name="slide-up" mode="out-in">
-        <component :is="Component" />
-      </transition>
-    </router-view>
-  </div>
-  <svg id="anglePointer" width="1024" height="768" style="position: absolute; z-index: 100;">
-    <defs>
-    <radialGradient id="lineGradient"> 
-      <stop offset="0%" stop-color="rgba(102,153,255,0.45)" />
-      <stop offset="90%" stop-color="rgba(0,0,0,0)" />
-    </radialGradient>
-    <radialGradient id="dotGradient"> 
-      <stop offset="0%" stop-color="rgba(128,204,255,0.9)" />
-      <stop offset="40%" stop-color="rgba(128,204,255,0.4)" />
-      <stop offset="100%" stop-color="rgba(128,204,255,0)" />
-    </radialGradient>
-    <filter id="exposureFilter" x="0" y="0" width="100%" height="100%">
-      <feComponentTransfer>
-        <feFuncR type="linear" slope="2" />
-        <feFuncG type="linear" slope="2" />
-        <feFuncB type="linear" slope="2" />
-      </feComponentTransfer>
-    </filter>
-    <filter id="blurPointerFilter">
-      <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
-    </filter>
-    <filter id="blurPointFilter">
-      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
-    </filter>
-  </defs>
-    <ellipse id="pointerDot"
-             :style="{
-               '--cx': `${getArcPoint(radius, 0, uiStore.wheelPointerAngle).x}px`,
-               '--cy': `${getArcPoint(radius, 0, uiStore.wheelPointerAngle).y}px`,
-               'transform': `rotate(${uiStore.wheelPointerAngle - 90}deg)`
-             }"
-             :rx="45"
-      :ry="25"
-      fill="url(#dotGradient)"
-      filter="url(#blurPointFilter)"
-    />
-    <ellipse id="pointerLine"
-             :style="{
-               '--cx': `${getArcPoint(radius, 0, uiStore.wheelPointerAngle).x}px`,
-               '--cy': `${getArcPoint(radius, 0, uiStore.wheelPointerAngle).y}px`,
-               'transform': `rotate(${uiStore.wheelPointerAngle - 90}deg)`
-             }"
-             :rx="40"
-      :ry="400"
-      fill="url(#lineGradient)"
-      filter="url(#exposureFilter) url(#blurPointerFilter)"
-    />
-  </svg>
-  <div v-for="(item, index) in menuItems" :key="index" class="list-item" :style="menuItemStyle(index)" :class="{ selectedItem: isSelectedItem(index) }">
-    {{ item.title }}
-  </div>
-    </div>
-</template>
-
-<script lang="ts">
-import {CSSProperties, defineComponent} from 'vue';
-import { useRouter } from 'vue-router';
-import { useUIStore } from '../stores/ui.ts';
-import arcs from '../utils/arcs.ts';
-import MainCircleArc from '../components/main-circle-arc.vue';
-import VolumeArc from '../components/volume-arc.vue';
-import ArcContentFlow from '../components/ArcContentFlow.vue';
-
-export default defineComponent({
-  name: 'BS5Shell',
-  components: {
-    MainCircleArc, VolumeArc, ArcContentFlow
-  },
-  setup() {
-    const router = useRouter();
-    const uiStore = useUIStore();
-
-    return { router, uiStore };
-  },
-  data() {
-    return {
-      menuItems: [{title: 'SETTINGS', path: ''}, {title: 'SOURCES', path: ''}, {title: 'N.RADIO', path: 'radio'}, {title: 'N.MUSIC', path: 'music'} ],
-      radius: 1000, // Adjusted radius to fit within the viewport
-      angleStep: 7, // Adjust this value to change the spacing between menu items
-    };
-  },
-  computed: {
-    startItemAngle(): number {
-      const totalSpan = this.angleStep * (this.menuItems.length - 1);
-      return 180 - totalSpan / 2;
-    },
-  },
-  methods: {
-    menuItemStyle(index: number) :CSSProperties {
-      const itemAngle = this.startItemAngle + index * this.angleStep;
-      const position = this.getArcPoint(this.radius, 20, itemAngle);
-      const divWidth = 100;
-      const divHeight = 50;
-      return {
-        position: 'absolute',
-        left: `${position.x - divWidth}px`,
-        top: `${position.y - divHeight / 2}px`,
-        width: `${divWidth}px`,
-        height: `${divHeight}px`,
-      };
-    },
-    isSelectedItem(index: number) {
-      const itemAngle = this.startItemAngle + index * this.angleStep;
-      const diff = Math.abs(this.uiStore.wheelPointerAngle - itemAngle);
-      if (diff <= 1) {
-        this.uiStore.tick();
-
-        this.router.push({ path: `/${this.$route.params.shell ?? 'default'}/${this.menuItems[index].path}` });
-        return true;
-      }
-      return false;
-    },
-    polarToCartesian(radius: number, angleInDegrees: number) {
-      const angleInRadians = (angleInDegrees * Math.PI) / 180.0;
-      return {
-        x: arcs.cx + radius * Math.cos(angleInRadians),
-        y: arcs.cy + radius * Math.sin(angleInRadians),
-      };
-    },
-    getArcPoint(radius: number, radiusPadding: number, angle: number) {
-      return this.polarToCartesian(radius + radiusPadding, angle);
-    },
-  },
-});
-</script>
-
-<style scoped>
-.container {
-  background-color: black;
-  width:100%;
-  height: 1000px;
-  cursor: none;
-  overflow: hidden;
-}
-
-.list-item {
-  z-index: 1000;
-  font-weight: 100;
-  font-size: 14px;
-  color: white;
-  display: flex;
-  justify-content: right;
-  align-items: center;
-  transition: font-weight 0.5s ease-in-out;
-}
-
-.list-item.selectedItem {
-  font-weight: bold;
-  transition: font-weight 0.5s ease-in-out;
-}
-
-/* Add transition and transformation effects */
-#pointerDot, #pointerLine {
-  transition: all 100ms ease;
-  transform-origin: var(--cx) var(--cy);
-  cx: var(--cx);
-  cy: var(--cy);
-}
-
-.slide-up-enter-active,
-.slide-up-leave-active {
-  transition: all 0.25s ease-out;
-}
-
-.slide-up-enter-from {
-  opacity: 0;
-  transform: translateY(30px);
-}
-
-.slide-up-leave-to {
-  opacity: 0;
-  transform: translateY(-30px);
-}
-
-</style>
\ No newline at end of file