Experiment showing small title when nav/tab bars collapsed

src/app.css

@@ -147,11 +147,71 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
     }
   }
 }
+.deck > header {
+  .header-side {
+    height: auto;
+    transition: all 0.3s;
+  }
+  h1 {
+    transition: all 0.3s;
+  }
+}
 .deck > header[hidden] {
   display: block;
-  transform: translateY(-100%);
-  pointer-events: none;
+  /* transform: translateY(-100%);
+  pointer-events: none; */
   user-select: none;
+
+  [data-shortcuts-view-mode='tab-menu-bar'] & {
+    @media (max-width: 40em) {
+      top: 100vh;
+    }
+  }
+
+  &.loading:after {
+    display: none;
+  }
+
+  .header-grid {
+    min-height: 1em;
+    background-color: transparent !important;
+    backdrop-filter: none;
+    border: 0;
+    padding-block: 8px;
+
+    [data-shortcuts-view-mode='tab-menu-bar'] & {
+      @media (max-width: 40em) {
+        transform: translateY(-100%);
+      }
+    }
+
+    > * {
+      pointer-events: none;
+    }
+  }
+
+  .header-side {
+    opacity: 0;
+    height: calc(14px + 4px + 4px);
+    overflow: clip;
+    transform: translateY(-32px);
+  }
+
+  h1 {
+    display: inline-block;
+    font-size: 14px !important;
+    padding: 4px 8px !important;
+    background-color: var(--bg-color);
+    border: 1px solid var(--outline-color);
+    border-radius: 9999px;
+    color: var(--text-insignificant-color);
+    font-weight: 500;
+    box-shadow: 0 4px 32px var(--drop-shadow-color);
+
+    b {
+      font-weight: 500;
+    }
+  }
 }
 .deck > header .header-grid {
   background-color: var(--bg-color);
@@ -3059,7 +3119,8 @@ ul.link-list li a .icon {
     min-height: 4em;
   }
   .timeline-deck > header[hidden] {
-    transform: translate3d(0, calc((100% + var(--margin-top)) * -1), 0);
+    /* transform: translate3d(0, calc((100% + var(--margin-top)) * -1), 0); */
+    transform: translate3d(0, calc(var(--margin-top) * -1), 0);
   }
   .deck > header {
     text-shadow: 0 1px var(--bg-color);

src/components/timeline.jsx

@@ -285,7 +285,7 @@ function Timeline({
   const headerRef = useRef();
   // const [hiddenUI, setHiddenUI] = useState(false);
   const [nearReachStart, setNearReachStart] = useState(false);
-  useScrollFn(
+  const { resetScrollDirection } = useScrollFn(
     {
       scrollableRef,
       distanceFromEnd: 2,
@@ -436,6 +436,7 @@ function Timeline({
             e.target.closest('.timeline-item, .timeline-item-alt')
           ) {
             setTimeout(() => {
+              resetScrollDirection();
               headerRef.current.hidden = false;
             }, 250);
           }
@@ -446,7 +447,11 @@ function Timeline({
             ref={headerRef}
             // hidden={hiddenUI}
             onClick={(e) => {
-              if (!e.target.closest('a, button')) {
+              // If hidden set not hidden
+              if (headerRef.current.hidden) {
+                resetScrollDirection();
+                headerRef.current.hidden = false;
+              } else if (!e.target.closest('a, button')) {
                 scrollableRef.current?.scrollTo({
                   top: 0,
                   behavior: 'smooth',

src/locales/en.po

@@ -330,7 +330,7 @@ msgstr "More from <0/>"
 #: src/components/columns.jsx:27
 #: src/components/nav-menu.jsx:181
 #: src/components/shortcuts-settings.jsx:139
-#: src/components/timeline.jsx:470
+#: src/components/timeline.jsx:475
 #: src/pages/catchup.jsx:883
 #: src/pages/filters.jsx:90
 #: src/pages/followed-hashtags.jsx:41
@@ -492,7 +492,7 @@ msgstr "Attachment #{i} failed"
 
 #: src/components/compose.jsx:1256
 #: src/components/status.jsx:2096
-#: src/components/timeline.jsx:1015
+#: src/components/timeline.jsx:1020
 msgid "Content warning"
 msgstr ""
 
@@ -743,7 +743,7 @@ msgid "Accounts"
 msgstr ""
 
 #: src/components/generic-accounts.jsx:214
-#: src/components/timeline.jsx:552
+#: src/components/timeline.jsx:557
 #: src/pages/list.jsx:321
 #: src/pages/notifications.jsx:923
 #: src/pages/search.jsx:562
@@ -752,7 +752,7 @@ msgid "Show more…"
 msgstr ""
 
 #: src/components/generic-accounts.jsx:219
-#: src/components/timeline.jsx:557
+#: src/components/timeline.jsx:562
 #: src/pages/search.jsx:567
 msgid "The end."
 msgstr ""
@@ -780,13 +780,13 @@ msgstr ""
 
 #: src/components/gif-picker-modal.jsx:207
 #: src/components/media-modal.jsx:469
-#: src/components/timeline.jsx:928
+#: src/components/timeline.jsx:933
 msgid "Previous"
 msgstr ""
 
 #: src/components/gif-picker-modal.jsx:225
 #: src/components/media-modal.jsx:488
-#: src/components/timeline.jsx:945
+#: src/components/timeline.jsx:950
 msgid "Next"
 msgstr ""
 
@@ -1151,7 +1151,7 @@ msgstr ""
 #: src/components/status-compact.jsx:70
 #: src/components/status.jsx:2873
 #: src/components/status.jsx:2951
-#: src/components/timeline.jsx:1004
+#: src/components/timeline.jsx:1009
 #: src/pages/catchup.jsx:75
 #: src/pages/catchup.jsx:1880
 msgid "Filtered"
@@ -2604,12 +2604,12 @@ msgstr "{index}/{total}"
 msgid "{index}/X"
 msgstr "{index}/X"
 
-#: src/components/timeline.jsx:486
+#: src/components/timeline.jsx:491
 #: src/pages/settings.jsx:1218
 msgid "New posts"
 msgstr ""
 
-#: src/components/timeline.jsx:587
+#: src/components/timeline.jsx:592
 #: src/pages/home.jsx:228
 #: src/pages/notifications.jsx:899
 #: src/pages/status.jsx:1099
@@ -2618,16 +2618,16 @@ msgid "Try again"
 msgstr ""
 
 #. placeholder {0}: fItems.length
-#: src/components/timeline.jsx:622
+#: src/components/timeline.jsx:627
 msgid "{0, plural, one {# Boost} other {# Boosts}}"
 msgstr "{0, plural, one {# Boost} other {# Boosts}}"
 
-#: src/components/timeline.jsx:627
+#: src/components/timeline.jsx:632
 msgid "Pinned posts"
 msgstr "Pinned posts"
 
 #. placeholder {0}: filterInfo.titlesStr
-#: src/components/timeline.jsx:999
+#: src/components/timeline.jsx:1004
 msgid "<0>Filtered</0>: <1>{0}</1>"
 msgstr ""
 

src/utils/useScrollFn.js

@@ -138,6 +138,12 @@ export default function useScrollFn(
     }
   }, [init]);
 
+  return {
+    resetScrollDirection: () => {
+      scrollDirection.current = null;
+    },
+  };
+
   // return {
   //   scrollDirection,
   //   reachStart,