Skip to content

Simplify nav. Show settings again #746

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
elie222 merged 1 commit into from
Sep 3, 2025
Merged

Simplify nav. Show settings again #746

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 38 additions & 53 deletions apps/web/app/(app)/early-access/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
"use client";

import Link from "next/link";
import { EarlyAccessFeatures } from "@/app/(app)/early-access/EarlyAccessFeatures";
import { Button } from "@/components/ui/button";
Expand All @@ -8,28 +10,49 @@ import {
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { isGoogleProvider } from "@/utils/email/provider-types";
import { useAccount } from "@/providers/EmailAccountProvider";

export default function RequestAccessPage() {
const { provider } = useAccount();

return (
<div className="container px-2 pt-2 sm:px-4 sm:pt-8">
<div className="mx-auto max-w-2xl space-y-4 sm:space-y-8">
<EarlyAccessFeatures />
{isGoogleProvider(provider) && (
<>
<Card>
<CardHeader>
<CardTitle>Sender Categories</CardTitle>
<CardDescription>
Sender Categories is a feature that allows you to categorize
emails by sender, and take bulk actions or apply rules to
them.
</CardDescription>
</CardHeader>
<CardContent>
<Button asChild>
<Link href="/smart-categories">Sender Categories</Link>
</Button>
</CardContent>
</Card>

<Card>
<CardHeader>
<CardTitle>Sender Categories</CardTitle>
<CardDescription>
Sender Categories is a feature that allows you to categorize
emails by sender, and take bulk actions or apply rules to them.
</CardDescription>
</CardHeader>
<CardContent>
<Button asChild>
<Link href="/smart-categories">Sender Categories</Link>
</Button>
</CardContent>
</Card>

<Card>
<CardHeader>
<CardTitle>Mail (Beta)</CardTitle>
<CardDescription>
Manage your inbox with the Inbox Zero email client.
</CardDescription>
</CardHeader>
<CardContent>
<Button asChild>
<Link href="/mail">Mail</Link>
</Button>
</CardContent>
</Card>
</>
)}
<Card>
<CardHeader>
<CardTitle>Early Access</CardTitle>
Expand All @@ -45,44 +68,6 @@ export default function RequestAccessPage() {
</Button>
</CardContent>
</Card>

{/* <Card className="mx-auto mt-2 w-full max-w-2xl sm:mt-8">
<PageHeading>Email Client (Beta)</PageHeading>
<div className="mt-2 max-w-prose">
<SectionDescription>
Use the Inbox Zero email client to manage your email.
</SectionDescription>
</div>
<div className="mt-4">
<Button size="xl" link={{ href: "/mail" }}>
Open Mail
</Button>
</div>
</Card> */}

{/* <Card className="mx-auto mt-2 w-full max-w-2xl sm:mt-8">
<PageHeading>Inbox Zero Daily Challenge</PageHeading>
<div className="mt-2 max-w-prose">
<SectionDescription>
Getting to inbox zero is overwhelming. But doing it for a single day
is doable.
</SectionDescription>
<SectionDescription>
Daily challenge mode aims to make handling email simpler:
<ul className="mt-2 list-inside list-disc">
<li>Handle emails in batches of 5</li>
<li>Set aside what you want to handle later. Archive the rest</li>
<li>Long emails summarized</li>
<li>Timer to maintain focus</li>
</ul>
</SectionDescription>
</div>
<div className="mt-4">
<Button size="xl" link={{ href: "/simple" }}>
Try now
</Button>
</div>
</Card> */}
</div>
</div>
);
Expand Down
31 changes: 6 additions & 25 deletions apps/web/components/NavUser.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,12 +92,6 @@ export function NavUser() {
<DropdownMenuSeparator />

<DropdownMenuGroup>
<DropdownMenuItem asChild>
<Link href={prefixPath(emailAccountId, "/settings")}>
<SettingsIcon className="mr-2 size-4" />
Settings
</Link>
</DropdownMenuItem>
{isGoogleProvider(provider) && (
<DropdownMenuItem asChild>
<Link
Expand All @@ -110,32 +104,13 @@ export function NavUser() {
</Link>
</DropdownMenuItem>
)}
<DropdownMenuItem asChild>
<Link href="/premium">
<CrownIcon className="mr-2 size-4" />
Premium
</Link>
</DropdownMenuItem>
</DropdownMenuGroup>

<DropdownMenuSeparator />

<DropdownMenuGroup>
<DropdownMenuItem asChild>
<Link href={prefixPath(emailAccountId, "/usage")}>
<BarChartIcon className="mr-2 size-4" />
Usage
</Link>
</DropdownMenuItem>

{isGoogleProvider(provider) && (
<>
<DropdownMenuItem asChild>
<Link href={prefixPath(emailAccountId, "/mail")}>
<InboxIcon className="mr-2 size-4" />
Mail (Beta)
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href={prefixPath(emailAccountId, "/reply-zero")}>
<MessageCircleReplyIcon className="mr-2 size-4" />
Expand All @@ -156,6 +131,12 @@ export function NavUser() {
</DropdownMenuItem>
</>
)}
<DropdownMenuItem asChild>
<Link href={prefixPath(emailAccountId, "/usage")}>
<BarChartIcon className="mr-2 size-4" />
Usage
</Link>
</DropdownMenuItem>
</DropdownMenuGroup>

<DropdownMenuSeparator />
Expand Down
19 changes: 18 additions & 1 deletion apps/web/components/SideNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
BrushIcon,
ChevronDownIcon,
ChevronRightIcon,
CrownIcon,
FileIcon,
InboxIcon,
type LucideIcon,
Expand All @@ -22,6 +23,7 @@ import {
PersonStandingIcon,
RatioIcon,
SendIcon,
SettingsIcon,
SparklesIcon,
TagIcon,
Users2Icon,
Expand Down Expand Up @@ -59,7 +61,7 @@ import { NavUser } from "@/components/NavUser";
type NavItem = {
name: string;
href: string;
icon: LucideIcon | ((props: any) => React.ReactNode);
icon: LucideIcon | (() => React.ReactNode);
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Sep 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Icon type is too restrictive; keep support for className props.

(() => React.ReactNode) prevents consumers from passing className (common for sizing). Prefer a component type with props.

Apply:

-type NavItem = {
+type NavItem = {
   name: string;
   href: string;
-  icon: LucideIcon | (() => React.ReactNode);
+  icon: React.ComponentType<{ className?: string }>;
   target?: "_blank";
   count?: number;
   hideInMail?: boolean;
 };

This remains compatible with LucideIcon and custom icons.

Run to confirm SideNavMenu passes className to icons:

🏁 Script executed:

#!/bin/bash
rg -nP -C2 'SideNavMenu.*icon|icon:.*=>|className="size-4"' -- apps/web

Length of output: 23089

🏁 Script executed:

#!/bin/bash
file=$(find . -type f -name 'SideNavMenu.tsx')
echo "Inspecting file: $file"
sed -n '1,200p' "$file"

Length of output: 1312

🏁 Script executed:

#!/bin/bash
# Locate and display the beginning of SideNav.tsx to verify NavItem definition and usage
file=$(find apps/web/components -type f -name SideNav.tsx)
echo "Inspecting file: $file"
sed -n '1,200p' "$file"

Length of output: 5136

Broaden NavItem.icon signature and pass className in SideNavMenu

  • Update the NavItem type in both apps/web/components/SideNav.tsx and apps/web/components/SideNavMenu.tsx to
    icon: React.ComponentType<{ className?: string }>;
  • In apps/web/components/SideNavMenu.tsx, change the icon render from
    <item.icon />
    to
    <item.icon className="size-4" />
    so consumers can size via className.
🤖 Prompt for AI Agents 
In apps/web/components/SideNav.tsx around line 64 and
apps/web/components/SideNavMenu.tsx (where item.icon is rendered), the
NavItem.icon signature must be broadened and the icon should accept a className
for sizing: change the NavItem type in both files to icon: React.ComponentType<{
className?: string }>; and in SideNavMenu replace the current <item.icon />
render with <item.icon className="size-4" /> so consumers can control icon
sizing via className.

target?: "_blank";
count?: number;
hideInMail?: boolean;
Expand Down Expand Up @@ -169,6 +171,7 @@ const bottomMailLinks: NavItem[] = [

export function SideNav({ ...props }: React.ComponentProps<typeof Sidebar>) {
const navigation = useNavigation();
const { emailAccountId } = useAccount();
const path = usePathname();
const showMailNav = path.includes("/mail") || path.includes("/compose");

Expand Down Expand Up @@ -233,6 +236,20 @@ export function SideNav({ ...props }: React.ComponentProps<typeof Sidebar>) {
</Link>
</SidebarMenuButton>

<SidebarMenuButton asChild>
<Link href="/premium">
<CrownIcon className="size-4" />
<span className="font-semibold">Premium</span>
</Link>
</SidebarMenuButton>

<SidebarMenuButton asChild>
<Link href={prefixPath(emailAccountId, "/settings")}>
<SettingsIcon className="size-4" />
<span className="font-semibold">Settings</span>
</Link>
</SidebarMenuButton>

<SideNavMenu items={visibleBottomLinks} activeHref={path} />

<NavUser />
Expand Down
2 changes: 1 addition & 1 deletion version.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
v2.8.6
v2.8.7
Loading