fix: add AppHeader to dashboard pages for consistent navigation

- Add AppHeader component to dashboard main page
- Add AppHeader to collections list page (loading, error, and main states)
- Add AppHeader to collection detail page (loading, error, and main states)

Ensures top navigation menu is visible on all dashboard pages for
both authenticated and unauthenticated users.
This commit is contained in:
Ajax Davis 2026-01-02 02:52:17 +10:00
parent 137de1c353
commit abd9682f5e
3 changed files with 10 additions and 0 deletions

View file

@ -6,6 +6,7 @@ import { Icon } from '@tpmjs/ui/Icon/Icon';
import Link from 'next/link';
import { useParams, useRouter } from 'next/navigation';
import { useCallback, useEffect, useState } from 'react';
import { AppHeader } from '~/components/AppHeader';
import { AddToolSearch } from '~/components/collections/AddToolSearch';
import { CollectionForm } from '~/components/collections/CollectionForm';
import { CollectionToolList } from '~/components/collections/CollectionToolList';
@ -221,6 +222,7 @@ export default function CollectionDetailPage(): React.ReactElement {
if (isLoading) {
return (
<div className="min-h-screen bg-background">
<AppHeader />
<div className="max-w-4xl mx-auto py-12 px-4">
<div className="animate-pulse">
<div className="h-8 bg-surface-secondary rounded w-48 mb-4" />
@ -240,6 +242,7 @@ export default function CollectionDetailPage(): React.ReactElement {
if (error || !collection) {
return (
<div className="min-h-screen bg-background">
<AppHeader />
<div className="max-w-4xl mx-auto py-12 px-4">
<div className="text-center py-16">
<Icon icon="alertCircle" size="lg" className="mx-auto text-error mb-4" />
@ -258,6 +261,7 @@ export default function CollectionDetailPage(): React.ReactElement {
return (
<div className="min-h-screen bg-background">
<AppHeader />
<div className="max-w-4xl mx-auto py-12 px-4">
{/* Header */}
<div className="flex items-center gap-4 mb-6">

View file

@ -5,6 +5,7 @@ import { Icon } from '@tpmjs/ui/Icon/Icon';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useCallback, useEffect, useState } from 'react';
import { AppHeader } from '~/components/AppHeader';
import { CollectionForm } from '~/components/collections/CollectionForm';
import { CollectionList } from '~/components/collections/CollectionList';
@ -110,6 +111,7 @@ export default function CollectionsPage(): React.ReactElement {
if (isLoading) {
return (
<div className="min-h-screen bg-background">
<AppHeader />
<div className="max-w-6xl mx-auto py-12 px-4">
<div className="animate-pulse">
<div className="h-8 bg-surface-secondary rounded w-48 mb-8" />
@ -127,6 +129,7 @@ export default function CollectionsPage(): React.ReactElement {
if (error) {
return (
<div className="min-h-screen bg-background">
<AppHeader />
<div className="max-w-6xl mx-auto py-12 px-4">
<div className="text-center py-16">
<Icon icon="alertCircle" size="lg" className="mx-auto text-error mb-4" />
@ -141,6 +144,7 @@ export default function CollectionsPage(): React.ReactElement {
return (
<div className="min-h-screen bg-background">
<AppHeader />
<div className="max-w-6xl mx-auto py-12 px-4">
{/* Header */}
<div className="flex items-center justify-between mb-8">

View file

@ -1,3 +1,4 @@
import { AppHeader } from '@/components/AppHeader';
import { SignOutButton } from '@/components/auth/SignOutButton';
import { auth } from '@/lib/auth';
import { Icon } from '@tpmjs/ui/Icon/Icon';
@ -16,6 +17,7 @@ export default async function DashboardPage() {
return (
<div className="min-h-screen bg-background">
<AppHeader />
<div className="max-w-4xl mx-auto py-12 px-4">
<div className="flex items-center justify-between mb-8">
<h1 className="text-2xl font-bold text-foreground">Dashboard</h1>