Merge pull request #1980 from quadratichq/jim-display-user-context

feat: show logged in user context

quadratic-client/src/dashboard/components/Empty.tsx

@@ -1,7 +1,12 @@
+import { useRootRouteLoaderData } from '@/routes/_root';
+import { Avatar } from '@/shared/components/Avatar';
 import { TYPE } from '@/shared/constants/appConstants';
+import { ROUTES } from '@/shared/constants/routes';
+import { Button } from '@/shared/shadcn/ui/button';
 import { cn } from '@/shared/shadcn/utils';
 import { StopwatchIcon } from '@radix-ui/react-icons';
 import { ReactNode } from 'react';
+import { useSubmit } from 'react-router-dom';
 
 export function Empty({
   title,
@@ -10,14 +15,19 @@ export function Empty({
   Icon,
   severity,
   className,
+  showLoggedInUser,
 }: {
   title: String;
   description: ReactNode;
   actions?: ReactNode;
   Icon: typeof StopwatchIcon;
   severity?: 'error';
   className?: string;
+  showLoggedInUser?: boolean;
 }) {
+  const { loggedInUser } = useRootRouteLoaderData();
+  const submit = useSubmit();
+
   return (
     <div className={cn(`max-w mx-auto my-10 max-w-md px-2 text-center`, className)}>
       <div
@@ -30,6 +40,27 @@ export function Empty({
       <div className={`text-sm text-muted-foreground`}>{description}</div>
 
       {actions && <div className={`mt-8`}>{actions}</div>}
+      {showLoggedInUser && loggedInUser && (
+        <div className="mx-auto mt-12 max-w-96 border-t border-border pt-2">
+          <div className="mx-auto flex items-center gap-2 rounded-md pt-2 text-left text-sm">
+            <Avatar src={loggedInUser.picture} alt={`Avatar for ${loggedInUser.name}`} className="flex-shrink-0">
+              {loggedInUser.name}
+            </Avatar>
+            <div className="flex flex-col justify-start truncate">
+              {loggedInUser.name}
+              <span className="text-xs text-muted-foreground">{loggedInUser.email}</span>
+            </div>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="ml-auto"
+              onClick={() => submit('', { method: 'POST', action: ROUTES.LOGOUT })}
+            >
+              Logout
+            </Button>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

quadratic-client/src/routes/_dashboard.tsx

@@ -281,6 +281,7 @@ export const ErrorBoundary = () => {
           description="Reach out to the team owner for permission to access this team."
           Icon={InfoCircledIcon}
           actions={actions}
+          showLoggedInUser
         />
       );
     if (error.status === 404 || error.status === 400)
@@ -290,6 +291,7 @@ export const ErrorBoundary = () => {
           description="This team may have been deleted, moved, or made unavailable. Try reaching out to the team owner."
           Icon={ExclamationTriangleIcon}
           actions={actions}
+          showLoggedInUser
         />
       );
   }
@@ -307,6 +309,7 @@ export const ErrorBoundary = () => {
         </Button>
       }
       severity="error"
+      showLoggedInUser
     />
   );
 };

quadratic-client/src/routes/file.$uuid.tsx

@@ -159,7 +159,15 @@ export const ErrorBoundary = () => {
       title = 'Failed to load file';
       description = 'There was an error retrieving and loading this file.';
     }
-    return <Empty title={title} description={description} Icon={ExclamationTriangleIcon} actions={actions} />;
+    return (
+      <Empty
+        title={title}
+        description={description}
+        Icon={ExclamationTriangleIcon}
+        actions={actions}
+        showLoggedInUser
+      />
+    );
   }
 
   // If we reach here, it's an error we don't know how to handle.
@@ -172,6 +180,7 @@ export const ErrorBoundary = () => {
       Icon={ExclamationTriangleIcon}
       actions={actions}
       severity="error"
+      showLoggedInUser
     />
   );
 };