From 0e1be5dbdcff83d28c2b52b3faeef6287c562ca3 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 9 Mar 2024 21:29:44 +0800
Subject: [PATCH] MVP-ish initial implementation of Quote

The menuExtras is hacky, I know.
---
 src/app.css                     |  1 +
 src/components/ICONS.jsx        |  1 +
 src/components/compose.jsx      |  6 ++++++
 src/components/menu-confirm.jsx |  4 +++-
 src/components/status.jsx       | 34 +++++++++++++++++++++++++++++----
 5 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/app.css b/src/app.css
index c3a37fae..30481d83 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1788,6 +1788,7 @@ body > .szh-menu-container {
   animation-duration: 0.3s;
   animation-timing-function: ease-in-out;
   width: auto;
+  min-width: min(12em, 90vw);
 }
 .szh-menu .footer {
   margin: 8px 0 -8px;
diff --git a/src/components/ICONS.jsx b/src/components/ICONS.jsx
index f9192671..c05f5bdf 100644
--- a/src/components/ICONS.jsx
+++ b/src/components/ICONS.jsx
@@ -103,4 +103,5 @@ export const ICONS = {
   'arrows-right': () => import('@iconify-icons/mingcute/arrows-right-line'),
   code: () => import('@iconify-icons/mingcute/code-line'),
   copy: () => import('@iconify-icons/mingcute/copy-2-line'),
+  quote: () => import('@iconify-icons/mingcute/quote-left-line'),
 };
diff --git a/src/components/compose.jsx b/src/components/compose.jsx
index 001b0f9c..84034257 100644
--- a/src/components/compose.jsx
+++ b/src/components/compose.jsx
@@ -235,6 +235,12 @@ function Compose({
   };
   const focusTextarea = () => {
     setTimeout(() => {
+      if (!textareaRef.current) return;
+      // status starts with newline, focus on first position
+      if (draftStatus?.status?.startsWith?.('\n')) {
+        textareaRef.current.selectionStart = 0;
+        textareaRef.current.selectionEnd = 0;
+      }
       console.debug('FOCUS textarea');
       textareaRef.current?.focus();
     }, 300);
diff --git a/src/components/menu-confirm.jsx b/src/components/menu-confirm.jsx
index 1088a21f..b2bb18d5 100644
--- a/src/components/menu-confirm.jsx
+++ b/src/components/menu-confirm.jsx
@@ -1,4 +1,4 @@
-import { Menu, MenuItem, SubMenu } from '@szhsin/react-menu';
+import { MenuItem, SubMenu } from '@szhsin/react-menu';
 import { cloneElement } from 'preact';
 import { useRef } from 'preact/hooks';
 
@@ -10,6 +10,7 @@ function MenuConfirm({
   confirmLabel,
   menuItemClassName,
   menuFooter,
+  menuExtras,
   ...props
 }) {
   const { children, onClick, ...restProps } = props;
@@ -53,6 +54,7 @@ function MenuConfirm({
       <MenuItem className={menuItemClassName} onClick={onClick}>
         {confirmLabel}
       </MenuItem>
+      {menuExtras}
       {menuFooter}
     </Parent>
   );
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 2b56ff25..441a034f 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -748,10 +748,24 @@ function Status({
               confirmLabel={
                 <>
                   <Icon icon="rocket" />
-                  <span>{reblogged ? 'Unboost?' : 'Boost to everyone?'}</span>
+                  <span>{reblogged ? 'Unboost' : 'Boost'}</span>
                 </>
               }
               className={`menu-reblog ${reblogged ? 'checked' : ''}`}
+              menuExtras={
+                <MenuItem
+                  onClick={() => {
+                    states.showCompose = {
+                      draftStatus: {
+                        status: `\n${url}`,
+                      },
+                    };
+                  }}
+                >
+                  <Icon icon="quote" />
+                  <span>Quote</span>
+                </MenuItem>
+              }
               menuFooter={
                 mediaNoDesc &&
                 !reblogged && (
@@ -1920,11 +1934,23 @@ function Status({
                   confirmLabel={
                     <>
                       <Icon icon="rocket" />
-                      <span>
-                        {reblogged ? 'Unboost?' : 'Boost to everyone?'}
-                      </span>
+                      <span>{reblogged ? 'Unboost' : 'Boost'}</span>
                     </>
                   }
+                  menuExtras={
+                    <MenuItem
+                      onClick={() => {
+                        states.showCompose = {
+                          draftStatus: {
+                            status: `\n${url}`,
+                          },
+                        };
+                      }}
+                    >
+                      <Icon icon="quote" />
+                      <span>Quote</span>
+                    </MenuItem>
+                  }
                   menuFooter={
                     mediaNoDesc &&
                     !reblogged && (