"Delete" status feature

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

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%;
+}

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({
             <Icon icon="pencil" />
             <span>Edit</span>
           </MenuItem>
+          {isSizeLarge && (
+            <MenuItem
+              onClick={() => {
+                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');
+                    }
+                  })();
+                }
+              }}
+            >
+              <Icon icon="trash" />
+              <span>Delete…</span>
+            </MenuItem>
+          )}
         </>
       )}
     </>
@@ -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({
             )} */}
           {/* </span> */}{' '}
           {size !== 'l' &&
-            (url && !previewMode ? (
+            (_deleted ? (
+              <span class="status-deleted-tag">Deleted</span>
+            ) : url && !previewMode ? (
               <Menu
                 instanceRef={menuInstanceRef}
                 portal={{
@@ -931,29 +957,41 @@ function Status({
         {isSizeLarge && (
           <>
             <div class="extra-meta">
-              <Icon icon={visibilityIconsMap[visibility]} alt={visibility} />{' '}
+              {_deleted ? (
-              <a href={url} target="_blank">
+                <span class="status-deleted-tag">Deleted</span>
-                <time class="created" datetime={createdAtDate.toISOString()}>
+              ) : (
-                  {createdDateText}
-                </time>
-              </a>
-              {editedAt && (
                 <>
-                  {' '}
+                  <Icon
-                  &bull; <Icon icon="pencil" alt="Edited" />{' '}
+                    icon={visibilityIconsMap[visibility]}
-                  <time
+                    alt={visibility}
-                    class="edited"
+                  />{' '}
-                    datetime={editedAtDate.toISOString()}
+                  <a href={url} target="_blank">
-                    onClick={() => {
+                    <time
-                      setShowEdited(id);
+                      class="created"
-                    }}
+                      datetime={createdAtDate.toISOString()}
-                  >
+                    >
-                    {editedDateText}
+                      {createdDateText}
-                  </time>
+                    </time>
+                  </a>
+                  {editedAt && (
+                    <>
+                      {' '}
+                      &bull; <Icon icon="pencil" alt="Edited" />{' '}
+                      <time
+                        class="edited"
+                        datetime={editedAtDate.toISOString()}
+                        onClick={() => {
+                          setShowEdited(id);
+                        }}
+                      >
+                        {editedDateText}
+                      </time>
+                    </>
+                  )}
                 </>
               )}
             </div>
-            <div class="actions">
+            <div class={`actions ${_deleted ? 'disabled' : ''}`}>
               <div class="action has-count">
                 <StatusButton
                   title="Reply"