Adding routes for features

app/components/ui/icons/name.d.ts

@@ -4,6 +4,7 @@ export type IconName =
 	| 'arrow-left'
 	| 'arrow-right'
 	| 'avatar'
+	| 'bookmark'
 	| 'camera'
 	| 'chat-bubble'
 	| 'check'

app/routes/$groupId+/_index.tsx

@@ -0,0 +1,5 @@
+import { generatePath, redirect } from '@remix-run/react'
+
+export async function loader() {
+	return redirect(generatePath('objectives'))
+}

app/routes/$groupId+/dashboard.tsx → app/routes/$groupId+/library.tsx

@@ -1,3 +1,3 @@
 export default function Screen() {
-	return <p>Dashboard</p>
+	return <p>Library page</p>
 }

app/routes/$groupId+/members.tsx

@@ -8,9 +8,8 @@ import {
 } from '@remix-run/node'
 import { Form, json, useActionData, useLoaderData } from '@remix-run/react'
 import { useEffect, useState, type Dispatch, type SetStateAction } from 'react'
-import { toast } from 'sonner'
 import { z } from 'zod'
-import { Button, ButtonGroup } from '#app/components/catalyst/button.js'
+import { Button } from '#app/components/catalyst/button.js'
 import {
 	Dialog,
 	DialogActions,
@@ -185,15 +184,10 @@ export default function Screen() {
 				<h1 className="text-lg/7 font-semibold tracking-[-0.015em] text-zinc-950">
 					Members
 				</h1>
-				<ButtonGroup>
-					<Button outline onClick={() => toast('Test')}>
-						Show Toast
-					</Button>
-					<Button color="orange" onClick={() => setIsOpen(true)}>
-						<Icon name="envelope-closed" /> Invite Member
-					</Button>
-					<InviteModal isOpen={isOpen} setIsOpen={setIsOpen} />
-				</ButtonGroup>
+				<Button color="orange" onClick={() => setIsOpen(true)}>
+					<Icon name="envelope-closed" /> Invite Member
+				</Button>
+				<InviteModal isOpen={isOpen} setIsOpen={setIsOpen} />
 			</div>
 			<Table dense className="mt-6">
 				<TableHead>

app/routes/$groupId+/milestones.tsx

@@ -0,0 +1,3 @@
+export default function Screen() {
+	return <p>Milestones page</p>
+}

app/routes/$groupId+/objectives.tsx

@@ -0,0 +1,3 @@
+export default function Screen() {
+	return <p>Objectives page</p>
+}

app/routes/$groupId+/signals.tsx

@@ -0,0 +1,3 @@
+export default function Screen() {
+	return <p>Signals page</p>
+}

app/routes/$groupId+/threads.tsx

@@ -0,0 +1,3 @@
+export default function Screen() {
+	return <p>Threads page</p>
+}

app/routes/$groupId+/welcome.tsx

@@ -0,0 +1,3 @@
+export default function Screen() {
+	return <p>Welcome page</p>
+}

app/routes/$groupId.tsx

@@ -63,39 +63,138 @@ export default function Screen() {
 				<div className="flex flex-1 flex-col gap-1 pt-8">
 					<NavLink
 						to={generatePath('/:groupId/objectives', { groupId })}
-						className="group flex items-center gap-2 rounded p-2 text-sm font-medium text-primary/60 hover:bg-primary/5 hover:text-primary"
+						className={({ isActive }) =>
+							clsx(
+								isActive
+									? 'bg-primary/5 text-primary'
+									: 'text-primary/60 hover:bg-primary/5',
+								'group flex items-center gap-2 rounded p-2 text-sm font-medium',
+							)
+						}
 					>
-						<span className="inline-flex h-6 w-6 items-center justify-center rounded bg-primary text-white group-hover:bg-pink group-hover:text-pink-foreground">
-							<Icon name="columns" size="sm" />
-						</span>
-						Objectives
+						{({ isActive }) => (
+							<>
+								<span
+									className={clsx(
+										isActive
+											? 'bg-pink text-pink-foreground'
+											: 'bg-primary group-hover:bg-pink group-hover:text-pink-foreground',
+										'inline-flex h-6 w-6 items-center justify-center rounded text-white',
+									)}
+								>
+									<Icon name="columns" size="sm" />
+								</span>
+								Objectives
+							</>
+						)}
 					</NavLink>
 					<NavLink
 						to={generatePath('/:groupId/milestones', { groupId })}
-						className="group flex items-center gap-2 rounded p-2 text-sm font-medium text-primary/60 hover:bg-primary/5 hover:text-primary"
+						className={({ isActive }) =>
+							clsx(
+								isActive
+									? 'bg-primary/5 text-primary'
+									: 'text-primary/60 hover:bg-primary/5',
+								'group flex items-center gap-2 rounded p-2 text-sm font-medium',
+							)
+						}
 					>
-						<span className="inline-flex h-6 w-6 items-center justify-center rounded bg-primary text-white group-hover:bg-yellow">
-							<Icon name="lightning-bolt" size="sm" />
-						</span>
-						Milestones
+						{({ isActive }) => (
+							<>
+								<span
+									className={clsx(
+										isActive
+											? 'bg-yellow text-yellow-foreground'
+											: 'bg-primary group-hover:bg-yellow group-hover:text-yellow-foreground',
+										'inline-flex h-6 w-6 items-center justify-center rounded text-white',
+									)}
+								>
+									<Icon name="lightning-bolt" size="sm" />
+								</span>
+								Milestones
+							</>
+						)}
 					</NavLink>
 					<NavLink
 						to={generatePath('/:groupId/signals', { groupId })}
-						className="group flex items-center gap-2 rounded p-2 text-sm font-medium text-primary/60 hover:bg-primary/5 hover:text-primary"
+						className={({ isActive }) =>
+							clsx(
+								isActive
+									? 'bg-primary/5 text-primary'
+									: 'text-primary/60 hover:bg-primary/5',
+								'group flex items-center gap-2 rounded p-2 text-sm font-medium',
+							)
+						}
 					>
-						<span className="inline-flex h-6 w-6 items-center justify-center rounded bg-primary text-white group-hover:bg-lime">
-							<Icon name="target" size="sm" />
-						</span>
-						Signals
+						{({ isActive }) => (
+							<>
+								<span
+									className={clsx(
+										isActive
+											? 'bg-lime text-lime-foreground'
+											: 'bg-primary group-hover:bg-lime group-hover:text-lime-foreground',
+										'inline-flex h-6 w-6 items-center justify-center rounded text-white',
+									)}
+								>
+									<Icon name="target" size="sm" />
+								</span>
+								Signals
+							</>
+						)}
 					</NavLink>
 					<NavLink
 						to={generatePath('/:groupId/threads', { groupId })}
-						className="group flex items-center gap-2 rounded p-2 text-sm font-medium text-primary/60 hover:bg-primary/5 hover:text-primary"
+						className={({ isActive }) =>
+							clsx(
+								isActive
+									? 'bg-primary/5 text-primary'
+									: 'text-primary/60 hover:bg-primary/5',
+								'group flex items-center gap-2 rounded p-2 text-sm font-medium',
+							)
+						}
+					>
+						{({ isActive }) => (
+							<>
+								<span
+									className={clsx(
+										isActive
+											? 'bg-pink text-purple-foreground'
+											: 'bg-primary group-hover:bg-purple group-hover:text-purple-foreground',
+										'inline-flex h-6 w-6 items-center justify-center rounded text-white',
+									)}
+								>
+									<Icon name="chat-bubble" size="sm" />
+								</span>
+								Threads
+							</>
+						)}
+					</NavLink>
+					<NavLink
+						to={generatePath('/:groupId/library', { groupId })}
+						className={({ isActive }) =>
+							clsx(
+								isActive
+									? 'bg-primary/5 text-primary'
+									: 'text-primary/60 hover:bg-primary/5',
+								'group flex items-center gap-2 rounded p-2 text-sm font-medium',
+							)
+						}
 					>
-						<span className="inline-flex h-6 w-6 items-center justify-center rounded bg-primary text-white group-hover:bg-blue">
-							<Icon name="chat-bubble" size="sm" />
-						</span>
-						Threads
+						{({ isActive }) => (
+							<>
+								<span
+									className={clsx(
+										isActive
+											? 'bg-blue text-blue-foreground'
+											: 'bg-primary group-hover:bg-blue group-hover:text-blue-foreground',
+										'inline-flex h-6 w-6 items-center justify-center rounded text-white',
+									)}
+								>
+									<Icon name="bookmark" size="sm" />
+								</span>
+								Library
+							</>
+						)}
 					</NavLink>
 					<NavLink
 						to={generatePath('/:groupId/members', { groupId })}
@@ -112,7 +211,9 @@ export default function Screen() {
 							<>
 								<span
 									className={clsx(
-										isActive ? 'bg-orange' : 'bg-primary group-hover:bg-orange',
+										isActive
+											? 'bg-orange text-orange-foreground'
+											: 'bg-primary group-hover:bg-orange group-hover:text-orange-foreground',
 										'inline-flex h-6 w-6 items-center justify-center rounded text-white',
 									)}
 								>

app/routes/_auth+/login.server.ts

@@ -69,7 +69,7 @@ export async function handleNewSession(
 		return redirect(
 			safeRedirect(
 				redirectTo,
-				generatePath('/:groupId/dashboard', { groupId: group.id }),
+				generatePath('/:groupId/objectives', { groupId: group.id }),
 			),
 			combineResponseInits(
 				{

app/routes/dashboard.tsx

@@ -3,5 +3,5 @@ import { prisma } from '#app/utils/db.server.js'
 
 export async function loader() {
 	const group = await prisma.group.findFirstOrThrow()
-	return redirect(generatePath('/:groupId/dashboard', { groupId: group.id }))
+	return redirect(generatePath('/:groupId/objectives', { groupId: group.id }))
 }