refactor: separate components

frontend/src/components/actions/errorMessage.ts

@@ -5,3 +5,9 @@ export function errorMessage(error: unknown) {
     ? error.message
     : 'Something went wrong'
 }
+
+export function message(error: unknown) {
+  return error instanceof ApiError || error instanceof Error
+      ? error.message
+      : 'Something went wrong'
+}

frontend/src/components/actions/index.ts

@@ -1,4 +1,4 @@
 export { useAuthSession } from './Account'
 export { ErrorAlert } from './ErrorAlert'
-export { errorMessage } from './errorMessage'
+export { errorMessage, message } from './errorMessage'
 export { Loading } from './Loading'

frontend/src/components/layout/SideBar.tsx

@@ -43,7 +43,6 @@ export function SideBar({
           icon={<CircleHelp size={20} />}
           close={close}
         />
-        <NavItem to="/calendar" label="Calendar" icon={<CalendarDays size={20} />} close={close} />
         <NavItem to="/users" label="Users" icon={<UserRound size={20} />} close={close} />
       </nav>
       <div className="sidebar-bottom">

frontend/src/components/layout/WorkspaceUtilities.tsx

@@ -1,21 +1,25 @@
-import { Inbox } from 'lucide-react'
-import { NavLink } from 'react-router-dom'
-import type { User } from '../../types'
+import {CalendarDays, Inbox, Mail} from 'lucide-react'
+import {NavLink} from 'react-router-dom'
+import type {User} from '../../types'
 
-export function WorkspaceUtilities({ user }: { user: User | null }) {
-  const profileLabel = user?.displayName || user?.email || 'Profile'
-  return (
-    <nav className="workspace-utilities" aria-label="Account navigation">
-      <NavLink className="utility-link" to="/inbox">
-        <Inbox size={18} aria-hidden="true" />
-        <span>Inbox</span>
-      </NavLink>
-      <NavLink className="utility-link profile-utility" to="/profile">
-        <span className="avatar tiny" aria-hidden="true">
-          {profileLabel.slice(0, 2).toUpperCase()}
-        </span>
-        <span>{profileLabel}</span>
-      </NavLink>
-    </nav>
-  )
+export function WorkspaceUtilities({user}: { user: User | null }) {
+    const profileLabel = user?.displayName || user?.email || 'Profile'
+    return (
+        <nav className="workspace-utilities" aria-label="Account navigation">
+            <NavLink className="utility-link" to="/inbox">
+                <Mail size={18} aria-hidden="true"/>
+                <span>Invitations</span>
+            </NavLink>
+            <NavLink className="utility-link" to="/calendar">
+                <CalendarDays size={18} aria-hidden="true"/>
+                <span>Calendar</span>
+            </NavLink>
+            <NavLink className="utility-link profile-utility" to="/profile">
+                <span className="avatar tiny" aria-hidden="true">
+                  {profileLabel.slice(0, 2).toUpperCase()}
+                </span>
+                <span>{profileLabel}</span>
+            </NavLink>
+        </nav>
+    )
 }

frontend/src/components/ui/PageHeader.tsx

@@ -15,7 +15,6 @@ export function PageHeader({
     <header className="page-header">
       <div>
         <span className="eyebrow">{eyebrow}</span>
-        <h1>{title}</h1>
         {description && <p>{description}</p>}
       </div>
       {action}