feat(settings): animate transition to submenu (background and sliding)

app/components/Settings/BottomScreen/Menus/TouchScreen/Menu.vue

@@ -1,8 +1,14 @@
 <script setup lang="ts">
-const props = defineProps<{
-  x: number;
-  y: number;
-}>();
+const props = withDefaults(
+  defineProps<{
+    x: number;
+    y: number;
+    opacity?: number;
+  }>(),
+  {
+    opacity: 1,
+  },
+);
 
 const { onRender } = useScreen();
 
@@ -26,6 +32,7 @@ const isAnyOtherMenuOpen = computed(() => {
 });
 
 onRender((ctx) => {
+  ctx.globalAlpha = props.opacity;
   if (isAnyOtherMenuOpen.value) {
     assets.images.settings.topScreen.touchScreen.touchScreenDisabled.draw(
       ctx,

app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue

@@ -7,7 +7,6 @@ const achievements = useAchievementsStore();
 const confirmationModal = useConfirmationModal();
 
 const { onRender, onClick } = useScreen();
-const { assets } = useAssets();
 
 const BAR_HEIGHT = 24;
 const MAX_RADIUS = 27;
@@ -276,8 +275,6 @@ onClick((mx, my) => {
 });
 
 onRender((ctx) => {
-  assets.images.home.topScreen.background.draw(ctx, 0, 0);
-
   // update crosshair position in all modes except paused
   if (state.value !== "paused") {
     if (horizontalFirst) {