issue #971 - Remove "Folders" from mobile sidebar header since folders are not yet implemented & issue 970 - Move verse reference display to compact scroll header on mobile

Author: mazenemad

packages/seed-bible/app/components/sideBar.tsx

@@ -1619,7 +1619,7 @@ function SideBar({ panelsNumber }) {
       <>
         <div className="mobile-sidebar-overlay">
           <div className="mobile-sidebar-header">
-            <h2>Tabs & Folders</h2>
+            <h2>Tabs</h2>
             <div className="mobile-header-actions">
               {/* <span
                 className="mobile-header-icon"

packages/seed-bible/app/components/thePage.tsx

@@ -1784,17 +1784,19 @@ function ThePage({
               globalThis.closePopupSettings();
               const el = e.currentTarget;
               const currentScrollTop = el.scrollTop;
-              if (currentScrollTop <= 0) {
-                document.body.classList.remove("scroll-hide-bars");
-              } else if (
-                currentScrollTop > lastScrollTopRef.current &&
-                currentScrollTop > 50
-              ) {
-                document.body.classList.add("scroll-hide-bars");
-              } else if (currentScrollTop < lastScrollTopRef.current) {
-                document.body.classList.remove("scroll-hide-bars");
+              if (globalThis.IsMobileNow && globalThis.IsMobileNow()) {
+                if (currentScrollTop <= 0) {
+                  document.body.classList.remove("scroll-hide-bars");
+                } else if (
+                  currentScrollTop > lastScrollTopRef.current &&
+                  currentScrollTop > 50
+                ) {
+                  document.body.classList.add("scroll-hide-bars");
+                } else if (currentScrollTop < lastScrollTopRef.current) {
+                  document.body.classList.remove("scroll-hide-bars");
+                }
+                lastScrollTopRef.current = currentScrollTop;
               }
-              lastScrollTopRef.current = currentScrollTop;
             }}
             style={{
               flex: "0 0 33.333%",
@@ -2044,6 +2046,47 @@ function ThePage({
             display: none;
           }
         }
+
+        /* Compact scroll header - shows book/chapter when main header is hidden */
+        .mobile-compact-scroll-header {
+          display: none;
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          text-align: center;
+          padding: 8px 16px;
+          background: var(--pageBackground);
+          z-index: 99;
+          font-size: 14px;
+          font-weight: 600;
+          color: var(--text1);
+          opacity: 0;
+          pointer-events: none;
+          transition: opacity 0.3s ease;
+        }
+
+        body.scroll-hide-bars .mobile-compact-scroll-header {
+          opacity: 1;
+        }
+
+        @media (max-width: 768px) {
+          .mobile-compact-scroll-header {
+            display: block;
+          }
+        }
+
+        .compact-header-divider {
+          margin: 0 6px;
+          color: #666;
+          font-weight: 400;
+        }
+
+        .compact-header-translation {
+          font-weight: 400;
+          font-size: 12px;
+          color: #999;
+        }
          `}
             </style>
             {data && tab && !tabEntered ? (
@@ -2360,6 +2403,29 @@ function ThePage({
           </div>
         )}
 
+      {/* Compact scroll header - shows book/chapter info when scrolled down on mobile */}
+      {globalThis.IsMobileNow && globalThis.IsMobileNow() && data && (
+        <div className="mobile-compact-scroll-header">
+          {showVerseToolbar && clickedVerses.length > 0 ? (
+            <>
+              {`Selected: ${data?.book} ${data?.chapter}:${[...clickedVerses].sort((a, b) => a - b).join(",")}`}
+              <span className="compact-header-divider">|</span>
+              <span className="compact-header-translation">
+                {data?.shortName || ""}
+              </span>
+            </>
+          ) : (
+            <>
+              {`${data?.book} ${data?.chapter}`}
+              <span className="compact-header-divider">|</span>
+              <span className="compact-header-translation">
+                {data?.shortName || ""}
+              </span>
+            </>
+          )}
+        </div>
+      )}
+
       {/* Footnote Modal rendered outside the carousel so position:fixed works relative to the viewport */}
       {showFootnoteModal && activeFootnote && (
         <div

packages/seed-bible/app/components/verseToolbar.tsx

@@ -106,28 +106,6 @@ export function VerseToolbar({
     };
   }, [isPickingColor, tempColor]);
 
-  const getVerseReference = () => {
-    if (clickedVerses.length === 0) return "";
-    const sorted = [...clickedVerses].sort((a, b) => a - b);
-
-    const groups = [];
-    let start = sorted[0];
-    let end = sorted[0];
-
-    for (let i = 1; i < sorted.length; i++) {
-      if (sorted[i] === end + 1) {
-        end = sorted[i];
-      } else {
-        groups.push(start === end ? `${start}` : `${start}-${end}`);
-        start = sorted[i];
-        end = sorted[i];
-      }
-    }
-    groups.push(start === end ? `${start}` : `${start}-${end}`);
-
-    return `${book} ${chapter}:${groups.join(",")}`;
-  };
-
   const containerStyle = {
     position: "relative",
     bottom: "20px",
@@ -156,21 +134,6 @@ export function VerseToolbar({
     maxWidth: "90dvw",
   };
 
-  const verseRefStyle = {
-    fontSize: "14px",
-    fontWeight: "600",
-    letterSpacing: "0.5px",
-    textTransform: "uppercase",
-    padding: "8px 16px",
-    borderRadius: "8px",
-    color: "var(--text1)",
-    backgroundColor: "var(--panelBackground)",
-    // border: "1px solid #e5e5e5",
-    // boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
-    width: "fit-content",
-    // margin: "0 auto 8px auto",
-  };
-
   const dividerStyle = {
     width: "1px",
     height: "24px",
@@ -328,26 +291,7 @@ export function VerseToolbar({
           pointer-events:${globalThis.IsMobileNow() && showVerseToolbar ? "none !important" : ""}
         }
         `}</style>
-      {globalThis.IsMobileNow() && selectionSettings.showSelectedItems && (
-        <>
-          {
-            null /*<div className="verse-ref">
-            <img src="https://res.cloudinary.com/dfbtwwa8p/image/upload/v1764875876/Rectangle_11_yzpmpm.svg" />
-          </div>*/
-          }
-          <span
-            className="verse-ref"
-            style={{
-              ...verseRefStyle,
-              padding: "8px 36px",
-              borderRadius: "2px",
-              backgroundColor: "var(--pageBackground)",
-            }}
-          >
-            {getVerseReference()}
-          </span>
-        </>
-      )}
+      {/* verse-ref moved to compact scroll header in thePage.tsx */}
       <div className="verse-toolbar" style={containerStyle}>
         <style>
           {`