feat: scope workspace routes by organization slug

modules/shared/components/AppSidebarNav.tsx

@@ -21,7 +21,8 @@ import {
 import type { LucideIcon } from "lucide-react";
 
 import type { Permission } from "@/modules/core/types";
-import { navGroups, type NavIconKey } from "@/modules/shared/lib/navigation";
+import { navGroups, type NavIconKey, type NavItem } from "@/modules/shared/lib/navigation";
+import { getWorkspaceHref, isWorkspacePathActive } from "@/modules/shared/lib/workspace-routing";
 import { cn } from "@/lib/utils";
 
 const iconMap: Record<NavIconKey, LucideIcon> = {
@@ -42,23 +43,28 @@ const iconMap: Record<NavIconKey, LucideIcon> = {
 };
 
 type AppSidebarNavProps = {
+  organizationSlug?: string;
   permissions: Permission[];
 };
 
-function isActivePath(pathname: string, href: string): boolean {
-  if (href === "/app/dashboard") {
-    return pathname === "/app" || pathname === href;
+function canViewNavItem(item: NavItem, permissions: readonly Permission[]): boolean {
+  if (item.permission && !permissions.includes(item.permission)) {
+    return false;
   }
 
-  return pathname === href || pathname.startsWith(`${href}/`);
+  if (item.anyPermissions && !item.anyPermissions.some((permission) => permissions.includes(permission))) {
+    return false;
+  }
+
+  return true;
 }
 
-export function AppSidebarNav({ permissions }: AppSidebarNavProps): React.ReactElement {
+export function AppSidebarNav({ organizationSlug, permissions }: AppSidebarNavProps): React.ReactElement {
   const pathname = usePathname();
   const visibleNavGroups = navGroups
     .map((group) => ({
       ...group,
-      items: group.items.filter((item) => !item.permission || permissions.includes(item.permission)),
+      items: group.items.filter((item) => canViewNavItem(item, permissions)),
     }))
     .filter((group) => group.items.length > 0);
 
@@ -71,12 +77,13 @@ export function AppSidebarNav({ permissions }: AppSidebarNavProps): React.ReactE
             <ul className="space-y-1">
               {group.items.map((item) => {
                 const Icon = iconMap[item.icon];
-                const isActive = isActivePath(pathname, item.href);
+                const href = getWorkspaceHref(organizationSlug, item.path);
+                const isActive = isWorkspacePathActive(pathname, item.path);
 
                 return (
-                  <li key={item.href}>
+                  <li key={item.path}>
                     <Link
-                      href={item.href}
+                      href={href}
                       aria-current={isActive ? "page" : undefined}
                       className={cn(
                         "group flex min-h-11 items-center gap-3 rounded-md px-3 text-sm transition-colors",