mirror of
https://gitlab.com/octospacc/WhichNot.git
synced 2025-06-27 09:02:56 +02:00
778 lines
35 KiB
HTML
778 lines
35 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<link rel="manifest" href="./manifest.json" />
|
||
<title>WhichNot</title>
|
||
<style>
|
||
:root {
|
||
--whatsapp-green: #00a884;
|
||
--header-bg: #f0f2f5;
|
||
}
|
||
body, html {
|
||
margin: 0; height: 100%;
|
||
font-family: Arial, sans-serif;
|
||
}
|
||
.App { display: flex; height: 100vh; }
|
||
.ChatList {
|
||
width: 30%; overflow-y: auto;
|
||
background: white; border-right: 1px solid #ddd;
|
||
}
|
||
.ChatList-header {
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
padding: .75rem 1rem; border-bottom: 1px solid #ddd;
|
||
}
|
||
.ChatList-header button { background: none; border: none; font-size: 1.25rem; cursor: pointer; }
|
||
.NotebookButton { width: 100%; padding: .75rem 1rem; background: none; border: none; cursor: pointer; text-align: left; }
|
||
.NotebookButton:hover { background:#f5f5f5; }
|
||
.NotebookTitle { display: flex; align-items: center; gap: .5rem; }
|
||
.NotebookEmoji {
|
||
width: 1.5rem; height: 1.5rem; display: flex;
|
||
border-radius: 50%; align-items: center; justify-content: center; font-size: 1rem;
|
||
}
|
||
.NotebookName { margin: 0; font-size: 1rem; }
|
||
.NotebookDescription { font-size: .875rem; color: #555; margin: .25rem 0 0 2rem; }
|
||
.NotebookPreview { font-size: .875rem; color: #666; margin: .25rem 0 0 2rem; }
|
||
|
||
.ChatScreen { flex: 1; display: none; flex-direction: column; background: #efeae2; }
|
||
.App.show-chat .ChatScreen { display: flex; }
|
||
.ChatHeader { background:var(--header-bg); padding: .5rem; display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid #ddd; cursor: pointer; }
|
||
.ChatHeader h3 { margin: 0; flex: 1; font-size: 1rem; }
|
||
.BackButton, .SearchButton { font-size: 1.5rem; padding: .25rem; background: none; border: none; cursor: pointer; }
|
||
|
||
.Messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
|
||
.Message { background: white; padding: .5rem 1rem; border-radius: .5rem; max-width: 70%; word-break: break-word; margin: .5rem auto; position: relative; }
|
||
.Message .reactions { display: flex; gap: .25rem; margin-top: .25rem; }
|
||
.Message .reactions button { background: #f5f5f5; border: none; border-radius: .25rem; padding: 0 .5rem; cursor: pointer; }
|
||
.Message iframe { border: none; }
|
||
.AddReactionBtn { font-size: .9rem; background: none; border: none; cursor: pointer; color: var(--whatsapp-green); }
|
||
.ReactionInput { width: 2rem; padding: .1rem; font-size: 1rem; }
|
||
.Timestamp { font-size: .75rem; color: #666; margin-top: .25rem; text-align: right; }
|
||
|
||
.SendBar { display: flex; gap: .5rem; padding: 1rem; background: white; border-top: 1px solid #ddd; flex-direction: column; }
|
||
.ReplyPreview { background: #f5f5f5; padding: .5rem; border-radius: .25rem; display: flex; justify-content: space-between; align-items: center; }
|
||
.EditArea { flex: 1; padding: .5rem; border: 1px solid #ddd; border-radius: .5rem; resize: none; }
|
||
|
||
.ContextMenu {
|
||
position: fixed; z-index: 1000; min-width: 140px;
|
||
background: white; border: 1px solid #ddd; border-radius: .25rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
}
|
||
.ContextMenuItem { padding: .5rem 1rem; cursor: pointer; }
|
||
.ContextMenuItem:hover { background: #f5f5f5; }
|
||
|
||
.DateTimeModal, .SearchModal, .AppSettingsModal, .CreateModal, .SettingsModal, .CrossReplyModal {
|
||
position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
|
||
background: white; padding: 2rem; border-radius: .5rem; box-shadow: 0 0 1rem rgba(0,0,0,0.1);
|
||
max-height: 80vh; overflow-y: auto; width: 90%; max-width: 400px; z-index: 1001;
|
||
}
|
||
.SearchModal input, .AppSettingsModal textarea, .CreateModal input, .SettingsModal input {
|
||
width: 100%; margin: .5rem 0; padding: .5rem;
|
||
border: 1px solid #ddd; border-radius: .25rem;
|
||
}
|
||
.SearchResult { padding: .5rem 0; border-bottom: 1px solid #eee; cursor: pointer; }
|
||
.SearchResult:hover { background: #f9f9f9; }
|
||
|
||
.ReplyIndicator {
|
||
border-left: 3px solid var(--whatsapp-green); padding-left: .5rem; margin-bottom: .5rem;
|
||
color: #666; font-size: .9em; cursor: pointer;
|
||
}
|
||
|
||
@media (max-width:768px) {
|
||
.ChatList { width: 100%; }
|
||
.ChatScreen { width: 100%; display: none; }
|
||
.App.show-chat .ChatList { display: none; }
|
||
.App.show-chat .ChatScreen { display: flex; }
|
||
}
|
||
</style>
|
||
<script src="./localforage.min.js"></script>
|
||
</head>
|
||
<body>
|
||
<script type="module">
|
||
import { h, render, createContext } from 'https://esm.sh/preact';
|
||
import { useState, useEffect, useCallback, useRef, useContext } from 'https://esm.sh/preact/hooks';
|
||
import htm from 'https://esm.sh/htm';
|
||
const html = htm.bind(h), AppContext = createContext();
|
||
localforage.config({ name: "WhichNot" });
|
||
|
||
const uuidv7 = () => {
|
||
const bytes = new Uint8Array(16);
|
||
crypto.getRandomValues(bytes);
|
||
const timestamp = BigInt(Date.now());
|
||
bytes[0] = Number((timestamp >> 40n) & 0xffn);
|
||
bytes[1] = Number((timestamp >> 32n) & 0xffn);
|
||
bytes[2] = Number((timestamp >> 24n) & 0xffn);
|
||
bytes[3] = Number((timestamp >> 16n) & 0xffn);
|
||
bytes[4] = Number((timestamp >> 8n) & 0xffn);
|
||
bytes[5] = Number(timestamp & 0xffn);
|
||
bytes[6] = (bytes[6] & 0x0f) | 0x70;
|
||
bytes[8] = (bytes[8] & 0x3f) | 0x80;
|
||
const chars = Array.from(bytes).map(byte => byte.toString(16).padStart(2, '0'));
|
||
[10, 8, 6, 4].forEach(pos => chars.splice(pos, 0, '-'));
|
||
return chars.join('');
|
||
}
|
||
const generateUUID = () => uuidv7(); // crypto.randomUUID();
|
||
const genAESKey = async () => crypto.subtle.generateKey({ name: 'AES-GCM', length: 256 }, true, ['encrypt', 'decrypt']);
|
||
// const genEd25519 = async () => crypto.subtle.generateKey({ name: 'Ed25519', namedCurve: 'Ed25519' }, true, ['sign', 'verify']);
|
||
const exportJWK = async (key) => btoa(JSON.stringify(await crypto.subtle.exportKey('jwk', key)));
|
||
const importJWK = async (b64, alg, usages) => crypto.subtle.importKey('jwk', JSON.parse(atob(b64)), alg, true, usages);
|
||
const randBytes = (n=12) => {
|
||
const b = new Uint8Array(n);
|
||
crypto.getRandomValues(b);
|
||
return b;
|
||
}
|
||
const bufToB64 = (buf) => btoa(String.fromCharCode(...new Uint8Array(buf)));
|
||
const b64ToBuf = (str) => Uint8Array.from(atob(str), (c => c.charCodeAt(0)));
|
||
const deriveMsgKey = async (rawKey, salt) => crypto.subtle.deriveKey(
|
||
{ name: 'HKDF', salt, info: new TextEncoder().encode('msg'), hash: 'SHA-256' },
|
||
await crypto.subtle.importKey('raw', rawKey, 'HKDF', false, ['deriveKey']),
|
||
{ name: 'AES-GCM', length: 256 },
|
||
true, ['encrypt', 'decrypt']);
|
||
const getAesRawKey = async (aesKeyB64) => await crypto.subtle.exportKey('raw', await importJWK(aesKeyB64, { name: 'AES-GCM' }, ['encrypt','decrypt']));
|
||
|
||
const encryptMessage = async (message, rawKey) => {
|
||
const salt = randBytes();
|
||
const iv = randBytes(12);
|
||
const key = await deriveMsgKey(rawKey, salt);
|
||
const ct = await crypto.subtle.encrypt({ name: 'AES-GCM', iv }, key, new TextEncoder().encode(message.text));
|
||
const encrypted = { ...message,
|
||
salt: bufToB64(salt),
|
||
iv: bufToB64(iv),
|
||
ciphertext: bufToB64(ct),
|
||
};
|
||
delete encrypted.text;
|
||
return encrypted;
|
||
};
|
||
const decryptMessage = async (encrypted, rawKey) => {
|
||
const salt = b64ToBuf(encrypted.salt);
|
||
const iv = b64ToBuf(encrypted.iv);
|
||
const key = await deriveMsgKey(rawKey, salt);
|
||
const ct = b64ToBuf(encrypted.ciphertext);
|
||
const dec = await crypto.subtle.decrypt({ name: 'AES-GCM', iv }, key, ct);
|
||
return { ...encrypted, text: new TextDecoder().decode(dec) };
|
||
};
|
||
|
||
const escapeHtml = text => {
|
||
const node = document.createElement('p');
|
||
node.appendChild(document.createTextNode(text));
|
||
return node.innerHTML;
|
||
}
|
||
const makeParagraph = text => `<p>${text.replaceAll('\n', '<br />')}</p>`
|
||
const linkify = text => text.replace(/(\bhttps?:\/\/[^\s]+)/g, '<a href="$1" target="_blank">$1</a>');
|
||
const isSimpleUrl = text => (!(text = text.toLowerCase()).includes(' ') && (text.startsWith('http://') || text.startsWith('https://')));
|
||
|
||
const EMOJIS = ['📒','📓','📔','📕','📖','📗','📘','📙','📚','✏️','📝'];
|
||
const randomEmoji = () => EMOJIS[Math.floor(Math.random() * EMOJIS.length)];
|
||
const randomColor = () => ('#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, '0'));
|
||
|
||
const closedContextMenu = (s) => ({ contextMenu: { ...s.contextMenu, visible: false } });
|
||
|
||
function App() {
|
||
const [state,setState] = useState({
|
||
notebooks: [], encrypted: {}, messages: {},
|
||
selectedNotebook: null, scrollToMessage: null,
|
||
showSettings: false, showAppSettings: false,
|
||
createModal: false, dateTimeModal: null,
|
||
crossReplyModal: false, crossReplySource: null,
|
||
contextMenu:{ visible: false, messageId: null, x: 0, y: 0 },
|
||
searchModal: { visible: false, global: false, query: '' },
|
||
editingMessage: null, replyingTo: null, reactionInputFor: null,
|
||
});
|
||
const messageInputRef = useRef();
|
||
|
||
// Load & decrypt
|
||
useEffect(() => {
|
||
(async () => {
|
||
const notebooksList = await localforage.getItem('notebooks') || [];
|
||
const notebooks = [];
|
||
const enc = {};
|
||
const msgs = {};
|
||
for (let notebook of notebooksList) {
|
||
notebooks.push(notebook = await localforage.getItem(`notebooks/${notebook}`));
|
||
// const arr = await localforage.getItem(`notebook-${notebook.id}`) || [];
|
||
const arr = [];
|
||
const messagesList = await localforage.getItem(`messages/${notebook.id}`);
|
||
for (let messageId of messagesList) {
|
||
arr[messageId] = await localforage.getItem(`messages/${notebook.id}/${messageId}`);
|
||
}
|
||
enc[notebook.id] = arr;
|
||
const rawKey = await getAesRawKey(notebook.aesKeyB64);
|
||
const plain = {}; // [];
|
||
const promises = [];
|
||
for (const e of Object.values(arr)) { // arr) {
|
||
//plain.push({ ...e, text: new TextDecoder().decode(dec) });
|
||
//plain.push(await decryptMessage(e, rawKey));
|
||
//plain[e.id] = await decryptMessage(e, rawKey);
|
||
promises.push(decryptMessage(e, rawKey).then(message => plain[e.id] = message));
|
||
}
|
||
await Promise.all(promises);
|
||
msgs[notebook.id] = plain;
|
||
}
|
||
setState(s => ({ ...s, notebooks, encrypted: enc, messages: msgs }));
|
||
})();
|
||
}, []);
|
||
|
||
// Persist notebooks meta
|
||
useEffect(() => {
|
||
for (const notebook of state.notebooks) {
|
||
localforage.setItem(`notebooks/${notebook.id}`, notebook);
|
||
}
|
||
localforage.setItem('notebooks', state.notebooks.map(notebook => notebook.id));
|
||
}, [state.notebooks]);
|
||
|
||
// Persist encrypted store
|
||
useEffect(() => {
|
||
for (const notebookId in state.encrypted) {
|
||
// localforage.setItem(`notebook-${id}`, state.encrypted[id]);
|
||
const messages = state.encrypted[notebookId];
|
||
if (!messages) return;
|
||
localforage.setItem(`messages/${notebookId}`, Object.keys(messages));
|
||
for (const message of Object.values(messages)) {
|
||
localforage.setItem(`messages/${notebookId}/${message.id}`, message);
|
||
}
|
||
}
|
||
}, [state.encrypted]);
|
||
|
||
// Close context on click-away
|
||
useEffect(() => {
|
||
const handler = event => {
|
||
if (state.contextMenu.visible) {
|
||
const menu = document.querySelector('.ContextMenu');
|
||
if (menu && !menu.contains(event.target)) {
|
||
setState(s => ({ ...s, ...closedContextMenu(s) }));
|
||
}
|
||
}
|
||
};
|
||
document.addEventListener('click', handler);
|
||
return () => document.removeEventListener('click', handler);
|
||
}, [state.contextMenu.visible]);
|
||
|
||
const createNotebook = useCallback(async (type) => {
|
||
let id = /* (type === 'local' ? */ generateUUID(); /* : prompt('Remote ID:')); */
|
||
// if (!id) return;
|
||
const now = Date.now();
|
||
// const ed = await genEd25519();
|
||
const notebook = {
|
||
id, name: `Notebook ${now}`, description: '',
|
||
emoji: randomEmoji(), color: randomColor(),
|
||
// parseMode: 'plaintext', // sourceType: type,
|
||
nextMessageId: 1, created: now,
|
||
aesKeyB64: await exportJWK(await genAESKey()), // edPrivB64: await exportJWK(ed.privateKey), edPubB64: await exportJWK(ed.publicKey),
|
||
};
|
||
setState(s => ({ ...s,
|
||
notebooks: [ ...s.notebooks, notebook ],
|
||
encrypted: { ...s.encrypted, [id]: {} }, // [] },
|
||
messages: { ...s.messages, [id]: {} }, // [] },
|
||
createModal: false,
|
||
}));
|
||
// if (type==='remote') {
|
||
// await fetch(`/notebook/${id}`, {
|
||
// method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||
// body: JSON.stringify({ publicKey: pubB64 }),
|
||
// });
|
||
// }
|
||
}, [state.notebooks]);
|
||
|
||
const getNotebook = useCallback(notebookId => state.notebooks.find(notebook => (notebook.id === notebookId)), [state.notebooks]);
|
||
const deleteNotebook = (notebookId) => {
|
||
const messagesList = Object.keys(getMessages(notebookId));
|
||
setState(s => ({ ...s,
|
||
notebooks: s.notebooks.filter(notebook => notebook.id!==notebookId),
|
||
messages: { ...s.messages, [notebookId]: undefined },
|
||
encrypted: { ...s.encrypted, [notebookId]: undefined },
|
||
}));
|
||
localforage.removeItem(`notebooks/${notebookId}`);
|
||
localforage.removeItem(`messages/${notebookId}`);
|
||
for (const messageId of messagesList) {
|
||
localforage.removeItem(`messages/${notebookId}/${messageId}`);
|
||
}
|
||
};
|
||
|
||
const getMessages = useCallback((notebookId /* , messageId */) => state.messages[notebookId], [state.messages]); // {
|
||
// const messages = state.messages[notebookId];
|
||
// return (messageId ? messages[messageId] : messages);
|
||
// // return (messageId ? messages.find(message => (message.id === messageId)) : messages);
|
||
// }, [state.messages]);
|
||
const getMessage = useCallback((notebookId, messageId) => getMessages(notebookId)[messageId], [state.messages]);
|
||
|
||
const saveMessage = (notebookId, message) => persistMessages(notebookId, /* Object.values( */ { ...getMessages(notebookId), [message.id]: message } /* ) */);
|
||
const deleteMessage = (notebookId, messageId) => {
|
||
const messages = getMessages(notebookId);
|
||
delete messages[messageId];
|
||
persistMessages(notebookId, /* Object.values( */ messages /* ) */);
|
||
localforage.removeItem(`messages/${notebookId}/${messageId}`);
|
||
// setState(s => ({ ...s, messages: { ...s.messages, [nbId]: messages } }));
|
||
};
|
||
const copyMessage = message => navigator.clipboard.writeText(message.text);
|
||
|
||
const persistMessages = useCallback(async (nbId, plainArr) => {
|
||
const notebook = getNotebook(nbId);
|
||
if (!notebook) return;
|
||
const rawKey = await getAesRawKey(notebook.aesKeyB64);
|
||
const encArr = {}; // [];
|
||
for (const message of Object.values(plainArr)) { //plainArr){
|
||
//encArr.push(await encryptMessage(message, rawKey));
|
||
encArr[message.id] = await encryptMessage(message, rawKey);
|
||
}
|
||
setState(s => ({ ...s,
|
||
encrypted: { ...s.encrypted, [nbId]: encArr },
|
||
messages: { ...s.messages, [nbId]: plainArr },
|
||
}));
|
||
// if (notebook.sourceType==='remote') {
|
||
// const priv = await importJWK(notebook.edPrivB64, { name: 'Ed25519', namedCurve: 'Ed25519' }, ['sign']),
|
||
// payload = new TextEncoder().encode(JSON.stringify(encArr)),
|
||
// sig = bufToB64(await crypto.subtle.sign('Ed25519', priv, payload));
|
||
// await fetch(`/notebook/${nbId}/sync`, {
|
||
// method: 'PUT', headers: { 'Content-Type': 'application/json' },
|
||
// body: JSON.stringify({ encryptedArr: encArr, signature: sig, publicKey: notebook.edPubB64 }),
|
||
// });
|
||
// }
|
||
}, [state.notebooks]);
|
||
|
||
const addReaction = useCallback(messageId => setState(s => ({ ...s, reactionInputFor: messageId })), []);
|
||
const confirmReaction = useCallback(async (idx, emoji) => {
|
||
if (!emoji) return;
|
||
setState(s => ({ ...s, reactionInputFor: null }));
|
||
const nbId = state.selectedNotebook;
|
||
//const arr = state.messages[nbId] || [];
|
||
//const newArr = arr.map((m, i) => i===idx ? { ...m, reactions: (m.reactions.includes(emoji) ? m.reactions : [...m.reactions, emoji]) } : m);
|
||
//const newArr = getMessages(nbId);
|
||
//const m = newArr[idx];
|
||
//newArr[idx] = { ...m, reactions: (m.reactions.includes(emoji) ? m.reactions : [...m.reactions, emoji]) }
|
||
//await persistMessages(nbId, newArr);
|
||
const message = getMessage(nbId, idx);
|
||
if (!(emoji in message.reactions)) { // (!message.reactions.includes(emoji)) {
|
||
message.reactions[emoji] = true; // [...message.reactions, emoji];
|
||
saveMessage(nbId, message);
|
||
}
|
||
setState(s => ({ ...s, reactionInputFor: null }));
|
||
}, [state.selectedNotebook, state.messages, persistMessages]);
|
||
const removeReaction = useCallback(async (idx, emoji) => {
|
||
const nbId = state.selectedNotebook;
|
||
//const arr = state.messages[nbId] || [];
|
||
//const newArr = arr.map((m,i) => i===idx ? { ...m, reactions: m.reactions.filter(r => r!==emoji) } : m);
|
||
//await persistMessages(nbId, newArr);
|
||
const message = getMessage(nbId, idx);
|
||
if (emoji in message.reactions) {
|
||
delete message.reactions[emoji];
|
||
saveMessage(nbId, message);
|
||
}
|
||
}, [state.selectedNotebook, state.messages, persistMessages]);
|
||
|
||
// Editing effect: prefill textarea when entering edit mode
|
||
useEffect(() => {
|
||
if (state.editingMessage!=null && messageInputRef.current) {
|
||
const message = state.messages[state.selectedNotebook]?.[state.editingMessage];
|
||
if (message) {
|
||
messageInputRef.current.value = message.text;
|
||
}
|
||
}
|
||
}, [state.editingMessage, state.selectedNotebook, state.messages]);
|
||
|
||
const sendMessage = useCallback(async () => {
|
||
const nbId = state.selectedNotebook;
|
||
if (!nbId) return;
|
||
const text = messageInputRef.current.value.trim();
|
||
if (!text) return;
|
||
//const arr = state.messages[nbId] || [];
|
||
const notebook = getNotebook(nbId);
|
||
let message = getMessage(nbId, state.editingMessage); // arr[state.editingMessage];
|
||
if (!message) {
|
||
message = {
|
||
id: notebook.nextMessageId,
|
||
created/*timestamp*/: Date.now(),
|
||
edited: state.editingMessage!=null,
|
||
replyTo: state.replyingTo,
|
||
reactions: {}, // [],
|
||
};
|
||
}
|
||
message = { ...message, text };
|
||
messageInputRef.current.value = '';
|
||
// update nextMessageId if new
|
||
setState(s => ({ ...s, notebooks: s.notebooks.map(notebook => notebook.id===nbId
|
||
? { ...notebook, nextMessageId: (state.editingMessage==null ? notebook.nextMessageId+1 : notebook.nextMessageId) }
|
||
: notebook
|
||
) }));
|
||
// const newArr = (state.editingMessage!=null
|
||
// ? arr.map((msg, i) => (i===state.editingMessage ? message : msg))
|
||
// : { ...arr, [message.id]: message } // [...arr, message]
|
||
// );
|
||
//const newArr = arr;
|
||
//newArr[message.id] = message;
|
||
// reset editing & replying
|
||
saveMessage(nbId, message);
|
||
setState( s => ({ ...s, editingMessage: null, replyingTo: null }));
|
||
//await persistMessages(nbId, newArr);
|
||
}, [state.selectedNotebook, state.editingMessage, state.replyingTo, state.messages, state.notebooks]);
|
||
|
||
return html`
|
||
<${AppContext.Provider} value=${{
|
||
state, setState, createNotebook,
|
||
getNotebook, deleteNotebook,
|
||
getMessages, getMessage,
|
||
sendMessage, persistMessages,
|
||
saveMessage, deleteMessage, copyMessage,
|
||
addReaction, confirmReaction, removeReaction,
|
||
}}>
|
||
<div class="App ${state.selectedNotebook ? 'show-chat' : ''}">
|
||
<${ChatList} />
|
||
<${ChatScreen} messageInputRef=${messageInputRef} />
|
||
${state.createModal && html`<${CreateModal} />`}
|
||
${state.crossReplyModal && html`<${CrossReplyModal} />`}
|
||
${state.showSettings && html`<${SettingsModal} />`}
|
||
${state.showAppSettings && html`<${AppSettingsModal} />`}
|
||
${state.contextMenu.visible && html`<${ContextMenu} />`}
|
||
${state.dateTimeModal!==null && html`<${DateTimeModal} />`}
|
||
${state.searchModal.visible && html`<${SearchModal} />`}
|
||
</div>
|
||
<//>
|
||
`;
|
||
}
|
||
|
||
function ChatList() {
|
||
const {state, setState, getMessages} = useContext(AppContext);
|
||
const sortNotebook = (notebook) => Math.max(notebook.created, ...Object.values(getMessages(notebook.id) || []).map(message => message.created/*timestamp*/));
|
||
return html`
|
||
<div class="ChatList">
|
||
<div class="ChatList-header">
|
||
<button onClick=${() => setState(s => ({ ...s, createModal: true }))}>＋</button>
|
||
<!-- <button onClick=${() => setState(s => ({ ...s, searchModal: { visible: true, global: true, query: '' } }))}>🔍</button> -->
|
||
<button onClick=${() => setState(s => ({ ...s, showAppSettings: true }))}>⚙️</button>
|
||
</div>
|
||
${state.notebooks.sort((a, b) => (sortNotebook(b) - sortNotebook(a))).map(notebook => html`
|
||
<button class="NotebookButton" key=${notebook.id}
|
||
onClick=${() => setState(s => ({ ...s, selectedNotebook: notebook.id }))}>
|
||
<div class="NotebookTitle">
|
||
<div class="NotebookEmoji" style=${{ background: notebook.color }}>${notebook.emoji}</div>
|
||
<h4 class="NotebookName">${notebook.name}</h4>
|
||
</div>
|
||
<div class="NotebookDescription">${notebook.description || 'No description'}</div>
|
||
<div class="NotebookPreview">
|
||
${(() => {
|
||
const arr = state.messages[notebook.id] || [];
|
||
return arr.length ? arr[arr.length-1].text : 'No messages';
|
||
})()}
|
||
</div>
|
||
</button>
|
||
`)}
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function ChatScreen({ messageInputRef }) {
|
||
const { state, setState, sendMessage, getMessage, getNotebook } = useContext(AppContext);
|
||
const notebook = getNotebook(state.selectedNotebook);
|
||
let messages = state.messages[notebook?.id] || [];
|
||
messages = /* [...messages] */ Object.values(messages).sort((a,b) => (a.created/*timestamp*/ - b.created/*timestamp*/));
|
||
|
||
// Scroll on request
|
||
useEffect(() => {
|
||
// Array.from(document.querySelectorAll(`.Message[data-msg-id${state.scrollToMessage!=null ? `="${state.scrollToMessage}"` : ''}]`)).slice(-1)[0]?.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
if (state.scrollToMessage!=null) {
|
||
document.querySelector(`[data-message-id="${state.scrollToMessage}"]`)?.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
setState(s => ({ ...s, scrollToMessage: null }));
|
||
}
|
||
}, [state.scrollToMessage, state.selectedNotebook]);
|
||
|
||
if (!notebook) return null;
|
||
|
||
return html`
|
||
<div class="ChatScreen">
|
||
<div class="ChatHeader" onClick=${() => setState(s => ({ ...s, showSettings: true }))}>
|
||
<button class="BackButton"
|
||
onClick=${ev => {
|
||
ev.stopPropagation();
|
||
setState(s => ({ ...s, selectedNotebook: null }));
|
||
}}>
|
||
←
|
||
</button>
|
||
<div class="NotebookEmoji" style=${{ background: notebook.color }}>${notebook.emoji}</div>
|
||
<h3>${notebook.name}</h3>
|
||
<!-- <button class="SearchButton"
|
||
onClick=${ev => {
|
||
ev.stopPropagation();
|
||
setState(s => ({ ...s, searchModal: { visible: true, global: false, query: '' }}));
|
||
}}>
|
||
🔍
|
||
</button> -->
|
||
</div>
|
||
<div class="Messages">
|
||
${messages.map(message => html`
|
||
<${Message} message=${message} />
|
||
`)}
|
||
</div>
|
||
<div class="SendBar">
|
||
${state.replyingTo && html`
|
||
<div class="ReplyPreview">
|
||
<span>Replying to: ${
|
||
// (state.messages[state.replyingTo.notebookId] || []).find(x => x.id===state.replyingTo.id)?.text || ''
|
||
getMessage(state.replyingTo.notebookId, state.replyingTo.id)?.text || ''
|
||
}</span>
|
||
<button onClick=${() => setState(s => ({ ...s, replyingTo: null }))}>×</button>
|
||
</div>`}
|
||
<textarea ref=${messageInputRef} class="EditArea"
|
||
onKeyPress=${e => e.key==='Enter' && !e.shiftKey && sendMessage()}/>
|
||
<button onClick=${sendMessage}>${state.editingMessage!=null?'Save':'Send'}</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function Message({ message }) {
|
||
const {
|
||
state, setState, getMessage,
|
||
addReaction, confirmReaction, removeReaction
|
||
} = useContext(AppContext);
|
||
return html`
|
||
<div class="Message" data-message-id=${message.id}
|
||
onContextMenu=${event => {
|
||
event.preventDefault();
|
||
setState(s => ({ ...s, contextMenu: { visible: true, messageId: message.id, x: event.clientX, y: event.clientY } }));
|
||
}}
|
||
onTouchStart=${event => {
|
||
event.preventDefault();
|
||
const target = event.touches[0];
|
||
setState(s => ({ ...s, contextMenu: { visible: true, messageId: message.id, x: target.clientX, y: target.clientY } }));
|
||
}}>
|
||
${message.replyTo && html`
|
||
<div class="ReplyIndicator"
|
||
onClick=${() => setState(s => ({ ...state,
|
||
selectedNotebook: message.replyTo.notebookId,
|
||
scrollToMessage: message.replyTo.id,
|
||
}))}>
|
||
Reply to "${
|
||
// (state.messages[message.replyTo.notebookId] || []).find(x => x.id===message.replyTo.id)?.text || ''
|
||
getMessage(message.replyTo.notebookId, message.replyTo.id)?.text || ''
|
||
}"
|
||
</div>`}
|
||
<div dangerouslySetInnerHTML=${{ __html: makeParagraph(linkify(escapeHtml(message.text))) }} />
|
||
${(() => {
|
||
if (isSimpleUrl(message.text)) {
|
||
return html`<div>
|
||
<iframe src=${message.text} sandbox></iframe>
|
||
</div>`;
|
||
}
|
||
})()}
|
||
<div class="reactions">
|
||
${Object.keys(message.reactions).map(reaction => html`
|
||
<button onClick=${() => removeReaction(message.id, reaction)}>${reaction}</button>
|
||
`)}
|
||
${state.reactionInputFor===message.id
|
||
? html`<input class="ReactionInput" maxlength="2" autofocus
|
||
onKeyPress=${e=>e.key==='Enter'&&(confirmReaction(message.id, e.target.value), e.target.value='')} />`
|
||
: html`<button class="AddReactionBtn" onClick=${()=>addReaction(message.id)}>➕</button>`
|
||
}
|
||
</div>
|
||
<div class="Timestamp">${new Date(message.created/*timestamp*/).toLocaleString()}${message.edited ? ' (edited)' : ''}</div>
|
||
</div>
|
||
`
|
||
}
|
||
|
||
function CreateModal() {
|
||
const {createNotebook, setState} = useContext(AppContext);
|
||
createNotebook('local');
|
||
return '';
|
||
// return html`
|
||
// <div class="CreateModal">
|
||
// <h3>Create Notebook</h3>
|
||
// <button onClick=${() => createNotebook('local')}>Local Notebook</button>
|
||
// <button onClick=${() => createNotebook('remote')}>Remote Notebook</button>
|
||
// <button onClick=${() => setState(s => ({ ...s, createModal: false }))}>Cancel</button>
|
||
// </div>
|
||
// `;
|
||
}
|
||
|
||
function CrossReplyModal() {
|
||
const {state, setState} = useContext(AppContext);
|
||
return html`
|
||
<div class="CrossReplyModal">
|
||
<h3>Reply in Another Notebook</h3>
|
||
${state.notebooks.filter(notebook => notebook.id!==state.crossReplySource.notebook).map(notebook => html`
|
||
<button onClick=${() => setState(s => ({ ...s,
|
||
selectedNotebook: notebook.id,
|
||
replyingTo: { notebookId: s.crossReplySource.notebook, id: s.crossReplySource.id },
|
||
crossReplyModal: false,
|
||
}))}>${notebook.emoji} ${notebook.name}</button>
|
||
`)}
|
||
<button onClick=${() => setState(s => ({ ...s, crossReplyModal: false }))}>Cancel</button>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function ContextMenu() {
|
||
const {state, setState, copyMessage, deleteMessage, persistMessages} = useContext(AppContext);
|
||
const idx = state.contextMenu.messageId;
|
||
const nbId = state.selectedNotebook;
|
||
const arr = state.messages[nbId] || [];
|
||
const msg = arr[idx];
|
||
const handle = action => {
|
||
let newArr;
|
||
switch(action){
|
||
case 'reply':
|
||
setState(s => ({ ...s, replyingTo: { notebookId: nbId, id: msg.id }, ...closedContextMenu(s) }));
|
||
return;
|
||
case 'cross-reply':
|
||
setState(s => ({ ...s, ...closedContextMenu(s), crossReplyModal: true, crossReplySource: { notebook: nbId, id: msg.id } }));
|
||
return;
|
||
case 'copy':
|
||
copyMessage(msg);
|
||
setState(s => ({ ...s, ...closedContextMenu(s) }));
|
||
return;
|
||
case 'edit':
|
||
setState(s => ({ ...s, editingMessage: idx, ...closedContextMenu(s) }));
|
||
return;
|
||
case 'datetime':
|
||
setState(s => ({ ...s, dateTimeModal: idx, ...closedContextMenu(s) }));
|
||
return;
|
||
case 'delete':
|
||
deleteMessage(nbId, idx);
|
||
// newArr=arr.filter((_,i)=>i!==idx);
|
||
// persistMessages(nbId, newArr);
|
||
setState(s => ({ ...s, /* messages: { ...s.messages, [nbId]: newArr }, */ ...closedContextMenu(s) }));
|
||
return;
|
||
}
|
||
};
|
||
return html`
|
||
<div class="ContextMenu" style=${`left: ${state.contextMenu.x}px; top: ${state.contextMenu.y}px;`}>
|
||
<div class="ContextMenuItem" onClick=${() => handle('reply')}>🔁 Reply</div>
|
||
<!--<div class="ContextMenuItem" onClick=${() => handle('cross-reply')}>🔂 Reply in Another Notebook</div>-->
|
||
<div class="ContextMenuItem" onClick=${() => handle('copy')}>📜 Copy</div>
|
||
<div class="ContextMenuItem" onClick=${() => handle('edit')}>📝 Edit</div>
|
||
<div class="ContextMenuItem" onClick=${() => handle('datetime')}>⏰ Set Date/Time</div>
|
||
<div class="ContextMenuItem" onClick=${() => handle('delete')}>❌ Delete</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function DateTimeModal() {
|
||
const {state, setState, persistMessages, saveMessage} = useContext(AppContext);
|
||
const idx = state.dateTimeModal;
|
||
const nbId = state.selectedNotebook;
|
||
const arr = state.messages[nbId]||[];
|
||
const msg = arr[idx];
|
||
const [dt, setDt] = useState('');
|
||
useEffect(() => (msg && setDt(new Date(msg.created/*timestamp*/).toISOString().slice(0, 16))), [msg]);
|
||
const save = () => {
|
||
const timestamp = new Date(dt).getTime();
|
||
if (!isNaN(timestamp)) {
|
||
// const newArr = arr.map((m,i) => i===idx ? { ...m, timestamp } : m);
|
||
// persistMessages(nbId, newArr);
|
||
// setState(s => ({ ...s, messages: { ...s.messages, [nbId]: newArr }, dateTimeModal: null }));
|
||
saveMessage(nbId, { ...msg, created: timestamp });
|
||
setState(s => ({ ...s, dateTimeModal: null }));
|
||
}
|
||
};
|
||
return html`
|
||
<div class="DateTimeModal">
|
||
<h3>Set Date/Time</h3>
|
||
<input type="datetime-local" value=${dt} onChange=${e => setDt(e.target.value)}/>
|
||
<button onClick=${save}>Save</button>
|
||
<button onClick=${() => setState(s => ({ ...s, dateTimeModal: null }))}>Cancel</button>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function SettingsModal() {
|
||
const {state, setState, getNotebook, deleteNotebook} = useContext(AppContext);
|
||
const notebook = getNotebook(state.selectedNotebook);
|
||
const [form, setForm] = useState({ ...notebook });
|
||
const save = () => setState(s => ({ ...s, notebooks: s.notebooks.map(n => (n.id===notebook.id ? form : n)), showSettings: false }));
|
||
const del = () => {
|
||
if (confirm('Delete?')) {
|
||
// if (notebook.sourceType==='local') {
|
||
// localforage.removeItem(`notebook-${notebook.id}`);
|
||
deleteNotebook(notebook.id);
|
||
setState(s => ({ ...s, selectedNotebook: null, showSettings: false }));
|
||
// }
|
||
// setState(s => ({ ...s,
|
||
// notebooks: s.notebooks.filter(n => n.id!==notebook.id),
|
||
// messages: { ...s.messages, [notebook.id]: undefined },
|
||
// encrypted: { ...s.encrypted, [notebook.id]: undefined },
|
||
// selectedNotebook: null, showSettings: false,
|
||
// }));
|
||
}
|
||
};
|
||
return html`
|
||
<div class="SettingsModal">
|
||
<h3>Settings</h3>
|
||
<label>Name: <input value=${form.name} onChange=${e => setForm(f => ({ ...f, name: e.target.value }))}/></label><br/>
|
||
<label>Emoji: <input value=${form.emoji} maxLength="2" onChange=${e => setForm(f => ({ ...f, emoji: e.target.value }))}/></label><br/>
|
||
<label>Color: <input type="color" value=${form.color} onChange=${e => setForm(f => ({ ...f, color: e.target.value }))}/></label><br/>
|
||
<label>Description: <input value=${form.description} onChange=${e => setForm(f => ({ ...f, description: e.target.value }))}/></label><br/>
|
||
<!--
|
||
<label>Parse Mode: <select value=${form.parseMode} onChange=${e => setForm(f => ({ ...f, parseMode: e.target.value }))}>
|
||
<option value="plaintext">Plaintext</option>
|
||
</select></label><br/><br/>
|
||
-->
|
||
<button onClick=${save}>Save</button>
|
||
<button onClick=${del} style="color:red">Delete</button>
|
||
<button onClick=${() => setState(s => ({ ...s, showSettings: false }))}>Close</button>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function SearchModal() {
|
||
const {state, setState, getNotebook} = useContext(AppContext);
|
||
const {query, global} = state.searchModal;
|
||
const results = (global
|
||
? state.notebooks.flatMap(notebook => (state.messages[notebook.id] || []).map(message => ({ ...message, notebook })))
|
||
: (state.messages[state.selectedNotebook] || []).map(message => ({ ...message, notebook: getNotebook(state.selectedNotebook) }))
|
||
).filter(message => message.text.toLowerCase().includes(query.toLowerCase()));
|
||
const select = (nbId, mId) => setState(s => ({ ...s, selectedNotebook: nbId, searchModal: { ...s.searchModal, visible: false }, scrollToMessage: mId }));
|
||
return html`
|
||
<div class="SearchModal">
|
||
<h3>${global ? 'Global' : 'Notebook'} Search</h3>
|
||
<input placeholder="Search..." value=${query} onInput=${e => setState(s => ({ ...s, searchModal: { ...s.searchModal, query: e.target.value }}))}/>
|
||
${results.map(result => html`
|
||
<div class="SearchResult" onClick=${() => select(result.notebook.id, result.id)}>
|
||
${global && html`<div class="NotebookTitle">
|
||
<div class="NotebookEmoji" style=${{ background: result.notebook.color }}>${result.notebook.emoji}</div>
|
||
<strong>${result.notebook.name}</strong>
|
||
</div>`}
|
||
<div>${result.text}</div><em>${new Date(result.created/*timestamp*/).toLocaleString()}</em>
|
||
</div>
|
||
`)}
|
||
<button onClick=${() => setState(s => ({ ...s, searchModal: { ...s.searchModal, visible: false }}))}>Close</button>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function AppSettingsModal() {
|
||
const {state, setState} = useContext(AppContext);
|
||
const [importTxt, setImportTxt] = useState('');
|
||
const exportData = () => JSON.stringify({ notebooks: state.notebooks, /* encrypted */ messages: Object.fromEntries(Object.entries(state.encrypted).map(([key, values]) => ([key, Object.values(values)]))) }, null, 2);
|
||
const doImport = () => {
|
||
try {
|
||
const obj = JSON.parse(importTxt);
|
||
if (obj.notebooks && obj.messages /* encrypted */) {
|
||
// localforage.setItem('notebooks', obj.notebooks);
|
||
// Object.entries(obj.messages /* encrypted */).forEach(([id, arr]) => localforage.setItem(`notebook-${id}`, arr));
|
||
setState(s => ({ ...s,
|
||
notebooks: obj.notebooks,
|
||
encrypted: Object.fromEntries(Object.entries(obj.messages).map(([notebookId, messages]) => ([notebookId, Object.fromEntries(messages.map(message => [message.id, message]))]))),
|
||
}));
|
||
window.location.reload();
|
||
} else {
|
||
alert('Invalid format');
|
||
}
|
||
} catch (err) {
|
||
console.error(err);
|
||
alert('Invalid JSON');
|
||
}
|
||
};
|
||
return html`
|
||
<div class="AppSettingsModal">
|
||
<h3>App Settings</h3>
|
||
<h4>Export Data</h4><textarea readonly rows="8">${exportData()}</textarea>
|
||
<h4>Import Data</h4><textarea rows="6" placeholder="Paste JSON" onInput=${e => setImportTxt(e.target.value)} />
|
||
<button onClick=${doImport}>Import</button>
|
||
<br /><br />
|
||
<button onClick=${() => setState(s => ({ ...s, showAppSettings:false }))}>Close</button>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
render(html`<${App}/>`, document.body);
|
||
</script>
|
||
</body>
|
||
</html> |