From 1b3112de1b7f728c43b2a695f240e310158bce1d Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 25 Aug 2023 15:41:03 +0800
Subject: [PATCH 01/12] Don't apply max-height to statuses in carousel

---
 src/components/status.css | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/status.css b/src/components/status.css
index f96762b7..ae002867 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -121,11 +121,14 @@
 .status-card > * {
   pointer-events: none;
 }
-.status-card :is(.content, .poll, .media-container) {
+.status-card:not(.status-carousel .status)
+  :is(.content, .poll, .media-container) {
   max-height: 160px !important;
   overflow: hidden;
 }
-.status.small .status-card :is(.content, .poll, .media-container) {
+.status.small:not(.status-carousel .status)
+  .status-card
+  :is(.content, .poll, .media-container) {
   max-height: 80px !important;
 }
 .status-card :is(.content, .poll) {

From 1fae2f3208a11e7b950ef1dfd4fbf28218be03ff Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 27 Aug 2023 13:06:26 +0800
Subject: [PATCH 02/12] 2nd pass grouping of 1-account-many-statuses fav/boost

---
 src/components/notification.jsx   | 35 +++++++++++++++++++++++++++----
 src/pages/notifications.css       | 35 +++++++++++++++++++++++++++++++
 src/utils/group-notifications.jsx | 35 ++++++++++++++++++++++++++++++-
 3 files changed, 100 insertions(+), 5 deletions(-)

diff --git a/src/components/notification.jsx b/src/components/notification.jsx
index 20a101ab..ec5e69a3 100644
--- a/src/components/notification.jsx
+++ b/src/components/notification.jsx
@@ -39,16 +39,20 @@ const contentText = {
   mention: 'mentioned you in their post.',
   status: 'published a post.',
   reblog: 'boosted your post.',
+  'reblog+account': (count) => `boosted ${count} of your posts.`,
   reblog_reply: 'boosted your reply.',
   follow: 'followed you.',
   follow_request: 'requested to follow you.',
   favourite: 'favourited your post.',
+  'favourite+account': (count) => `favourited ${count} of your posts.`,
   favourite_reply: 'favourited your reply.',
   poll: 'A poll you have voted in or created has ended.',
   'poll-self': 'A poll you have created has ended.',
   'poll-voted': 'A poll you have voted in has ended.',
   update: 'A post you interacted with has been edited.',
   'favourite+reblog': 'boosted & favourited your post.',
+  'favourite+reblog+account': (count) =>
+    `boosted & favourited ${count} of your posts.`,
   'favourite+reblog_reply': 'boosted & favourited your reply.',
 };
 
@@ -90,12 +94,19 @@ function Notification({ notification, instance, reload }) {
     type === 'favourite' ||
     type === 'favourite+reblog'
   ) {
-    text =
-      contentText[isReplyToOthers ? `${type}_reply` : type] ||
-      contentText[type];
+    if (_statuses?.length > 1) {
+      text = contentText[`${type}+account`];
+    } else if (isReplyToOthers) {
+      text = contentText[`${type}_reply`];
+    } else {
+      text = contentText[type];
+    }
   } else {
     text = contentText[type];
   }
+  if (typeof text === 'function') {
+    text = text(_statuses?.length || _accounts?.length);
+  }
 
   if (type === 'mention' && !status) {
     // Could be deleted
@@ -206,7 +217,23 @@ function Notification({ notification, instance, reload }) {
             ))}
           </p>
         )}
-        {status && (
+        {_statuses?.length > 1 && (
+          <ul class="notification-group-statuses">
+            {_statuses.map((status) => (
+              <li key={status.id}>
+                <Link
+                  class={`status-link status-type-${type}`}
+                  to={
+                    instance ? `/${instance}/s/${status.id}` : `/s/${status.id}`
+                  }
+                >
+                  <Status status={status} size="s" />
+                </Link>
+              </li>
+            ))}
+          </ul>
+        )}
+        {status && (!_statuses?.length || _statuses?.length <= 1) && (
           <Link
             class={`status-link status-type-${type}`}
             to={
diff --git a/src/pages/notifications.css b/src/pages/notifications.css
index b986018a..0ea71af5 100644
--- a/src/pages/notifications.css
+++ b/src/pages/notifications.css
@@ -92,6 +92,7 @@
   filter: saturate(0.25);
 }
 .notification .status-link:not(.status-type-mention) > .status {
+  font-size: calc(var(--text-size) * 0.9);
   max-height: 160px;
   overflow: hidden;
   /* fade out mask gradient bottom */
@@ -134,6 +135,40 @@
   margin-bottom: 8px;
 }
 
+.notification-group-statuses {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.notification-group-statuses > li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  counter-increment: index;
+}
+.notification-group-statuses > li:before {
+  content: counter(index);
+  position: absolute;
+  left: 0;
+  font-size: 10px;
+  padding: 8px;
+  color: var(--text-insignificant-color);
+}
+.notification-group-statuses > li + li {
+  margin-top: 8px;
+}
+.notification .notification-group-statuses .status-link {
+  max-height: 80px;
+}
+.notification .notification-group-statuses .status-link .status {
+  mask-image: linear-gradient(
+    rgba(0, 0, 0, 1) 50px,
+    rgba(0, 0, 0, 0.5) 70px,
+    transparent 79px
+  );
+}
+
 #mentions-option {
   float: right;
   margin-top: 0.5em;
diff --git a/src/utils/group-notifications.jsx b/src/utils/group-notifications.jsx
index eff19181..cbc80b48 100644
--- a/src/utils/group-notifications.jsx
+++ b/src/utils/group-notifications.jsx
@@ -37,7 +37,40 @@ function groupNotifications(notifications) {
       cleanNotifications[j++] = n;
     }
   }
-  return cleanNotifications;
+
+  // 2nd pass to group "favourite+reblog"-type notifications by account if _accounts.length <= 1
+  // This means one acount has favourited and reblogged the multiple statuses
+  // The grouped notification
+  // - type: "favourite+reblog+account"
+  // - _statuses: [status, status, ...]
+  const notificationsMap2 = {};
+  const cleanNotifications2 = [];
+  for (let i = 0, j = 0; i < cleanNotifications.length; i++) {
+    const notification = cleanNotifications[i];
+    const { account, _accounts, type, createdAt } = notification;
+    const date = new Date(createdAt).toLocaleDateString();
+    if (type === 'favourite+reblog' && account && _accounts.length === 1) {
+      const key = `${account?.id}-${type}-${date}`;
+      const mappedNotification = notificationsMap2[key];
+      if (mappedNotification) {
+        mappedNotification._statuses.push(notification.status);
+      } else {
+        let n = (notificationsMap2[key] = {
+          ...notification,
+          type,
+          _statuses: [notification.status],
+        });
+        cleanNotifications2[j++] = n;
+      }
+    } else {
+      cleanNotifications2[j++] = notification;
+    }
+  }
+
+  console.log({ notifications, cleanNotifications, cleanNotifications2 });
+
+  // return cleanNotifications;
+  return cleanNotifications2;
 }
 
 export default groupNotifications;

From 12b8651d181cdcef91bc24d161962801dd8032b7 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 27 Aug 2023 13:07:06 +0800
Subject: [PATCH 03/12] Use 1px instead of hairline

The more visible border width is needed for the buttons overlaying on top of media
---
 src/app.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app.css b/src/app.css
index 8361df31..4adcee34 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1099,7 +1099,7 @@ button.carousel-dot {
   font-weight: bold;
   color: var(--text-color);
   background-color: var(--bg-faded-blur-color);
-  border: var(--hairline-width) solid var(--outline-color);
+  border: 1px solid var(--outline-color);
   box-shadow: 0 4px 32px var(--drop-shadow-color);
   transition: all 0.2s ease-out;
 }

From aae74aa4765fe75e4ae8ad5f91f196d7f21f401f Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 28 Aug 2023 00:21:49 +0800
Subject: [PATCH 04/12] Experiment show avatars instead

Add a bit of tooltips too
---
 src/pages/status.jsx | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index 8afa7050..44babe8e 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -336,6 +336,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
             ancestor: true,
             isThread: ancestorsIsThread,
             accountID: s.account.id,
+            account: s.account,
             repliesCount: s.repliesCount,
             weight: calcStatusWeight(s),
           })),
@@ -705,6 +706,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
                       block: 'start',
                     });
                   }}
+                  title="Go to main post"
                 >
                   <Icon
                     icon={heroPointer === 'down' ? 'arrow-down' : 'arrow-up'}
@@ -727,12 +729,31 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
                     });
                   }}
                   hidden={!ancestors.length || nearReachStart}
+                  title={`${ancestors.length} posts above ‒ Go to top`}
                 >
                   <Icon icon="arrow-up" />
-                  <Icon icon="comment" />{' '}
-                  <span class="insignificant">
-                    {shortenNumber(ancestors.length)}
-                  </span>
+                  {ancestors
+                    .filter(
+                      (a, i, arr) =>
+                        arr.findIndex((b) => b.accountID === a.accountID) === i,
+                    )
+                    .slice(0, 3)
+                    .map((ancestor) => (
+                      <Avatar
+                        key={ancestor.account.id}
+                        url={ancestor.account.avatar}
+                        alt={ancestor.account.displayName}
+                      />
+                    ))}
+                  {/* <Icon icon="comment" />{' '} */}
+                  {ancestors.length > 3 && (
+                    <>
+                      {' '}
+                      <span class="insignificant">
+                        {shortenNumber(ancestors.length)}
+                      </span>
+                    </>
+                  )}
                 </button>
               </>
             )}

From d64bbb7acbff7405a960bf4b60268f63ed59ba63 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 28 Aug 2023 05:49:12 +0800
Subject: [PATCH 05/12] Fix oops

---
 src/components/notification.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/notification.jsx b/src/components/notification.jsx
index ec5e69a3..b7a50523 100644
--- a/src/components/notification.jsx
+++ b/src/components/notification.jsx
@@ -57,7 +57,7 @@ const contentText = {
 };
 
 function Notification({ notification, instance, reload }) {
-  const { id, status, account, _accounts } = notification;
+  const { id, status, account, _accounts, _statuses } = notification;
   let { type } = notification;
 
   // status = Attached when type of the notification is favourite, reblog, status, mention, poll, or update

From 8bfc9892edcc52a1361dc31db9198cb224bad8d3 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 29 Aug 2023 15:23:58 +0800
Subject: [PATCH 06/12] Blind fix for submenus bug

---
 src/components/menu-confirm.jsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/components/menu-confirm.jsx b/src/components/menu-confirm.jsx
index 14e67746..40cd146b 100644
--- a/src/components/menu-confirm.jsx
+++ b/src/components/menu-confirm.jsx
@@ -1,5 +1,6 @@
 import { Menu, MenuItem, SubMenu } from '@szhsin/react-menu';
 import { cloneElement } from 'preact';
+import { useRef } from 'preact/hooks';
 
 function MenuConfirm({
   subMenu = false,
@@ -20,8 +21,10 @@ function MenuConfirm({
     return children;
   }
   const Parent = subMenu ? SubMenu : Menu;
+  const menuRef = useRef();
   return (
     <Parent
+      instanceRef={menuRef}
       openTrigger="clickOnly"
       direction="bottom"
       overflow="auto"
@@ -31,6 +34,19 @@ function MenuConfirm({
       {...restProps}
       menuButton={subMenu ? undefined : children}
       label={subMenu ? children : undefined}
+      // Test fix for bug; submenus not opening on Android
+      itemProps={{
+        onPointerMove: (e) => {
+          if (e.pointerType === 'touch') {
+            menuRef.current?.openMenu?.();
+          }
+        },
+        onPointerLeave: (e) => {
+          if (e.pointerType === 'touch') {
+            menuRef.current?.openMenu?.();
+          }
+        },
+      }}
     >
       <MenuItem className={menuItemClassName} onClick={onClick}>
         {confirmLabel}

From 2ebf421140d0da141d19f191234155d0744f1adc Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 29 Aug 2023 20:41:48 +0800
Subject: [PATCH 07/12] Remove "votes" text from poll items translation

Making it language-agnostic.
---
 src/components/status.jsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/status.jsx b/src/components/status.jsx
index 21c3877d..fe230525 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -1170,9 +1170,7 @@ function Status({
                         (option) =>
                           `- ${option.title}${
                             option.votesCount >= 0
-                              ? ` (${option.votesCount} vote${
-                                  option.votesCount !== 1 ? 's' : ''
-                                })`
+                              ? ` (${option.votesCount})`
                               : ''
                           }`,
                       )

From 4e47d679bcefc57d08b1bf21b37c075ce2e7b580 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 30 Aug 2023 00:45:18 +0800
Subject: [PATCH 08/12] Card object has language now. Use it.

Also have other additional keys but later
---
 src/components/status.jsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/status.jsx b/src/components/status.jsx
index fe230525..d47b7418 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -1434,6 +1434,7 @@ function Card({ card, instance }) {
     url,
     type,
     embedUrl,
+    language,
   } = card;
 
   /* type
@@ -1497,6 +1498,7 @@ function Card({ card, instance }) {
         target={cardStatusURL ? null : '_blank'}
         rel="nofollow noopener noreferrer"
         class={`card link ${blurhashImage ? '' : size}`}
+        lang={language}
       >
         <div class="card-image">
           <img
@@ -1565,6 +1567,7 @@ function Card({ card, instance }) {
         target={cardStatusURL ? null : '_blank'}
         rel="nofollow noopener noreferrer"
         class={`card link no-image`}
+        lang={language}
       >
         <div class="meta-container">
           <p class="meta domain">

From a5865825dae408509b4129de95c2d8a4a847fbbf Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 30 Aug 2023 17:42:33 +0800
Subject: [PATCH 09/12] Init states again after login to new account

---
 src/app.jsx         |  3 ++-
 src/utils/states.js | 24 ++++++++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/app.jsx b/src/app.jsx
index 0f491e94..16efbe2d 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -58,7 +58,7 @@ import {
 import { getAccessToken } from './utils/auth';
 import openCompose from './utils/open-compose';
 import showToast from './utils/show-toast';
-import states, { getStatus, saveStatus } from './utils/states';
+import states, { initStates, saveStatus } from './utils/states';
 import store from './utils/store';
 import { getCurrentAccount } from './utils/store-utils';
 import useInterval from './utils/useInterval';
@@ -130,6 +130,7 @@ function App() {
           initInstance(masto, instanceURL),
           initAccount(masto, instanceURL, accessToken),
         ]);
+        initStates();
         initPreferences(masto);
 
         setIsLoggedIn(true);
diff --git a/src/utils/states.js b/src/utils/states.js
index 6b8e281a..dde99563 100644
--- a/src/utils/states.js
+++ b/src/utils/states.js
@@ -60,6 +60,30 @@ const states = proxy({
 
 export default states;
 
+export function initStates() {
+  // init all account based states
+  // all keys that uses store.account.get() should be initialized here
+  states.notificationsLast = store.account.get('notificationsLast') || null;
+  states.shortcuts = store.account.get('shortcuts') ?? [];
+  states.settings.autoRefresh =
+    store.account.get('settings-autoRefresh') ?? false;
+  states.settings.shortcutsViewMode =
+    store.account.get('settings-shortcutsViewMode') ?? null;
+  states.settings.shortcutsColumnsMode =
+    store.account.get('settings-shortcutsColumnsMode') ?? false;
+  states.settings.boostsCarousel =
+    store.account.get('settings-boostsCarousel') ?? true;
+  states.settings.contentTranslation =
+    store.account.get('settings-contentTranslation') ?? true;
+  states.settings.contentTranslationTargetLanguage =
+    store.account.get('settings-contentTranslationTargetLanguage') || null;
+  states.settings.contentTranslationHideLanguages =
+    store.account.get('settings-contentTranslationHideLanguages') || [];
+  states.settings.contentTranslationAutoInline =
+    store.account.get('settings-contentTranslationAutoInline') ?? false;
+  states.settings.cloakMode = store.account.get('settings-cloakMode') ?? false;
+}
+
 subscribeKey(states, 'notificationsLast', (v) => {
   console.log('CHANGE', v);
   store.account.set('notificationsLast', states.notificationsLast);

From 91419b3243703a0d36864d198ea77912bef9e799 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 30 Aug 2023 17:46:22 +0800
Subject: [PATCH 10/12] Enable relative path hosting

---
 src/app.jsx            | 2 +-
 src/pages/accounts.jsx | 2 +-
 src/utils/auth.js      | 6 +++---
 vite.config.js         | 1 +
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/app.jsx b/src/app.jsx
index 16efbe2d..d31566c3 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -111,7 +111,7 @@ function App() {
     if (code) {
       console.log({ code });
       // Clear the code from the URL
-      window.history.replaceState({}, document.title, '/');
+      window.history.replaceState({}, document.title, location.pathname || '/');
 
       const clientID = store.session.get('clientID');
       const clientSecret = store.session.get('clientSecret');
diff --git a/src/pages/accounts.jsx b/src/pages/accounts.jsx
index c7910b5a..47d90b01 100644
--- a/src/pages/accounts.jsx
+++ b/src/pages/accounts.jsx
@@ -143,7 +143,7 @@ function Accounts({ onClose }) {
                           accounts.splice(i, 1);
                           store.local.setJSON('accounts', accounts);
                           // location.reload();
-                          location.href = '/';
+                          location.href = location.pathname || '/';
                         }}
                       >
                         <Icon icon="exit" />
diff --git a/src/utils/auth.js b/src/utils/auth.js
index 36898f7a..600b0c0c 100644
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
@@ -4,8 +4,8 @@ const { VITE_CLIENT_NAME: CLIENT_NAME, VITE_WEBSITE: WEBSITE } = import.meta
 export async function registerApplication({ instanceURL }) {
   const registrationParams = new URLSearchParams({
     client_name: CLIENT_NAME,
-    redirect_uris: location.origin,
     scopes: 'read write follow',
+    redirect_uris: location.origin + location.pathname,
     website: WEBSITE,
   });
   const registrationResponse = await fetch(
@@ -27,7 +27,7 @@ export async function getAuthorizationURL({ instanceURL, client_id }) {
   const authorizationParams = new URLSearchParams({
     client_id,
     scope: 'read write follow',
-    redirect_uri: location.origin,
+    redirect_uri: location.origin + location.pathname,
     // redirect_uri: 'urn:ietf:wg:oauth:2.0:oob',
     response_type: 'code',
   });
@@ -44,7 +44,7 @@ export async function getAccessToken({
   const params = new URLSearchParams({
     client_id,
     client_secret,
-    redirect_uri: location.origin,
+    redirect_uri: location.origin + location.pathname,
     grant_type: 'authorization_code',
     code,
     scope: 'read write follow',
diff --git a/vite.config.js b/vite.config.js
index 4eaec943..0cf8a335 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -25,6 +25,7 @@ const rollbarCode = fs.readFileSync(
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: './',
   mode: NODE_ENV,
   define: {
     __BUILD_TIME__: JSON.stringify(now),

From 5461b06130129df786d479bb7d7ba68b2a178cf5 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 30 Aug 2023 17:47:17 +0800
Subject: [PATCH 11/12] Safeguard deconstruct

---
 src/app.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app.jsx b/src/app.jsx
index d31566c3..3cdbbdf0 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -390,7 +390,7 @@ function App() {
           <AccountSheet
             account={snapStates.showAccount?.account || snapStates.showAccount}
             instance={snapStates.showAccount?.instance}
-            onClose={({ destination }) => {
+            onClose={({ destination } = {}) => {
               states.showAccount = false;
               if (destination) {
                 states.showAccounts = false;

From 0b04e01d6043c1272a83cd396d94627e006263fe Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 30 Aug 2023 20:16:34 +0800
Subject: [PATCH 12/12] Try out another style for 2nd-pass grouped
 notifications

---
 src/pages/notifications.css | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/pages/notifications.css b/src/pages/notifications.css
index 0ea71af5..9eb28951 100644
--- a/src/pages/notifications.css
+++ b/src/pages/notifications.css
@@ -153,20 +153,18 @@
   left: 0;
   font-size: 10px;
   padding: 8px;
-  color: var(--text-insignificant-color);
+  font-weight: bold;
 }
 .notification-group-statuses > li + li {
-  margin-top: 8px;
+  margin-top: -1px;
 }
-.notification .notification-group-statuses .status-link {
-  max-height: 80px;
+.notification-group-statuses > li:not(:last-child) .status-link {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
 }
-.notification .notification-group-statuses .status-link .status {
-  mask-image: linear-gradient(
-    rgba(0, 0, 0, 1) 50px,
-    rgba(0, 0, 0, 0.5) 70px,
-    transparent 79px
-  );
+.notification-group-statuses > li:not(:first-child) .status-link {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }
 
 #mentions-option {