Update from main

README.md

@@ -179,6 +179,9 @@ Available variables:
   - May specify a self-hosted Lingva instance, powered by either [lingva-translate](https://github.com/thedaviddelta/lingva-translate) or [lingva-api](https://github.com/cheeaun/lingva-api)
   - List of fallback instances hard-coded in `/.env`
   - [↗️ List of lingva-translate instances](https://github.com/thedaviddelta/lingva-translate?tab=readme-ov-file#instances)
+- `PHANPY_IMG_ALT_API_URL` (optional, no defaults):
+  - API endpoint for self-hosted instance of [img-alt-api](https://github.com/cheeaun/img-alt-api).
+  - If provided, a setting will appear for users to enable the image description generator in the composer. Disabled by default.
 - `PHANPY_GIPHY_API_KEY` (optional, no defaults):
   - API key for [GIPHY](https://developers.giphy.com/). See [API docs](https://developers.giphy.com/docs/api/).
   - If provided, a setting will appear for users to enable the GIF picker in the composer. Disabled by default.
@@ -205,6 +208,7 @@ These are self-hosted by other wonderful folks.
 - [phanpy.hear-me.social](https://phanpy.hear-me.social) by [@admin@hear-me.social](https://hear-me.social/@admin)
 - [phanpy.fulda.social](https://phanpy.fulda.social) by [@Ganneff@fulda.social](https://fulda.social/@Ganneff)
 - [phanpy.crmbl.uk](https://phanpy.crmbl.uk) by [@snail@crmbl.uk](https://mstdn.crmbl.uk/@snail)
+- [halo.mookiesplace.com](https://halo.mookiesplace.com) by [@mookie@mookiesplace.com](https://mookiesplace.com/@mookie)
 
 > Note: Add yours by creating a pull request.
 
@@ -256,6 +260,7 @@ And here I am. Building a Mastodon web client.
 - [Tusked](https://tusked.app/)
 - [Mastodon Glitch Edition (standalone frontend)](https://iceshrimp.dev/iceshrimp/masto-fe-standalone)
 - [Mangane](https://github.com/BDX-town/Mangane)
+- [TheDesk](https://github.com/cutls/TheDesk)
 - [More...](https://github.com/hueyy/awesome-mastodon/#clients)
 
 ## 💁‍♂️ Notice to all other social media client developers

package.json

@@ -51,9 +51,9 @@
     "@trivago/prettier-plugin-sort-imports": "~4.3.0",
     "postcss": "~8.4.38",
     "postcss-dark-theme-class": "~1.2.1",
-    "postcss-preset-env": "~9.5.2",
+    "postcss-preset-env": "~9.5.4",
     "twitter-text": "~3.1.0",
-    "vite": "~5.2.6",
+    "vite": "~5.2.8",
     "vite-plugin-generate-file": "~0.1.1",
     "vite-plugin-html-config": "~1.0.11",
     "vite-plugin-pwa": "~0.19.7",

src/app.css

@@ -301,6 +301,41 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
     }
   }
 }
+
+.deck-container-media-first {
+  .timeline {
+    > li:not(.timeline-item-carousel, .timeline-item-container) {
+      &:has(.status-media-first) {
+        @media (min-width: 40em) {
+          width: fit-content;
+          max-width: min(480px, 100%);
+        }
+
+        background-color: transparent !important;
+        border: 0 !important;
+        box-shadow: none !important;
+        margin-inline: auto !important;
+
+        &:not(:first-child) {
+          margin-block: 32px;
+        }
+
+        &:has(.skeleton) {
+          width: 100%;
+        }
+      }
+
+      &:has(.media[data-orientation='landscape']) {
+        max-width: 100%;
+      }
+    }
+
+    .status-link:has(.status-media-first):hover {
+      background-color: transparent;
+    }
+  }
+}
+
 .timeline.grow {
   /* min-height: 100vh;
   min-height: 100dvh; */
@@ -1882,7 +1917,8 @@ body > .szh-menu-container {
   /* two columns only */
   grid-template-columns: repeat(2, 1fr);
 }
-.szh-menu .menu-horizontal:has(> .szh-menu__item:only-child) {
+.szh-menu .menu-horizontal:has(> .szh-menu__item:only-child),
+.szh-menu .menu-horizontal:has(> .szh-menu__submenu:only-child) {
   grid-template-columns: 1fr;
 }
 .szh-menu .menu-horizontal > .szh-menu__item:not(:only-child):first-child,

src/app.jsx

@@ -53,7 +53,7 @@ import { getAccessToken } from './utils/auth';
 import focusDeck from './utils/focus-deck';
 import states, { initStates, statusKey } from './utils/states';
 import store from './utils/store';
-import { getCurrentAccount } from './utils/store-utils';
+import { getCurrentAccount, setCurrentAccountID } from './utils/store-utils';
 import './utils/toast-alert';
 
 window.__STATES__ = states;
@@ -338,7 +338,7 @@ function App() {
       window.__IGNORE_GET_ACCOUNT_ERROR__ = true;
       const account = getCurrentAccount();
       if (account) {
-        store.session.set('currentAccount', account.info.id);
+        setCurrentAccountID(account.info.id);
         const { client } = api({ account });
         const { instance } = client;
         // console.log('masto', masto);

src/components/account-info.jsx

@@ -22,7 +22,8 @@ import shortenNumber from '../utils/shorten-number';
 import showToast from '../utils/show-toast';
 import states, { hideAllModals } from '../utils/states';
 import store from '../utils/store';
-import { updateAccount } from '../utils/store-utils';
+import { getCurrentAccountID, updateAccount } from '../utils/store-utils';
+import supports from '../utils/supports';
 
 import AccountBlock from './account-block';
 import Avatar from './avatar';
@@ -198,10 +199,7 @@ function AccountInfo({
     }
   }
 
-  const isSelf = useMemo(
-    () => id === store.session.get('currentAccount'),
-    [id],
-  );
+  const isSelf = useMemo(() => id === getCurrentAccountID(), [id]);
 
   useEffect(() => {
     const infoHasEssentials = !!(
@@ -254,12 +252,13 @@ function AccountInfo({
     // On first load, fetch familiar followers, merge to top of results' `value`
     // Remove dups on every fetch
     if (firstLoad) {
-      const familiarFollowers = await masto.v1.accounts.familiarFollowers.fetch(
-        {
+      let familiarFollowers = [];
+      try {
+        familiarFollowers = await masto.v1.accounts.familiarFollowers.fetch({
           id: [id],
-        },
-      );
-      familiarFollowersCache.current = familiarFollowers[0].accounts;
+        });
+      } catch (e) {}
+      familiarFollowersCache.current = familiarFollowers?.[0]?.accounts || [];
       newValue = [
         ...familiarFollowersCache.current,
         ...value.filter(
@@ -919,7 +918,7 @@ function RelatedActions({
 
   useEffect(() => {
     if (info) {
-      const currentAccount = store.session.get('currentAccount');
+      const currentAccount = getCurrentAccountID();
       let currentID;
       (async () => {
         if (sameInstance && authenticated) {
@@ -1093,16 +1092,18 @@ function RelatedActions({
                   <Icon icon="translate" />
                   <span>Translate bio</span>
                 </MenuItem>
-                <MenuItem
-                  onClick={() => {
-                    setShowPrivateNoteModal(true);
-                  }}
-                >
-                  <Icon icon="pencil" />
-                  <span>
-                    {privateNote ? 'Edit private note' : 'Add private note'}
-                  </span>
-                </MenuItem>
+                {supports('@mastodon/profile-private-note') && (
+                  <MenuItem
+                    onClick={() => {
+                      setShowPrivateNoteModal(true);
+                    }}
+                  >
+                    <Icon icon="pencil" />
+                    <span>
+                      {privateNote ? 'Edit private note' : 'Add private note'}
+                    </span>
+                  </MenuItem>
+                )}
                 {following && !!relationship && (
                   <>
                     <MenuItem
@@ -1451,19 +1452,22 @@ function RelatedActions({
                 </MenuItem>
               </>
             )}
-            {currentAuthenticated && isSelf && standalone && (
-              <>
-                <MenuDivider />
-                <MenuItem
-                  onClick={() => {
-                    setShowEditProfile(true);
-                  }}
-                >
-                  <Icon icon="pencil" />
-                  <span>Edit profile</span>
-                </MenuItem>
-              </>
-            )}
+            {currentAuthenticated &&
+              isSelf &&
+              standalone &&
+              supports('@mastodon/profile-edit') && (
+                <>
+                  <MenuDivider />
+                  <MenuItem
+                    onClick={() => {
+                      setShowEditProfile(true);
+                    }}
+                  >
+                    <Icon icon="pencil" />
+                    <span>Edit profile</span>
+                  </MenuItem>
+                </>
+              )}
             {import.meta.env.DEV && currentAuthenticated && isSelf && (
               <>
                 <MenuDivider />

src/components/compose.css

@@ -310,7 +310,7 @@
 
 #compose-container .form-visibility-direct {
   --yellow-stripes: repeating-linear-gradient(
-    -45deg,
+    135deg,
     var(--reply-to-faded-color),
     var(--reply-to-faded-color) 10px,
     var(--reply-to-faded-color) 10px,

src/components/compose.jsx

@@ -124,7 +124,7 @@ const MENTION_RE = new RegExp(
 
 // AI-generated, all other regexes are too complicated
 const HASHTAG_RE = new RegExp(
-  `(^|[^=\\/\\w])(#[a-z0-9_]+([a-z0-9_.-]+[a-z0-9_]+)?)(?![\\/\\w])`,
+  `(^|[^=\\/\\w])(#[a-z0-9_]+([a-z0-9_.]+[a-z0-9_]+)?)(?![\\/\\w])`,
   'ig',
 );
 
@@ -988,7 +988,11 @@ function Compose({
                 } else {
                   try {
                     newStatus = await masto.v1.statuses.create(params, {
-                      idempotencyKey: UID.current,
+                      requestInit: {
+                        headers: {
+                          'Idempotency-Key': UID.current,
+                        },
+                      },
                     });
                   } catch (_) {
                     // If idempotency key fails, try again without it
@@ -2370,6 +2374,10 @@ function GIFPickerModal({ onClose = () => {}, onSelect = () => {} }) {
     qRef.current?.focus();
   }, []);
 
+  const debouncedOnInput = useDebouncedCallback(() => {
+    fetchGIFs({ offset: 0 });
+  }, 1000);
+
   return (
     <div id="gif-picker-sheet" class="sheet">
       {!!onClose && (
@@ -2396,6 +2404,7 @@ function GIFPickerModal({ onClose = () => {}, onSelect = () => {} }) {
             autocapitalize="off"
             spellCheck="false"
             dir="auto"
+            onInput={debouncedOnInput}
           />
           <input
             type="image"

src/components/media-post.jsx

@@ -8,6 +8,7 @@ import FilterContext from '../utils/filter-context';
 import { isFiltered } from '../utils/filters';
 import states, { statusKey } from '../utils/states';
 import store from '../utils/store';
+import { getCurrentAccountID } from '../utils/store-utils';
 
 import Media from './media';
 
@@ -88,7 +89,7 @@ function MediaPost({
   };
 
   const currentAccount = useMemo(() => {
-    return store.session.get('currentAccount');
+    return getCurrentAccountID();
   }, []);
   const isSelf = useMemo(() => {
     return currentAccount && currentAccount === accountId;