= {
@@ -13,22 +14,24 @@ export function LanguageSwitcher() {
SUPPORTED_LANGUAGES.find((language) => i18n.language.startsWith(language)) ?? 'zh-Hant';
return (
-
+
+
);
}
diff --git a/client/src/components/layout/PrimaryLayout.tsx b/client/src/components/layout/PrimaryLayout.tsx
index 0b899ab..b8d6999 100644
--- a/client/src/components/layout/PrimaryLayout.tsx
+++ b/client/src/components/layout/PrimaryLayout.tsx
@@ -1,5 +1,20 @@
import { useEffect, useState, type ReactNode } from 'react';
import { useTranslation } from 'react-i18next';
+import {
+ AppBar,
+ Box,
+ Divider,
+ Drawer,
+ IconButton,
+ Link,
+ Stack,
+ Toolbar,
+ Typography,
+ useMediaQuery
+} from '@mui/material';
+import MenuIcon from '@mui/icons-material/Menu';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import { useTheme } from '@mui/material/styles';
import { LanguageSwitcher } from './LanguageSwitcher';
interface PrimaryLayoutProps {
@@ -8,61 +23,99 @@ interface PrimaryLayoutProps {
onSidebarToggle?: (isOpen: boolean) => void;
}
+const SIDEBAR_WIDTH = 320;
+
export function PrimaryLayout({ sidebar, content, onSidebarToggle }: PrimaryLayoutProps) {
const { t } = useTranslation();
- const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+ const theme = useTheme();
+ const isDesktop = useMediaQuery(theme.breakpoints.up('lg'));
+ const [isSidebarOpen, setIsSidebarOpen] = useState(isDesktop);
+
+ useEffect(() => {
+ setIsSidebarOpen(isDesktop);
+ }, [isDesktop]);
useEffect(() => {
onSidebarToggle?.(isSidebarOpen);
}, [isSidebarOpen, onSidebarToggle]);
+ const toggleSidebar = () => setIsSidebarOpen((prev) => !prev);
+
+ const toolbarOffset = { xs: '56px', sm: '64px' } as const;
+
return (
-
-
-
-
-
-
-
{t('common.appName')}
-
{t('common.tagline')}
-
-
-
-
-
-
-
-
-
-
-
-
-
- {editingVisit ? t('sidebar.drawerTitleEdit') : t('sidebar.drawerTitleCreate')}
-
-
{t('sidebar.subtitle')}
-
+
-
+
{
mapRef.current = mapInstance;
@@ -74,14 +76,15 @@ export function TravelMap({ onTriggerCreate, sidebarOpen = true }: TravelMapProp
))}
-
-
+
+ (onTriggerCreate ? onTriggerCreate() : openForCreate())}
+ >
+
+
+
+
);
}
diff --git a/client/src/features/visits/components/VisitForm.tsx b/client/src/features/visits/components/VisitForm.tsx
index be38f1f..d27e629 100644
--- a/client/src/features/visits/components/VisitForm.tsx
+++ b/client/src/features/visits/components/VisitForm.tsx
@@ -2,6 +2,15 @@ import { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
+import {
+ Alert,
+ Box,
+ Button,
+ Grid,
+ Stack,
+ TextField,
+ Typography
+} from '@mui/material';
import type { Visit, VisitCreateInput } from '../types';
import { useCreateVisitMutation, useUpdateVisitMutation } from '../hooks/useVisitQueries';
import { useTranslation } from 'react-i18next';
@@ -171,114 +180,107 @@ export function VisitForm({ editingVisit, onCompleted, onCancel, initialLocation
}
return (
-
+
+
+
+
+
+
);
}
diff --git a/client/src/features/visits/components/VisitList.tsx b/client/src/features/visits/components/VisitList.tsx
index 56e0eb9..abf9d6b 100644
--- a/client/src/features/visits/components/VisitList.tsx
+++ b/client/src/features/visits/components/VisitList.tsx
@@ -1,4 +1,7 @@
import { useTranslation } from 'react-i18next';
+import { Button, Card, CardActions, CardContent, CircularProgress, Stack, Typography } from '@mui/material';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
import { useDeleteVisitMutation, useVisitsQuery } from '../hooks/useVisitQueries';
import type { Visit } from '../types';
@@ -12,48 +15,58 @@ export function VisitList({ onEdit }: VisitListProps) {
const { t } = useTranslation();
if (isLoading) {
- return {t('list.loading')}
;
+ return (
+
+
+
+ {t('list.loading')}
+
+
+ );
}
if (!visits.length) {
- return {t('list.empty')}
;
+ return (
+
+ {t('list.empty')}
+
+ );
}
return (
-
+
{visits.map((visit) => (
- -
-
-
-
- {visit.location.country}
- {visit.location.city ? ` · ${visit.location.city}` : null}
-
-
- {visit.date.start}
- {visit.date.end ? ` — ${visit.date.end}` : null}
-
- {visit.notes ?
{visit.notes}
: null}
-
-
-
-
-
-
+
+
+
+ {visit.location.country}
+ {visit.location.city ? ` · ${visit.location.city}` : ''}
+
+
+ {visit.date.start}
+ {visit.date.end ? ` — ${visit.date.end}` : ''}
+
+ {visit.notes ? (
+
+ {visit.notes}
+
+ ) : null}
+
+
+ } size="small" onClick={() => onEdit(visit)}>
+ {t('list.edit')}
+
+ }
+ size="small"
+ color="error"
+ onClick={() => deleteMutation.mutate(visit.id)}
+ >
+ {t('list.delete')}
+
+
+
))}
-
+
);
}
diff --git a/client/src/features/visits/components/VisitSummary.tsx b/client/src/features/visits/components/VisitSummary.tsx
index 99779f7..f542982 100644
--- a/client/src/features/visits/components/VisitSummary.tsx
+++ b/client/src/features/visits/components/VisitSummary.tsx
@@ -1,5 +1,6 @@
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
+import { Card, CardContent, Grid, Paper, Typography } from '@mui/material';
import { useVisitsQuery } from '../hooks/useVisitQueries';
export function VisitSummary() {
@@ -15,19 +16,32 @@ export function VisitSummary() {
};
}, [visits]);
+ const summaryItems = [
+ { label: t('summary.totalVisits'), value: stats.totalVisits },
+ { label: t('summary.countries'), value: stats.uniqueCountries }
+ ];
+
return (
-
-
{t('summary.title')}
-
-
-
- {t('summary.totalVisits')}
- - {stats.totalVisits}
-
-
-
- {t('summary.countries')}
- - {stats.uniqueCountries}
-
-
-