UI Updates

Updated some pages pages to be more consistent.

src/components/navigation/top-nav.tsx

@@ -9,6 +9,8 @@ export interface TopNavProps {
   title: string;
   /** Show a back button that calls router.back(), or a custom href/handler. */
   onBack?: (() => void) | true;
+  /** Rendered in the back button's place when `onBack` isn't given — e.g. a notification bell on a top-level page that has no "back" to go to. Ignored if `onBack` is set. */
+  leftAction?: ReactNode;
   action?: ReactNode;
   sticky?: boolean;
   className?: string;
@@ -19,7 +21,7 @@ export interface TopNavProps {
  * variations, across nearly every template screen — consolidated into one
  * component (see docs/implementation-plan.md §7, "TopHeader").
  */
-export function TopNav({ title, onBack, action, sticky = true, className }: TopNavProps) {
+export function TopNav({ title, onBack, leftAction, action, sticky = true, className }: TopNavProps) {
   const router = useRouter();
 
   return (
@@ -31,7 +33,7 @@ export function TopNav({ title, onBack, action, sticky = true, className }: TopN
       )}
     >
       <div className="flex items-center gap-4">
-        {onBack && (
+        {onBack ? (
           <button
             type="button"
             onClick={onBack === true ? () => router.back() : onBack}
@@ -40,6 +42,8 @@ export function TopNav({ title, onBack, action, sticky = true, className }: TopN
           >
             <ArrowLeft className="h-4 w-4" aria-hidden="true" />
           </button>
+        ) : (
+          leftAction
         )}
         <h1 className="text-xl font-bold tracking-tight">{title}</h1>
       </div>

src/components/ui/tabs.tsx

@@ -14,7 +14,7 @@ export const Tabs = TabsPrimitive.Root;
 export function TabsList({ className, ...props }: TabsPrimitive.TabsListProps) {
   return (
     <TabsPrimitive.List
-      className={cn("flex gap-1 rounded-full bg-white p-1", className)}
+      className={cn("flex gap-1 rounded-md bg-white p-1", className)}
       {...props}
     />
   );