From eeea57828c47ffc2aa3178f048f7133b6e982522 Mon Sep 17 00:00:00 2001
From: AlejandroAkbal <37181533+AlejandroAkbal@users.noreply.github.com>
Date: Wed, 17 Jun 2026 08:14:59 +0000
Subject: [PATCH] feat: add click-and-drag horizontal scroll

Implements horizontal scrolling by click-and-dragging for the
FeaturedTags component and SearchMenu tag lists.

- Adds useHorizontalScroll composable that handles mouse events.
- Hooks the composable into scrollbar-hide container elements.
- Dynamically toggles cursor utility classes (grab/grabbing).
---
 app/components/pages/home/FeaturedTags.vue    |  5 ++-
 .../posts/navigation/search/SearchMenu.vue    |  5 ++-
 app/composables/useHorizontalScroll.ts        | 44 +++++++++++++++++++
 3 files changed, 52 insertions(+), 2 deletions(-)
 create mode 100644 app/composables/useHorizontalScroll.ts

diff --git a/app/components/pages/home/FeaturedTags.vue b/app/components/pages/home/FeaturedTags.vue
index 4571abac..5abdc887 100644
--- a/app/components/pages/home/FeaturedTags.vue
+++ b/app/components/pages/home/FeaturedTags.vue
@@ -66,10 +66,13 @@
     if (isExternalHref(path)) return path
     return localePath(path)
   }
+
+  const featuredTagsRef = ref<HTMLElement | null>(null)
+  useHorizontalScroll(featuredTagsRef)
 </script>
 
 <template>
-  <ol class="scrollbar-hide grid grid-flow-col gap-4 overflow-x-auto">
+  <ol ref="featuredTagsRef" class="scrollbar-hide grid grid-flow-col gap-4 overflow-x-auto">
     <template
       v-for="(tag, index) in preselectedTags"
       :key="tag.name"
diff --git a/app/components/pages/posts/navigation/search/SearchMenu.vue b/app/components/pages/posts/navigation/search/SearchMenu.vue
index c3eb4d16..d905bc60 100644
--- a/app/components/pages/posts/navigation/search/SearchMenu.vue
+++ b/app/components/pages/posts/navigation/search/SearchMenu.vue
@@ -233,6 +233,9 @@
         throw new Error(`Unknown filter type: ${type}`)
     }
   }
+
+  const scrollContainerRef = ref<HTMLElement | null>(null)
+  useHorizontalScroll(scrollContainerRef)
 </script>
 
 <template>
@@ -347,7 +350,7 @@
     </HeadlessCombobox>
 
     <!-- Filters -->
-    <section class="-mx-5 mt-8 scrollbar-hide flex gap-4 overflow-x-auto py-1 pr-3 before:w-1 after:w-1">
+    <section ref="scrollContainerRef" class="-mx-5 mt-8 scrollbar-hide flex gap-4 overflow-x-auto py-1 pr-3 before:w-1 after:w-1">
       <!-- -->
 
       <!-- Tag Collections Toggler -->
diff --git a/app/composables/useHorizontalScroll.ts b/app/composables/useHorizontalScroll.ts
new file mode 100644
index 00000000..39f8b973
--- /dev/null
+++ b/app/composables/useHorizontalScroll.ts
@@ -0,0 +1,44 @@
+import { useEventListener } from '@vueuse/core'
+
+export function useHorizontalScroll(elRef: Ref<HTMLElement | null>) {
+  let isDown = false
+  let startX = 0
+  let scrollLeft = 0
+
+  useEventListener(elRef, 'mousedown', (e: MouseEvent) => {
+    if (!elRef.value) return
+    isDown = true
+    elRef.value.classList.add('cursor-grabbing')
+    elRef.value.classList.remove('cursor-grab')
+    startX = e.pageX - elRef.value.offsetLeft
+    scrollLeft = elRef.value.scrollLeft
+  })
+
+  useEventListener(elRef, 'mouseleave', () => {
+    if (!elRef.value) return
+    isDown = false
+    elRef.value.classList.remove('cursor-grabbing')
+    elRef.value.classList.add('cursor-grab')
+  })
+
+  useEventListener(elRef, 'mouseup', () => {
+    if (!elRef.value) return
+    isDown = false
+    elRef.value.classList.remove('cursor-grabbing')
+    elRef.value.classList.add('cursor-grab')
+  })
+
+  useEventListener(elRef, 'mousemove', (e: MouseEvent) => {
+    if (!isDown || !elRef.value) return
+    e.preventDefault()
+    const x = e.pageX - elRef.value.offsetLeft
+    const walk = (x - startX) * 2 // Scroll-fast
+    elRef.value.scrollLeft = scrollLeft - walk
+  })
+
+  onMounted(() => {
+    if (elRef.value) {
+      elRef.value.classList.add('cursor-grab')
+    }
+  })
+}