From 26c5c119f0f1bf6542c043755fc26702c0947db6 Mon Sep 17 00:00:00 2001
From: Syco21 <davhv12@gmail.com>
Date: Fri, 15 May 2026 22:37:34 +0200
Subject: [PATCH] Make bottom sheet swipeable down to dismiss

---
 src/index.css          |  6 ++++--
 src/pages/HomePage.jsx | 19 +++++++++++++++++--
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/index.css b/src/index.css
index 95c089e..fcaf1f8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -118,9 +118,11 @@ body {
 .sheet-handle {
   width: 36px;
   height: 4px;
-  background: #2e2e2e;
+  background: #444;
   border-radius: 2px;
-  margin: 10px auto 0;
+  margin: 0 auto;
+  padding: 16px 0;
+  background-clip: content-box;
 }
 @keyframes slideUp {
   from { transform: translateY(100%); }
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 6af36be..ff9095f 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -219,8 +219,23 @@ function HomePage() {
       {isMobile && expandedCard && (
         <>
           <div className="sheet-backdrop" onClick={() => setExpandedCardId(null)} />
-          <div className="bottom-sheet">
-            <div className="sheet-handle" />
+          <div
+            className="bottom-sheet"
+            onTouchStart={e => { e._sheetStartY = e.touches[0].clientY; }}
+            onTouchMove={e => {
+              const dy = e.touches[0].clientY - e._sheetStartY;
+              if (dy > 0) e.currentTarget.style.transform = `translateY(${dy}px)`;
+            }}
+            onTouchEnd={e => {
+              const dy = e.changedTouches[0].clientY - e._sheetStartY;
+              if (dy > 80) {
+                setExpandedCardId(null);
+              } else {
+                e.currentTarget.style.transform = '';
+              }
+            }}
+          >
+            <div className="sheet-handle" style={{ cursor: 'grab' }} />
             <div style={{ padding: '12px 16px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '12px' }}>
               {cardDetailContent(expandedCard)}
             </div>