Merge pull request #6 from cheeaun/main

Update from main

src/app.css

@@ -50,7 +50,7 @@ a.mention span {
 
 .deck-container,
 .deck.contained {
-  scroll-padding-top: 4em;
+  scroll-padding-top: 3em;
 }
 
 .deck {
@@ -71,7 +71,7 @@ a.mention span {
 }
 
 .deck header {
-  min-height: 4em;
+  min-height: 3em;
   padding: 0 8px;
   position: sticky;
   top: 0;

src/components/compose.jsx

@@ -89,10 +89,16 @@ function Compose({
         spoilerTextRef.current.value = spoilerText;
         spoilerTextRef.current.focus();
       } else {
+        const mentions = new Set([
+          replyToStatus.account.acct,
+          ...replyToStatus.mentions.map((m) => m.acct),
+        ]);
+        textareaRef.current.value = `${[...mentions]
+          .filter((m) => m !== currentAccountInfo.acct) // Excluding self
+          .map((m) => `@${m}`)
+          .join(' ')} `;
+        textareaRef.current.dispatchEvent(new Event('input'));
         textareaRef.current.focus();
-        if (replyToStatus.account.id !== currentAccount) {
-          textareaRef.current.value = `@${replyToStatus.account.acct} `;
-        }
       }
       setVisibility(visibility);
       setSensitive(sensitive);
@@ -266,6 +272,7 @@ function Compose({
     const isSelf = replyToStatus?.account.id === currentAccount;
     const hasOnlyAcct =
       replyToStatus && value.trim() === `@${replyToStatus.account.acct}`;
+    // TODO: check for mentions, or maybe just generic "@username<space>", including multiple mentions like "@username1<space>@username2<space>"
     if (!isSelf && hasOnlyAcct) {
       console.log('canClose', { isSelf, hasOnlyAcct });
       return true;
@@ -448,6 +455,7 @@ function Compose({
           <div class="status-preview-legend reply-to">
             Replying to @
             {replyToStatus.account.acct || replyToStatus.account.username}
+            &rsquo;s status
           </div>
         </div>
       )}

src/components/status.css

@@ -461,6 +461,7 @@ a.card:hover {
 }
 .status .actions > button.plain {
   color: inherit;
+  border: 1.5px solid transparent;
 }
 .status .actions > button.plain:hover {
   color: var(--link-color);
@@ -471,18 +472,79 @@ a.card:hover {
 }
 .status .actions > button.plain.reblog-button.reblogged {
   color: var(--reblog-color);
-  border: 1.5px solid var(--reblog-color);
+  border-color: var(--reblog-color);
+}
+@keyframes reblogged {
+  5% {
+    transform: translate(-2px, -2px);
+  }
+  10% {
+    transform: translate(2px, 2px);
+  }
+  15% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(30px, -30px);
+    opacity: 0;
+  }
+}
+.status .actions > button.plain.reblog-button.reblogged .icon {
+  animation: reblogged 1s ease-in-out;
 }
 .status .actions > button.plain.favourite-button:hover {
   color: var(--favourite-color);
 }
 .status .actions > button.plain.favourite-button.favourited {
   color: var(--favourite-color);
-  border: 1.5px solid var(--favourite-color);
+  border-color: var(--favourite-color);
+}
+@keyframes hearted {
+  20% {
+    transform: rotate(10deg) scale(1);
+  }
+  40% {
+    transform: rotate(-10deg) scale(1.25);
+  }
+  60% {
+    transform: rotate(10deg) scale(1.75);
+  }
+  80% {
+    transform: rotate(-10deg) scale(2);
+  }
+  100% {
+    transform: rotate(10deg) scale(2.25);
+    opacity: 0;
+  }
+}
+.status .actions > button.plain.favourite-button.favourited .icon {
+  transform-origin: bottom center;
+  animation: hearted 1s ease-in-out;
 }
 .status .actions > button.plain.bookmark-button.bookmarked {
   color: var(--link-color);
-  border: 1.5px solid var(--link-color);
+  border-color: var(--link-color);
+}
+@keyframes bookmarked {
+  25% {
+    transform: translateY(-10px) rotate(10deg);
+    opacity: 0.5;
+  }
+  50% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  75% {
+    transform: translateY(-15px) rotate(-10deg);
+    opacity: 0.5;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+.status .actions > button.plain.bookmark-button.bookmarked .icon {
+  animation: bookmarked 1s ease-in-out;
 }
 
 /* ENHANCED CONTENT */

src/index.css

@@ -194,7 +194,7 @@ code {
 }
 
 @media (prefers-color-scheme: dark) {
-  img,
+  /* img,
   video {
     filter: brightness(0.7);
     transition: filter 0.3s ease-out;
@@ -202,7 +202,7 @@ code {
   img:hover,
   video:hover {
     filter: brightness(1);
-  }
+  } */
   :is(button, .button).plain2 {
     backdrop-filter: blur(12px) brightness(0.5);
   }