Merge pull request #404 from cheeaun/main

Update from main

src/app.css

@@ -1676,6 +1676,8 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
 
   svg {
     contain: none;
+    width: 100%;
+    height: 100%;
   }
 }
 

src/app.jsx

@@ -14,7 +14,7 @@ import { subscribe } from 'valtio';
 
 import BackgroundService from './components/background-service';
 import ComposeButton from './components/compose-button';
-import { ICONS } from './components/icon';
+import { ICONS } from './components/ICONS';
 import KeyboardShortcutsHelp from './components/keyboard-shortcuts-help';
 import Loader from './components/loader';
 import Modals from './components/modals';

src/components/ICONS.jsx

@@ -0,0 +1,102 @@
+export const ICONS = {
+  x: () => import('@iconify-icons/mingcute/close-line'),
+  heart: () => import('@iconify-icons/mingcute/heart-line'),
+  bookmark: () => import('@iconify-icons/mingcute/bookmark-line'),
+  'check-circle': () => import('@iconify-icons/mingcute/check-circle-line'),
+  'x-circle': () => import('@iconify-icons/mingcute/close-circle-line'),
+  transfer: () => import('@iconify-icons/mingcute/transfer-4-line'),
+  rocket: () => import('@iconify-icons/mingcute/rocket-line'),
+  'arrow-left': () => import('@iconify-icons/mingcute/arrow-left-line'),
+  'arrow-right': () => import('@iconify-icons/mingcute/arrow-right-line'),
+  'arrow-up': () => import('@iconify-icons/mingcute/arrow-up-line'),
+  'arrow-down': () => import('@iconify-icons/mingcute/arrow-down-line'),
+  earth: () => import('@iconify-icons/mingcute/earth-line'),
+  lock: () => import('@iconify-icons/mingcute/lock-line'),
+  unlock: () => import('@iconify-icons/mingcute/unlock-line'),
+  'eye-close': () => import('@iconify-icons/mingcute/eye-close-line'),
+  'eye-open': () => import('@iconify-icons/mingcute/eye-2-line'),
+  message: () => import('@iconify-icons/mingcute/mail-line'),
+  comment: () => import('@iconify-icons/mingcute/chat-3-line'),
+  comment2: () => import('@iconify-icons/mingcute/comment-2-line'),
+  home: () => import('@iconify-icons/mingcute/home-3-line'),
+  notification: () => import('@iconify-icons/mingcute/notification-line'),
+  follow: () => import('@iconify-icons/mingcute/user-follow-line'),
+  'follow-add': () => import('@iconify-icons/mingcute/user-add-line'),
+  poll: [() => import('@iconify-icons/mingcute/chart-bar-line'), '90deg'],
+  pencil: () => import('@iconify-icons/mingcute/pencil-line'),
+  quill: () => import('@iconify-icons/mingcute/quill-pen-line'),
+  at: () => import('@iconify-icons/mingcute/at-line'),
+  attachment: () => import('@iconify-icons/mingcute/attachment-line'),
+  upload: () => import('@iconify-icons/mingcute/upload-3-line'),
+  gear: () => import('@iconify-icons/mingcute/settings-3-line'),
+  more: () => import('@iconify-icons/mingcute/more-3-line'),
+  more2: () => import('@iconify-icons/mingcute/more-1-fill'),
+  external: () => import('@iconify-icons/mingcute/external-link-line'),
+  popout: () => import('@iconify-icons/mingcute/external-link-line'),
+  popin: [() => import('@iconify-icons/mingcute/external-link-line'), '180deg'],
+  plus: () => import('@iconify-icons/mingcute/add-circle-line'),
+  'chevron-left': () => import('@iconify-icons/mingcute/left-line'),
+  'chevron-right': () => import('@iconify-icons/mingcute/right-line'),
+  'chevron-down': () => import('@iconify-icons/mingcute/down-line'),
+  reply: [
+    () => import('@iconify-icons/mingcute/share-forward-line'),
+    '180deg',
+    'horizontal',
+  ],
+  thread: () => import('@iconify-icons/mingcute/route-line'),
+  group: () => import('@iconify-icons/mingcute/group-line'),
+  bot: () => import('@iconify-icons/mingcute/android-2-line'),
+  menu: () => import('@iconify-icons/mingcute/rows-4-line'),
+  list: () => import('@iconify-icons/mingcute/list-check-line'),
+  search: () => import('@iconify-icons/mingcute/search-2-line'),
+  hashtag: () => import('@iconify-icons/mingcute/hashtag-line'),
+  info: () => import('@iconify-icons/mingcute/information-line'),
+  shortcut: () => import('@iconify-icons/mingcute/lightning-line'),
+  user: () => import('@iconify-icons/mingcute/user-4-line'),
+  following: () => import('@iconify-icons/mingcute/walk-line'),
+  pin: () => import('@iconify-icons/mingcute/pin-line'),
+  unpin: [() => import('@iconify-icons/mingcute/pin-line'), '180deg'],
+  bus: () => import('@iconify-icons/mingcute/bus-2-line'),
+  link: () => import('@iconify-icons/mingcute/link-2-line'),
+  history: () => import('@iconify-icons/mingcute/history-line'),
+  share: () => import('@iconify-icons/mingcute/share-2-line'),
+  sparkles: () => import('@iconify-icons/mingcute/sparkles-line'),
+  sparkles2: () => import('@iconify-icons/mingcute/sparkles-2-line'),
+  exit: () => import('@iconify-icons/mingcute/exit-line'),
+  translate: () => import('@iconify-icons/mingcute/translate-line'),
+  play: () => import('@iconify-icons/mingcute/play-fill'),
+  trash: () => import('@iconify-icons/mingcute/delete-2-line'),
+  mute: () => import('@iconify-icons/mingcute/volume-mute-line'),
+  unmute: () => import('@iconify-icons/mingcute/volume-line'),
+  block: () => import('@iconify-icons/mingcute/forbid-circle-line'),
+  unblock: [
+    () => import('@iconify-icons/mingcute/forbid-circle-line'),
+    '180deg',
+  ],
+  flag: () => import('@iconify-icons/mingcute/flag-4-line'),
+  time: () => import('@iconify-icons/mingcute/time-line'),
+  refresh: () => import('@iconify-icons/mingcute/refresh-2-line'),
+  emoji2: () => import('@iconify-icons/mingcute/emoji-2-line'),
+  filter: () => import('@iconify-icons/mingcute/filter-2-line'),
+  chart: () => import('@iconify-icons/mingcute/chart-line-line'),
+  react: () => import('@iconify-icons/mingcute/react-line'),
+  layout4: () => import('@iconify-icons/mingcute/layout-4-line'),
+  layout5: () => import('@iconify-icons/mingcute/layout-5-line'),
+  announce: () => import('@iconify-icons/mingcute/announcement-line'),
+  alert: () => import('@iconify-icons/mingcute/alert-line'),
+  round: () => import('@iconify-icons/mingcute/round-fill'),
+  'arrow-up-circle': () =>
+    import('@iconify-icons/mingcute/arrow-up-circle-line'),
+  'arrow-down-circle': () =>
+    import('@iconify-icons/mingcute/arrow-down-circle-line'),
+  clipboard: () => import('@iconify-icons/mingcute/clipboard-line'),
+  'account-edit': () => import('@iconify-icons/mingcute/user-edit-line'),
+  'account-warning': () => import('@iconify-icons/mingcute/user-warning-line'),
+  keyboard: () => import('@iconify-icons/mingcute/keyboard-line'),
+  cloud: () => import('@iconify-icons/mingcute/cloud-line'),
+  month: () => import('@iconify-icons/mingcute/calendar-month-line'),
+  media: () => import('@iconify-icons/mingcute/photo-album-line'),
+  speak: () => import('@iconify-icons/mingcute/radar-line'),
+  building: () => import('@iconify-icons/mingcute/building-5-line'),
+  history: () => import('@iconify-icons/mingcute/history-2-line'),
+};

src/components/embed-modal.css

@@ -22,6 +22,10 @@
     iframe {
       pointer-events: auto;
       max-width: 100%;
+      max-height: 100%;
+      width: max(var(--width), 480px);
+      height: auto;
+      aspect-ratio: var(--aspect-ratio);
     }
   }
 }

src/components/embed-modal.jsx

@@ -2,7 +2,7 @@ import './embed-modal.css';
 
 import Icon from './icon';
 
-function EmbedModal({ html, url, onClose = () => {} }) {
+function EmbedModal({ html, url, width, height, onClose = () => {} }) {
   return (
     <div class="embed-modal-container">
       <div class="top-controls">
@@ -20,7 +20,15 @@ function EmbedModal({ html, url, onClose = () => {} }) {
           </a>
         )}
       </div>
-      <div class="embed-content" dangerouslySetInnerHTML={{ __html: html }} />
+      <div
+        class="embed-content"
+        dangerouslySetInnerHTML={{ __html: html }}
+        style={{
+          '--width': width + 'px',
+          '--height': height + 'px',
+          '--aspect-ratio': `${width}/${height}`,
+        }}
+      />
     </div>
   );
 }

src/components/icon.jsx

@@ -1,6 +1,8 @@
 import moize from 'moize';
 import { useEffect, useRef, useState } from 'preact/hooks';
 
+import { ICONS } from './ICONS';
+
 const SIZES = {
   s: 12,
   m: 16,
@@ -9,107 +11,6 @@ const SIZES = {
   xxl: 32,
 };
 
-export const ICONS = {
-  x: () => import('@iconify-icons/mingcute/close-line'),
-  heart: () => import('@iconify-icons/mingcute/heart-line'),
-  bookmark: () => import('@iconify-icons/mingcute/bookmark-line'),
-  'check-circle': () => import('@iconify-icons/mingcute/check-circle-line'),
-  'x-circle': () => import('@iconify-icons/mingcute/close-circle-line'),
-  transfer: () => import('@iconify-icons/mingcute/transfer-4-line'),
-  rocket: () => import('@iconify-icons/mingcute/rocket-line'),
-  'arrow-left': () => import('@iconify-icons/mingcute/arrow-left-line'),
-  'arrow-right': () => import('@iconify-icons/mingcute/arrow-right-line'),
-  'arrow-up': () => import('@iconify-icons/mingcute/arrow-up-line'),
-  'arrow-down': () => import('@iconify-icons/mingcute/arrow-down-line'),
-  earth: () => import('@iconify-icons/mingcute/earth-line'),
-  lock: () => import('@iconify-icons/mingcute/lock-line'),
-  unlock: () => import('@iconify-icons/mingcute/unlock-line'),
-  'eye-close': () => import('@iconify-icons/mingcute/eye-close-line'),
-  'eye-open': () => import('@iconify-icons/mingcute/eye-2-line'),
-  message: () => import('@iconify-icons/mingcute/mail-line'),
-  comment: () => import('@iconify-icons/mingcute/chat-3-line'),
-  comment2: () => import('@iconify-icons/mingcute/comment-2-line'),
-  home: () => import('@iconify-icons/mingcute/home-3-line'),
-  notification: () => import('@iconify-icons/mingcute/notification-line'),
-  follow: () => import('@iconify-icons/mingcute/user-follow-line'),
-  'follow-add': () => import('@iconify-icons/mingcute/user-add-line'),
-  poll: [() => import('@iconify-icons/mingcute/chart-bar-line'), '90deg'],
-  pencil: () => import('@iconify-icons/mingcute/pencil-line'),
-  quill: () => import('@iconify-icons/mingcute/quill-pen-line'),
-  at: () => import('@iconify-icons/mingcute/at-line'),
-  attachment: () => import('@iconify-icons/mingcute/attachment-line'),
-  upload: () => import('@iconify-icons/mingcute/upload-3-line'),
-  gear: () => import('@iconify-icons/mingcute/settings-3-line'),
-  more: () => import('@iconify-icons/mingcute/more-3-line'),
-  more2: () => import('@iconify-icons/mingcute/more-1-fill'),
-  external: () => import('@iconify-icons/mingcute/external-link-line'),
-  popout: () => import('@iconify-icons/mingcute/external-link-line'),
-  popin: [() => import('@iconify-icons/mingcute/external-link-line'), '180deg'],
-  plus: () => import('@iconify-icons/mingcute/add-circle-line'),
-  'chevron-left': () => import('@iconify-icons/mingcute/left-line'),
-  'chevron-right': () => import('@iconify-icons/mingcute/right-line'),
-  'chevron-down': () => import('@iconify-icons/mingcute/down-line'),
-  reply: [
-    () => import('@iconify-icons/mingcute/share-forward-line'),
-    '180deg',
-    'horizontal',
-  ],
-  thread: () => import('@iconify-icons/mingcute/route-line'),
-  group: () => import('@iconify-icons/mingcute/group-line'),
-  bot: () => import('@iconify-icons/mingcute/android-2-line'),
-  menu: () => import('@iconify-icons/mingcute/rows-4-line'),
-  list: () => import('@iconify-icons/mingcute/list-check-line'),
-  search: () => import('@iconify-icons/mingcute/search-2-line'),
-  hashtag: () => import('@iconify-icons/mingcute/hashtag-line'),
-  info: () => import('@iconify-icons/mingcute/information-line'),
-  shortcut: () => import('@iconify-icons/mingcute/lightning-line'),
-  user: () => import('@iconify-icons/mingcute/user-4-line'),
-  following: () => import('@iconify-icons/mingcute/walk-line'),
-  pin: () => import('@iconify-icons/mingcute/pin-line'),
-  bus: () => import('@iconify-icons/mingcute/bus-2-line'),
-  link: () => import('@iconify-icons/mingcute/link-2-line'),
-  history: () => import('@iconify-icons/mingcute/history-line'),
-  share: () => import('@iconify-icons/mingcute/share-2-line'),
-  sparkles: () => import('@iconify-icons/mingcute/sparkles-line'),
-  sparkles2: () => import('@iconify-icons/mingcute/sparkles-2-line'),
-  exit: () => import('@iconify-icons/mingcute/exit-line'),
-  translate: () => import('@iconify-icons/mingcute/translate-line'),
-  play: () => import('@iconify-icons/mingcute/play-fill'),
-  trash: () => import('@iconify-icons/mingcute/delete-2-line'),
-  mute: () => import('@iconify-icons/mingcute/volume-mute-line'),
-  unmute: () => import('@iconify-icons/mingcute/volume-line'),
-  block: () => import('@iconify-icons/mingcute/forbid-circle-line'),
-  unblock: [
-    () => import('@iconify-icons/mingcute/forbid-circle-line'),
-    '180deg',
-  ],
-  flag: () => import('@iconify-icons/mingcute/flag-4-line'),
-  time: () => import('@iconify-icons/mingcute/time-line'),
-  refresh: () => import('@iconify-icons/mingcute/refresh-2-line'),
-  emoji2: () => import('@iconify-icons/mingcute/emoji-2-line'),
-  filter: () => import('@iconify-icons/mingcute/filter-2-line'),
-  chart: () => import('@iconify-icons/mingcute/chart-line-line'),
-  react: () => import('@iconify-icons/mingcute/react-line'),
-  layout4: () => import('@iconify-icons/mingcute/layout-4-line'),
-  layout5: () => import('@iconify-icons/mingcute/layout-5-line'),
-  announce: () => import('@iconify-icons/mingcute/announcement-line'),
-  alert: () => import('@iconify-icons/mingcute/alert-line'),
-  round: () => import('@iconify-icons/mingcute/round-fill'),
-  'arrow-up-circle': () =>
-    import('@iconify-icons/mingcute/arrow-up-circle-line'),
-  'arrow-down-circle': () =>
-    import('@iconify-icons/mingcute/arrow-down-circle-line'),
-  clipboard: () => import('@iconify-icons/mingcute/clipboard-line'),
-  'account-edit': () => import('@iconify-icons/mingcute/user-edit-line'),
-  'account-warning': () => import('@iconify-icons/mingcute/user-warning-line'),
-  keyboard: () => import('@iconify-icons/mingcute/keyboard-line'),
-  cloud: () => import('@iconify-icons/mingcute/cloud-line'),
-  month: () => import('@iconify-icons/mingcute/calendar-month-line'),
-  media: () => import('@iconify-icons/mingcute/photo-album-line'),
-  speak: () => import('@iconify-icons/mingcute/radar-line'),
-  building: () => import('@iconify-icons/mingcute/building-5-line'),
-};
-
 const ICONDATA = {};
 
 // Memoize the dangerouslySetInnerHTML of the SVGs
@@ -117,8 +18,8 @@ const SVGICon = moize(
   function ({ size, width, height, body, rotate, flip }) {
     return (
       <svg
-        width={size}
-        height={size}
+        // width={size}
+        // height={size}
         viewBox={`0 0 ${width} ${height}`}
         dangerouslySetInnerHTML={{ __html: body }}
         style={{

src/components/media-modal.jsx

@@ -273,7 +273,7 @@ function MediaModal({
         <span>
           <Menu2
             overflow="auto"
-            align="end"
+            align="center"
             position="anchor"
             gap={4}
             menuClassName="glass-menu"

src/components/modals.jsx

@@ -210,6 +210,8 @@ export default function Modals() {
           <EmbedModal
             html={snapStates.showEmbedModal.html}
             url={snapStates.showEmbedModal.url}
+            width={snapStates.showEmbedModal.width}
+            height={snapStates.showEmbedModal.height}
             onClose={() => {
               states.showEmbedModal = false;
             }}

src/components/shortcuts-settings.jsx

@@ -170,7 +170,7 @@ export const SHORTCUTS_META = {
   },
   search: {
     id: 'search',
-    title: ({ query }) => (query ? `"${query}"` : 'Search'),
+    title: ({ query }) => (query ? `“${query}”` : 'Search'),
     path: ({ query }) =>
       query
         ? `/search?q=${encodeURIComponent(query)}&type=statuses`

src/components/status.css

@@ -1783,13 +1783,15 @@ a.card:is(:hover, :focus):visited {
   pointer-events: none;
   transform: translateX(8px);
   transform-origin: right center;
-  transition: all 0.1s ease-out 0.3s, border-color 0.3s ease-out;
+  transition: all 0.15s ease-out 0.3s, border-color 0.3s ease-out;
 
   button.plain {
     color: var(--text-insignificant-color);
     backdrop-filter: none;
     padding: 10px;
     border-radius: 8px;
+    outline-offset: -5px;
+    outline: 1px solid transparent;
 
     &:is(:hover, :focus) {
       color: var(--text-color);
@@ -1800,14 +1802,17 @@ a.card:is(:hover, :focus):visited {
 
     &.reblog-button.checked {
       color: var(--reblog-color);
+      outline-color: var(--reblog-color);
     }
 
     &.favourite-button.checked {
       color: var(--favourite-color);
+      outline-color: var(--favourite-color);
     }
 
     &.bookmark-button.checked {
       color: var(--link-color);
+      outline-color: var(--link-color);
     }
   }
 
@@ -1820,7 +1825,7 @@ a.card:is(:hover, :focus):visited {
   &.open {
     opacity: 1;
     pointer-events: auto;
-    transform: scale(1);
+    transform: translateX(0);
   }
   @media (pointer: coarse) {
     .status:has(&):hover {

src/components/status.jsx

@@ -937,6 +937,40 @@ function Status({
           )}
         </MenuItem>
       )}
+      {isSelf && /(public|unlisted|private)/i.test(visibility) && (
+        <MenuItem
+          onClick={async () => {
+            try {
+              const newStatus = await masto.v1.statuses
+                .$select(id)
+                [_pinned ? 'unpin' : 'pin']();
+              // saveStatus(newStatus, instance);
+              showToast(
+                _pinned
+                  ? 'Post unpinned from profile'
+                  : 'Post pinned to profile',
+              );
+            } catch (e) {
+              console.error(e);
+              showToast(
+                _pinned ? 'Unable to unpin post' : 'Unable to pin post',
+              );
+            }
+          }}
+        >
+          {_pinned ? (
+            <>
+              <Icon icon="unpin" />
+              <span>Unpin from profile</span>
+            </>
+          ) : (
+            <>
+              <Icon icon="pin" />
+              <span>Pin to profile</span>
+            </>
+          )}
+        </MenuItem>
+      )}
       {isSelf && (
         <div class="menu-horizontal">
           <MenuItem
@@ -2069,6 +2103,8 @@ function Card({ card, selfReferential, instance }) {
         states.showEmbedModal = {
           html,
           url: url || embedUrl,
+          width,
+          height,
         };
       }
     },