Merge pull request #92 from cheeaun/main

Update from main

package.json

@@ -25,7 +25,7 @@
     "mem": "~9.0.2",
     "p-retry": "~5.1.2",
     "p-throttle": "~5.0.0",
-    "preact": "~10.13.1",
+    "preact": "~10.13.2",
     "react-hotkeys-hook": "~4.3.8",
     "react-intersection-observer": "~9.4.3",
     "react-quick-pinch-zoom": "~4.6.0",
@@ -33,7 +33,7 @@
     "string-length": "~5.0.1",
     "swiped-events": "~1.1.7",
     "toastify-js": "~1.12.0",
-    "uid": "~2.0.1",
+    "uid": "~2.0.2",
     "use-debounce": "~9.0.3",
     "use-long-press": "~2.0.3",
     "use-resize-observer": "~9.1.0",
@@ -44,12 +44,12 @@
     "@trivago/prettier-plugin-sort-imports": "~4.1.1",
     "postcss": "~8.4.21",
     "postcss-dark-theme-class": "~0.7.3",
-    "postcss-preset-env": "~8.0.1",
+    "postcss-preset-env": "~8.3.0",
     "twitter-text": "~3.1.0",
     "vite": "~4.2.1",
     "vite-plugin-generate-file": "~0.0.4",
     "vite-plugin-html-config": "~1.0.11",
-    "vite-plugin-pwa": "~0.14.4",
+    "vite-plugin-pwa": "~0.14.7",
     "vite-plugin-remove-console": "~2.1.0",
     "workbox-cacheable-response": "~6.5.4",
     "workbox-expiration": "~6.5.4",

src/app.css

@@ -1062,7 +1062,7 @@ body:has(.status-deck) .media-post-link {
   filter: drop-shadow(0 1px 2px var(--button-bg-color));
 }
 @media (max-width: calc(40em - 1px)) {
-  #app:has(#shortcuts .tab-bar) #compose-button {
+  #app[data-shortcuts-view-mode='tab-menu-bar'] #compose-button {
     bottom: calc(16px + 52px);
     bottom: calc(16px + env(safe-area-inset-bottom) + 52px);
   }
@@ -1709,7 +1709,10 @@ ul.link-list li a .icon {
   .timeline:not(.flat) > li:not(:has(.status-carousel)) {
     transform: translate3d(0, 0, 0);
   }
-  .timeline:not(.flat) > li:has(.status-badge) {
+  .timeline:not(.flat)
+    > li:not(.timeline-item-container-end, .timeline-item-container-middle):has(
+      .status-badge:not(:empty)
+    ) {
     border-top-right-radius: 8px;
   }
   .timeline:not(.flat) > li:has(.status-link.is-active) {

src/app.jsx

@@ -192,6 +192,14 @@ function App() {
     return !/^\/(login|welcome)/.test(pathname);
   }, [location]);
 
+  // Change #app classname based on snapStates.settings.shortcutsViewMode
+  useEffect(() => {
+    const $app = document.getElementById('app');
+    if ($app) {
+      $app.dataset.shortcutsViewMode = snapStates.settings.shortcutsViewMode;
+    }
+  }, [snapStates.settings.shortcutsViewMode]);
+
   return (
     <>
       <Routes location={nonRootLocation || location}>

src/components/shortcuts.css

@@ -131,16 +131,16 @@ shortcuts .tab-bar[hidden] {
 }
 
 @media (max-width: calc(40em - 1px)) {
-  #app:has(#shortcuts .tab-bar) .deck-container {
+  #app[data-shortcuts-view-mode='tab-menu-bar'] .deck-container {
     padding-bottom: 52px;
   }
 }
 
 @media (min-width: 40em) {
-  #app:has(#shortcuts .tab-bar) .timeline-deck {
+  #app[data-shortcuts-view-mode='tab-menu-bar'] .timeline-deck {
     margin-top: 44px;
   }
-  #app:has(#shortcuts .tab-bar) .timeline-deck > header {
+  #app[data-shortcuts-view-mode='tab-menu-bar'] .timeline-deck > header {
     --margin-top: calc(44px + 8px);
   }
   #shortcuts .tab-bar:not([hidden]) {

src/components/status.css

@@ -159,6 +159,7 @@
 .status.compact-thread {
   display: flex;
   gap: 8px;
+  padding-block: 8px;
 }
 .status.compact-thread .status-thread-badge {
   flex-shrink: 0;
@@ -835,6 +836,15 @@ a.card:is(:hover, :focus) {
 .poll {
   transition: opacity 0.2s ease-in-out;
   margin-top: 8px;
+  border-radius: 16px;
+  border: 1px solid var(--outline-color);
+  background-color: var(--bg-faded-color);
+  background-image: linear-gradient(
+    to bottom,
+    var(--bg-color) 50%,
+    var(--bg-faded-color)
+  );
+  overflow: hidden;
 }
 .poll.loading {
   opacity: 0.5;
@@ -848,9 +858,6 @@ a.card:is(:hover, :focus) {
   flex-direction: column;
   gap: 4px;
   padding: 4px;
-  border-radius: 16px;
-  border: 1px solid var(--outline-color);
-  background-color: var(--bg-faded-color);
 }
 .poll-option {
   padding: 4px 8px;
@@ -878,10 +885,6 @@ a.card:is(:hover, :focus) {
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
 }
-.poll-option:last-child:after {
-  border-bottom-left-radius: 12px;
-  border-bottom-right-radius: 12px;
-}
 .poll-option:hover:after {
   opacity: 1;
 }
@@ -910,10 +913,11 @@ a.card:is(:hover, :focus) {
   opacity: 1;
 }
 .poll-vote-button {
-  margin-top: 8px;
+  margin: 8px 8px 0 12px;
+  padding-inline: 24px;
 }
 .poll-meta {
-  margin: 8px 0;
+  margin: 8px 16px;
   font-size: 90%;
 }
 .poll-option-title {
@@ -982,6 +986,7 @@ a.card:is(:hover, :focus) {
 .status .action > button.plain {
   color: inherit;
   border: 1.5px solid transparent;
+  backdrop-filter: none;
 }
 .status .action > button.plain:is(:hover, :focus) {
   color: var(--link-color);

src/components/timeline.jsx

@@ -559,13 +559,17 @@ function TimelineStatusCompact({ status, instance }) {
   const sKey = statusKey(id, instance);
   return (
     <article class="status compact-thread" tabindex="-1">
-      {!!snapStates.statusThreadNumber[sKey] && (
+      {!!snapStates.statusThreadNumber[sKey] ? (
         <div class="status-thread-badge">
           <Icon icon="thread" size="s" />
           {snapStates.statusThreadNumber[sKey]
             ? ` ${snapStates.statusThreadNumber[sKey]}/X`
             : ''}
         </div>
+      ) : (
+        <div class="status-thread-badge">
+          <Icon icon="thread" size="s" />
+        </div>
       )}
       <div class="content-compact" title={statusPeekText}>
         {statusPeekText}