pixelize-design-library 3.0.0 → 3.1.0

package/dist/esm/Components/NotificationCenter/core/grouping.js

@@ -0,0 +1,88 @@
+export const OTHER_CATEGORY_KEY = "__other";
+export const plainTitle = (parts) => parts.map((part) => (typeof part === "string" ? part : part.b)).join("");
+export const findCategory = (categories, key) => Object.prototype.hasOwnProperty.call(categories, key) ? categories[key] : undefined;
+export const zoneFor = (entry, categories) => {
+    var _a;
+    if (entry.archived)
+        return "archived";
+    const rule = (_a = findCategory(categories, entry.category)) === null || _a === void 0 ? void 0 : _a.needsYou;
+    if (rule === "always")
+        return "needsYou";
+    if (rule === "untilRead" && entry.isRead === false)
+        return "needsYou";
+    return "activity";
+};
+export const byNewest = (a, b) => b.entry.createdAt - a.entry.createdAt;
+export const matchesNotificationQuery = (entry, query) => {
+    const words = query.toLowerCase().split(/\s+/).filter(Boolean);
+    if (!words.length)
+        return true;
+    const haystack = [plainTitle(entry.title), entry.context, entry.preview, entry.eyebrow, entry.subject, entry.body]
+        .filter((part) => Boolean(part))
+        .join(" ")
+        .toLowerCase();
+    return words.every((word) => haystack.includes(word));
+};
+export const threadify = (items) => {
+    const threads = [];
+    const byKey = new Map();
+    items.forEach((item) => {
+        const key = item.entry.groupKey;
+        const existing = key === undefined ? undefined : byKey.get(key);
+        if (existing) {
+            existing.rest.push(item);
+            return;
+        }
+        const thread = { key: item.entry.id, lead: item, rest: [] };
+        threads.push(thread);
+        if (key !== undefined)
+            byKey.set(key, thread);
+    });
+    return threads;
+};
+export const threadEntries = (thread) => [thread.lead, ...thread.rest];
+export const threadIds = (thread) => threadEntries(thread).map((item) => item.entry.id);
+export const threadHasUnread = (thread) => threadEntries(thread).some((item) => item.entry.isRead === false);
+const isShown = (item) => !item.state.isHidden;
+const single = (item) => ({ key: item.entry.id, lead: item, rest: [] });
+export const groupByCategory = (items, categories, otherLabel) => {
+    const byCategory = new Map();
+    items.forEach((item) => {
+        const key = findCategory(categories, item.entry.category) ? item.entry.category : OTHER_CATEGORY_KEY;
+        const list = byCategory.get(key);
+        if (list)
+            list.push(item);
+        else
+            byCategory.set(key, [item]);
+    });
+    const order = [...Object.keys(categories), OTHER_CATEGORY_KEY].filter((key) => byCategory.has(key));
+    const groups = order.flatMap((key) => {
+        const list = byCategory.get(key);
+        if (!list || !list.some(isShown))
+            return [];
+        const category = findCategory(categories, key);
+        return [
+            {
+                key,
+                label: category ? category.label : otherLabel,
+                count: list.filter((item) => item.state.isPending).length,
+                threads: list.map(single),
+            },
+        ];
+    });
+    return groups.length === 1 ? [{ ...groups[0], label: null }] : groups;
+};
+export const groupByDay = (items, format, now) => {
+    const buckets = new Map();
+    items.forEach((item) => {
+        const bucket = format.dayBucket(item.entry.createdAt, now);
+        const list = buckets.get(bucket);
+        if (list)
+            list.push(item);
+        else
+            buckets.set(bucket, [item]);
+    });
+    return [...buckets]
+        .filter(([, list]) => list.some(isShown))
+        .map(([bucket, list]) => ({ key: bucket, label: format.dayLabel(bucket), count: 0, threads: threadify(list) }));
+};

package/dist/esm/Components/NotificationCenter/core/labels.js

@@ -0,0 +1,88 @@
+export const DEFAULT_NOTIFICATION_LOCALE = "en-IN";
+export const defaultNotificationLabels = (locale = DEFAULT_NOTIFICATION_LOCALE) => {
+    const english = new Intl.PluralRules("en");
+    const digits = new Intl.NumberFormat(locale);
+    const n = (count) => digits.format(count);
+    const many = (count, one, other) => (english.select(count) === "one" ? one : other);
+    const verb = (label) => label.toLowerCase();
+    return {
+        unread: "Unread",
+        actionName: (actionLabel, subject) => `${actionLabel}: ${subject}`,
+        markRead: "Mark as read",
+        markUnread: "Mark as unread",
+        archive: "Archive",
+        restore: "Move back to Activity",
+        moreActions: (title) => `More actions: ${title}`,
+        select: (title) => `Select: ${title}`,
+        threadShow: (count) => `Show ${n(count)} more from this thread`,
+        threadHide: (count) => `Hide ${n(count)} more from this thread`,
+        waiting: (days) => `Waiting ${n(days)} ${many(days, "day", "days")}`,
+        noAccess: "No access",
+        changedTo: "changed to",
+        offlineNote: "Reconnect to respond",
+        reasonLabel: "Add a note",
+        reasonOptional: "(optional)",
+        reasonPlaceholder: "The requester sees this",
+        reasonMissingNegative: "Add a reason so they know what to change.",
+        reasonMissing: "This needs a comment before it can be sent.",
+        keyCtrl: "Ctrl",
+        keyEnter: "Enter",
+        keyEsc: "Esc",
+        toSend: "to send",
+        toCancel: "to cancel",
+        cancel: "Cancel",
+        undo: "Undo",
+        sending: "Saving…",
+        couldNot: (actionLabel) => `Couldn't ${verb(actionLabel)}.`,
+        retry: "Try again",
+        dismiss: "Dismiss",
+        conflictMessage: "Someone already decided this.",
+        forbiddenMessage: "You can't decide this anymore.",
+        failedMessage: "The server didn't respond. Nothing was changed.",
+        reasonRequiredMessage: "This needs a comment before it can be sent.",
+        offlineMessage: "You're offline. Reconnect, then try again.",
+        decided: (doneLabel, subject) => `${doneLabel} · ${subject}`,
+        decidedAnnouncement: (doneLabel, subject) => `${doneLabel}: ${subject}. Undo available for 6 seconds.`,
+        requests: (count) => `${n(count)} ${many(count, "request", "requests")}`,
+        reasonQuote: (reason) => `Reason: ${reason}`,
+        decisionFailed: (actionLabel, count) => count > 1 ? `Couldn't ${verb(actionLabel)} ${n(count)} requests` : `Couldn't ${verb(actionLabel)}`,
+        conflicted: (count) => (count > 1 ? `Someone already decided ${n(count)} of these` : "Someone already decided this"),
+        forbidden: (count) => (count > 1 ? `You can't decide ${n(count)} of these anymore` : "You can't decide this anymore"),
+        reasonNeeded: (actionLabel) => `${actionLabel} needs a comment`,
+        archived: (count) => (count > 1 ? `${n(count)} notifications archived` : "Archived"),
+        restored: "Moved back to Activity",
+        markedRead: (count) => `Marked ${n(count)} as read`,
+        markAllFailed: "Couldn't mark them as read",
+        readFailed: (read) => (read ? "Couldn't mark as read" : "Couldn't mark as unread"),
+        archiveFailed: "Couldn't archive",
+        restoreFailed: "Couldn't move it back",
+        extraFailed: (actionLabel) => `Couldn't ${verb(actionLabel)}`,
+        undone: "Undone",
+        decisionUndone: "Undone. The request is back in Needs you.",
+        arrivedOne: (title) => `New notification: ${title}`,
+        arrivedMany: (count) => `${n(count)} new notifications`,
+        openIn: (appName) => (appName ? `Open in ${appName}` : "Open"),
+        blockedTitle: "You can't open this anymore",
+        back: "Back",
+        otherCategory: "Other",
+        now: "now",
+        justNow: "just now",
+        todayAt: (time) => `Today, ${time}`,
+        yesterdayAt: (time) => `Yesterday, ${time}`,
+        today: "Today",
+        yesterday: "Yesterday",
+        thisWeek: "This week",
+        older: "Older",
+    };
+};
+export const DEFAULT_NOTIFICATION_LABELS = defaultNotificationLabels();
+export const mergeDefined = (base, overrides = {}) => {
+    const merged = { ...base };
+    Object.keys(overrides).forEach((key) => {
+        const value = overrides[key];
+        if (value !== undefined)
+            merged[key] = value;
+    });
+    return merged;
+};
+export const resolveNotificationLabels = (locale = DEFAULT_NOTIFICATION_LOCALE, overrides = {}) => mergeDefined(defaultNotificationLabels(locale), overrides);

package/dist/esm/Components/NotificationCenter/core/overlay.js

@@ -0,0 +1,274 @@
+import { byNewest, zoneFor } from "./grouping.js";
+export const EMPTY_OVERLAY = {
+    decisions: {},
+    read: {},
+    archived: {},
+    markAll: [],
+    reasonRequests: {},
+    dismissed: {},
+    epoch: 0,
+};
+const mapById = (record, fn) => {
+    let changed = false;
+    const next = {};
+    Object.keys(record).forEach((id) => {
+        const current = record[id];
+        if (current === undefined)
+            return;
+        const value = fn(current, id);
+        if (value !== current)
+            changed = true;
+        if (value !== undefined)
+            next[id] = value;
+    });
+    return changed ? next : record;
+};
+const hasAction = (entry, actionId) => Boolean(entry.actions && entry.actions.some((action) => action.id === actionId));
+const foldsWithDecision = (phase) => phase === "undo" || phase === "sending" || phase === "resolved";
+const withPrevious = (current) => current ? { ...current, previous: undefined } : undefined;
+const setFlags = (record, ids, batch, value, phase) => {
+    const next = { ...record };
+    ids.forEach((id) => {
+        next[id] = { batch, value, phase, folded: false, previous: withPrevious(record[id]) };
+    });
+    return next;
+};
+const stepFlags = (record, batch, fn) => mapById(record, (rec) => (rec.batch === batch ? fn(rec) : rec));
+const firstById = (entries) => {
+    const byId = new Map();
+    entries.forEach((entry) => {
+        if (!byId.has(entry.id))
+            byId.set(entry.id, entry);
+    });
+    return byId;
+};
+const reconcile = (state, entries) => {
+    const byId = firstById(entries);
+    const decisions = mapById(state.decisions, (rec, id) => {
+        const base = byId.get(id);
+        if (!base)
+            return undefined;
+        if ((rec.phase === "resolved" || rec.phase === "denied") && !hasAction(base, rec.decision.actionId))
+            return undefined;
+        return rec;
+    });
+    const dismissed = mapById(state.dismissed, (rec, id) => {
+        const base = byId.get(id);
+        return base && hasAction(base, rec.actionId) ? rec : undefined;
+    });
+    const settledFlag = (agrees) => (rec, id) => {
+        const base = byId.get(id);
+        if (!base)
+            return undefined;
+        return rec.phase === "settled" && agrees(base, rec) ? undefined : rec;
+    };
+    const read = mapById(state.read, settledFlag((base, rec) => base.isRead === rec.value));
+    const archived = mapById(state.archived, settledFlag((base, rec) => Boolean(base.archived) === rec.value));
+    const reasonRequests = mapById(state.reasonRequests, (req, id) => (byId.has(id) ? req : undefined));
+    const unchanged = decisions === state.decisions &&
+        dismissed === state.dismissed &&
+        read === state.read &&
+        archived === state.archived &&
+        reasonRequests === state.reasonRequests;
+    return unchanged ? state : { ...state, decisions, dismissed, read, archived, reasonRequests };
+};
+const settleDecisions = (state, outcomes) => {
+    const decisions = { ...state.decisions };
+    const reasonRequests = { ...state.reasonRequests };
+    Object.keys(outcomes).forEach((id) => {
+        const rec = decisions[id];
+        const outcome = outcomes[id];
+        if (!rec || rec.batch !== outcome.batch)
+            return;
+        const { error } = outcome;
+        if (!error) {
+            decisions[id] = { ...rec, phase: "resolved", folded: true, settledAt: state.epoch };
+        }
+        else if (error.kind === "reasonRequired") {
+            delete decisions[id];
+            reasonRequests[id] = { actionId: rec.decision.actionId, message: error.message };
+        }
+        else if (error.kind === "failed") {
+            decisions[id] = { ...rec, phase: "failed", folded: false, error };
+        }
+        else {
+            decisions[id] = { ...rec, phase: "denied", folded: false, error, settledAt: state.epoch };
+        }
+    });
+    return { ...state, decisions, reasonRequests };
+};
+export const overlayReducer = (state, action) => {
+    switch (action.type) {
+        case "decide": {
+            const decisions = { ...state.decisions };
+            const reasonRequests = { ...state.reasonRequests };
+            action.ids.forEach((id) => {
+                decisions[id] = { batch: action.batch, decision: action.decision, phase: "undo", folded: false };
+                delete reasonRequests[id];
+            });
+            return { ...state, decisions, reasonRequests };
+        }
+        case "retry":
+            return {
+                ...state,
+                decisions: mapById(state.decisions, (rec, id) => action.ids.includes(id) && rec.phase === "failed"
+                    ? { batch: action.batch, decision: rec.decision, phase: "sending", folded: false }
+                    : rec),
+            };
+        case "fold":
+            return {
+                ...state,
+                decisions: mapById(state.decisions, (rec) => rec.batch === action.batch && foldsWithDecision(rec.phase) && !rec.folded ? { ...rec, folded: true } : rec),
+                archived: stepFlags(state.archived, action.batch, (rec) => (rec.value && !rec.folded ? { ...rec, folded: true } : rec)),
+            };
+        case "send": {
+            const toSending = (rec) => (rec.phase === "undo" ? { ...rec, phase: "sending" } : rec);
+            return {
+                ...state,
+                decisions: mapById(state.decisions, (rec) => rec.batch === action.batch && rec.phase === "undo" ? { ...rec, phase: "sending" } : rec),
+                read: stepFlags(state.read, action.batch, toSending),
+                archived: stepFlags(state.archived, action.batch, toSending),
+                markAll: state.markAll.map((rec) => (rec.batch === action.batch && rec.phase === "undo" ? { ...rec, phase: "sending" } : rec)),
+            };
+        }
+        case "drop":
+            return {
+                ...state,
+                decisions: mapById(state.decisions, (rec) => (rec.batch === action.batch ? undefined : rec)),
+                read: stepFlags(state.read, action.batch, (rec) => rec.previous),
+                archived: stepFlags(state.archived, action.batch, (rec) => rec.previous),
+                markAll: state.markAll.filter((rec) => rec.batch !== action.batch),
+            };
+        case "settleDecisions":
+            return settleDecisions(state, action.outcomes);
+        case "dismiss": {
+            const rec = state.decisions[action.id];
+            if (!rec || rec.phase !== "denied")
+                return state;
+            const decisions = { ...state.decisions };
+            delete decisions[action.id];
+            return {
+                ...state,
+                decisions,
+                dismissed: { ...state.dismissed, [action.id]: { actionId: rec.decision.actionId, settledAt: rec.settledAt } },
+            };
+        }
+        case "clearReasonRequest": {
+            if (!state.reasonRequests[action.id])
+                return state;
+            const reasonRequests = { ...state.reasonRequests };
+            delete reasonRequests[action.id];
+            return { ...state, reasonRequests };
+        }
+        case "flag": {
+            const next = setFlags(state[action.key], action.ids, action.batch, action.value, action.phase);
+            return action.key === "read" ? { ...state, read: next } : { ...state, archived: next };
+        }
+        case "markAll":
+            return {
+                ...state,
+                read: setFlags(state.read, action.ids, action.batch, true, "undo"),
+                markAll: [...state.markAll, { batch: action.batch, scope: action.scope, phase: "undo" }],
+            };
+        case "settle": {
+            const settle = (rec) => rec.phase === "sending" ? { ...rec, phase: "settled", settledAt: state.epoch } : rec;
+            return {
+                ...state,
+                read: stepFlags(state.read, action.batch, settle),
+                archived: stepFlags(state.archived, action.batch, settle),
+                markAll: state.markAll.map((rec) => rec.batch === action.batch && rec.phase === "sending" ? { ...rec, phase: "settled", settledAt: state.epoch } : rec),
+            };
+        }
+        case "reconcile":
+            return reconcile(state, action.entries);
+        case "countsChanged":
+            return { ...state, epoch: state.epoch + 1, markAll: state.markAll.filter((rec) => rec.phase !== "settled") };
+    }
+};
+const counts = (rec, epoch) => rec.settledAt === undefined || rec.settledAt >= epoch;
+const resolveFlags = (entry, overlay, countingOnly) => {
+    const keep = (rec) => rec && (!countingOnly || counts(rec, overlay.epoch)) ? rec : undefined;
+    const read = keep(overlay.read[entry.id]);
+    const archive = keep(overlay.archived[entry.id]);
+    const shownArchive = countingOnly ? archive === null || archive === void 0 ? void 0 : archive.value : archive && (archive.value ? archive.folded : false);
+    return {
+        isRead: read && entry.isRead !== undefined ? read.value : entry.isRead,
+        archived: shownArchive === undefined ? Boolean(entry.archived) : shownArchive,
+        isArchiving: Boolean(!countingOnly && archive && archive.value && !archive.folded),
+        decision: keep(overlay.decisions[entry.id]),
+        isDismissed: keep(overlay.dismissed[entry.id]) !== undefined,
+    };
+};
+const isTouched = (id, overlay) => overlay.decisions[id] !== undefined ||
+    overlay.read[id] !== undefined ||
+    overlay.archived[id] !== undefined ||
+    overlay.dismissed[id] !== undefined ||
+    overlay.reasonRequests[id] !== undefined;
+const pendingStatus = (status) => status === "open" || status === "failed";
+export const liveEntryFor = (entry, overlay, categories) => {
+    const flags = resolveFlags(entry, overlay, false);
+    const changed = flags.isRead !== entry.isRead || flags.archived !== Boolean(entry.archived);
+    const shown = changed ? { ...entry, isRead: flags.isRead, archived: flags.archived } : entry;
+    const zone = zoneFor(shown, categories);
+    const record = flags.decision;
+    const status = record ? record.phase : "open";
+    const state = {
+        zone,
+        status,
+        decision: record === null || record === void 0 ? void 0 : record.decision,
+        error: record === null || record === void 0 ? void 0 : record.error,
+        reasonRequest: overlay.reasonRequests[entry.id],
+        isHidden: flags.isArchiving || flags.isDismissed || Boolean(record && record.folded && foldsWithDecision(record.phase)),
+        isPending: zone === "needsYou" && !flags.isDismissed && pendingStatus(status),
+    };
+    return { entry: shown, state };
+};
+const contribution = (entry, overlay, categories) => {
+    const flags = overlay
+        ? resolveFlags(entry, overlay, true)
+        : { isRead: entry.isRead, archived: Boolean(entry.archived), isDismissed: false, decision: undefined };
+    const zone = zoneFor({ category: entry.category, isRead: flags.isRead, archived: flags.archived }, categories);
+    const status = flags.decision ? flags.decision.phase : "open";
+    return {
+        needsYou: zone === "needsYou" && !flags.isDismissed && pendingStatus(status) ? 1 : 0,
+        unread: zone === "activity" && flags.isRead === false ? 1 : 0,
+    };
+};
+export const buildLiveLists = (entries, overlay, categories, cache) => {
+    const byId = new Map();
+    const unique = [];
+    const lists = { needsYou: [], activity: [], archived: [] };
+    entries.forEach((entry) => {
+        if (byId.has(entry.id))
+            return;
+        unique.push(entry);
+        const cached = cache === null || cache === void 0 ? void 0 : cache.get(entry);
+        const touched = isTouched(entry.id, overlay);
+        const live = !touched && cached && cached.categories === categories ? cached.live : liveEntryFor(entry, overlay, categories);
+        if (!touched && cache)
+            cache.set(entry, { categories, live });
+        byId.set(entry.id, live);
+        lists[live.state.zone].push(live);
+    });
+    lists.needsYou.sort(byNewest);
+    lists.activity.sort(byNewest);
+    lists.archived.sort(byNewest);
+    return { lists, byId, entries: unique };
+};
+const isWholeActivity = (scope) => scope.zone === "activity" && !scope.category && !(scope.query && scope.query.trim());
+export const optimisticCounts = (live, overlay, categories, server) => {
+    let needsYou = server.needsYou;
+    let unread = server.unread;
+    live.entries.forEach((entry) => {
+        if (!isTouched(entry.id, overlay))
+            return;
+        const before = contribution(entry, null, categories);
+        const after = contribution(entry, overlay, categories);
+        needsYou += after.needsYou - before.needsYou;
+        unread += after.unread - before.unread;
+    });
+    if (overlay.markAll.some((rec) => isWholeActivity(rec.scope) && counts(rec, overlay.epoch))) {
+        unread = live.lists.activity.filter((item) => item.entry.isRead === false && !item.state.isHidden).length;
+    }
+    return { needsYou: Math.max(0, needsYou), unread: Math.max(0, unread) };
+};