Merge pull request #248 from cheeaun/main

Update from main

.github/workflows/prodtag.yml

@@ -12,5 +12,5 @@ jobs:
       - uses: actions/checkout@v4
         with:
           ref: production
-      - run: git tag -a "'{date +%Y.%m.%d}.{git rev-parse --short HEAD}'" $(git rev-parse HEAD)
+      - run: git tag "`date +%Y.%m.%d`.`git rev-parse --short HEAD`" $(git rev-parse HEAD)
       - run: git push

.prettierrc

@@ -8,6 +8,7 @@
     "index.css$",
     ".css$",
     "<THIRD_PARTY_MODULES>",
+    "/assets/",
     "^../",
     "^[./]"
   ],

README.md

@@ -121,6 +121,7 @@ Try search for "how to self-host static sites" as there are many ways to do it.
 - [React Router](https://reactrouter.com/) - Routing
 - [masto.js](https://github.com/neet/masto.js/) - Mastodon API client
 - [Iconify](https://iconify.design/) - Icon library
+  - [MingCute icons](https://www.mingcute.com/)
 - Vanilla CSS - *Yes, I'm old school.*
 
 Some of these may change in the future. The front-end world is ever-changing.

src/components/account-block.jsx

@@ -3,7 +3,6 @@ import './account-block.css';
 // import { useNavigate } from 'react-router-dom';
 import enhanceContent from '../utils/enhance-content';
 import niceDateTime from '../utils/nice-date-time';
-import shortenNumber from '../utils/shorten-number';
 import states from '../utils/states';
 
 import Avatar from './avatar';

src/components/account-info.jsx

@@ -401,6 +401,7 @@ function AccountInfo({
               ))}
               <div
                 class="note"
+                dir="auto"
                 onClick={handleContentLinks({
                   instance,
                 })}
@@ -417,6 +418,7 @@ function AccountInfo({
                           verifiedAt ? 'profile-verified' : ''
                         }`}
                         key={name + i}
+                        dir="auto"
                       >
                         <b>
                           <EmojiText text={name} emojis={emojis} />{' '}

src/components/nav-menu.jsx

@@ -1,11 +1,6 @@
 import './nav-menu.css';
 
-import {
-  ControlledMenu,
-  Menu,
-  MenuDivider,
-  MenuItem,
-} from '@szhsin/react-menu';
+import { ControlledMenu, MenuDivider, MenuItem } from '@szhsin/react-menu';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { useLongPress } from 'use-long-press';
 import { useSnapshot } from 'valtio';

src/components/shortcuts-settings.jsx

@@ -11,6 +11,7 @@ import { useSnapshot } from 'valtio';
 import floatingButtonUrl from '../assets/floating-button.svg';
 import multiColumnUrl from '../assets/multi-column.svg';
 import tabMenuBarUrl from '../assets/tab-menu-bar.svg';
+
 import { api } from '../utils/api';
 import showToast from '../utils/show-toast';
 import states from '../utils/states';

src/components/timeline.jsx

@@ -14,7 +14,6 @@ import useScroll from '../utils/useScroll';
 
 import Icon from './icon';
 import Link from './link';
-import Loader from './loader';
 import NavMenu from './nav-menu';
 import Status from './status';
 

src/pages/account-statuses.jsx

@@ -1,4 +1,4 @@
-import { Menu, MenuItem } from '@szhsin/react-menu';
+import { MenuItem } from '@szhsin/react-menu';
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import { useParams, useSearchParams } from 'react-router-dom';
 import { useSnapshot } from 'valtio';

src/pages/hashtag.jsx

@@ -1,6 +1,5 @@
 import {
   FocusableItem,
-  Menu,
   MenuDivider,
   MenuGroup,
   MenuItem,

src/pages/home.jsx

@@ -13,7 +13,6 @@ import Notification from '../components/notification';
 import { api } from '../utils/api';
 import db from '../utils/db';
 import groupNotifications from '../utils/group-notifications';
-import openCompose from '../utils/open-compose';
 import states, { saveStatus } from '../utils/states';
 import { getCurrentAccountNS } from '../utils/store-utils';
 
@@ -49,24 +48,6 @@ function Home() {
           headerEnd={<NotificationsLink />}
         />
       )}
-      {/* <button
-        // hidden={scrollDirection === 'end' && !nearReachStart}
-        type="button"
-        id="compose-button"
-        onClick={(e) => {
-          if (e.shiftKey) {
-            const newWin = openCompose();
-            if (!newWin) {
-              alert('Looks like your browser is blocking popups.');
-              states.showCompose = true;
-            }
-          } else {
-            states.showCompose = true;
-          }
-        }}
-      >
-        <Icon icon="quill" size="xl" alt="Compose" />
-      </button> */}
     </>
   );
 }

src/pages/settings.jsx

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from 'preact/hooks';
 import { useSnapshot } from 'valtio';
 
 import logo from '../assets/logo.svg';
+
 import Icon from '../components/icon';
 import Link from '../components/link';
 import RelativeTime from '../components/relative-time';
@@ -481,6 +482,22 @@ function Settings({ onClose }) {
             </div>
           </div>
           <p>
+            <a
+              href="https://github.com/sponsors/cheeaun"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Sponsor
+            </a>{' '}
+            &middot;{' '}
+            <a
+              href="https://www.buymeacoffee.com/cheeaun"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Donate
+            </a>{' '}
+            &middot;{' '}
             <a
               href="https://github.com/cheeaun/phanpy/blob/main/PRIVACY.MD"
               target="_blank"

src/pages/status.jsx

@@ -14,7 +14,7 @@ import {
 } from 'preact/hooks';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { InView } from 'react-intersection-observer';
-import { matchPath, useParams, useSearchParams } from 'react-router-dom';
+import { matchPath, useSearchParams } from 'react-router-dom';
 import { useDebouncedCallback } from 'use-debounce';
 import { useSnapshot } from 'valtio';
 

src/pages/trending.jsx

@@ -1,4 +1,4 @@
-import { Menu, MenuItem } from '@szhsin/react-menu';
+import { MenuItem } from '@szhsin/react-menu';
 import { useMemo, useRef, useState } from 'preact/hooks';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useSnapshot } from 'valtio';

src/pages/welcome.jsx

@@ -7,6 +7,7 @@ import multiHashtagTimelineUrl from '../assets/features/multi-hashtag-timeline.j
 import nestedCommentsThreadUrl from '../assets/features/nested-comments-thread.jpg';
 import logoText from '../assets/logo-text.svg';
 import logo from '../assets/logo.svg';
+
 import Link from '../components/link';
 import states from '../utils/states';
 import useTitle from '../utils/useTitle';

src/utils/api.js

@@ -166,7 +166,7 @@ export function api({ instance, accessToken, accountID, account } = {}) {
             instance,
           };
         } else {
-          throw new Error(`Access token ${accessToken} not found`);
+          throw new Error(`Access token not found`);
         }
       }
     }

src/utils/useTruncated.js

@@ -1,17 +1,31 @@
 import { useRef } from 'preact/hooks';
+import { useDebouncedCallback } from 'use-debounce';
 import useResizeObserver from 'use-resize-observer';
 
 export default function useTruncated({ className = 'truncated' } = {}) {
   const ref = useRef();
+  const onResize = useDebouncedCallback(
+    ({ height }) => {
+      if (ref.current) {
+        const { scrollHeight } = ref.current;
+        let truncated = scrollHeight > height;
+        if (truncated) {
+          const { height: _height, maxHeight } = getComputedStyle(ref.current);
+          const computedHeight = parseInt(maxHeight || _height, 10);
+          truncated = scrollHeight > computedHeight;
+        }
+        ref.current.classList.toggle(className, truncated);
+      }
+    },
+    300,
+    {
+      maxWait: 2000,
+    },
+  );
   useResizeObserver({
     ref,
     box: 'border-box',
-    onResize: ({ height }) => {
-      if (ref.current) {
-        const { scrollHeight } = ref.current;
-        ref.current.classList.toggle(className, scrollHeight > height);
-      }
-    },
+    onResize,
   });
   return ref;
 }