diff --git a/src/app.css b/src/app.css index 1a37f161..7848f645 100644 --- a/src/app.css +++ b/src/app.css @@ -1609,6 +1609,47 @@ body:has(.media-modal-container + .status-deck) .media-post-link { bottom: calc(16px + env(safe-area-inset-bottom) + 52px); } } +#compose-button { + &.min { + outline: 2px solid var(--button-text-color); + + &:after { + content: ''; + display: block; + position: absolute; + top: 0; + right: 0; + width: 14px; + height: 14px; + border-radius: 50%; + background-color: var(--button-bg-color); + border: 2px solid var(--button-text-color); + box-shadow: 0 2px 8px var(--drop-shadow-color); + opacity: 0; + transition: opacity 0.2s ease-out 0.5s; + opacity: 1; + } + } + + &.loading { + outline-color: var(--button-bg-blur-color); + + &:before { + position: absolute; + inset: 0; + content: ''; + border-radius: 50%; + animation: spin 5s linear infinite; + border: 2px dashed var(--button-text-color); + } + } + + &.error { + &:after { + background-color: var(--red-color); + } + } +} /* SHEET */ diff --git a/src/components/ICONS.jsx b/src/components/ICONS.jsx index 4ab8b8d3..0fa7880f 100644 --- a/src/components/ICONS.jsx +++ b/src/components/ICONS.jsx @@ -108,4 +108,5 @@ export const ICONS = { settings: () => import('@iconify-icons/mingcute/settings-6-line'), 'heart-break': () => import('@iconify-icons/mingcute/heart-crack-line'), 'user-x': () => import('@iconify-icons/mingcute/user-x-line'), + minimize: () => import('@iconify-icons/mingcute/arrows-down-line'), }; diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx index c585c450..fbb1debb 100644 --- a/src/components/account-info.jsx +++ b/src/components/account-info.jsx @@ -19,6 +19,7 @@ import { getLists } from '../utils/lists'; import niceDateTime from '../utils/nice-date-time'; import pmem from '../utils/pmem'; import shortenNumber from '../utils/shorten-number'; +import showCompose from '../utils/show-compose'; import showToast from '../utils/show-toast'; import states, { hideAllModals } from '../utils/states'; import store from '../utils/store'; @@ -1081,11 +1082,11 @@ function RelatedActions({ <> { - states.showCompose = { + showCompose({ draftStatus: { status: `@${currentInfo?.acct || acct} `, }, - }; + }); }} > diff --git a/src/components/compose-button.jsx b/src/components/compose-button.jsx index ef64adf7..66d84ab6 100644 --- a/src/components/compose-button.jsx +++ b/src/components/compose-button.jsx @@ -1,4 +1,5 @@ import { useHotkeys } from 'react-hotkeys-hook'; +import { useSnapshot } from 'valtio'; import openCompose from '../utils/open-compose'; import openOSK from '../utils/open-osk'; @@ -7,7 +8,15 @@ import states from '../utils/states'; import Icon from './icon'; export default function ComposeButton() { + const snapStates = useSnapshot(states); + function handleButton(e) { + if (snapStates.composerState.minimized) { + states.composerState.minimized = false; + openOSK(); + return; + } + if (e.shiftKey) { const newWin = openCompose(); @@ -28,7 +37,14 @@ export default function ComposeButton() { }); return ( - ); diff --git a/src/components/compose.jsx b/src/components/compose.jsx index 4e0710e5..c402eb66 100644 --- a/src/components/compose.jsx +++ b/src/components/compose.jsx @@ -514,6 +514,7 @@ function Compose({ // I don't think this warrant a draft mode for a status that's already posted // Maybe it could be a big edit change but it should be rare if (editStatus) return; + if (states.composerState.minimized) return; const key = draftKey(); const backgroundDraft = { key, @@ -670,6 +671,11 @@ function Compose({ [replyToStatus], ); + const onMinimize = () => { + saveUnsavedDraft(); + states.composerState.minimized = true; + }; + return (
@@ -689,7 +695,7 @@ function Compose({ /> )} {!standalone ? ( - + {' '} + {' '}