feat: add organisations (#1820)

apps/remix/app/components/general/app-nav-desktop.tsx

@@ -1,26 +1,20 @@
 import type { HTMLAttributes } from 'react';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import { motion } from 'framer-motion';
+import { AnimatePresence } from 'framer-motion';
 import { Search } from 'lucide-react';
-import { Link, useLocation, useParams } from 'react-router';
+import { Link, useLocation } from 'react-router';
 
-import { getRootHref } from '@documenso/lib/utils/params';
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-const navigationLinks = [
-  {
-    href: '/documents',
-    label: msg`Documents`,
-  },
-  {
-    href: '/templates',
-    label: msg`Templates`,
-  },
-];
+import { useOptionalCurrentTeam } from '~/providers/team';
 
 export type AppNavDesktopProps = HTMLAttributes<HTMLDivElement> & {
   setIsCommandMenuOpen: (value: boolean) => void;
@@ -32,13 +26,13 @@ export const AppNavDesktop = ({
   ...props
 }: AppNavDesktopProps) => {
   const { _ } = useLingui();
+  const { organisations } = useSession();
 
   const { pathname } = useLocation();
-  const params = useParams();
 
   const [modifierKey, setModifierKey] = useState(() => 'Ctrl');
 
-  const rootHref = getRootHref(params, { returnEmptyRootString: true });
+  const currentTeam = useOptionalCurrentTeam();
 
   useEffect(() => {
     const userAgent = typeof navigator !== 'undefined' ? navigator.userAgent : 'unknown';
@@ -47,6 +41,29 @@ export const AppNavDesktop = ({
     setModifierKey(isMacOS ? '⌘' : 'Ctrl');
   }, []);
 
+  const menuNavigationLinks = useMemo(() => {
+    let teamUrl = currentTeam?.url || null;
+
+    if (!teamUrl && isPersonalLayout(organisations)) {
+      teamUrl = organisations[0].teams[0]?.url || null;
+    }
+
+    if (!teamUrl) {
+      return [];
+    }
+
+    return [
+      {
+        href: `/t/${teamUrl}/documents`,
+        label: msg`Documents`,
+      },
+      {
+        href: `/t/${teamUrl}/templates`,
+        label: msg`Templates`,
+      },
+    ];
+  }, [currentTeam, organisations]);
+
   return (
     <div
       className={cn(
@@ -55,23 +72,32 @@ export const AppNavDesktop = ({
       )}
       {...props}
     >
-      <div className="flex items-baseline gap-x-6">
-        {navigationLinks.map(({ href, label }) => (
-          <Link
-            key={href}
-            to={`${rootHref}${href}`}
-            className={cn(
-              'text-muted-foreground dark:text-muted-foreground/60 focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
-              {
-                'text-foreground dark:text-muted-foreground': pathname?.startsWith(
-                  `${rootHref}${href}`,
-                ),
-              },
-            )}
-          >
-            {_(label)}
-          </Link>
-        ))}
+      <div>
+        <AnimatePresence>
+          {menuNavigationLinks.length > 0 && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              className="flex items-baseline gap-x-6"
+            >
+              {menuNavigationLinks.map(({ href, label }) => (
+                <Link
+                  key={href}
+                  to={href}
+                  className={cn(
+                    'text-muted-foreground dark:text-muted-foreground/60 focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
+                    {
+                      'text-foreground dark:text-muted-foreground': pathname?.startsWith(href),
+                    },
+                  )}
+                >
+                  {_(label)}
+                </Link>
+              ))}
+            </motion.div>
+          )}
+        </AnimatePresence>
       </div>
 
       <Button