@remit/web-client 0.0.10 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/settings/AccountFormPanel.tsx

@@ -6,7 +6,7 @@ import {
 	configOperationsGetConfigQueryKey,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
-import { Button, Input, Select, securityToApi } from "@remit/ui";
+import { Button, Input, Select, SlidePanel, securityToApi } from "@remit/ui";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Check, Loader2, X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -19,7 +19,6 @@ import {
 	type ProviderPreset,
 } from "../../lib/provider-presets.js";
 import { cn } from "../../lib/utils";
-import { SlidePanel } from "../ui/SlidePanel";
 import {
 	appendAppPasswordHint,
 	computeSmtpAutoFill,

package/src/index.css

@@ -4,9 +4,18 @@
    the .dark ancestor scope used everywhere in this app. */
 @import "@remit/ui/tokens.css";
 
-/* Tailwind v4 content scanning: point at the source Tailwind must inspect
-   for utility class usage (auto-detection misses linked workspace packages). */
+/* Tailwind v4 content scanning: name every source Tailwind must inspect for
+   utility class usage. Automatic detection is rooted at the Vite root, which
+   for the distributor harness build is a throwaway directory holding only the
+   entry — so nothing here may rely on it. Both this package's own components
+   and the linked workspace UI package are declared explicitly.
+
+   Tests are excluded: they assert on class strings, and a scanned assertion
+   emits the utility it names into the shipped stylesheet. */
+@source "./**/*.{ts,tsx}";
 @source "../../ui/src/**/*.{ts,tsx}";
+@source not "./**/*.test.{ts,tsx}";
+@source not "../../ui/src/**/*.test.{ts,tsx}";
 
 /* Hide scrollbars while maintaining scroll functionality */
 .overflow-y-auto {

package/src/index.css.test.ts

@@ -0,0 +1,97 @@
+import assert from "node:assert/strict";
+import { readdirSync, readFileSync } from "node:fs";
+import { dirname, relative, resolve, sep } from "node:path";
+import { describe, it } from "node:test";
+import { fileURLToPath } from "node:url";
+
+/**
+ * Tailwind v4 roots automatic source detection at the bundler's root. The
+ * distributor harness builds from a throwaway root holding only the entry, so
+ * nothing this app renders is discovered automatically: every directory whose
+ * components carry utility classes has to be named by an `@source` rule. When
+ * one is missing the build still succeeds — it just ships a stylesheet with
+ * those utilities absent, and the screens using them lay out as unstyled boxes
+ * (#57: the settings slide-over covered the whole viewport).
+ */
+
+const here = dirname(fileURLToPath(import.meta.url));
+const cssPath = resolve(here, "index.css");
+const css = readFileSync(cssPath, "utf8");
+
+/** Globs Tailwind scans, and globs it is told to skip. */
+const globs = (kind: "include" | "exclude"): string[] =>
+	[...css.matchAll(/@source\s+(not\s+)?"([^"]+)"/g)]
+		.filter(([, negated]) => (kind === "exclude") === Boolean(negated))
+		.map(([, , glob]) => glob);
+
+/** The directory an `@source` glob starts scanning from. */
+const sourceRoots = (): string[] =>
+	globs("include").map((glob) => {
+		const literal = glob.split("*")[0] ?? glob;
+		return resolve(dirname(cssPath), literal);
+	});
+
+/** Every directory below `root` that holds a component file. */
+const componentDirs = (root: string): string[] => {
+	const found: string[] = [];
+	const walk = (dir: string): void => {
+		const entries = readdirSync(dir, { withFileTypes: true });
+		if (entries.some((e) => e.isFile() && e.name.endsWith(".tsx"))) {
+			found.push(dir);
+		}
+		for (const entry of entries) {
+			if (entry.isDirectory() && entry.name !== "node_modules") {
+				walk(resolve(dir, entry.name));
+			}
+		}
+	};
+	walk(root);
+	return found;
+};
+
+const isCovered = (dir: string, roots: string[]): boolean =>
+	roots.some((root) => {
+		const rel = relative(root, dir);
+		return rel === "" || (!rel.startsWith("..") && !rel.startsWith(sep));
+	});
+
+describe("tailwind source coverage (#57)", () => {
+	const roots = sourceRoots();
+
+	it("declares at least one source", () => {
+		assert.ok(roots.length > 0);
+	});
+
+	it("covers every directory in this package that renders components", () => {
+		const uncovered = componentDirs(here).filter((d) => !isCovered(d, roots));
+		assert.deepEqual(
+			uncovered.map((d) => relative(here, d)),
+			[],
+		);
+	});
+
+	it("covers the linked design system package", () => {
+		const ui = resolve(here, "../../ui/src");
+		const uncovered = componentDirs(ui).filter((d) => !isCovered(d, roots));
+		assert.deepEqual(
+			uncovered.map((d) => relative(ui, d)),
+			[],
+		);
+	});
+
+	/**
+	 * A test asserting on a class string is a class string in a scanned file, so
+	 * without this every utility a test names is emitted into the shipped CSS.
+	 */
+	it("excludes test files from every source it scans", () => {
+		const uncovered = globs("include").filter(
+			(glob) =>
+				!globs("exclude").some(
+					(excluded) =>
+						excluded ===
+						glob.replace(/\/\*\*\/\*\.\{ts,tsx\}$/, "/**/*.test.{ts,tsx}"),
+				),
+		);
+		assert.deepEqual(uncovered, []);
+	});
+});

package/src/lib/brief.test.ts

@@ -145,11 +145,26 @@ describe("groupBriefSections", () => {
 
 	// --- Fallback to personal ---
 
-	test("missing category falls back to personal", () => {
+	test("missing category lands in its own Unclassified section", () => {
+		// Never folded into Personal: unclassified mail is work the classifier
+		// has not done, and hiding it inside Personal is what made issue #45
+		// look like a working classifier with a huge personal inbox.
 		const r = row({ id: "1" });
 		const sections = groupBriefSections([r]);
 		assert.strictEqual(sections.length, 1);
-		assert.strictEqual(sections[0].id, "personal");
+		assert.strictEqual(sections[0].id, "uncategorized");
+	});
+
+	test("uncategorized rows do not inflate the personal section", () => {
+		const sections = groupBriefSections([
+			row({ id: "1", category: "personal" }),
+			row({ id: "2", category: "uncategorized" }),
+			row({ id: "3", category: "uncategorized" }),
+		]);
+		const personal = sections.find((s) => s.id === "personal");
+		const unclassified = sections.find((s) => s.id === "uncategorized");
+		assert.strictEqual(personal?.threads.length, 1);
+		assert.strictEqual(unclassified?.threads.length, 2);
 	});
 
 	// --- Starred is a row marker, not a section (Flagged lives in the nav) ---

package/src/lib/brief.ts

@@ -10,9 +10,12 @@
  *  4. Marketing
  *  5. Social
  *  6. Automated
+ *  7. Unclassified
  *
  * Each row lands in the section for its category; a row with no category counts
- * as `personal` (the classifier's own fallback). Starred mail is not a section —
+ * as `uncategorized`, which is its own section rather than being folded into
+ * Personal — unclassified mail is missing work, not a decision (issue #45).
+ * Starred mail is not a section —
  * the star is a per-row marker, so a starred message stays in its category.
  *
  * Sender trust (vip/wellknown) no longer sections the brief — the signal is
@@ -87,6 +90,11 @@ const CATEGORY_SECTIONS: ReadonlyArray<{
 	{ id: "marketing", label: "Marketing", category: MessageCategory.marketing },
 	{ id: "social", label: "Social", category: MessageCategory.social },
 	{ id: "automated", label: "Automated", category: MessageCategory.automated },
+	{
+		id: "uncategorized",
+		label: "Unclassified",
+		category: MessageCategory.uncategorized,
+	},
 ];
 
 /**
@@ -104,9 +112,9 @@ export function groupBriefSections(rows: ThreadRowData[]): ThreadSection[] {
 	);
 
 	for (const row of rows) {
-		const category = row.category ?? MessageCategory.personal;
+		const category = row.category ?? MessageCategory.uncategorized;
 		const bucket =
-			byCategory.get(category) ?? byCategory.get(MessageCategory.personal);
+			byCategory.get(category) ?? byCategory.get(MessageCategory.uncategorized);
 		bucket?.push(row);
 	}
 

package/src/lib/display-category.test.ts

@@ -0,0 +1,29 @@
+import assert from "node:assert/strict";
+import { describe, test } from "node:test";
+import { toDisplayCategory } from "./display-category.js";
+
+describe("toDisplayCategory", () => {
+	test("shows an unclassified message as unclassified, not personal", () => {
+		// Collapsing `uncategorized` into `personal` made "the classifier never
+		// ran" indistinguishable from "the classifier decided this is personal"
+		// (issue #45).
+		assert.strictEqual(toDisplayCategory("uncategorized"), "uncategorized");
+	});
+
+	test("treats a row with no category as unclassified", () => {
+		assert.strictEqual(toDisplayCategory(undefined), "uncategorized");
+	});
+
+	test("passes every classified category through unchanged", () => {
+		for (const category of [
+			"personal",
+			"newsletter",
+			"marketing",
+			"automated",
+			"transactional",
+			"social",
+		] as const) {
+			assert.strictEqual(toDisplayCategory(category), category);
+		}
+	});
+});

package/src/lib/display-category.ts

@@ -5,16 +5,18 @@ import type { ThreadCategory } from "@remit/ui";
  * Map an API message category to a kit display category.
  *
  * The API category is total (RFC 032 Tier 2) and carries `uncategorized` for
- * messages that are metadata-synced but not yet body-classified. The kit's
- * display unions (`ThreadCategory`, `EmailRenderCategory`, badge `MessageCategory`)
- * have no `uncategorized` member — there is nothing to show for "not yet
- * classified", so it collapses to `personal`, the classifier's own fallback and
- * the display default that never renders a badge. Pre-migration rows that still
- * read `undefined` collapse the same way.
+ * messages that are metadata-synced but not yet body-classified. That state is
+ * shown as itself, not collapsed into `personal`: collapsing made an
+ * unclassified message identical on screen to one the classifier positively
+ * decided was personal, so a classification gap read as a large personal inbox
+ * rather than as missing work (issue #45).
+ *
+ * Pre-migration rows that read `undefined` carry no category either, so they
+ * map to `uncategorized` the same way.
  */
 export function toDisplayCategory(
 	category: RemitImapMessageCategory | undefined,
 ): ThreadCategory {
-	if (category === undefined || category === "uncategorized") return "personal";
+	if (category === undefined) return "uncategorized";
 	return category;
 }

package/src/components/ui/SlidePanel.tsx

@@ -1,72 +0,0 @@
-import { X } from "lucide-react";
-import type { ReactNode } from "react";
-import { cn } from "../../lib/utils";
-
-interface SlidePanelProps {
-	isOpen: boolean;
-	onClose: () => void;
-	title: string;
-	children: ReactNode;
-	footer?: ReactNode;
-}
-
-export const SlidePanel = ({
-	isOpen,
-	onClose,
-	title,
-	children,
-	footer,
-}: SlidePanelProps) => (
-	<>
-		{/* Backdrop overlay */}
-		{/* biome-ignore lint/a11y/useSemanticElements: full-screen backdrop overlay; <button> default styles would break fixed inset positioning */}
-		<div
-			className={cn(
-				"fixed inset-0 bg-black/30 z-40 transition-opacity",
-				isOpen ? "opacity-100" : "opacity-0 pointer-events-none",
-			)}
-			onClick={onClose}
-			onKeyDown={(e) => e.key === "Escape" && onClose()}
-			role="button"
-			tabIndex={0}
-			aria-label="Close panel"
-		/>
-
-		{/* Slide-in panel */}
-		<div
-			className={cn(
-				"fixed top-0 right-0 h-full w-full sm:w-[400px] sm:max-w-[90vw] bg-canvas border-l border-line shadow-xl z-50",
-				"transform transition-transform duration-200 ease-out",
-				isOpen ? "translate-x-0" : "translate-x-full",
-			)}
-			role="dialog"
-			aria-modal="true"
-			aria-labelledby="slide-panel-title"
-		>
-			{/* Panel header */}
-			<div className="flex items-center justify-between px-4 h-14 border-b border-line">
-				<h2 id="slide-panel-title" className="font-semibold">
-					{title}
-				</h2>
-				<button
-					type="button"
-					onClick={onClose}
-					className="p-1.5 rounded-md hover:bg-surface-raised transition-colors"
-					aria-label="Close"
-				>
-					<X className="size-5" />
-				</button>
-			</div>
-
-			{/* Panel content */}
-			<div className="h-[calc(100%-3.5rem)] flex flex-col">
-				<div className="flex-1 overflow-auto p-4">{children}</div>
-				{footer && (
-					<div className="flex justify-end gap-3 p-4 border-t border-line bg-canvas">
-						{footer}
-					</div>
-				)}
-			</div>
-		</div>
-	</>
-);