@remit/ui 0.0.1 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "files": [
     "src"
@@ -23,16 +23,16 @@
     "lucide-react": "^0.468",
     "react-resizable-panels": "^2.1.9",
     "react-simple-pull-to-refresh": "^1.3.4",
-    "tailwind-merge": "^2"
+    "tailwind-merge": "^2",
+    "@types/dompurify": "*"
   },
   "peerDependencies": {
     "react": "^19",
-    "react-dom": "^19"
+    "react-dom": "^19",
+    "@types/react": "^19"
   },
   "devDependencies": {
     "@storybook/react": "^9",
-    "@types/dompurify": "*",
-    "@types/react": "^19",
     "@types/react-dom": "^19",
     "react": "^19",
     "react-dom": "^19",

package/src/components/mail-action-toolbar.render.test.ts

@@ -11,7 +11,7 @@ describe("MailActionToolbar", () => {
 		);
 		assert.match(html, /aria-label="Reply"/);
 		assert.match(html, /aria-label="Move to Trash"/);
-		assert.match(html, /aria-label="Flag"/);
+		assert.match(html, /aria-label="Star"/);
 		assert.match(html, /aria-label="Move to mailbox"/);
 		// No archive verb — Remit is IMAP-backed (move-to-folder is the equivalent).
 		assert.doesNotMatch(html, /aria-label="Archive"/);
@@ -27,7 +27,7 @@ describe("MailActionToolbar", () => {
 		assert.match(html, /aria-label="Forward"/);
 		assert.doesNotMatch(html, /aria-label="Archive"/);
 		assert.doesNotMatch(html, /aria-label="Move to Trash"/);
-		assert.doesNotMatch(html, /aria-label="Flag"/);
+		assert.doesNotMatch(html, /aria-label="Star"/);
 		assert.doesNotMatch(html, /aria-label="Move to mailbox"/);
 	});
 

package/src/components/mail-action-toolbar.tsx

@@ -81,7 +81,7 @@ export function MailActionToolbar({
 	replyAllTitle = "Reply all (a)",
 	forwardTitle = "Forward (f)",
 	deleteTitle = "Move to Trash (#)",
-	flagTitle = "Flag (s)",
+	flagTitle = "Star (s)",
 	children,
 	className,
 }: MailActionToolbarProps) {
@@ -158,7 +158,7 @@ export function MailActionToolbar({
 								/>
 							}
 							title={flagTitle}
-							aria-label="Flag"
+							aria-label="Star"
 							onClick={act("flag", onToggleStar)}
 						/>
 					</>

package/src/components/mobile-message-action-bar.render.test.ts

@@ -20,7 +20,7 @@ describe("MobileMessageActionBar", () => {
 				}),
 			}),
 		);
-		assert.equal(countMatches(html, 'aria-label="Flag"'), 1);
+		assert.equal(countMatches(html, 'aria-label="Star"'), 1);
 		assert.equal(countMatches(html, 'aria-label="Move to folder"'), 1);
 		assert.equal(countMatches(html, 'aria-label="Move to Trash"'), 1);
 		assert.doesNotMatch(html, /aria-label="Archive"/);
@@ -30,7 +30,7 @@ describe("MobileMessageActionBar", () => {
 		const html = renderToString(
 			createElement(MobileMessageActionBar, { ...base, isStarred: true }),
 		);
-		assert.match(html, /aria-label="Remove flag"/);
+		assert.match(html, /aria-label="Unstar"/);
 		assert.match(html, /aria-pressed="true"/);
 	});
 

package/src/components/mobile-message-action-bar.tsx

@@ -141,9 +141,9 @@ export function MobileMessageActionBar({
 						/>
 					}
 					onClick={act("star", onToggleStar)}
-					aria-label={isStarred ? "Remove flag" : "Flag"}
+					aria-label={isStarred ? "Unstar" : "Star"}
 					aria-pressed={isStarred}
-					title={isStarred ? "Remove flag" : "Flag"}
+					title={isStarred ? "Unstar" : "Star"}
 					className={TOUCH}
 				/>
 				{moveSlot}

package/src/components/mobile-reading-pane.render.test.ts

@@ -87,7 +87,7 @@ describe("MobileReadingPane", () => {
 		// One expanded message ⇒ one Reply / Flag / Trash cluster; the two
 		// collapsed rows carry no bar.
 		assert.equal(countMatches(html, 'aria-label="Reply"'), 1);
-		assert.equal(countMatches(html, 'aria-label="Flag"'), 1);
+		assert.equal(countMatches(html, 'aria-label="Star"'), 1);
 		assert.equal(countMatches(html, 'aria-label="Move to Trash"'), 1);
 	});
 

package/src/components/nav-sidebar.render.test.ts

@@ -69,6 +69,18 @@ describe("NavSidebar", () => {
 		assert.match(html, /Daily brief/);
 	});
 
+	it("labels the \\Flagged virtual mailbox 'Starred'", () => {
+		const html = renderToString(
+			createElement(NavSidebar, {
+				accounts,
+				selectedNavId: "flagged",
+				onSelectNav: () => undefined,
+			}),
+		);
+		assert.match(html, /Starred/);
+		assert.doesNotMatch(html, /Flagged/);
+	});
+
 	it("renders system and custom mailbox names", () => {
 		const html = renderToString(
 			createElement(NavSidebar, {

package/src/components/nav-sidebar.tsx

@@ -580,8 +580,8 @@ export function NavSidebar({
 				navId="flagged"
 				linkComponent={linkComponent}
 				icon={<Star className="size-4" />}
-				label="Flagged"
-				ariaLabel="Flagged"
+				label="Starred"
+				ariaLabel="Starred"
 				active={selectedNavId === "flagged"}
 				onClick={() => onSelectNav?.("flagged")}
 			/>

package/src/filter-presets.test.ts

@@ -60,13 +60,20 @@ describe("inboxFilterConfig", () => {
 		);
 	});
 
-	it("adds Has attachment to Unread and Flagged", () => {
+	it("adds Has attachment to Unread and Starred", () => {
 		assert.deepEqual(
 			inboxFilterConfig().filters.map((f) => f.id),
 			["unread", "flagged", "attachment"],
 		);
 	});
 
+	it("labels the IMAP \\Flagged filter 'Starred'", () => {
+		assert.deepEqual(
+			inboxFilterConfig().filters.map((f) => f.label),
+			["Unread", "Starred", "Has attachment"],
+		);
+	});
+
 	it("never offers an accounts source group", () => {
 		assert.equal(inboxFilterConfig().sources, undefined);
 	});

package/src/filter-presets.ts

@@ -43,7 +43,8 @@ const MESSAGE_CATEGORIES: FilterSheetCategory[] = [
 ];
 
 const UNREAD: FilterSheetFilter = { id: "unread", label: "Unread" };
-const FLAGGED: FilterSheetFilter = { id: "flagged", label: "Flagged" };
+// `flagged` is the wire name (IMAP \Flagged); the user-facing label is "Starred".
+const FLAGGED: FilterSheetFilter = { id: "flagged", label: "Starred" };
 const HAS_ATTACHMENT: FilterSheetFilter = {
 	id: "attachment",
 	label: "Has attachment",