Update from main

README.md

@@ -273,6 +273,7 @@ These are self-hosted by other wonderful folks.
 - [phanpy.tilde.zone](https://phanpy.tilde.zone) by [@[email protected]](https://tilde.zone/@ben)
 - [phanpy.vmst.io](https://phanpy.vmst.io/) by [@[email protected]](https://vmst.io/@vmstan)
 - [social.qrk.one](https://social.qrk.one) by [@[email protected]](https://fosstodon.org/@kev)
+- [phanpy.linuxusers.in](https://phanpy.linuxusers.in) by [@[email protected]](https://linuxusers.in/dharmik)
 
 > Note: Add yours by creating a pull request.
 
@@ -324,12 +325,14 @@ Costs involved in running and developing this web app:
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/16529521/medium/ae6add93a901b0fefa2d9b1077920d73.png" alt="" width="16" height="16" /> llun (Thai)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/16291756/medium/c008af10bc117fa9c9dcb70f2b291ee6.jpg" alt="" width="16" height="16" /> lucasofchirst (Occitan, Portuguese, Portuguese, Brazilian)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/16640089/medium/4b7d8d275d7a7bff564adde51e09b473_default.png" alt="" width="16" height="16" /> LukeHong (Chinese Traditional)
+- <img src="https://crowdin-static.downloads.crowdin.com/avatar/12822971/medium/4ecbe6d1248536084902925beb0b63e4.png" alt="" width="16" height="16" /> Mannivu (Italian)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/16537713/medium/825f0bf1a14fc545a76891a52839d86e_default.png" alt="" width="16" height="16" /> marcin.kozinski (Polish)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/13521465/medium/76cb9aa6b753ce900a70478bff7fcea0.png" alt="" width="16" height="16" /> mkljczkk (Polish)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/12882812/medium/77744d8db46e9a3e09030e1a02b7a572.jpeg" alt="" width="16" height="16" /> mojosoeun (Korean)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/13613969/medium/c7834ddc0ada84a79671697a944bb274.png" alt="" width="16" height="16" /> moreal (Korean)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/14158861/medium/ba1ff31dc5743b067ea6685f735229a5_default.png" alt="" width="16" height="16" /> MrWillCom (Chinese Simplified)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/15652333/medium/7f36f289f9e2fe41d89ad534a1047f0e.png" alt="" width="16" height="16" /> nclm (French)
+- <img src="https://crowdin-static.downloads.crowdin.com/avatar/15000639/medium/ebbf0bb7d5027a1903d11b7f5f34f65b.jpeg" alt="" width="16" height="16" /> nycterent (Lithuanian)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/16539461/medium/2f41b9f0b802c1d200a6ab62167a7229_default.png" alt="" width="16" height="16" /> pazpi (Italian)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/13954917/medium/56a2cba267eb1b5d122bf62ddc0dd732_default.png" alt="" width="16" height="16" /> PPNplus (Thai)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/15106977/medium/54bf93b19af8bbfdee579ea51685bafa.jpeg" alt="" width="16" height="16" /> punkrockgirl (Basque)

package.json

@@ -66,6 +66,7 @@
     "postcss": "~8.4.49",
     "postcss-dark-theme-class": "~1.3.0",
     "postcss-preset-env": "~10.1.1",
+    "prettier": "3.4.1",
     "sonda": "~0.6.1",
     "twitter-text": "~3.1.0",
     "vite": "~5.4.11",

src/app.jsx

@@ -27,6 +27,7 @@ import SearchCommand from './components/search-command';
 import Shortcuts from './components/shortcuts';
 import NotFound from './pages/404';
 import AccountStatuses from './pages/account-statuses';
+import AnnualReport from './pages/annual-report';
 import Bookmarks from './pages/bookmarks';
 import Catchup from './pages/catchup';
 import Favourites from './pages/favourites';
@@ -98,39 +99,42 @@ window.__STATES_STATS__ = () => {
 // Experimental "garbage collection" for states
 // Every 15 minutes
 // Only posts for now
-setInterval(() => {
-  if (!window.__IDLE__) return;
-  const { statuses, unfurledLinks, notifications } = states;
-  let keysCount = 0;
-  const { instance } = api();
-  for (const key in statuses) {
-    if (!window.__IDLE__) break;
-    try {
-      const $post = document.querySelector(
-        `[data-state-post-id~="${key}"], [data-state-post-ids~="${key}"]`,
-      );
-      const postInNotifications = notifications.some(
-        (n) => key === statusKey(n.status?.id, instance),
-      );
-      if (!$post && !postInNotifications) {
-        delete states.statuses[key];
-        delete states.statusQuotes[key];
-        for (const link in unfurledLinks) {
-          const unfurled = unfurledLinks[link];
-          const sKey = statusKey(unfurled.id, unfurled.instance);
-          if (sKey === key) {
-            delete states.unfurledLinks[link];
-            break;
+setInterval(
+  () => {
+    if (!window.__IDLE__) return;
+    const { statuses, unfurledLinks, notifications } = states;
+    let keysCount = 0;
+    const { instance } = api();
+    for (const key in statuses) {
+      if (!window.__IDLE__) break;
+      try {
+        const $post = document.querySelector(
+          `[data-state-post-id~="${key}"], [data-state-post-ids~="${key}"]`,
+        );
+        const postInNotifications = notifications.some(
+          (n) => key === statusKey(n.status?.id, instance),
+        );
+        if (!$post && !postInNotifications) {
+          delete states.statuses[key];
+          delete states.statusQuotes[key];
+          for (const link in unfurledLinks) {
+            const unfurled = unfurledLinks[link];
+            const sKey = statusKey(unfurled.id, unfurled.instance);
+            if (sKey === key) {
+              delete states.unfurledLinks[link];
+              break;
+            }
           }
+          keysCount++;
         }
-        keysCount++;
-      }
-    } catch (e) {}
-  }
-  if (keysCount) {
-    console.info(`GC: Removed ${keysCount} keys`);
-  }
-}, 15 * 60 * 1000);
+      } catch (e) {}
+    }
+    if (keysCount) {
+      console.info(`GC: Removed ${keysCount} keys`);
+    }
+  },
+  15 * 60 * 1000,
+);
 
 // Preload icons
 // There's probably a better way to do this
@@ -546,6 +550,7 @@ function SecondaryRoutes({ isLoggedIn }) {
           <Route path="/fh" element={<FollowedHashtags />} />
           <Route path="/ft" element={<Filters />} />
           <Route path="/catchup" element={<Catchup />} />
+          <Route path="/annual_report/:year" element={<AnnualReport />} />
         </>
       )}
       <Route path="/:instance?/t/:hashtag" element={<Hashtag />} />

src/components/ICONS.jsx

@@ -174,4 +174,5 @@ export const ICONS = {
   'heart-break': () => import('@iconify-icons/mingcute/heart-crack-line'),
   'user-x': () => import('@iconify-icons/mingcute/user-x-line'),
   minimize: () => import('@iconify-icons/mingcute/arrows-down-line'),
+  celebrate: () => import('@iconify-icons/mingcute/celebrate-line'),
 };

src/components/compose.css

@@ -20,11 +20,15 @@
   justify-content: space-between;
   gap: 8px;
   align-items: center;
-  padding: 16px;
+  padding: 8px;
   position: sticky;
   top: 0;
   z-index: 100;
   white-space: nowrap;
+
+  @media (min-width: 480px) {
+    padding: 16px;
+  }
 }
 #compose-container .compose-top .account-block {
   text-align: start;
@@ -110,17 +114,21 @@
 }
 
 #compose-container form {
-  --form-padding-inline: 8px;
-  --form-padding-block: 0;
+  --form-spacing-inline: 4px;
+  --form-spacing-block: 0;
   /* border-radius: 16px; */
-  padding: var(--form-padding-block) var(--form-padding-inline);
+  padding: var(--form-spacing-block) var(--form-spacing-inline);
   background-color: var(--bg-blur-color);
   /* background-image: linear-gradient(var(--bg-color) 85%, transparent); */
   position: relative;
   z-index: 2;
   --drop-shadow: 0 3px 6px -3px var(--drop-shadow-color);
   box-shadow: var(--drop-shadow);
 
+  @media (min-width: 480px) {
+    --form-spacing-inline: 8px;
+  }
+
   @media (min-width: 40em) {
     border-radius: 16px;
   }
@@ -153,8 +161,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 8px 0;
-  gap: 8px;
+  padding: var(--form-spacing-inline) 0;
+  gap: var(--form-spacing-inline);
 }
 #compose-container .toolbar.wrap {
   flex-wrap: wrap;
@@ -181,6 +189,11 @@
   white-space: nowrap;
   border: 2px solid transparent;
   vertical-align: middle;
+
+  &.active {
+    filter: brightness(0.8);
+    background-color: var(--bg-color);
+  }
 }
 #compose-container .toolbar-button > * {
   vertical-align: middle;
@@ -246,6 +259,39 @@
   text-overflow: ellipsis;
   overflow: hidden;
   max-width: 100%;
+  min-width: 4ch;
+}
+
+#compose-container .compose-footer {
+  .add-toolbar-button-group {
+    display: flex;
+    overflow: auto;
+  }
+  .add-sub-toolbar-button-group {
+    flex-grow: 1;
+    display: flex;
+    overflow: auto;
+    transition: 0.5s ease-in-out;
+    transition-property: opacity, width;
+    scrollbar-width: none;
+    padding-inline-end: 16px;
+    mask-image: linear-gradient(
+      var(--to-backward),
+      transparent 0,
+      black 16px,
+      black 100%
+    );
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    &[hidden] {
+      opacity: 0;
+      pointer-events: none;
+      width: 0;
+    }
+  }
 }
 
 #compose-container text-expander {
@@ -516,6 +562,37 @@
   color: var(--red-color);
 }
 
+.compose-menu-add-media {
+  position: relative;
+
+  .compose-menu-add-media-field {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    cursor: inherit;
+  }
+}
+
+.icon-gif {
+  display: inline-block !important;
+  min-width: 16px;
+  height: 16px;
+  font-size: 10px !important;
+  letter-spacing: -0.5px;
+  font-size-adjust: none;
+  overflow: hidden;
+  white-space: nowrap;
+  text-align: center;
+  line-height: 16px;
+  font-weight: bold;
+  text-rendering: optimizeSpeed;
+
+  &:after {
+    display: block;
+    content: 'GIF';
+  }
+}
+
 @media (display-mode: standalone) {
   /* No popping in standalone mode */
   #compose-container .pop-button {
@@ -525,8 +602,10 @@
 
 #compose-container button[type='submit'] {
   border-radius: 8px;
+
   @media (min-width: 480px) {
     padding-inline: 24px;
+    font-size: 125%;
   }
 }
 
@@ -820,8 +899,8 @@
 .compose-field-container {
   display: grid !important;
 
-  @media (width < 30em) {
-    margin-inline: calc(-1 * var(--form-padding-inline));
+  @media (width < 480px) {
+    margin-inline: calc(-1 * var(--form-spacing-inline));
     width: 100vw !important;
     max-width: 100vw;
 
@@ -929,15 +1008,55 @@
   }
 }
 
+@keyframes jump-scare {
+  from {
+    opacity: 0.5;
+    transform: scale(0.25) translateX(80px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateX(0);
+  }
+}
+@keyframes jump-scare-rtl {
+  from {
+    opacity: 0.5;
+    transform: scale(0.25) translateX(-80px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateX(0);
+  }
+}
+
+.add-button {
+  transform-origin: var(--forward) center;
+  background-color: var(--bg-blur-color) !important;
+  animation: jump-scare 0.2s ease-in-out both;
+  :dir(rtl) & {
+    animation-name: jump-scare-rtl;
+  }
+
+  .icon {
+    transition: transform 0.3s ease-in-out;
+  }
+  &.active {
+    .icon {
+      transform: rotate(135deg);
+    }
+  }
+}
+
 .gif-picker-button {
-  span {
+  /* span {
     font-weight: bold;
     font-size: 11.5px;
     display: block;
-  }
+    line-height: 1;
+  } */
 
   &:is(:hover, :focus) {
-    span {
+    .icon {
       animation: gif-shake 0.3s 3;
     }
   }