MVP-ish initial implementation of Quote

The menuExtras is hacky, I know.

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;

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'),
 };

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);

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>
   );

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>
+                      <span>{reblogged ? 'Unboost' : 'Boost'}</span>
-                        {reblogged ? 'Unboost?' : 'Boost to everyone?'}
-                      </span>
                     </>
                   }
+                  menuExtras={
+                    <MenuItem
+                      onClick={() => {
+                        states.showCompose = {
+                          draftStatus: {
+                            status: `\n${url}`,
+                          },
+                        };
+                      }}
+                    >
+                      <Icon icon="quote" />
+                      <span>Quote</span>
+                    </MenuItem>
+                  }
                   menuFooter={
                     mediaNoDesc &&
                     !reblogged && (