feat: reposition solver controls to a dropdown

Moved the Kociemba/Beginner solve options into a sleek dropdown menu positioned above the Scramble button on the left side of the screen. This ensures the solver controls no longer obstruct the programmatic move queue at the bottom.

src/components/common/Line3D.vue

@@ -1,55 +1,55 @@
 <script setup>
-import { computed } from 'vue';
+import { computed } from "vue";
 
 const props = defineProps({
   start: {
     type: Object,
-    required: true // {x, y, z}
+    required: true, // {x, y, z}
   },
   end: {
     type: Object,
-    required: true // {x, y, z}
+    required: true, // {x, y, z}
   },
   color: {
     type: String,
-    default: 'var(--text-color, #fff)'
+    default: "var(--text-color, #fff)",
   },
   thickness: {
     type: Number,
-    default: 1
-  }
+    default: 1,
+  },
 });
 
 const style = computed(() => {
   const dx = props.end.x - props.start.x;
   const dy = props.end.y - props.start.y;
   const dz = props.end.z - props.start.z;
-  
+
   const length = Math.sqrt(dx * dx + dy * dy + dz * dz);
-  
+
   if (length === 0) return {};
 
   const midX = (props.start.x + props.end.x) / 2;
   const midY = (props.start.y + props.end.y) / 2;
   const midZ = (props.start.z + props.end.z) / 2;
-  
+
   // Rotation
   // Yaw (around Y axis)
   const yaw = Math.atan2(dz, dx);
   // Pitch (around Z axis)
   const pitch = Math.atan2(dy, Math.sqrt(dx * dx + dz * dz));
-  
+
   return {
     width: `${length}px`,
     height: `${props.thickness}px`,
     backgroundColor: props.color,
-    position: 'absolute',
-    top: '0',
-    left: '0',
-    transformOrigin: 'center center',
+    position: "absolute",
+    top: "0",
+    left: "0",
+    transformOrigin: "center center",
     transform: `translate3d(${midX}px, ${midY}px, ${midZ}px) rotateY(${-yaw}rad) rotateZ(${pitch}rad) translate(-50%, -50%)`,
     opacity: 0.3, // Delicate
-    pointerEvents: 'none'
+    pointerEvents: "none",
   };
 });
 </script>