Notifications

index.jsx 254 lines

import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import {
  Page,
  Header,
  Button,
  Input,
  Row,
  EmptyState,
  Toast,
  useToast,
} from "../../shared/ui.jsx";
import { ConfirmDelete } from "../../shared/forms.jsx";
import { useStore, inserted, displayTime } from "../../shared/data.js";
const L = window.lattice;
const appName = (value) =>
  value
    ? value
        .split(".")
        .at(-1)
        .replace(/(^|[-_])\w/g, (part) =>
          part.replace(/[-_]/, " ").toUpperCase(),
        )
    : "Other";
function App() {
  const [search, setSearch] = useState(""),
    [source, setSource] = useState(""),
    [sort, setSort] = useState("newest"),
    [deleting, setDeleting] = useState(null);
  const [deliveryError, setDeliveryError] = useState("");
  const { toast, notify, dismissToast } = useToast();
  const store = useStore({
    setup: () =>
      L.db.exec(
        `CREATE TABLE IF NOT EXISTS notifications (id INTEGER PRIMARY KEY AUTOINCREMENT,title TEXT NOT NULL,body TEXT DEFAULT '',source_app_id TEXT DEFAULT '',logged_at TEXT DEFAULT (datetime('now')))`,
      ),
    load: () =>
      L.db.query("SELECT * FROM notifications ORDER BY logged_at DESC,id DESC"),
    listeners: {
      "receive-notification": async (data, envelope) => {
        const title = data?.title || "Notification",
          body = data?.body || "",
          sourceApp = envelope?.source_app_id || "";
        const row = await inserted(
          "notifications",
          "INSERT INTO notifications (title,body,source_app_id) VALUES (?,?,?)",
          [title, body, sourceApp],
        );
        let desktopDelivered = true;
        try {
          await L.notify.send(title, body);
          setDeliveryError("");
        } catch {
          desktopDelivered = false;
          setDeliveryError(
            "Notification saved. Desktop delivery is unavailable.",
          );
        }
        await L.events.emit("notification-logged", {
          id: row.id,
          title,
          body,
          app_id: sourceApp,
          logged_at: row.logged_at,
          desktop_delivered: desktopDelivered,
        });
      },
    },
  });
  const query = search.trim().toLowerCase();
  const filtered = store.rows
    .filter(
      (row) =>
        (!source || row.source_app_id === source) &&
        [row.title, row.body, row.source_app_id].some((value) =>
          String(value || "")
            .toLowerCase()
            .includes(query),
        ),
    )
    .sort((a, b) =>
      sort === "oldest"
        ? a.logged_at.localeCompare(b.logged_at) || a.id - b.id
        : b.logged_at.localeCompare(a.logged_at) || b.id - a.id,
    );
  const isClear = deleting === "all";
  return (
    <Page>
      <Header
        title="Notifications"
        subtitle={`${store.rows.length} saved notifications`}
        actions={
          <Button
            disabled={!store.rows.length || store.busy}
            onClick={() => setDeleting("all")}
          >
            Clear all
          </Button>
        }
      />
      <div className="ui-toolbar">
        <Input
          type="search"
          aria-label="Search notifications"
          placeholder="Search notifications"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
        <select
          aria-label="Filter by source"
          value={source}
          onChange={(e) => setSource(e.target.value)}
        >
          <option value="">All sources</option>
          {[
            ...new Set(
              store.rows.map((row) => row.source_app_id).filter(Boolean),
            ),
          ]
            .sort()
            .map((value) => (
              <option key={value} value={value}>
                {appName(value)}
              </option>
            ))}
        </select>
        <select
          aria-label="Sort notifications"
          value={sort}
          onChange={(e) => setSort(e.target.value)}
        >
          <option value="newest">Newest first</option>
          <option value="oldest">Oldest first</option>
        </select>
      </div>
      {deliveryError && (
        <p className="ui-muted" role="status" style={{ marginBottom: 12 }}>
          {deliveryError}
        </p>
      )}
      {store.error && (
        <p className="ui-error-text" role="alert">
          {store.error}{" "}
          <Button onClick={() => store.act(async () => {})}>Retry</Button>
        </p>
      )}
      <div className="ui-panel">
        {!store.ready ? (
          <EmptyState
            title={
              store.error
                ? "Notifications could not be loaded"
                : "Loading notifications…"
            }
          />
        ) : !filtered.length ? (
          <EmptyState
            title={
              store.rows.length
                ? "No matching notifications"
                : "No notifications yet"
            }
            action={
              store.rows.length ? (
                <Button
                  onClick={() => {
                    setSearch("");
                    setSource("");
                  }}
                >
                  Clear filters
                </Button>
              ) : null
            }
          >
            {!store.rows.length
              ? "Notifications from connected apps will appear here."
              : null}
          </EmptyState>
        ) : (
          filtered.map((row) => (
            <Row
              key={row.id}
              leading={
                <span className="ui-avatar">
                  {appName(row.source_app_id)[0]}
                </span>
              }
              title={row.title}
              actions={
                <Button
                  variant="ghost"
                  aria-label={`Delete ${row.title}`}
                  onClick={() => setDeleting(row)}
                >
                  Delete
                </Button>
              }
            >
              {row.body && (
                <p
                  className="ui-muted"
                  style={{ margin: "5px 0", whiteSpace: "pre-wrap" }}
                >
                  {row.body}
                </p>
              )}
              <div className="ui-actions">
                <span className="ui-badge">{appName(row.source_app_id)}</span>
                <time
                  className="ui-muted"
                  dateTime={row.logged_at?.replace(" ", "T") + "Z"}
                >
                  {displayTime(row.logged_at)}
                </time>
              </div>
            </Row>
          ))
        )}
      </div>
      {deleting && (
        <ConfirmDelete
          title={isClear ? "Clear all notifications?" : "Delete notification?"}
          busy={store.busy}
          error={store.error}
          onClose={() => setDeleting(null)}
          onConfirm={async () => {
            if (
              await store.act(() =>
                L.db.exec(
                  isClear
                    ? "DELETE FROM notifications"
                    : "DELETE FROM notifications WHERE id=?",
                  isClear ? [] : [deleting.id],
                ),
              )
            ) {
              setDeleting(null);
              notify(
                isClear ? "Notifications cleared" : "Notification deleted",
              );
            }
          }}
        >
          {isClear
            ? `All ${store.rows.length} notifications will be permanently deleted, including any hidden by filters.`
            : deleting.title}
        </ConfirmDelete>
      )}
      <Toast message={toast} onDismiss={dismissToast} />
    </Page>
  );
}
createRoot(document.getElementById("root")).render(<App />);