Merge pull request #34 from cheeaun/main

Update from main

package.json

@@ -45,5 +45,9 @@
       "postcss-dark-theme-class": {},
       "autoprefixer": {}
     }
-  }
+  },
+  "browserslist": [
+    "defaults",
+    "android >= 4"
+  ]
 }

src/app.jsx

@@ -243,7 +243,7 @@ export function App() {
 
         const mastoAccount = await masto.v1.accounts.verifyCredentials();
 
-        console.log({ tokenJSON, mastoAccount });
+        // console.log({ tokenJSON, mastoAccount });
 
         let account = accounts.find((a) => a.info.id === mastoAccount.id);
         if (account) {

src/components/compose.jsx

@@ -67,8 +67,11 @@ function Compose({
       console.log(config);
       return config;
     } catch (e) {
-      alert('Failed to load instance configuration. Please try again.');
       console.error(e);
+      alert('Failed to load instance configuration. Please try again.');
+      // Temporary fix for corrupted data
+      store.local.del('instances');
+      location.reload();
       return {};
     }
   }, []);

src/components/loader.css

@@ -3,18 +3,10 @@
   width: 16px;
   height: 16px;
   pointer-events: none;
-  animation: slow-appear 0.3s ease-in-out 1s both;
+  animation: appear 0.3s ease-in-out 1s both;
   vertical-align: middle;
   margin: 8px;
 }
-@keyframes slow-appear {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
 .loader-container.abrupt {
   animation: none;
 }

src/components/modal.css

@@ -10,6 +10,7 @@
   align-items: center;
   background-color: var(--backdrop-color);
   backdrop-filter: blur(24px);
+  animation: appear 0.5s var(--timing-function) both;
 }
 
 #modal-container > .light {

src/index.css

@@ -267,6 +267,15 @@ code {
 
 /* KEYFRAMES */
 
+@keyframes appear {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 @keyframes fade-in {
   from {
     opacity: 0;

src/pages/status.jsx

@@ -36,6 +36,7 @@ function StatusPage({ id }) {
   useEffect(() => {
     const onScroll = debounce(() => {
       // console.log('onScroll');
+      if (!scrollableRef.current) return;
       const { scrollTop } = scrollableRef.current;
       states.scrollPositions.set(id, scrollTop);
     }, 100);