Merge pull request #41 from cheeaun/main

Update from main

package-lock.json

@@ -8,13 +8,13 @@
       "name": "phanpy",
       "version": "0.1.0",
       "dependencies": {
+        "@github/relative-time-element": "~4.1.5",
         "@github/text-expander-element": "~2.3.0",
-        "@github/time-elements": "~4.0.0",
         "fast-blurhash": "~1.1.2",
         "history": "~5.3.0",
         "iconify-icon": "~1.0.2",
         "just-debounce-it": "~3.2.0",
-        "masto": "~5.0.5",
+        "masto": "~5.1.0",
         "mem": "~9.0.2",
         "preact": "~10.11.3",
         "preact-router": "~4.1.0",
@@ -2061,6 +2061,11 @@
       "resolved": "https://registry.npmjs.org/@github/combobox-nav/-/combobox-nav-2.1.5.tgz",
       "integrity": "sha512-dmG1PuppNKHnBBEcfylWDwj9SSxd/E/qd8mC1G/klQC3s7ps5q6JZ034mwkkG0LKfI+Y+UgEua/ROD776N400w=="
     },
+    "node_modules/@github/relative-time-element": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@github/relative-time-element/-/relative-time-element-4.1.5.tgz",
+      "integrity": "sha512-WAf1EQV5Sn6jGuAIQur/ztKlEV9R+VHDNwqEbeaOb6s9fiwM5z7+ujlWNZtgFkDp3lF0H8D/f0vdiPlfHz0ZTQ=="
+    },
     "node_modules/@github/text-expander-element": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@github/text-expander-element/-/text-expander-element-2.3.0.tgz",
@@ -2069,11 +2074,6 @@
         "@github/combobox-nav": "^2.0.2"
       }
     },
-    "node_modules/@github/time-elements": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@github/time-elements/-/time-elements-4.0.0.tgz",
-      "integrity": "sha512-oTPpERR/FylYCyUdVjufmF5MmlrIZ7gYzN59xe5mF3aQA+zn5IWiNj+5/D/6NgQWFNXoRB84DILnP/YlkETKhg=="
-    },
     "node_modules/@iconify/types": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
@@ -4153,9 +4153,9 @@
       }
     },
     "node_modules/masto": {
-      "version": "5.0.5",
+      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/masto/-/masto-5.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/masto/-/masto-5.1.0.tgz",
-      "integrity": "sha512-/iRuSnn2ieVfUIemm4kE/91VXAw/dUoJ/GCtebNxoFZIe/ca8xyPV/9cL7jdquc8RPNDr8ribwVUQO5DccfB8w==",
+      "integrity": "sha512-/Rvi44BKv9AGGv08Oo63dA2WHE3kwCUtNb1/W0brK9alLaCSboOwTjoWtK46ovjmsm8TugNtKqj2lscxwcFhDQ==",
       "dependencies": {
         "@mastojs/ponyfills": "^1.0.4",
         "change-case": "^4.1.2",
@@ -7176,6 +7176,11 @@
       "resolved": "https://registry.npmjs.org/@github/combobox-nav/-/combobox-nav-2.1.5.tgz",
       "integrity": "sha512-dmG1PuppNKHnBBEcfylWDwj9SSxd/E/qd8mC1G/klQC3s7ps5q6JZ034mwkkG0LKfI+Y+UgEua/ROD776N400w=="
     },
+    "@github/relative-time-element": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@github/relative-time-element/-/relative-time-element-4.1.5.tgz",
+      "integrity": "sha512-WAf1EQV5Sn6jGuAIQur/ztKlEV9R+VHDNwqEbeaOb6s9fiwM5z7+ujlWNZtgFkDp3lF0H8D/f0vdiPlfHz0ZTQ=="
+    },
     "@github/text-expander-element": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@github/text-expander-element/-/text-expander-element-2.3.0.tgz",
@@ -7184,11 +7189,6 @@
         "@github/combobox-nav": "^2.0.2"
       }
     },
-    "@github/time-elements": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@github/time-elements/-/time-elements-4.0.0.tgz",
-      "integrity": "sha512-oTPpERR/FylYCyUdVjufmF5MmlrIZ7gYzN59xe5mF3aQA+zn5IWiNj+5/D/6NgQWFNXoRB84DILnP/YlkETKhg=="
-    },
     "@iconify/types": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
@@ -8777,9 +8777,9 @@
       }
     },
     "masto": {
-      "version": "5.0.5",
+      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/masto/-/masto-5.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/masto/-/masto-5.1.0.tgz",
-      "integrity": "sha512-/iRuSnn2ieVfUIemm4kE/91VXAw/dUoJ/GCtebNxoFZIe/ca8xyPV/9cL7jdquc8RPNDr8ribwVUQO5DccfB8w==",
+      "integrity": "sha512-/Rvi44BKv9AGGv08Oo63dA2WHE3kwCUtNb1/W0brK9alLaCSboOwTjoWtK46ovjmsm8TugNtKqj2lscxwcFhDQ==",
       "requires": {
         "@mastojs/ponyfills": "^1.0.4",
         "change-case": "^4.1.2",

package.json

@@ -10,13 +10,13 @@
     "source-map-explorer": "npx source-map-explorer dist/assets/*.js"
   },
   "dependencies": {
+    "@github/relative-time-element": "~4.1.5",
     "@github/text-expander-element": "~2.3.0",
-    "@github/time-elements": "~4.0.0",
     "fast-blurhash": "~1.1.2",
     "history": "~5.3.0",
     "iconify-icon": "~1.0.2",
     "just-debounce-it": "~3.2.0",
-    "masto": "~5.0.5",
+    "masto": "~5.1.0",
     "mem": "~9.0.2",
     "preact": "~10.11.3",
     "preact-router": "~4.1.0",

src/app.css

@@ -430,15 +430,17 @@ a.mention span {
     opacity: 0;
   }
   100% {
-    transform: translate(-50%, 150%);
+    transform: translate(-50%, 0);
     opacity: 1;
   }
 }
 .updates-button {
   position: absolute;
+  z-index: 1;
   animation: fade-from-top 2s ease-out;
   left: 50%;
-  transform: translate(-50%, 150%);
+  margin-top: 8px;
+  transform: translate(-50%, 0);
   font-size: 90%;
   background: linear-gradient(
     to bottom,

src/compose.jsx

@@ -2,7 +2,7 @@ import './index.css';
 
 import './app.css';
 
-import '@github/time-elements';
+import '@github/relative-time-element';
 import { login } from 'masto';
 import { render } from 'preact';
 import { useEffect, useState } from 'preact/hooks';

src/main.jsx

@@ -1,6 +1,6 @@
 import './index.css';
 
-import '@github/time-elements';
+import '@github/relative-time-element';
 import { render } from 'preact';
 
 import { App } from './app';

src/pages/home.jsx

@@ -199,28 +199,28 @@ function Home({ hidden }) {
               <Icon icon="notification" size="l" alt="Notifications" />
             </a>
           </div>
-          {snapStates.homeNew.length > 0 && (
-            <button
-              class="updates-button"
-              type="button"
-              onClick={() => {
-                const uniqueHomeNew = snapStates.homeNew.filter(
-                  (status) => !states.home.some((s) => s.id === status.id),
-                );
-                states.home.unshift(...uniqueHomeNew);
-                loadStatuses(true);
-                states.homeNew = [];
-
-                scrollableRef.current?.scrollTo({
-                  top: 0,
-                  behavior: 'smooth',
-                });
-              }}
-            >
-              <Icon icon="arrow-up" /> New posts
-            </button>
-          )}
         </header>
+        {snapStates.homeNew.length > 0 && (
+          <button
+            class="updates-button"
+            type="button"
+            onClick={() => {
+              const uniqueHomeNew = snapStates.homeNew.filter(
+                (status) => !states.home.some((s) => s.id === status.id),
+              );
+              states.home.unshift(...uniqueHomeNew);
+              loadStatuses(true);
+              states.homeNew = [];
+
+              scrollableRef.current?.scrollTo({
+                top: 0,
+                behavior: 'smooth',
+              });
+            }}
+          >
+            <Icon icon="arrow-up" /> New posts
+          </button>
+        )}
         {snapStates.home.length ? (
           <>
             <ul class="timeline">

src/pages/notifications.jsx

@@ -311,32 +311,31 @@ function Notifications() {
           <div class="header-side">
             <Loader hidden={uiState !== 'loading'} />
           </div>
-          {snapStates.notificationsNew.length > 0 && (
-            <button
-              class="updates-button"
-              type="button"
-              onClick={() => {
-                const uniqueNotificationsNew =
-                  snapStates.notificationsNew.filter(
-                    (notification) =>
-                      !snapStates.notifications.some(
-                        (n) => n.id === notification.id,
-                      ),
-                  );
-                states.notifications.unshift(...uniqueNotificationsNew);
-                loadNotifications(true);
-                states.notificationsNew = [];
-
-                scrollableRef.current?.scrollTo({
-                  top: 0,
-                  behavior: 'smooth',
-                });
-              }}
-            >
-              <Icon icon="arrow-up" /> New notifications
-            </button>
-          )}
         </header>
+        {snapStates.notificationsNew.length > 0 && (
+          <button
+            class="updates-button"
+            type="button"
+            onClick={() => {
+              const uniqueNotificationsNew = snapStates.notificationsNew.filter(
+                (notification) =>
+                  !snapStates.notifications.some(
+                    (n) => n.id === notification.id,
+                  ),
+              );
+              states.notifications.unshift(...uniqueNotificationsNew);
+              loadNotifications(true);
+              states.notificationsNew = [];
+
+              scrollableRef.current?.scrollTo({
+                top: 0,
+                behavior: 'smooth',
+              });
+            }}
+          >
+            <Icon icon="arrow-up" /> New notifications
+          </button>
+        )}
         <div id="mentions-option">
           <label>
             <input