diff --git a/src/components/icon.jsx b/src/components/icon.jsx index 221d95ac..f3f423ec 100644 --- a/src/components/icon.jsx +++ b/src/components/icon.jsx @@ -65,6 +65,7 @@ const ICONS = { exit: 'mingcute:exit-line', translate: 'mingcute:translate-line', play: 'mingcute:play-fill', + trash: 'mingcute:delete-2-line', }; const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js'); diff --git a/src/components/status.css b/src/components/status.css index 79a0feec..442269cf 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -810,6 +810,10 @@ a.card:is(:hover, :focus) { border-top: var(--hairline-width) solid var(--outline-color); margin-top: 8px; } +.status.large .actions.disabled { + pointer-events: none; + opacity: 0.5; +} .status .action.has-count { flex: 1; } @@ -984,3 +988,14 @@ a.card:is(:hover, :focus) { border: 1px solid var(--outline-color); border-radius: 8px; } + +/* DELETED */ + +.status-deleted { + opacity: 0.75; +} +.status-deleted-tag { + color: var(--text-insignificant-color); + text-transform: uppercase; + font-size: 80%; +} diff --git a/src/components/status.jsx b/src/components/status.jsx index 92d83af3..1eb9217c 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -27,7 +27,7 @@ import htmlContentLength from '../utils/html-content-length'; import niceDateTime from '../utils/nice-date-time'; import shortenNumber from '../utils/shorten-number'; import showToast from '../utils/show-toast'; -import states, { saveStatus, statusKey } from '../utils/states'; +import states, { getStatus, saveStatus, statusKey } from '../utils/states'; import store from '../utils/store'; import visibilityIconsMap from '../utils/visibility-icons-map'; @@ -543,6 +543,29 @@ function Status({ Edit + {isSizeLarge && ( + { + const yes = confirm('Delete this post?'); + if (yes) { + (async () => { + try { + await masto.v1.statuses.remove(id); + const cachedStatus = getStatus(id, instance); + cachedStatus._deleted = true; + showToast('Deleted'); + } catch (e) { + console.error(e); + showToast('Unable to delete'); + } + })(); + } + }} + > + + Deleteā€¦ + + )} )} @@ -582,12 +605,13 @@ function Status({ m: 'medium', l: 'large', }[size] - }`} + } ${_deleted ? 'status-deleted' : ''}`} onMouseEnter={debugHover} onContextMenu={(e) => { if (size === 'l') return; if (e.metaKey) return; if (previewMode) return; + if (_deleted) return; // console.log('context menu', e); const link = e.target.closest('a'); if (link && /^https?:\/\//.test(link.getAttribute('href'))) return; @@ -672,7 +696,9 @@ function Status({ )} */} {/* */}{' '} {size !== 'l' && - (url && !previewMode ? ( + (_deleted ? ( + Deleted + ) : url && !previewMode ? (
- {' '} - - - - {editedAt && ( + {_deleted ? ( + Deleted + ) : ( <> - {' '} - • {' '} - + {' '} + + + + {editedAt && ( + <> + {' '} + • {' '} + + + )} )}
-
+