fix: titles on view pages

Author: diced

src/client/pages/404.tsx

@@ -1,8 +1,11 @@
+import { useTitle } from '@/lib/hooks/useTitle';
 import { Button, Center, Stack, Text, Title } from '@mantine/core';
 import { IconArrowLeft } from '@tabler/icons-react';
 import { Link } from 'react-router-dom';
 
 export default function FourOhFour() {
+  useTitle('404');
+
   return (
     <Center h='100vh'>
       <Stack>

src/client/pages/folder/[id]/index.tsx

@@ -1,4 +1,5 @@
 import { type Response } from '@/lib/api/response';
+import { useTitle } from '@/lib/hooks/useTitle';
 import { ActionIcon, Container, Group, SimpleGrid, Skeleton, Title } from '@mantine/core';
 import { IconUpload } from '@tabler/icons-react';
 import { lazy, Suspense } from 'react';
@@ -19,6 +20,8 @@ export async function loader({ params }: { params: Params<string> }) {
 export function Component() {
   const { folder } = useLoaderData<typeof loader>();
 
+  useTitle(folder.name ?? '');
+
   return (
     <>
       <Container my='lg'>

src/client/pages/folder/[id]/upload.tsx

@@ -2,6 +2,7 @@ import ConfigProvider from '@/components/ConfigProvider';
 import UploadFile from '@/components/pages/upload/File';
 import { type Response } from '@/lib/api/response';
 import { SafeConfig } from '@/lib/config/safe';
+import { useTitle } from '@/lib/hooks/useTitle';
 import { Anchor, Center, Container, Text } from '@mantine/core';
 import { data, Link, Params, useLoaderData } from 'react-router-dom';
 import useSWR from 'swr';
@@ -27,6 +28,8 @@ export function Component() {
     revalidateIfStale: false,
   });
 
+  useTitle(`Upload to ${folder.name ?? 'folder'}`);
+
   return (
     <>
       <Container my='lg'>

src/client/pages/view/[id].tsx

@@ -26,6 +26,7 @@ import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useSsrData } from '../../../components/ZiplineSSRProvider';
 import { getFile } from '../../ssr-view/server';
+import { useTitle } from '@/lib/hooks/useTitle';
 
 type SsrData = {
   file: Partial<NonNullable<Awaited<ReturnType<typeof getFile>>>>;
@@ -55,6 +56,8 @@ export default function ViewFileId() {
   const [passwordError, setPasswordError] = useState<string>('');
   const [detailsOpen, setDetailsOpen] = useState<boolean>(false);
 
+  useTitle(file.name ?? 'View File');
+
   return password && !pw ? (
     <Modal onClose={() => {}} opened={true} withCloseButton={false} centered title='Password required'>
       <form