feat(positions): add position detail page

app/position/[chainId]/[loanAssetAddress]/[userAddress]/page.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from 'next';
+import PositionDetailContent from '@/features/position-detail/position-view';
+
+export const metadata: Metadata = {
+  title: 'Position Detail | Monarch',
+  description: 'View detailed position information on Monarch',
+};
+
+export default async function PositionDetailPage({
+  params,
+}: {
+  params: Promise<{ chainId: string; loanAssetAddress: string; userAddress: string }>;
+}) {
+  const p = await params;
+  return (
+    <PositionDetailContent
+      chainId={Number(p.chainId)}
+      loanAssetAddress={p.loanAssetAddress}
+      userAddress={p.userAddress}
+    />
+  );
+}

app/positions/page.tsx

@@ -1,5 +1,5 @@
-import SearchOrConnect from '@/components/SearchOrConnect/SearchOrConnect';
 import { generateMetadata } from '@/utils/generateMetadata';
+import PositionsLandingView from '@/features/positions/positions-landing-view';
 
 export const metadata = generateMetadata({
   title: 'Portfolio | Monarch',
@@ -9,10 +9,5 @@ export const metadata = generateMetadata({
 });
 
 export default function LogIn() {
-  return (
-    <SearchOrConnect
-      path="positions"
-      title="Positions"
-    />
-  );
+  return <PositionsLandingView />;
 }

app/rewards/page.tsx

@@ -1,5 +1,5 @@
-import SearchOrConnect from '@/components/SearchOrConnect/SearchOrConnect';
 import { generateMetadata } from '@/utils/generateMetadata';
+import RewardsLandingView from '@/features/rewards/rewards-landing-view';
 
 export const metadata = generateMetadata({
   title: 'Rewards | Monarch',
@@ -9,10 +9,5 @@ export const metadata = generateMetadata({
 });
 
 export default function LogIn() {
-  return (
-    <SearchOrConnect
-      path="rewards"
-      title="Rewards"
-    />
-  );
+  return <RewardsLandingView />;
 }

src/components/common/table-container-with-header.tsx

@@ -32,7 +32,7 @@ type TableContainerWithHeaderProps = {
 export function TableContainerWithHeader({ title, actions, children, className = '' }: TableContainerWithHeaderProps) {
   return (
     <div className={`bg-surface rounded-md font-zen shadow-sm ${className}`}>
-      <div className="flex items-center justify-between border-b border-gray-200 dark:border-gray-800 px-6 py-0.5">
+      <div className="flex items-center justify-between border-b border-gray-200 dark:border-gray-800 px-6 py-3">
         <h3 className="font-monospace text-xs uppercase text-secondary">{title}</h3>
         {actions && <div className="flex items-center gap-2">{actions}</div>}
       </div>

src/components/layout/header/Navbar.tsx

@@ -98,7 +98,12 @@ export function Navbar() {
       <div className="flex items-center gap-1">
         {/* Nav links with dashed dividers */}
         <div className="flex items-center">
-          <NavbarLink href="/markets">Markets</NavbarLink>
+          <NavbarLink
+            href="/markets"
+            matchKey="/market"
+          >
+            Markets
+          </NavbarLink>
           <span className="mx-1 h-4 border-l border-dashed border-[var(--grid-cell-muted)]" />
           <NavbarLink
             href="/autovault"
@@ -109,7 +114,12 @@ export function Navbar() {
           <span className="mx-1 h-4 border-l border-dashed border-[var(--grid-cell-muted)]" />
           {mounted ? (
             <>
-              <NavbarLink href={address ? `/positions/${address}` : '/positions'}>Portfolio</NavbarLink>
+              <NavbarLink
+                href={address ? `/positions/${address}` : '/positions'}
+                matchKey="/position"
+              >
+                Portfolio
+              </NavbarLink>
               <span className="mx-1 h-4 border-l border-dashed border-[var(--grid-cell-muted)]" />
               <NavbarLink
                 href={address ? `/rewards/${address}` : '/rewards'}
@@ -120,7 +130,12 @@ export function Navbar() {
             </>
           ) : (
             <>
-              <NavbarLink href="/positions">Portfolio</NavbarLink>
+              <NavbarLink
+                href="/positions"
+                matchKey="/position"
+              >
+                Portfolio
+              </NavbarLink>
               <span className="mx-1 h-4 border-l border-dashed border-[var(--grid-cell-muted)]" />
               <NavbarLink
                 href="/rewards"

src/components/shared/account-actions-popover.tsx

@@ -3,8 +3,10 @@
 import { useCallback, type ReactNode } from 'react';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/dropdown-menu';
 import { LuCopy, LuUser, LuWallet } from 'react-icons/lu';
+import { RiBookmarkFill, RiBookmarkLine } from 'react-icons/ri';
 import { SiEthereum } from 'react-icons/si';
 import { useStyledToast } from '@/hooks/useStyledToast';
+import { usePortfolioBookmarks } from '@/stores/usePortfolioBookmarks';
 import { getExplorerURL } from '@/utils/external';
 import { SupportedNetworks } from '@/utils/networks';
 import type { Address } from 'viem';
@@ -23,6 +25,8 @@ type AccountActionsPopoverProps = {
  */
 export function AccountActionsPopover({ address, chainId, children }: AccountActionsPopoverProps) {
   const toast = useStyledToast();
+  const { toggleAddressBookmark, isAddressBookmarked } = usePortfolioBookmarks();
+  const isBookmarked = isAddressBookmarked(address);
 
   const handleCopy = useCallback(async () => {
     try {
@@ -53,16 +57,16 @@ export function AccountActionsPopover({ address, chainId, children }: AccountAct
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start">
         <DropdownMenuItem
-          onClick={() => void handleCopy()}
-          startContent={<LuCopy className="h-4 w-4" />}
+          onClick={handleViewAccount}
+          startContent={<LuUser className="h-4 w-4" />}
         >
-          Copy Address
+          View Portfolio
         </DropdownMenuItem>
         <DropdownMenuItem
-          onClick={handleViewAccount}
-          startContent={<LuUser className="h-4 w-4" />}
+          onClick={() => toggleAddressBookmark(address)}
+          startContent={isBookmarked ? <RiBookmarkFill className="h-4 w-4" /> : <RiBookmarkLine className="h-4 w-4" />}
         >
-          View Monarch Portfolio
+          {isBookmarked ? 'Remove Bookmark' : 'Bookmark Address'}
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={handleViewExplorer}
@@ -76,6 +80,12 @@ export function AccountActionsPopover({ address, chainId, children }: AccountAct
         >
           View on DeBank
         </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => void handleCopy()}
+          startContent={<LuCopy className="h-4 w-4" />}
+        >
+          Copy Address
+        </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   );

src/components/shared/account-identity.tsx

@@ -7,12 +7,14 @@ import Link from 'next/link';
 import { FaCircle } from 'react-icons/fa';
 import { ExternalLinkIcon } from '@radix-ui/react-icons';
 import { LuCopy } from 'react-icons/lu';
+import { RiBookmarkFill, RiBookmarkLine } from 'react-icons/ri';
 import { useConnection, useEnsName } from 'wagmi';
 import { Avatar } from '@/components/Avatar/Avatar';
 import { AccountActionsPopover } from '@/components/shared/account-actions-popover';
 import { Name } from '@/components/shared/name';
 import { useAddressLabel } from '@/hooks/useAddressLabel';
 import { useStyledToast } from '@/hooks/useStyledToast';
+import { usePortfolioBookmarks } from '@/stores/usePortfolioBookmarks';
 import { getExplorerURL } from '@/utils/external';
 import { SupportedNetworks } from '@/utils/networks';
 import type { Address } from 'viem';
@@ -26,6 +28,7 @@ type AccountIdentityProps = {
   showCopy?: boolean;
   showAddress?: boolean;
   showActions?: boolean;
+  showBookmark?: boolean;
   className?: string;
 };
 
@@ -49,11 +52,13 @@ export function AccountIdentity({
   showCopy = false,
   showAddress = false,
   showActions = true,
+  showBookmark = false,
   className,
 }: AccountIdentityProps) {
   const { address: connectedAddress, isConnected } = useConnection();
   const [mounted, setMounted] = useState(false);
   const toast = useStyledToast();
+  const { toggleAddressBookmark, isAddressBookmarked } = usePortfolioBookmarks();
   const { vaultName, shortAddress } = useAddressLabel(address);
   const { data: ensName } = useEnsName({
     address: address as `0x${string}`,
@@ -250,6 +255,8 @@ export function AccountIdentity({
     return compactElement;
   }
 
+  const isBookmarked = showBookmark ? isAddressBookmarked(address) : false;
+
   // Full variant - avatar + address badge + extra info badges (all on one line, centered)
   const fullContent = (
     <>
@@ -310,6 +317,21 @@ export function AccountIdentity({
           <ExternalLinkIcon className="h-4 w-4" />
         </a>
       )}
+
+      {showBookmark && (
+        <button
+          type="button"
+          className={clsx('rounded-sm p-1 transition-colors', isBookmarked ? 'text-primary' : 'text-secondary hover:text-primary')}
+          aria-label={isBookmarked ? 'Remove address bookmark' : 'Bookmark address'}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            toggleAddressBookmark(address);
+          }}
+        >
+          {isBookmarked ? <RiBookmarkFill className="h-4 w-4" /> : <RiBookmarkLine className="h-4 w-4" />}
+        </button>
+      )}
     </>
   );
 

src/components/shared/breadcrumbs.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+import Link from 'next/link';
+import { cn } from '@/utils/components';
+
+type BreadcrumbItem = {
+  label: ReactNode;
+  href?: string;
+  isCurrent?: boolean;
+};
+
+type BreadcrumbsProps = {
+  items: BreadcrumbItem[];
+  className?: string;
+};
+
+export function Breadcrumbs({ items, className }: BreadcrumbsProps) {
+  return (
+    <nav className={cn('flex items-center gap-2 text-sm text-secondary flex-nowrap overflow-x-auto leading-none py-1 font-zen', className)}>
+      {items.map((item, index) => {
+        const content = item.href ? (
+          <Link
+            href={item.href}
+            className={cn('no-underline hover:no-underline text-secondary', item.isCurrent ? 'text-primary' : 'hover:text-primary')}
+          >
+            {item.label}
+          </Link>
+        ) : (
+          <span className={cn(item.isCurrent ? 'text-primary' : 'text-secondary')}>{item.label}</span>
+        );
+
+        return (
+          <span
+            key={index}
+            className="flex items-center gap-2"
+          >
+            {index > 0 && <span className="text-primary/60">/</span>}
+            {content}
+          </span>
+        );
+      })}
+    </nav>
+  );
+}

src/components/shared/date-picker.tsx

@@ -20,9 +20,20 @@ export type DatePickerProps = {
   isInvalid?: boolean;
   errorMessage?: string;
   granularity?: 'day' | 'hour';
+  popoverClassName?: string;
 };
 
-function DatePicker({ label, value, onChange, minValue, maxValue, isInvalid, errorMessage, granularity = 'day' }: DatePickerProps) {
+function DatePicker({
+  label,
+  value,
+  onChange,
+  minValue,
+  maxValue,
+  isInvalid,
+  errorMessage,
+  granularity = 'day',
+  popoverClassName,
+}: DatePickerProps) {
   const [open, setOpen] = React.useState(false);
 
   // Get timezone from value, or use local timezone
@@ -149,7 +160,7 @@ function DatePicker({ label, value, onChange, minValue, maxValue, isInvalid, err
           </button>
         </PopoverTrigger>
         <PopoverContent
-          className="w-auto p-0 font-zen"
+          className={cn('w-auto p-0 font-zen', popoverClassName)}
           align="start"
         >
           <Calendar

src/features/autovault/vault-view.tsx

@@ -97,6 +97,12 @@ export default function VaultContent() {
   const tokenDecimals = vaultData?.tokenDecimals;
   const tokenSymbol = vaultData?.tokenSymbol;
   const assetAddress = vaultData?.assetAddress as Address | undefined;
+  const adapterAddress = adapterQuery.morphoMarketV1Adapter as Address | undefined;
+
+  const adapterPortfolioHref = useMemo(() => {
+    if (!adapterAddress || !assetAddress) return undefined;
+    return `/position/${chainId}/${assetAddress}/${adapterAddress}`;
+  }, [adapterAddress, assetAddress, chainId]);
 
   // UI state from Zustand stores (for vault-view banners only)
   const { open: openSettings } = useVaultSettingsModalStore();
@@ -222,7 +228,7 @@ export default function VaultContent() {
             allocators={vaultData?.allocators}
             collaterals={collateralAddresses}
             curator={vaultData?.curator}
-            adapter={adapterQuery.morphoMarketV1Adapter ?? undefined}
+            adapter={adapterAddress}
             onDeposit={handleDeposit}
             onWithdraw={handleWithdraw}
             onRefresh={handleRefreshVault}
@@ -296,12 +302,13 @@ export default function VaultContent() {
           />
 
           {/* Transaction History Preview - only show when vault is fully set up */}
-          {adapterQuery.morphoMarketV1Adapter && isVaultInitialized && !capsUninitialized && (
+          {adapterAddress && isVaultInitialized && !capsUninitialized && (
             <TransactionHistoryPreview
-              account={adapterQuery.morphoMarketV1Adapter}
+              account={adapterAddress}
               chainId={chainId}
               isVaultAdapter={true}
               emptyMessage="Setup complete, your automated rebalance will show up here once it's triggered."
+              viewAllHref={adapterPortfolioHref}
             />
           )}