From f3f80449a6f864b72f7542ee16dca56fd85bac4f Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Mon, 13 Oct 2025 21:58:50 +0200
Subject: [PATCH] refactor(layout): migrate mobile buttons to Tailwind
 utilities

- Convert mobile hamburger and highlights buttons to Tailwind
- Migrate mobile backdrop to Tailwind utilities
- Remove 60+ lines of CSS from app.css and sidebar.css
- Maintain responsive behavior and z-index layering
- Keep dynamic color support for highlight button
---
 src/components/ThreePaneLayout.tsx | 28 +++++++++++++++++++-----
 src/styles/layout/app.css          | 35 +-----------------------------
 src/styles/layout/sidebar.css      | 35 +-----------------------------
 3 files changed, 24 insertions(+), 74 deletions(-)

diff --git a/src/components/ThreePaneLayout.tsx b/src/components/ThreePaneLayout.tsx
index 28f281e9..64890d17 100644
--- a/src/components/ThreePaneLayout.tsx
+++ b/src/components/ThreePaneLayout.tsx
@@ -224,7 +224,15 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
       {/* Mobile bookmark button - only show when viewing article */}
       {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && (
         <button
-          className={`mobile-hamburger-btn ${showMobileButtons ? 'visible' : 'hidden'}`}
+          className={`fixed z-[900] bg-[#2a2a2a] border border-[#444] rounded-lg text-[#ddd] flex items-center justify-center transition-all duration-300 active:scale-95 md:hidden ${
+            showMobileButtons ? 'opacity-100 visible' : 'opacity-0 invisible pointer-events-none'
+          }`}
+          style={{
+            top: 'calc(1rem + env(safe-area-inset-top))',
+            left: 'calc(1rem + env(safe-area-inset-left))',
+            width: 'var(--min-touch-target)',
+            height: 'var(--min-touch-target)'
+          }}
           onClick={props.onToggleSidebar}
           aria-label="Open bookmarks"
           aria-expanded={props.isSidebarOpen}
@@ -236,14 +244,20 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
       {/* Mobile highlights button - only show when viewing article */}
       {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && (
         <button
-          className={`mobile-highlights-btn ${showMobileButtons ? 'visible' : 'hidden'}`}
-          onClick={props.onToggleHighlightsPanel}
-          aria-label="Open highlights"
-          aria-expanded={!props.isHighlightsCollapsed}
+          className={`fixed z-[900] border border-[#444] rounded-lg flex items-center justify-center transition-all duration-300 active:scale-95 md:hidden ${
+            showMobileButtons ? 'opacity-100 visible' : 'opacity-0 invisible pointer-events-none'
+          }`}
           style={{ 
+            top: 'calc(1rem + env(safe-area-inset-top))',
+            right: 'calc(1rem + env(safe-area-inset-right))',
+            width: 'var(--min-touch-target)',
+            height: 'var(--min-touch-target)',
             backgroundColor: props.settings.highlightColorMine || '#ffff00',
             color: '#000'
           }}
+          onClick={props.onToggleHighlightsPanel}
+          aria-label="Open highlights"
+          aria-expanded={!props.isHighlightsCollapsed}
         >
           <FontAwesomeIcon icon={faHighlighter} />
         </button>
@@ -252,7 +266,9 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
       {/* Mobile backdrop */}
       {isMobile && (
         <div
-          className={`mobile-sidebar-backdrop ${(props.isSidebarOpen || !props.isHighlightsCollapsed) ? 'visible' : ''}`}
+          className={`fixed inset-0 bg-black/45 z-[999] transition-opacity duration-300 ${
+            (props.isSidebarOpen || !props.isHighlightsCollapsed) ? 'block opacity-100' : 'hidden opacity-0'
+          }`}
           onClick={handleBackdropClick}
           aria-hidden="true"
         />
diff --git a/src/styles/layout/app.css b/src/styles/layout/app.css
index 5f9208f6..4d5d5092 100644
--- a/src/styles/layout/app.css
+++ b/src/styles/layout/app.css
@@ -124,40 +124,7 @@
   }
   /* Hide main content when sidepanes are open on mobile */
   .three-pane .pane.main.mobile-hidden { opacity: 0; pointer-events: none; }
-  .mobile-sidebar-backdrop {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.45);
-    z-index: 999; /* Below sidepanes */
-    opacity: 0;
-    transition: opacity 0.3s ease;
-  }
-  .mobile-sidebar-backdrop.visible { display: block; opacity: 1; }
-  .mobile-highlights-btn {
-    display: none;
-    position: fixed;
-    top: calc(1rem + env(safe-area-inset-top));
-    right: calc(1rem + env(safe-area-inset-right));
-    z-index: 900;
-    background: #2a2a2a;
-    border: 1px solid #444;
-    border-radius: 8px;
-    color: #ddd;
-    width: var(--min-touch-target);
-    height: var(--min-touch-target);
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-    transition: transform 0.2s ease, opacity 0.3s ease, visibility 0.3s ease;
-  }
-  .mobile-highlights-btn.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
-  .mobile-highlights-btn.visible { opacity: 1; visibility: visible; }
-  @media (max-width: 768px) { .mobile-highlights-btn { display: flex; } }
+  /* Mobile buttons and backdrop now use Tailwind utilities in component */
 }
 
 
diff --git a/src/styles/layout/sidebar.css b/src/styles/layout/sidebar.css
index 7d1e977d..55566228 100644
--- a/src/styles/layout/sidebar.css
+++ b/src/styles/layout/sidebar.css
@@ -48,46 +48,13 @@
   margin-left: auto;
 }
 
-.mobile-hamburger-btn {
-  display: none;
-  position: fixed;
-  top: calc(1rem + env(safe-area-inset-top));
-  left: calc(1rem + env(safe-area-inset-left));
-  z-index: 900;
-  background: #2a2a2a;
-  border: 1px solid #444;
-  border-radius: 8px;
-  color: #ddd;
-  width: var(--min-touch-target);
-  height: var(--min-touch-target);
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-  transition: transform 0.2s ease, opacity 0.3s ease, visibility 0.3s ease;
-}
-
-.mobile-hamburger-btn.hidden {
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-}
-
-.mobile-hamburger-btn.visible {
-  opacity: 1;
-  visibility: visible;
-}
-
-.mobile-hamburger-btn:active {
-  transform: scale(0.95);
-}
+/* Mobile hamburger button now uses Tailwind utilities in ThreePaneLayout */
 
 .mobile-close-btn {
   display: none;
 }
 
 @media (max-width: 768px) {
-  .mobile-hamburger-btn { display: flex; }
   .sidebar-header-bar .toggle-sidebar-btn { display: none; }
   .mobile-close-btn { display: flex; }
 }