Add experimental tab bar v2

src/app.css

@@ -1708,6 +1708,10 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
   #app[data-shortcuts-view-mode='tab-menu-bar'] #compose-button {
     bottom: calc(16px + 52px);
     bottom: calc(16px + env(safe-area-inset-bottom) + 52px);
+
+    body.exp-tab-bar-v2 & {
+      bottom: max(16px, var(--sai-bottom));
+    }
   }
 }
 #compose-button {

src/app.jsx

@@ -359,6 +359,15 @@ if (import.meta.env.DEV) {
   });
 }
 
+{
+  // Temporary Experiments
+  // May be removed in the future
+  document.body.classList.toggle(
+    'exp-tab-bar-v2',
+    store.local.get('experiments-tabBarV2') ?? false,
+  );
+}
+
 function App() {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   const [uiState, setUIState] = useState('loading');

src/components/shortcuts.css

@@ -9,8 +9,12 @@
   z-index: 101;
   transition: all 0.3s ease-in-out;
   border: var(--hairline-width) solid var(--bg-color);
-  box-shadow: inset 0 -4px 16px -8px var(--button-bg-blur-color),
-    0 3px 8px -1px var(--drop-shadow-color);
+
+  body.exp-tab-bar-v2 & {
+    box-shadow:
+      inset 0 -4px 16px -8px var(--button-bg-blur-color),
+      0 3px 8px -1px var(--drop-shadow-color);
+  }
 }
 #shortcuts-button .icon {
   transform: translateY(2px); /* Balance the icon's vertical alignment */
@@ -70,6 +74,43 @@
     env(safe-area-inset-left);
   user-select: none;
   -webkit-touch-callout: none;
+
+  body.exp-tab-bar-v2 & {
+    transition:
+      all 0.3s ease-in-out,
+      max-width 0s;
+    inset-inline-end: auto;
+    --inset-inline-start: max(16px, var(--sai-inline-start));
+    --inset-inline-end: max(16px, var(--sai-inline-end));
+    --inset-block-end: max(16px, var(--sai-bottom));
+    --compose-button-width: 56px;
+    inset-inline-start: var(--inset-inline-start);
+    inset-block-end: max(16px, var(--sai-bottom));
+    max-width: calc(
+      100vw - var(--inset-inline-start) - var(--inset-inline-end) -
+        var(--compose-button-width) - 8px
+    );
+    border-radius: 999px;
+    box-shadow:
+      0 3px 8px -1px var(--drop-shadow-color),
+      0 10px 36px -4px var(--drop-shadow-color);
+    outline: 1px solid var(--outline-color);
+
+    @media (pointer: coarse) {
+      &:active {
+        transform: scale(1.025);
+        transition-duration: 0.1s;
+      }
+    }
+  }
+}
+body.exp-tab-bar-v2 {
+  #filters-page ~ #shortcuts .tab-bar:not([hidden]),
+  #lists-page ~ #shortcuts .tab-bar:not([hidden]) {
+    max-width: calc(
+      100vw - var(--inset-inline-start) - var(--inset-inline-end)
+    );
+  }
 }
 #shortcuts .tab-bar ul {
   display: flex;
@@ -85,6 +126,20 @@
   justify-content: center;
   min-width: 20vw;
   flex-basis: 20vw;
+
+  body.exp-tab-bar-v2 & {
+    @media (orientation: landscape) {
+      flex-grow: 0;
+      min-width: auto;
+      flex-basis: auto;
+    }
+    ~ li {
+      margin-inline-start: -3%;
+      @media (orientation: landscape) {
+        margin-inline-start: 0;
+      }
+    }
+  }
 }
 #shortcuts .tab-bar li a {
   -webkit-tap-highlight-color: transparent;
@@ -100,6 +155,18 @@
   text-shadow: 0 var(--hairline-width) var(--bg-color);
   width: 100%;
 
+  body.exp-tab-bar-v2 & {
+    min-height: 56px;
+    justify-content: center;
+    @media (orientation: landscape) {
+      width: auto;
+      font-size: 14px;
+      gap: 4px;
+      flex-direction: row;
+      min-height: 0;
+    }
+  }
+
   @media (hover: hover) {
     &:is(:hover, :focus) {
       color: var(--text-color);
@@ -120,19 +187,30 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+
+  body.exp-tab-bar-v2 & {
+    @media (orientation: landscape) {
+      text-align: left;
+      line-height: 1;
+    }
+  }
 }
 #shortcuts .tab-bar li a {
   position: relative;
   &:before {
     content: '';
     position: absolute;
-    inset: 4px 0;
     border-radius: 8px;
-    background-color: var(--bg-color);
     z-index: -1;
     transform: scale(0.5);
     opacity: 0;
     transition: all 0.1s ease-in-out;
+    inset: 2px;
+    background-color: var(--bg-faded-color);
+  }
+
+  body.exp-tab-bar-v2 &:before {
+    border-radius: 999px;
   }
 }
 #shortcuts .tab-bar li a.is-active {
@@ -188,6 +266,17 @@ shortcuts .tab-bar[hidden] {
     border: 0;
     box-shadow: none;
     border-bottom: var(--hairline-width) solid var(--bg-faded-color);
+
+    body.exp-tab-bar-v2 & {
+      transition: none;
+      left: 0;
+      right: 0;
+      inset-block-end: auto;
+      border-radius: 0;
+      outline: 0;
+      max-width: none;
+      box-shadow: none;
+    }
   }
   #shortcuts .tab-bar ul:before {
     content: '';
@@ -209,6 +298,20 @@ shortcuts .tab-bar[hidden] {
     font-size: 14px;
     height: 44px;
     gap: 4px;
+
+    &:before {
+      inset: 4px 0;
+      background-color: var(--bg-color);
+    }
+
+    body.exp-tab-bar-v2 & {
+      min-height: 0;
+      &:before {
+        inset: 4px 0;
+        border-radius: 8px;
+        background-color: var(--bg-color);
+      }
+    }
   }
   #shortcuts .tab-bar li a span {
     text-align: left;

src/index.css

@@ -9,6 +9,15 @@
   --sai-bottom: env(safe-area-inset-bottom);
   --sai-left: env(safe-area-inset-left);
 
+  --sai-inline-start: var(--sai-left);
+  &:dir(rtl) {
+    --sai-inline-start: var(--sai-right);
+  }
+  --sai-inline-end: var(--sai-right);
+  &:dir(rtl) {
+    --sai-inline-end: var(--sai-left);
+  }
+
   --text-size: 16px;
   --main-width: 40em;
   text-size-adjust: none;

src/pages/settings.jsx

@@ -73,6 +73,10 @@ function Settings({ onClose }) {
   //   })();
   // }, []);
 
+  const [expTabBarV2, setExpTabBarV2] = useState(
+    store.local.get('experiments-tabBarV2') ?? false,
+  );
+
   return (
     <div
       id="settings-container"
@@ -925,6 +929,24 @@ function Settings({ onClose }) {
             >
               Clear all caches
             </button>
+            <p>Temporary Experiments</p>
+            <label>
+              <input
+                type="checkbox"
+                checked={expTabBarV2}
+                onChange={(e) => {
+                  const { checked } = e.target;
+                  document.body.classList.toggle('exp-tab-bar-v2', checked);
+                  setExpTabBarV2(checked);
+                  if (checked) {
+                    store.local.set('experiments-tabBarV2', true);
+                  } else {
+                    store.local.del('experiments-tabBarV2');
+                  }
+                }}
+              />{' '}
+              Tab bar v2
+            </label>
           </details>
         )}
       </main>