From e8239c825e0959a8376141ca14dbdeac592cbfed Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Wed, 19 Nov 2025 01:30:08 +0100
Subject: [PATCH] feat(projects): projects scrolling using mouse wheel

---
 .../Projects/BottomScreen/Projects.vue        | 52 +++++++++++++------
 1 file changed, 35 insertions(+), 17 deletions(-)

diff --git a/app/components/Projects/BottomScreen/Projects.vue b/app/components/Projects/BottomScreen/Projects.vue
index 776c742..b5e844f 100644
--- a/app/components/Projects/BottomScreen/Projects.vue
+++ b/app/components/Projects/BottomScreen/Projects.vue
@@ -35,6 +35,24 @@ const animateScrolling = (offset: number) => {
   );
 };
 
+const scrollProjects = (direction: "left" | "right") => {
+  let offset = 0;
+  if (
+    direction === "right" &&
+    store.currentProject < store.projects.length - 1
+  ) {
+    store.currentProject += 1;
+    offset = 69;
+  } else if (direction === "left" && store.currentProject > 0) {
+    store.currentProject -= 1;
+    offset = -69;
+  }
+
+  if (offset != 0) {
+    animateScrolling(offset);
+  }
+};
+
 useRender((ctx) => {
   const { startIndex, endIndex } = getBounds();
 
@@ -59,25 +77,25 @@ useRender((ctx) => {
 });
 
 useKeyDown((key) => {
-  // scrolling
-  let offset = 0;
-  if (
-    key === "ArrowRight" &&
-    store.currentProject < store.projects.length - 1
-  ) {
-    store.currentProject += 1;
-    offset = 69;
-  } else if (key === "ArrowLeft" && store.currentProject > 0) {
-    store.currentProject -= 1;
-    offset = -69;
+  switch (key) {
+    case "ArrowLeft":
+      scrollProjects("left");
+      break;
+    case "ArrowRight":
+      scrollProjects("right");
+      break;
+    case "Enter":
+    case " ":
+      store.visitProject();
+      break;
   }
+});
 
-  if (offset != 0) {
-    animateScrolling(offset);
-  }
-
-  if (key === "Enter" || key === " ") {
-    store.visitProject();
+useMouseWheel((dy) => {
+  if (dy > 0) {
+    scrollProjects("right");
+  } else if (dy < 0) {
+    scrollProjects("left");
   }
 });