@@ -383,7 +450,6 @@ function Compose({
// );
const newWin = openCompose({
- uid: UID.current,
editStatus,
replyToStatus,
draftStatus: {
@@ -473,7 +539,7 @@ function Compose({
mediaAttachments,
},
};
- window.opener.__COMPOSE__ = passData;
+ window.opener.__COMPOSE__ = passData; // Pass it here instead of `showCompose` due to some weird proxy issue again
window.opener.__STATES__.showCompose = true;
},
});
diff --git a/src/components/drafts.css b/src/components/drafts.css
new file mode 100644
index 00000000..2b093b8c
--- /dev/null
+++ b/src/components/drafts.css
@@ -0,0 +1,94 @@
+.drafts-list {
+ margin: 1em 0;
+ padding: 0;
+ list-style: none;
+}
+.drafts-list > li {
+ margin: 8px 0 16px;
+ padding: 0;
+}
+
+.mini-draft-meta {
+ font-size: 80%;
+ justify-content: space-between;
+ align-items: center;
+ display: flex;
+ padding: 8px 0;
+}
+.mini-draft-meta * {
+ vertical-align: middle;
+}
+
+button.draft-item {
+ display: block;
+ width: 100%;
+ border: 0;
+ border-radius: 8px;
+ background-color: var(--bg-color);
+ color: var(--text-color);
+ border: 1px solid var(--link-faded-color);
+ text-align: left;
+ padding: 0;
+}
+button.draft-item:is(:hover, :focus) {
+ border-color: var(--link-color);
+ box-shadow: 0 0 0 3px var(--link-faded-color);
+ filter: none !important;
+}
+
+.mini-draft {
+ display: flex;
+ gap: 0 8px;
+ font-size: 90%;
+ padding: 8px;
+}
+
+.mini-draft-aside {
+ width: 64px;
+ aspect-ratio: 1 / 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: var(--bg-faded-color);
+ border-radius: 4px;
+ flex-shrink: 0;
+ border: 1px solid var(--outline-color);
+}
+.mini-draft-aside.has-image {
+ background-image: var(--bg-image);
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+.mini-draft-aside.has-image > span {
+ background-color: var(--bg-faded-blur-color);
+ backdrop-filter: blur(8px);
+ padding: 4px 8px;
+ border-radius: 32px;
+}
+.mini-draft-aside.has-image > span * {
+ vertical-align: middle;
+}
+
+.mini-draft-main {
+ flex-grow: 1;
+}
+
+.mini-draft-spoiler,
+.mini-draft-status {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ display: -webkit-box;
+ display: box;
+ -webkit-box-orient: vertical;
+ box-orient: vertical;
+ -webkit-line-clamp: 2;
+ line-clamp: 2;
+ line-height: 1.1;
+}
+.mini-draft-spoiler + .mini-draft-status {
+ border-top: 1px dashed var(--text-insignificant-color);
+ padding-top: 4px;
+ margin-top: 4px;
+ color: var(--text-insignificant-color);
+}
diff --git a/src/components/drafts.jsx b/src/components/drafts.jsx
new file mode 100644
index 00000000..96aca1ed
--- /dev/null
+++ b/src/components/drafts.jsx
@@ -0,0 +1,240 @@
+import './drafts.css';
+
+import { useEffect, useMemo, useReducer, useState } from 'react';
+
+import db from '../utils/db';
+import states from '../utils/states';
+import { getCurrentAccountNS } from '../utils/store-utils';
+
+import Icon from './icon';
+import Loader from './loader';
+
+function Drafts() {
+ const [uiState, setUIState] = useState('default');
+ const [drafts, setDrafts] = useState([]);
+ const [reloadCount, reload] = useReducer((c) => c + 1, 0);
+
+ useEffect(() => {
+ setUIState('loading');
+ (async () => {
+ try {
+ const keys = await db.drafts.keys();
+ if (keys.length) {
+ const ns = getCurrentAccountNS();
+ const ownKeys = keys.filter((key) => key.startsWith(ns));
+ if (ownKeys.length) {
+ const drafts = await db.drafts.getMany(ownKeys);
+ drafts.sort(
+ (a, b) =>
+ new Date(b.updatedAt).getTime() -
+ new Date(a.updatedAt).getTime(),
+ );
+ setDrafts(drafts);
+ } else {
+ setDrafts([]);
+ }
+ } else {
+ setDrafts([]);
+ }
+ setUIState('default');
+ } catch (e) {
+ console.error(e);
+ setUIState('error');
+ }
+ })();
+ }, [reloadCount]);
+
+ const hasDrafts = drafts?.length > 0;
+
+ return (
+
+
+
+ {hasDrafts ? (
+ <>
+
+ {drafts.map((draft) => {
+ const { updatedAt, key, draftStatus, replyTo } = draft;
+ const currentYear = new Date().getFullYear();
+ const updatedAtDate = new Date(updatedAt);
+ return (
+ -
+
+
+ {' '}
+
+
+
+
+
+
+ );
+ })}
+
+
+
+
+
+ ) : (
+ No drafts found.
+ )}
+
+
+ );
+}
+
+function MiniDraft({ draft }) {
+ const { draftStatus, replyTo } = draft;
+ const { status, spoilerText, poll, mediaAttachments } = draftStatus;
+ const hasPoll = poll?.options?.length > 0;
+ const hasMedia = mediaAttachments?.length > 0;
+ const hasPollOrMedia = hasPoll || hasMedia;
+ const firstImageMedia = useMemo(() => {
+ if (!hasMedia) return;
+ const image = mediaAttachments.find((media) => /image/.test(media.type));
+ if (!image) return;
+ const { file } = image;
+ const objectURL = URL.createObjectURL(file);
+ return objectURL;
+ }, [hasMedia, mediaAttachments]);
+ return (
+ <>
+
+ {hasPollOrMedia && (
+
+ {hasPoll && }
+ {hasMedia && (
+
+ {' '}
+ {mediaAttachments?.length}
+
+ )}
+
+ )}
+
+ {!!spoilerText &&
{spoilerText}
}
+ {!!status &&
{status}
}
+
+
+
+ );
+}
+
+export default Drafts;
diff --git a/src/pages/home.jsx b/src/pages/home.jsx
index 76a7f5d0..99896610 100644
--- a/src/pages/home.jsx
+++ b/src/pages/home.jsx
@@ -7,7 +7,9 @@ import { useSnapshot } from 'valtio';
import Icon from '../components/icon';
import Loader from '../components/loader';
import Status from '../components/status';
+import db from '../utils/db';
import states, { saveStatus } from '../utils/states';
+import { getCurrentAccountNS } from '../utils/store-utils';
import useDebouncedCallback from '../utils/useDebouncedCallback';
import useScroll from '../utils/useScroll';
@@ -181,6 +183,19 @@ function Home({ hidden }) {
}
}, [reachTop]);
+ useEffect(() => {
+ (async () => {
+ const keys = await db.drafts.keys();
+ if (keys.length) {
+ const ns = getCurrentAccountNS();
+ const ownKeys = keys.filter((key) => key.startsWith(ns));
+ if (ownKeys.length) {
+ states.showDrafts = true;
+ }
+ }
+ })();
+ }, []);
+
return (
+
Hidden features
+
+
+
About
diff --git a/src/utils/db.js b/src/utils/db.js
new file mode 100644
index 00000000..5db67ffd
--- /dev/null
+++ b/src/utils/db.js
@@ -0,0 +1,28 @@
+import {
+ clear,
+ createStore,
+ del,
+ delMany,
+ get,
+ getMany,
+ keys,
+ set,
+} from 'idb-keyval';
+
+const draftsStore = createStore('drafts-db', 'drafts-store');
+
+// Add additonal `draftsStore` parameter to all methods
+
+const drafts = {
+ set: (key, val) => set(key, val, draftsStore),
+ get: (key) => get(key, draftsStore),
+ getMany: (keys) => getMany(keys, draftsStore),
+ del: (key) => del(key, draftsStore),
+ delMany: (keys) => delMany(keys, draftsStore),
+ clear: () => clear(draftsStore),
+ keys: () => keys(draftsStore),
+};
+
+export default {
+ drafts,
+};
diff --git a/src/utils/states.js b/src/utils/states.js
index acad28bd..0b6876a3 100644
--- a/src/utils/states.js
+++ b/src/utils/states.js
@@ -18,6 +18,7 @@ const states = proxy({
showCompose: false,
showSettings: false,
showAccount: false,
+ showDrafts: false,
composeCharacterCount: 0,
});
export default states;
diff --git a/src/utils/store-utils.js b/src/utils/store-utils.js
index 6e307f06..51763288 100644
--- a/src/utils/store-utils.js
+++ b/src/utils/store-utils.js
@@ -7,3 +7,12 @@ export function getCurrentAccount() {
accounts.find((a) => a.info.id === currentAccount) || accounts[0];
return account;
}
+
+export function getCurrentAccountNS() {
+ const account = getCurrentAccount();
+ const {
+ instanceURL,
+ info: { id },
+ } = account;
+ return `${id}@${instanceURL}`;
+}
diff --git a/src/utils/useInterval.js b/src/utils/useInterval.js
new file mode 100644
index 00000000..c26aa8e0
--- /dev/null
+++ b/src/utils/useInterval.js
@@ -0,0 +1,22 @@
+// useInterval with Preact
+import { useEffect, useRef } from 'preact/hooks';
+
+export default function useInterval(callback, delay) {
+ const savedCallback = useRef();
+
+ // Remember the latest callback.
+ useEffect(() => {
+ savedCallback.current = callback;
+ }, [callback]);
+
+ // Set up the interval.
+ useEffect(() => {
+ function tick() {
+ savedCallback.current();
+ }
+ if (delay !== null) {
+ let id = setInterval(tick, delay);
+ return () => clearInterval(id);
+ }
+ }, [delay]);
+}