diff --git a/deno.json b/deno.json index fb067d3..2650347 100644 --- a/deno.json +++ b/deno.json @@ -7,7 +7,7 @@ "tasks": { "lint": "deno lint", "fmt": "deno fmt", - "serve": "FSDB_ROOT=$PWD/.fsdb deno --allow-env --allow-read --allow-write --allow-net jsr:@andyburke/serverus --root ./public", + "serve": "FSDB_ROOT=$PWD/.fsdb TRACE_ERROR_RESPONSES=true SERVERUS_TYPESCRIPT_IMPORT_LOGGING=true deno --allow-env --allow-read --allow-write --allow-net jsr:@andyburke/serverus --root ./public", "test": "DENO_ENV=test FSDB_ROOT=$PWD/tests/data/$(date --iso-8601=seconds) SERVERUS_ROOT=$PWD/public deno test --allow-env --allow-read --allow-write --allow-net --trace-leaks --fail-fast tests/" }, "test": { diff --git a/models/event.ts b/models/event.ts index 18a8556..87f06e6 100644 --- a/models/event.ts +++ b/models/event.ts @@ -40,7 +40,7 @@ const ROOM_EVENTS: Record = {}; export function get_events_collection_for_room(room_id: string): FSDB_COLLECTION { ROOM_EVENTS[room_id] = ROOM_EVENTS[room_id] ?? { collection: new FSDB_COLLECTION({ - name: `rooms/${room_id.substring(0, 14)}/${room_id.substring(0, 36)}/${room_id}/events`, + name: `rooms/${room_id.slice(0, 14)}/${room_id.slice(0, 34)}/${room_id}/events`, id_field: 'id', organize: by_lurid, indexers: { diff --git a/public/api/rooms/:room_id/events/index.ts b/public/api/rooms/:room_id/events/index.ts index e7409a6..9a1cc97 100644 --- a/public/api/rooms/:room_id/events/index.ts +++ b/public/api/rooms/:room_id/events/index.ts @@ -56,7 +56,7 @@ export async function GET(request: Request, meta: Record): Promise< limit: Math.min(parseInt(meta.query?.limit ?? '10'), 1_000), sort, filter: (entry: WALK_ENTRY) => { - const event_id = path.basename(entry.path).replace(/\.json$/i, ''); + const [event_id, event_type] = path.basename(entry.path).replace(/\.json$/i, '').split(':'); if (meta.query.after_id && event_id <= meta.query.after_id) { return false; @@ -66,6 +66,10 @@ export async function GET(request: Request, meta: Record): Promise< return false; } + if (meta.query.type && event_type !== meta.query.type) { + return false; + } + return true; } }; @@ -78,7 +82,7 @@ export async function GET(request: Request, meta: Record): Promise< // long-polling support if (results.length === 0 && meta.query.wait) { - return new Promise((resolve) => { + return new Promise((resolve, reject) => { function on_create(create_event: any) { results.push(create_event.item); clearTimeout(timeout); @@ -101,6 +105,13 @@ export async function GET(request: Request, meta: Record): Promise< request.signal.addEventListener('abort', () => { events.off('create', on_create); }); + Deno.addSignalListener('SIGINT', () => { + events.off('create', on_create); + return resolve(Response.json(results, { + status: 200, + headers + })); + }); }); } @@ -142,7 +153,6 @@ export async function POST(req: Request, meta: Record): Promise): Promise): Promise { const limit = Math.min(parseInt(meta.query.limit ?? '100'), 100); - const rooms = await ROOMS.all({ - limit - }); + const rooms = (await ROOMS.all({ + limit, + filter: (entry: WALK_ENTRY) => { + // we push our event collections into the rooms, and fsdb + // doesn't yet filter that out in its all() logic + return entry.path.indexOf('/events/') === -1; + } + })).map((item) => item.load()); return Response.json(rooms, { status: 200 diff --git a/public/api/users/index.ts b/public/api/users/index.ts index ff9d6ec..6fe5cee 100644 --- a/public/api/users/index.ts +++ b/public/api/users/index.ts @@ -6,8 +6,7 @@ import lurid from 'jsr:@andyburke/lurid'; import { encodeBase64 } from 'jsr:@std/encoding'; import parse_body from '../../../utils/bodyparser.ts'; import { create_new_session, SESSION_RESULT } from '../auth/index.ts'; -import { PRECHECKS } from './me/index.ts'; -import { get_session, get_user, require_user } from '../../../utils/prechecks.ts'; +import { get_session, get_user, PRECHECK_TABLE, require_user } from '../../../utils/prechecks.ts'; import * as CANNED_RESPONSES from '../../../utils/canned_responses.ts'; // TODO: figure out a better solution for doling out permissions @@ -17,6 +16,8 @@ const DEFAULT_USER_PERMISSIONS: string[] = [ 'rooms.read' ]; +export const PRECHECKS: PRECHECK_TABLE = {}; + // GET /api/users - get users // query parameters: // partial_id: the partial id subset you would like to match (remember, lurids are lexigraphically sorted) diff --git a/public/api/users/me/index.ts b/public/api/users/me/index.ts index 70429d6..a8a03be 100644 --- a/public/api/users/me/index.ts +++ b/public/api/users/me/index.ts @@ -1,12 +1,12 @@ import * as CANNED_RESPONSES from '../../../../utils/canned_responses.ts'; import { get_session, get_user, PRECHECK_TABLE, require_user } from '../../../../utils/prechecks.ts'; -export const PERMISSIONS: Record) => Promise> = {}; export const PRECHECKS: PRECHECK_TABLE = {}; // GET /api/users/me - Get the current user PRECHECKS.GET = [get_session, get_user, require_user, (_req: Request, meta: Record): Response | undefined => { const can_read_self = meta.user.permissions.includes('self.read'); + console.dir({ meta, can_read_self }); if (!can_read_self) { return CANNED_RESPONSES.permission_denied(); diff --git a/public/base.css b/public/base.css index 33b89eb..d1aaa0f 100644 --- a/public/base.css +++ b/public/base.css @@ -41,12 +41,6 @@ dd { margin-block-end: 0; } -/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ -ul[role="list"], -ol[role="list"] { - list-style: none; -} - /* Set core body defaults */ body { min-height: 100vh; diff --git a/public/index.html b/public/index.html index eeab84e..2cc7d28 100644 --- a/public/index.html +++ b/public/index.html @@ -3,7 +3,7 @@ - Social UX + autonomous.contact diff --git a/public/tabs/talk.html b/public/tabs/talk.html index 1acdb20..1739b06 100644 --- a/public/tabs/talk.html +++ b/public/tabs/talk.html @@ -17,29 +17,55 @@ grid-template-columns: auto 1fr; } - #talk .sidebar { - position: relative; - min-width: 100px; - padding-top: 1.5rem; + .room-list { + margin: 1rem 0; + list-style-type: none; } - #talk .room { - padding: 1rem; + .room-list > li.room a:before { + position: absolute; + left: -1.75rem; + top: 0; + font-weight: bold; + font-size: x-large; + content: "#"; + color: var(--text); + } + + .room-list > li.room a { + position: relative; + display: block; + width: 100%; + min-height: 1.5rem; + line-height: 1.5rem; + font-weight: bold; + font-size: large; + margin-left: 1.75rem; + text-decoration: none; + } + + .room-list > li.room.active a { + color: var(--accent); + } + + #talk .sidebar { + position: relative; + min-width: 10rem; + } + + #talk .sidebar .title { + text-transform: uppercase; + font-size: small; + font-weight: bold; + line-height: 2rem; } #talk #room-create { position: absolute; - top: 1rem; + top: 0.5rem; right: 0.5rem; } - #talk .room-selector a { - display: block; - width: 100%; - text-decoration: none; - line-height: 1.5rem; - } - #talk #room-chat-container { position: relative; } @@ -122,6 +148,27 @@ font-size: x-small; } +
@@ -135,7 +182,7 @@ const room_list = document.getElementById("room-list"); room_list.insertAdjacentHTML( "beforeend", - `
  • New Room
    • `, + `
  • new room
    • `, ); await new Promise((resolve) => setTimeout(resolve, 1)); @@ -143,7 +190,55 @@ return new_room_element; } + async function append_room_events(events) { + const room_chat_content = document.getElementById("room-chat-content"); + const users = {}; + for (const event of events) { + users[event.creator_id] = + users[event.creator_id] ?? + (await api.fetch(`/users/${event.creator_id}`)); + + room_chat_content.insertAdjacentHTML( + "beforeend", + render_text_event(event, users[event.creator_id]), + ); + } + console.dir({ + users, + events, + room_chat_content, + }); + } + + let room_polling_request_abort_controller = null; + async function poll_for_new_events() { + const room_chat_content = document.getElementById("room-chat-content"); + const room_id = room_chat_content.dataset.room_id; + const last_message_id = room_chat_content.dataset.last_message_id; + + const message_polling_url = `/rooms/${room_id}/events?type=chat&limit=100&sort=newest&wait=true${last_message_id ? `&after_id=${last_message_id}` : ""}`; + + api.fetch(message_polling_url, { + signal: room_polling_request_abort_controller.signal, + }) + .then((new_events) => { + const room; + append_room_events(new_events); + poll_for_new_events(room_id); + }) + .catch((error) => { + // TODO: poll again? back off? + console.error(error); + }); + } + async function load_room(room_id) { + if (room_polling_request_abort_controller) { + room_polling_request_abort_controller.abort(); + room_polling_request_abort_controller = null; + last_message_id = null; + } + const room_response = await api.fetch(`/rooms/${room_id}`); if (!room_response.ok) { const error = await room_response.json(); @@ -152,26 +247,48 @@ } const room = await room_response.json(); + const room_chat_content = document.getElementById("room-chat-content"); - const events_response = await api.fetch(`/rooms/${room_id}/events`); + room_chat_content.innerHTML = ""; + const events_response = await api.fetch( + `/rooms/${room_id}/events?type=chat&limit=100&sort=newest`, + ); if (!events_response.ok) { const error = await room_response.json(); alert(error.message ?? JSON.stringify(error)); return; } + + const events = (await events_response.json()).reverse(); + + append_room_events(events); + last_message_id = events.length ? events[events.length - 1].id : null; + + room_polling_request_abort_controller = new AbortController(); + poll_for_new_events(room_id); } // TODO: one place to handle switching rooms // TODO: load events when we switch rooms and clear and update the chat // TODO: try to select immediate siblings from the same user and hide avatars - window.addEventListener("locationchange", function () { + function check_for_room_in_url() { const hash = window.location.hash; const room_id = hash.indexOf("#/talk/room/") === 0 ? hash.substring(12) : ""; const room_chat_container = document.getElementById("room-chat-container"); room_chat_container.dataset.room_id = room_id; - }); + + const room_selectors = document.querySelectorAll("li.room"); + for (const room_selector of room_selectors) { + room_selector.classList.remove("active"); + } + + const room_selector = document.getElementById(`room-selector-${room_id}`); + room_selector.classList.add("active"); + load_room(room_id); + } + window.addEventListener("locationchange", check_for_room_in_url); document.addEventListener("DOMContentLoaded", async () => { const rooms_response = await api.fetch("/rooms"); @@ -182,7 +299,7 @@ for (const room of rooms) { room_list.insertAdjacentHTML( "beforeend", - `
  • ${room.name}
    • `, + `
  • ${room.name}
    • `, ); } } @@ -214,7 +331,8 @@ const now = new Date().toISOString(); const message_event = { - type: "text", + id: `TEMP-${now}`, + type: "chat", data: { message, }, @@ -224,30 +342,11 @@ }, }; - const temp_message_id = `TEMP-${now}`; - const now_datetime = datetime_to_local( - message_event.timestamps.created, - ); - const user = JSON.parse(document.body.dataset.user); room_chat_content.insertAdjacentHTML( "beforeend", - `
    -
    -
    - user avatar -
    -
    - ${user.username ?? "unknown"} -
    -
    - ${now_datetime.long} - ${now_datetime.short} -
    -
    -
    ${message_event.data.message}
    -
    `, + render_text_event(message_event, user), ); const event_response = await api.fetch(`/rooms/${room_id}/events`, { @@ -263,7 +362,7 @@ const authoritative_message_event = await event_response.json(); - const temp_message = document.getElementById(temp_message_id); + const temp_message = document.getElementById(message_event.id); temp_message.id = authoritative_message_event.id; temp_message.classList.remove("sending"); @@ -296,31 +395,32 @@ event.preventDefault(); const new_room_element = await get_new_room_element(); - new_room_element.focus(); + const editable = new_room_element.querySelector("[contenteditable]"); + + editable.focus(); if (document.body.createTextRange) { const range = document.body.createTextRange(); - range.moveToElementText(new_room_element); + range.moveToElementText(editable); range.select(); } else if (window.getSelection) { const selection = window.getSelection(); const range = document.createRange(); - range.selectNodeContents(new_room_element); + range.selectNodeContents(editable); selection.removeAllRanges(); selection.addRange(range); } - new_room_element.addEventListener("keypress", (event) => { + editable.addEventListener("keypress", (event) => { if (event.keyCode !== 13) { return; } event.preventDefault(); - new_room_element.blur(); + editable.blur(); }); - new_room_element.addEventListener("focusout", async () => { - const name = - new_room_element.textContent ?? new_room_element.innerText; + editable.addEventListener("focusout", async () => { + const name = editable.textContent ?? editable.innerText; const new_room_response = await api.fetch("/rooms", { method: "POST", @@ -343,26 +443,31 @@ const room_list = document.getElementById("room-list"); room_list.insertAdjacentHTML( "beforeend", - `
  • ${new_room.name}
    • `, + `
  • ${new_room.name}
    • `, ); - const room_selectors = document.querySelectorAll(".room-selector"); + const room_selectors = document.querySelectorAll("li.room"); for (const room_selector of room_selectors) { room_selector.classList.remove("active"); } const new_room_selector = document.getElementById( - `room-${new_room.id}`, + `room-selector-${new_room.id}`, ); new_room_selector.classList.add("active"); window.location.hash = `/talk/room/${new_room.id}`; }); }); + + check_for_room_in_url(); });
    -
      +
      + chat rooms +
      +