@remit/ui 0.0.26 → 0.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "type": "module",
   "files": [
     "src"

package/src/components/app-shell.render.test.ts

@@ -155,6 +155,7 @@ describe("AppShell nav: pane vs slide-over by width (#784)", () => {
 	it("≥1024px: nav is a persistent pane, no trigger", () => {
 		const html = render({ flatList: true, initialWidth: 1100 });
 		assert.match(html, navMarker, "nav renders as a pane");
+		assert.match(html, /Settings/, "the desktop nav pins a Settings footer");
 		assert.doesNotMatch(
 			html,
 			navTriggerMarker,

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

@@ -107,6 +107,43 @@ describe("NavSidebar", () => {
 		assert.match(html, /text-accent-2/);
 	});
 
+	it("pins a Settings footer on the desktop variant", () => {
+		const html = renderToString(
+			createElement(NavSidebar, {
+				accounts,
+				selectedNavId: "personal-inbox",
+				onSelectNav: () => undefined,
+			}),
+		);
+		assert.match(html, /Settings/);
+		assert.match(html, /lucide-settings/);
+	});
+
+	it("renders the Settings footer as an anchor via linkComponent", () => {
+		const html = renderToString(
+			createElement(NavSidebar, {
+				accounts,
+				selectedNavId: "personal-inbox",
+				onSelectNav: () => undefined,
+				linkComponent: hrefLink,
+			}),
+		);
+		assert.match(html, /<a href="\/mail\/settings"/);
+	});
+
+	it("omits the Settings footer on the drawer variant", () => {
+		const html = renderToString(
+			createElement(NavSidebar, {
+				accounts,
+				selectedNavId: "personal-inbox",
+				onSelectNav: () => undefined,
+				variant: "drawer",
+			}),
+		);
+		assert.doesNotMatch(html, /Settings/);
+		assert.doesNotMatch(html, /lucide-settings/);
+	});
+
 	it("renders navigation entries as anchors via linkComponent", () => {
 		const html = renderToString(
 			createElement(NavSidebar, {

package/src/components/nav-sidebar.stories.tsx

@@ -77,6 +77,8 @@ export const Brief: Story = { args: { selectedNavId: "brief" } };
 
 export const Flagged: Story = { args: { selectedNavId: "flagged" } };
 
+export const Settings: Story = { args: { selectedNavId: "settings" } };
+
 export const ManyFolders: Story = {
 	args: {
 		accounts: [manyFoldersAccount],

package/src/components/nav-sidebar.tsx

@@ -12,6 +12,7 @@ import {
 	Mails,
 	Search,
 	Send,
+	Settings,
 	Sparkles,
 	Star,
 	Trash2,
@@ -620,6 +621,17 @@ export function NavSidebar({
 			    starts at the top; the datum bar exists only over the
 			    list/reading/intelligence panes */}
 			{navBody}
+			<div className="border-t border-line px-2 py-2">
+				<NavItem
+					navId="settings"
+					linkComponent={linkComponent}
+					icon={<Settings className="size-4" />}
+					label="Settings"
+					ariaLabel="Settings"
+					active={selectedNavId === "settings"}
+					onClick={() => onSelectNav?.("settings")}
+				/>
+			</div>
 		</aside>
 	);
 }