Merge pull request #383 from cheeaun/main

Update from main
cheeaun · Jan 5, 2024 · adf0b35 · adf0b35
2 parents 8aa0542 + 2bc1b83
commit adf0b35
Show file tree

Hide file tree

Showing 15 changed files with 268 additions and 149 deletions.
diff --git a/src/app.css b/src/app.css
@@ -144,9 +144,10 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   user-select: none;
 }
 .deck > header .header-grid {
-  background-color: var(--bg-blur-color);
+  background-color: var(--bg-color);
+  /* background-color: var(--bg-blur-color);
   background-image: linear-gradient(to bottom, var(--bg-color), transparent);
-  backdrop-filter: saturate(180%) blur(20px);
+  backdrop-filter: saturate(180%) blur(20px); */
   border-bottom: var(--hairline-width) solid var(--divider-color);
   min-height: 3em;
   display: grid;
@@ -893,17 +894,20 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   text-shadow: 0 1px var(--bg-color);
 }
 .status-carousel > ul {
+  --carousel-gap: 16px;
   display: flex;
   overflow-x: auto;
-  overflow-y: hidden;
+  overflow-y: clip;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   margin: 0;
   padding: 8px 16px;
-  gap: 16px;
+  gap: var(--carousel-gap);
   align-items: flex-start;
   counter-reset: index;
   min-height: 160px;
+  max-height: 65vh;
+  max-height: 65dvh;
 }
 .status-carousel > ul > li {
   scroll-snap-align: center;
@@ -915,14 +919,23 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   list-style: none;
   margin: 0;
   padding: 0;
-  max-height: 65vh;
-  max-height: 65dvh;
+  /* max-height: 65vh;
+  max-height: 65dvh; */
   counter-increment: index;
   position: relative;
 }
 .status-carousel > ul > li:is(:empty, :has(> a:empty)) {
   display: none;
 }
+.status-carousel .status-carousel-beacon {
+  margin-right: calc(-1 * var(--carousel-gap));
+  pointer-events: none;
+  opacity: 0;
+
+  ~ .status-carousel-beacon {
+    margin-left: calc(-1 * var(--carousel-gap));
+  }
+}
 /*
   Assume that browsers that do support inline-size property also support container queries.
   https://www.smashingmagazine.com/2021/05/css-container-queries-use-cases-migration-strategies/#progressive-enhancement-polyfills
@@ -941,6 +954,10 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 }
 .status-carousel .content-container .content:only-child {
   font-size: calc(100% + 25% * max(2 - var(--content-text-weight), 0));
+
+  &:has(.status-card) {
+    font-size: unset;
+  }
 }
 /* .status-carousel
   .content-container[data-content-text-weight='1']
@@ -1422,7 +1439,7 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
   right: max(16px, env(safe-area-inset-right));
   padding: 16px;
   background-color: var(--button-bg-blur-color);
-  backdrop-filter: blur(16px);
+  /* backdrop-filter: blur(16px); */
   z-index: 10;
   box-shadow: 0 3px 8px -1px var(--drop-shadow-color),
     0 10px 36px -4px var(--button-bg-blur-color);
@@ -1635,7 +1652,7 @@ body > .szh-menu-container {
   border-radius: 8px;
   box-shadow: 0 3px 16px -3px var(--drop-shadow-color);
   text-align: left;
-  animation: appear-smooth 0.15s ease-in-out;
+  /* animation: appear-smooth 0.15s ease-in-out; */
   width: 16em;
   max-width: 90vw;
   /* overflow: hidden; */
@@ -2471,6 +2488,7 @@ ul.link-list li a .icon {
     border-bottom: 0;
     border-radius: 16px;
     background-color: var(--bg-faded-blur-color);
+    backdrop-filter: blur(16px);
     background-image: none;
     border-radius: 16px;
     min-height: 4em;

diff --git a/src/components/icon.jsx b/src/components/icon.jsx
@@ -1,3 +1,4 @@
+import moize from 'moize';
 import { useEffect, useRef, useState } from 'preact/hooks';
 
 const SIZES = {
@@ -110,6 +111,29 @@ export const ICONS = {
 
 const ICONDATA = {};
 
+// Memoize the dangerouslySetInnerHTML of the SVGs
+const SVGICon = moize(
+  function ({ size, width, height, body, rotate, flip }) {
+    return (
+      <svg
+        width={size}
+        height={size}
+        viewBox={`0 0 ${width} ${height}`}
+        dangerouslySetInnerHTML={{ __html: body }}
+        style={{
+          transform: `${rotate ? `rotate(${rotate})` : ''} ${
+            flip ? `scaleX(-1)` : ''
+          }`,
+        }}
+      />
+    );
+  },
+  {
+    isShallowEqual: true,
+    maxSize: Object.keys(ICONS).length,
+  },
+);
+
 function Icon({
   icon,
   size = 'm',
@@ -122,6 +146,11 @@ function Icon({
 
   const iconSize = SIZES[size];
   let iconBlock = ICONS[icon];
+  if (!iconBlock) {
+    console.warn(`Icon ${icon} not found`);
+    return null;
+  }
+
   let rotate, flip;
   if (Array.isArray(iconBlock)) {
     [iconBlock, rotate, flip] = iconBlock;
@@ -150,16 +179,24 @@ function Icon({
       }}
     >
       {iconData && (
-        <svg
-          width={iconSize}
-          height={iconSize}
-          viewBox={`0 0 ${iconData.width} ${iconData.height}`}
-          dangerouslySetInnerHTML={{ __html: iconData.body }}
-          style={{
-            transform: `${rotate ? `rotate(${rotate})` : ''} ${
-              flip ? `scaleX(-1)` : ''
-            }`,
-          }}
+        // <svg
+        //   width={iconSize}
+        //   height={iconSize}
+        //   viewBox={`0 0 ${iconData.width} ${iconData.height}`}
+        //   dangerouslySetInnerHTML={{ __html: iconData.body }}
+        //   style={{
+        //     transform: `${rotate ? `rotate(${rotate})` : ''} ${
+        //       flip ? `scaleX(-1)` : ''
+        //     }`,
+        //   }}
+        // />
+        <SVGICon
+          size={iconSize}
+          width={iconData.width}
+          height={iconData.height}
+          body={iconData.body}
+          rotate={rotate}
+          flip={flip}
         />
       )}
     </span>

diff --git a/src/components/media-post.css b/src/components/media-post.css
@@ -34,7 +34,7 @@
     word-break: break-word;
     word-wrap: break-word;
     overflow-wrap: break-word;
-    mix-blend-mode: luminosity;
+    /* mix-blend-mode: luminosity; */
     -webkit-line-clamp: 3;
     line-clamp: 3;
     -webkit-box-orient: vertical;

diff --git a/src/components/notification-service.jsx b/src/components/notification-service.jsx
@@ -15,6 +15,22 @@ import Link from './link';
 import Modal from './modal';
 import Notification from './notification';
 
+{
+  if ('serviceWorker' in navigator) {
+    console.log('👂👂👂 Listen to message');
+    navigator.serviceWorker.addEventListener('message', (event) => {
+      console.log('💥💥💥 Message event', event);
+      const { type, id, accessToken } = event?.data || {};
+      if (type === 'notification') {
+        states.routeNotification = {
+          id,
+          accessToken,
+        };
+      }
+    });
+  }
+}
+
 export default memo(function NotificationService() {
   if (!('serviceWorker' in navigator)) return null;
 
@@ -82,25 +98,25 @@ export default memo(function NotificationService() {
     })();
   }, [id, accessToken]);
 
-  useLayoutEffect(() => {
-    // Listen to message from service worker
-    const handleMessage = (event) => {
-      console.log('💥💥💥 Message event', event);
-      const { type, id, accessToken } = event?.data || {};
-      if (type === 'notification') {
-        states.routeNotification = {
-          id,
-          accessToken,
-        };
-      }
-    };
-    console.log('👂👂👂 Listen to message');
-    navigator.serviceWorker.addEventListener('message', handleMessage);
-    return () => {
-      console.log('👂👂👂 Remove listen to message');
-      navigator.serviceWorker.removeEventListener('message', handleMessage);
-    };
-  }, []);
+  // useLayoutEffect(() => {
+  //   // Listen to message from service worker
+  //   const handleMessage = (event) => {
+  //     console.log('💥💥💥 Message event', event);
+  //     const { type, id, accessToken } = event?.data || {};
+  //     if (type === 'notification') {
+  //       states.routeNotification = {
+  //         id,
+  //         accessToken,
+  //       };
+  //     }
+  //   };
+  //   console.log('👂👂👂 Listen to message');
+  //   navigator.serviceWorker.addEventListener('message', handleMessage);
+  //   return () => {
+  //     console.log('👂👂👂 Remove listen to message');
+  //     navigator.serviceWorker.removeEventListener('message', handleMessage);
+  //   };
+  // }, []);
 
   useLayoutEffect(() => {
     if (navigator?.clearAppBadge) {

diff --git a/src/components/shortcuts-settings.jsx b/src/components/shortcuts-settings.jsx
@@ -172,7 +172,9 @@ export const SHORTCUTS_META = {
     id: 'search',
     title: ({ query }) => (query ? `"${query}"` : 'Search'),
     path: ({ query }) =>
-      query ? `/search?q=${query}&type=statuses` : '/search',
+      query
+        ? `/search?q=${encodeURIComponent(query)}&type=statuses`
+        : '/search',
     icon: 'search',
     excludeViewMode: ({ query }) => (!query ? ['multi-column'] : []),
   },

diff --git a/src/components/shortcuts.css b/src/components/shortcuts.css
@@ -59,8 +59,9 @@
   left: 0;
   right: 0;
   z-index: 100;
-  background-color: var(--bg-blur-color);
-  backdrop-filter: blur(16px) saturate(3);
+  background-color: var(--bg-color);
+  /* background-color: var(--bg-blur-color);
+  backdrop-filter: blur(16px) saturate(3); */
   border-top: var(--hairline-width) solid var(--outline-color);
   box-shadow: 0 -8px 16px -8px var(--drop-shadow-color);
   overflow: auto;
@@ -165,6 +166,7 @@ shortcuts .tab-bar[hidden] {
     padding: env(safe-area-inset-top) env(safe-area-inset-right) 0
       env(safe-area-inset-left);
     background-color: var(--bg-faded-blur-color);
+    backdrop-filter: blur(16px);
     border: 0;
     box-shadow: none;
     border-bottom: var(--hairline-width) solid var(--bg-faded-color);

diff --git a/src/components/status.css b/src/components/status.css
@@ -206,11 +206,11 @@
 .status-card:not(.status-carousel .status)
   :is(.content, .poll, .media-container) {
   max-height: 160px !important;
-  overflow: hidden;
+  overflow: clip;
 }
-.status.small:not(.status-carousel .status)
+.status.small:not(.status-carousel .status, .status.large .status)
   .status-card
-  :is(.content, .poll, .media-container) {
+  :is(.content, .poll, .media-container:not(.media-gt2)) {
   max-height: 80px !important;
 }
 .status.large .status-card :is(.content, .poll, .media-container) {
@@ -730,6 +730,9 @@
   tab-size: 2;
   text-wrap: pretty;
 }
+.status-card .content p {
+  margin-block: min(0.25em, 4px);
+}
 .status .content p:first-child {
   margin-block-start: 0;
 }
@@ -959,6 +962,11 @@
   height: auto;
   max-height: 60vh;
 }
+.status.status-card .media-container.media-eq1 .media {
+  max-height: 160px;
+  width: auto;
+  max-width: min(var(--width), 100%);
+}
 /* Special media borders */
 .status .media-container.media-eq2 .media:first-of-type {
   border-radius: var(--media-radius) var(--media-radius-inner)
@@ -1957,7 +1965,7 @@ a.card:is(:hover, :focus):visited {
   color: var(--media-fg-color);
   background-color: var(--media-bg-color);
   border: var(--hairline-width) solid var(--media-outline-color);
-  mix-blend-mode: luminosity;
+  /* mix-blend-mode: luminosity; */
   border-radius: 4px;
   padding: 4px;
   opacity: 0.65;