mirror of
https://github.com/priyanshujain/margin-calendar.git
synced 2026-10-02 11:07:04 +00:00
pj
661100dfdc
Tauri 2, React 19 and zustand on the front, Rust behind. Rust owns auth, all HTTP to Google, the SQLite store, the sync loop, recurrence expansion and timezone maths. TypeScript owns rendering and never talks to Google, which keeps the content security policy locked to ipc:. Week, day and agenda views, and no month view: it would be a second layout engine, and the fit and fold logic that makes a day fit the window without scrolling is the whole point of the app. Runs on macOS, Linux, Android and iOS. Desktop catches Google's OAuth redirect on a loopback port. A phone cannot, and Google rejects loopback for mobile client types anyway, so it redirects to a custom URI scheme and needs its own public OAuth clients, which docs/mobile.md covers. Refresh tokens are sealed with XChaCha20-Poly1305 in the app data directory on every platform, with no OS credential store in the picture. On a phone the chrome becomes a top bar and a bottom tab bar, overlays become sheets, hover affordances become taps, and dragging out an event waits for a long press. Navigation moves one day at a time everywhere, a swipe included.
72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
// One line of the agenda: when, what, where, on a surface tinted with its calendar's colour. Same
|
|
// rule as a block on the grid, and the same tokens, drawn a shade weaker: a row is several times
|
|
// the area of a block, and a fortnight of them at the grid's strength is a stack of highlighter.
|
|
|
|
import { memo } from "react";
|
|
import type { InstanceKey } from "../ipc";
|
|
import { calVars, keyOf, vars, eventTitle } from "./GridModel";
|
|
import { splitMatch, timeLabel, type AgendaItem } from "./AgendaModel";
|
|
|
|
interface AgendaRowProps {
|
|
item: AgendaItem;
|
|
selected: boolean;
|
|
/** Lowercased search terms to mark in the summary. Empty in the agenda proper. */
|
|
terms: readonly string[];
|
|
onSelect: (key: InstanceKey) => void;
|
|
onOpen?: (key: InstanceKey) => void;
|
|
}
|
|
|
|
export const AgendaRow = memo(function AgendaRow({
|
|
item,
|
|
selected,
|
|
terms,
|
|
onSelect,
|
|
onOpen,
|
|
}: AgendaRowProps) {
|
|
const { instance } = item;
|
|
const summary = eventTitle(instance);
|
|
|
|
let hint = summary;
|
|
if (instance.location) hint += ` · ${instance.location}`;
|
|
if (instance.status === "tentative") hint += " · tentative";
|
|
if (instance.pending) hint += " · not pushed yet";
|
|
|
|
const parts = terms.length > 0 ? splitMatch(summary, terms) : null;
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
className="agenda-row"
|
|
tabIndex={-1}
|
|
title={hint}
|
|
data-id={item.id}
|
|
data-allday={instance.allDay || undefined}
|
|
data-status={instance.status}
|
|
data-pending={instance.pending || undefined}
|
|
data-readonly={instance.readOnly || undefined}
|
|
data-selected={selected || undefined}
|
|
style={vars(calVars(instance))}
|
|
onClick={() => onSelect(keyOf(instance))}
|
|
onDoubleClick={() => onOpen?.(keyOf(instance))}
|
|
>
|
|
<span className="agenda-row-time">{timeLabel(item)}</span>
|
|
<span className="agenda-row-text">
|
|
<span className="agenda-row-title">
|
|
{parts
|
|
? parts.map((part, i) =>
|
|
part.hit ? (
|
|
<mark key={i} className="agenda-mark">
|
|
{part.text}
|
|
</mark>
|
|
) : (
|
|
<span key={i}>{part.text}</span>
|
|
),
|
|
)
|
|
: summary}
|
|
</span>
|
|
{instance.location && <span className="agenda-row-where">{instance.location}</span>}
|
|
</span>
|
|
</button>
|
|
);
|
|
});
|