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/NavBar.vue

@@ -1,16 +1,16 @@
 <script setup>
-import { Sun, Moon, Grid2x2 } from 'lucide-vue-next';
-import { ref, onMounted } from 'vue';
-import { useSettings } from '../composables/useSettings';
+import { Sun, Moon, Grid2x2 } from "lucide-vue-next";
+import { ref, onMounted } from "vue";
+import { useSettings } from "../composables/useSettings";
 
 const { isCubeTranslucent, toggleCubeTranslucent } = useSettings();
 const isDark = ref(true);
 
 const setTheme = (dark) => {
   isDark.value = dark;
-  const theme = dark ? 'dark' : 'light';
+  const theme = dark ? "dark" : "light";
   document.documentElement.dataset.theme = theme;
-  localStorage.setItem('theme', theme);
+  localStorage.setItem("theme", theme);
 };
 
 const toggleTheme = () => {
@@ -18,9 +18,9 @@ const toggleTheme = () => {
 };
 
 onMounted(() => {
-  const savedTheme = localStorage.getItem('theme');
+  const savedTheme = localStorage.getItem("theme");
   if (savedTheme) {
-    setTheme(savedTheme === 'dark');
+    setTheme(savedTheme === "dark");
   } else {
     setTheme(true);
   }
@@ -38,14 +38,22 @@ onMounted(() => {
       <button
         class="btn-neon nav-btn icon-only"
         @click="toggleCubeTranslucent"
-        :title="isCubeTranslucent ? 'Wyłącz przezroczystość kostki' : 'Włącz przezroczystość kostki'"
+        :title="
+          isCubeTranslucent
+            ? 'Wyłącz przezroczystość kostki'
+            : 'Włącz przezroczystość kostki'
+        "
         :class="{ active: isCubeTranslucent }"
       >
         <Grid2x2 :size="20" />
       </button>
 
       <!-- Theme Toggle -->
-      <button class="btn-neon nav-btn icon-only" @click="toggleTheme" :title="isDark ? 'Przełącz na jasny' : 'Przełącz na ciemny'">
+      <button
+        class="btn-neon nav-btn icon-only"
+        @click="toggleTheme"
+        :title="isDark ? 'Przełącz na jasny' : 'Przełącz na ciemny'"
+      >
         <Sun v-if="isDark" :size="20" />
         <Moon v-else :size="20" />
       </button>

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>

src/components/renderers/CubeMoveControls.vue

@@ -1,5 +1,31 @@
 <script setup>
-const emit = defineEmits(['move', 'scramble'])
+import { ref, onMounted, onUnmounted } from "vue";
+const emit = defineEmits(["move", "scramble", "solve"]);
+
+const showSolveDropdown = ref(false);
+
+const toggleDropdown = () => {
+  showSolveDropdown.value = !showSolveDropdown.value;
+};
+
+const triggerSolve = (method) => {
+  showSolveDropdown.value = false;
+  emit("solve", method);
+};
+
+// Close dropdown when clicking outside
+const closeDropdown = (e) => {
+  if (!e.target.closest(".solve-dropdown-wrapper")) {
+    showSolveDropdown.value = false;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener("click", closeDropdown);
+});
+onUnmounted(() => {
+  document.removeEventListener("click", closeDropdown);
+});
 </script>
 
 <template>
@@ -11,14 +37,26 @@ const emit = defineEmits(['move', 'scramble'])
         <button class="btn-neon move-btn" @click="emit('move', 'L')">L</button>
       </div>
       <div class="controls-row">
-        <button class="btn-neon move-btn" @click="emit('move', 'U-prime')">U'</button>
-        <button class="btn-neon move-btn" @click="emit('move', 'D-prime')">D'</button>
-        <button class="btn-neon move-btn" @click="emit('move', 'L-prime')">L'</button>
+        <button class="btn-neon move-btn" @click="emit('move', 'U-prime')">
+          U'
+        </button>
+        <button class="btn-neon move-btn" @click="emit('move', 'D-prime')">
+          D'
+        </button>
+        <button class="btn-neon move-btn" @click="emit('move', 'L-prime')">
+          L'
+        </button>
       </div>
       <div class="controls-row">
-        <button class="btn-neon move-btn" @click="emit('move', 'U2')">U2</button>
-        <button class="btn-neon move-btn" @click="emit('move', 'D2')">D2</button>
-        <button class="btn-neon move-btn" @click="emit('move', 'L2')">L2</button>
+        <button class="btn-neon move-btn" @click="emit('move', 'U2')">
+          U2
+        </button>
+        <button class="btn-neon move-btn" @click="emit('move', 'D2')">
+          D2
+        </button>
+        <button class="btn-neon move-btn" @click="emit('move', 'L2')">
+          L2
+        </button>
       </div>
     </div>
 
@@ -29,20 +67,48 @@ const emit = defineEmits(['move', 'scramble'])
         <button class="btn-neon move-btn" @click="emit('move', 'B')">B</button>
       </div>
       <div class="controls-row">
-        <button class="btn-neon move-btn" @click="emit('move', 'R-prime')">R'</button>
-        <button class="btn-neon move-btn" @click="emit('move', 'F-prime')">F'</button>
-        <button class="btn-neon move-btn" @click="emit('move', 'B-prime')">B'</button>
+        <button class="btn-neon move-btn" @click="emit('move', 'R-prime')">
+          R'
+        </button>
+        <button class="btn-neon move-btn" @click="emit('move', 'F-prime')">
+          F'
+        </button>
+        <button class="btn-neon move-btn" @click="emit('move', 'B-prime')">
+          B'
+        </button>
       </div>
       <div class="controls-row">
-        <button class="btn-neon move-btn" @click="emit('move', 'R2')">R2</button>
-        <button class="btn-neon move-btn" @click="emit('move', 'F2')">F2</button>
-        <button class="btn-neon move-btn" @click="emit('move', 'B2')">B2</button>
+        <button class="btn-neon move-btn" @click="emit('move', 'R2')">
+          R2
+        </button>
+        <button class="btn-neon move-btn" @click="emit('move', 'F2')">
+          F2
+        </button>
+        <button class="btn-neon move-btn" @click="emit('move', 'B2')">
+          B2
+        </button>
       </div>
     </div>
 
-    <button class="btn-neon move-btn scramble-btn" @click="emit('scramble')">
-      Scramble
-    </button>
+    <div class="bottom-left-controls">
+      <div class="solve-dropdown-wrapper">
+        <button class="btn-neon move-btn solve-btn" @click="toggleDropdown">
+          Solve ▾
+        </button>
+        <div v-if="showSolveDropdown" class="solve-dropdown-menu">
+          <button class="dropdown-item" @click="triggerSolve('kociemba')">
+            Kociemba (Optimal)
+          </button>
+          <button class="dropdown-item" @click="triggerSolve('beginner')">
+            Beginner (Human)
+          </button>
+        </div>
+      </div>
+
+      <button class="btn-neon move-btn scramble-btn" @click="emit('scramble')">
+        Scramble
+      </button>
+    </div>
   </div>
 </template>
 
@@ -77,11 +143,58 @@ const emit = defineEmits(['move', 'scramble'])
   padding: 0 10px;
 }
 
-.scramble-btn {
+.bottom-left-controls {
   position: absolute;
   bottom: 72px;
   left: 24px;
   z-index: 50;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.solve-dropdown-wrapper {
+  position: relative;
+}
+
+.solve-dropdown-menu {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 8px;
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 180px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+  animation: fadeIn 0.2s ease-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.dropdown-item {
+  background: transparent;
+  color: #fff;
+  border: none;
+  padding: 8px 12px;
+  text-align: left;
+  border-radius: 4px;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 0.9rem;
+  transition: background 0.2s;
+}
+
+.dropdown-item:hover {
+  background: rgba(255, 255, 255, 0.1);
 }
 </style>
-

src/components/renderers/MoveHistoryPanel.vue

@@ -1,96 +1,99 @@
 <script setup>
-import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from "vue";
 
 const props = defineProps({
   moves: {
     type: Array,
-    required: true
-  }
-})
+    required: true,
+  },
+});
 
-const emit = defineEmits(['reset', 'copy', 'add-moves', 'open-add-modal'])
+const emit = defineEmits(["reset", "copy", "add-moves", "open-add-modal"]);
 
-const MIN_MOVES_COLUMN_GAP = 6
+const MIN_MOVES_COLUMN_GAP = 6;
 
-const movesHistoryEl = ref(null)
-const samplePillEl = ref(null)
-const movesPerRow = ref(0)
-const movesColumnGap = ref(MIN_MOVES_COLUMN_GAP)
+const movesHistoryEl = ref(null);
+const samplePillEl = ref(null);
+const movesPerRow = ref(0);
+const movesColumnGap = ref(MIN_MOVES_COLUMN_GAP);
 
-const displayMoves = computed(() => props.moves || [])
+const displayMoves = computed(() => props.moves || []);
 
 const moveRows = computed(() => {
-  const perRow = movesPerRow.value || displayMoves.value.length || 1
-  const rows = []
-  const all = displayMoves.value
+  const perRow = movesPerRow.value || displayMoves.value.length || 1;
+  const rows = [];
+  const all = displayMoves.value;
   for (let i = 0; i < all.length; i += perRow) {
-    rows.push(all.slice(i, i + perRow))
+    rows.push(all.slice(i, i + perRow));
   }
-  return rows
-})
+  return rows;
+});
 
-const hasMoves = computed(() => displayMoves.value.length > 0)
+const hasMoves = computed(() => displayMoves.value.length > 0);
 
 const copyQueueToClipboard = () => {
-  emit('copy')
-}
+  emit("copy");
+};
 
 const resetQueue = () => {
-  emit('reset')
-}
+  emit("reset");
+};
 
 const setSamplePill = (el) => {
   if (el && !samplePillEl.value) {
-    samplePillEl.value = el
+    samplePillEl.value = el;
   }
-}
+};
 
 const recalcMovesLayout = () => {
-  const container = movesHistoryEl.value
-  const pill = samplePillEl.value
-  if (!container || !pill) return
+  const container = movesHistoryEl.value;
+  const pill = samplePillEl.value;
+  if (!container || !pill) return;
 
-  const containerWidth = container.clientWidth
-  const pillWidth = pill.offsetWidth
-  if (pillWidth <= 0) return
+  const containerWidth = container.clientWidth;
+  const pillWidth = pill.offsetWidth;
+  if (pillWidth <= 0) return;
 
   const totalWidth = (cols) => {
-    if (cols <= 0) return 0
-    if (cols === 1) return pillWidth
-    return cols * pillWidth + (cols - 1) * MIN_MOVES_COLUMN_GAP
-  }
+    if (cols <= 0) return 0;
+    if (cols === 1) return pillWidth;
+    return cols * pillWidth + (cols - 1) * MIN_MOVES_COLUMN_GAP;
+  };
 
-  let cols = Math.floor((containerWidth + MIN_MOVES_COLUMN_GAP) / (pillWidth + MIN_MOVES_COLUMN_GAP))
-  if (cols < 1) cols = 1
+  let cols = Math.floor(
+    (containerWidth + MIN_MOVES_COLUMN_GAP) /
+      (pillWidth + MIN_MOVES_COLUMN_GAP),
+  );
+  if (cols < 1) cols = 1;
   while (cols > 1 && totalWidth(cols) > containerWidth) {
-    cols -= 1
+    cols -= 1;
   }
 
-  let gap = 0
+  let gap = 0;
   if (cols > 1) {
-    gap = (containerWidth - cols * pillWidth) / (cols - 1)
+    gap = (containerWidth - cols * pillWidth) / (cols - 1);
   }
 
-  movesPerRow.value = cols
-  movesColumnGap.value = gap
-}
+  movesPerRow.value = cols;
+  movesColumnGap.value = gap;
+};
 
 const openAddModal = () => {
-  emit('open-add-modal')
-}
+  emit("open-add-modal");
+};
 
 watch(displayMoves, () => {
-  nextTick(recalcMovesLayout)
-})
+  nextTick(recalcMovesLayout);
+});
 
 onMounted(() => {
-  window.addEventListener('resize', recalcMovesLayout)
-  nextTick(recalcMovesLayout)
-})
+  window.addEventListener("resize", recalcMovesLayout);
+  nextTick(recalcMovesLayout);
+});
 
 onUnmounted(() => {
-  window.removeEventListener('resize', recalcMovesLayout)
-})
+  window.removeEventListener("resize", recalcMovesLayout);
+});
 </script>
 
 <template>
@@ -108,7 +111,7 @@ onUnmounted(() => {
           class="move-pill"
           :class="{
             'move-pill-active': m.status === 'in_progress',
-            'move-pill-pending': m.status === 'pending'
+            'move-pill-pending': m.status === 'pending',
           }"
           :ref="rowIndex === 0 && idx === 0 ? setSamplePill : null"
         >
@@ -135,7 +138,6 @@ onUnmounted(() => {
         reset
       </button>
     </div>
-
   </div>
 </template>
 
@@ -218,5 +220,4 @@ onUnmounted(() => {
   outline: none;
   box-shadow: none;
 }
-
 </style>