feat(ui): add AppHeader support to 404 not-found page
All checks were successful
Deploy Waveform to VPS / deploy (push) Successful in 1m17s
All checks were successful
Deploy Waveform to VPS / deploy (push) Successful in 1m17s
This commit is contained in:
parent
3a0a4041c2
commit
38d1a8ab70
2 changed files with 37 additions and 19 deletions
|
|
@ -3,11 +3,14 @@
|
|||
* @description Server component rendering a custom 404 page for missing or invalid routes within the app layout.
|
||||
*/
|
||||
|
||||
import { AppHeader } from "@/components/layout/AppHeader";
|
||||
import { AlertCircle } from "lucide-react";
|
||||
|
||||
/** Renders the 404 Not Found fallback view containing an alert icon, message, and navigation link back to the summary page. */
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<div className="flex flex-col h-full w-full bg-background p-4 min-h-0 overflow-hidden">
|
||||
<AppHeader isNotFound />
|
||||
<div className="flex flex-col items-center justify-center h-full w-full text-center my-auto">
|
||||
<div className="max-w-md w-full space-y-6">
|
||||
{/* Icon Badge */}
|
||||
|
|
@ -21,11 +24,11 @@ export default function NotFound() {
|
|||
Page not found
|
||||
</h1>
|
||||
<p className="text-sm text-foreground-muted leading-relaxed">
|
||||
The page you are looking for doesn't exist or has been moved. Please
|
||||
check the URL or head back to your summary.
|
||||
The page you are looking for doesn't exist or has been moved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/**
|
||||
* @file components/layout/AppHeader.tsx
|
||||
* @description Application top header component providing navigation controls, dynamic channel or friend tab titles, optional server settings, member list toggles, and legal views support.
|
||||
* @description Application top header component providing navigation controls, dynamic channel or friend tab titles, optional server settings, member list toggles, legal views, and 404 support.
|
||||
*/
|
||||
|
||||
"use client";
|
||||
|
|
@ -14,6 +14,7 @@ import {
|
|||
Settings,
|
||||
FileText,
|
||||
ShieldCheck,
|
||||
AlertCircle,
|
||||
} from "lucide-react";
|
||||
import { ServerSettingsMenu } from "./ServerSettingsMenu";
|
||||
import { FriendsHeader, TabType } from "@/components/friends/FriendsHeader";
|
||||
|
|
@ -35,9 +36,10 @@ interface AppHeaderProps {
|
|||
isSettings?: boolean;
|
||||
isLegalImprint?: boolean;
|
||||
isLegalPrivacy?: boolean;
|
||||
isNotFound?: boolean;
|
||||
}
|
||||
|
||||
/** Renders the application header with navigation controls, dynamic titles, tabs, and action buttons. */
|
||||
/** Renders the application header with navigation controls, dynamic titles, tabs, action buttons, and 404 support. */
|
||||
export function AppHeader({
|
||||
title,
|
||||
showMembersButton = false,
|
||||
|
|
@ -50,6 +52,7 @@ export function AppHeader({
|
|||
isSettings = false,
|
||||
isLegalImprint = false,
|
||||
isLegalPrivacy = false,
|
||||
isNotFound = false,
|
||||
}: AppHeaderProps) {
|
||||
const { isNavOpen, toggleNav, toggleMembers } = useSidebarStore();
|
||||
|
||||
|
|
@ -62,7 +65,8 @@ export function AppHeader({
|
|||
!!server ||
|
||||
showFriendsTabs ||
|
||||
isSettings ||
|
||||
isLegalView;
|
||||
isLegalView ||
|
||||
isNotFound;
|
||||
|
||||
return (
|
||||
<div
|
||||
|
|
@ -87,6 +91,16 @@ export function AppHeader({
|
|||
)}
|
||||
</button>
|
||||
|
||||
{/* 404 Not Found Header Title */}
|
||||
{isNotFound && (
|
||||
<div className="flex items-center gap-1.5 ml-1 min-w-0">
|
||||
<AlertCircle className="w-4 h-4 text-destructive shrink-0" />
|
||||
<h1 className="font-bold text-white text-base truncate">
|
||||
Not Found
|
||||
</h1>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Settings View Header Title */}
|
||||
{isSettings && (
|
||||
<div className="flex items-center gap-1.5 ml-1 min-w-0">
|
||||
|
|
@ -116,7 +130,7 @@ export function AppHeader({
|
|||
)}
|
||||
|
||||
{/* Dynamic Channel Title */}
|
||||
{!isSettings && !isLegalView && title && (
|
||||
{!isSettings && !isLegalView && !isNotFound && title && (
|
||||
<div className="flex items-center gap-1.5 ml-1 min-w-0">
|
||||
<Hash className="w-4 h-4 text-muted shrink-0" />
|
||||
<h1 className="font-bold text-white text-base truncate">{title}</h1>
|
||||
|
|
@ -126,6 +140,7 @@ export function AppHeader({
|
|||
{/* Friends Header Component */}
|
||||
{!isSettings &&
|
||||
!isLegalView &&
|
||||
!isNotFound &&
|
||||
showFriendsTabs &&
|
||||
setActiveTab &&
|
||||
activeTab && (
|
||||
|
|
|
|||
Loading…
Reference in a new issue