Merge branch 'main' into issue-117/overflow-fix

webapp/package.json

@@ -16,6 +16,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.15.21",
+    "@mui/lab": "^5.0.0-alpha.172",
     "@mui/material": "^5.15.21",
     "@mui/material-nextjs": "^5.15.11",
     "@mui/x-tree-view": "^7.8.0",

webapp/src/app/projects/[projectName]/[languageName]/page.tsx

@@ -41,6 +41,11 @@ const MessagesPage: NextPage<{
   const filteredMessages = messages.filter((message) =>
     message.id.startsWith(prefix),
   );
+
+  if (filteredMessages.length === 0) {
+    return notFound();
+  }
+
   filteredMessages.sort((m0, m1) => {
     const trans0 = translations[m0.id]?.trim() ?? '';
     const trans1 = translations[m1.id]?.trim() ?? '';
@@ -57,7 +62,11 @@ const MessagesPage: NextPage<{
   return (
     <Box sx={{ display: 'flex', minHeight: '100dvh' }}>
       <SidebarContextProvider>
-        <Header />
+        <Header
+          languageName={languageName}
+          messageId={messageId}
+          projectName={projectName}
+        />
         <Sidebar>
           <TitleBar languageName={languageName} projectName={projectName} />
           <PullRequestButton projectName={projectName} />

webapp/src/components/Breadcrumbs.tsx

@@ -0,0 +1,57 @@
+import { FC, useMemo } from 'react';
+import { Breadcrumbs as MuiBreadcrumbs, Link } from '@mui/material';
+
+type BreadcrumbsProps = {
+  languageName: string;
+  messageId?: string;
+  projectName: string;
+};
+
+type Breadcrumb = {
+  href: string;
+  last: boolean;
+  text: string;
+};
+
+const Breadcrumbs: FC<BreadcrumbsProps> = ({
+  languageName,
+  messageId,
+  projectName,
+}) => {
+  const breadcrumbs: Breadcrumb[] = useMemo(() => {
+    const parts = messageId?.split('.') || [];
+    return parts.map((part, i) => {
+      const href = `/projects/${projectName}/${languageName}/${parts
+        .slice(0, i + 1)
+        .join('.')}`;
+      return {
+        href,
+        last: i === parts.length - 1,
+        text: part,
+      };
+    });
+  }, [languageName, messageId, projectName]);
+
+  return (
+    <MuiBreadcrumbs
+      aria-label="Breadcrumb navigation"
+      sx={{
+        maxWidth: '100%',
+        overflow: 'hidden',
+      }}
+    >
+      {breadcrumbs.map((breadcrumb) => (
+        <Link
+          key={breadcrumb.href}
+          color={breadcrumb.last ? 'text.primary' : 'text.secondary'}
+          href={breadcrumb.href}
+          underline="hover"
+        >
+          {breadcrumb.text}
+        </Link>
+      ))}
+    </MuiBreadcrumbs>
+  );
+};
+
+export default Breadcrumbs;

webapp/src/components/Header.tsx

@@ -1,14 +1,20 @@
 'use client';
 
 import { FC, useEffect, useCallback, useContext } from 'react';
-import GlobalStyles from '@mui/material/GlobalStyles';
-import IconButton from '@mui/material/IconButton';
+import { Box, GlobalStyles, IconButton, useTheme } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
-import Paper from '@mui/material/Paper';
 
 import { SidebarContext } from './SidebarContext';
+import Breadcrumbs from './Breadcrumbs';
 
-const Header: FC = () => {
+type HeaderProps = {
+  languageName: string;
+  messageId?: string;
+  projectName: string;
+};
+
+const Header: FC<HeaderProps> = ({ languageName, messageId, projectName }) => {
+  const theme = useTheme();
   const { isSidebarOpen, setIsSidebarOpen } = useContext(SidebarContext);
   const onResize = useCallback(() => {
     if (window.innerWidth >= 960 && isSidebarOpen) {
@@ -24,41 +30,51 @@ const Header: FC = () => {
   }, [onResize]);
 
   return (
-    <Paper
+    <Box
       sx={{
         alignItems: 'center',
         borderBottom: 1,
         boxShadow: 1,
-        display: { md: 'none', xs: 'flex' },
+        display: 'flex',
+        flexDirection: 'row',
         gap: 1,
         height: 'var(--Header-height)',
-        justifyContent: 'flex-end',
-        p: 2,
+        justifyContent: 'space-between',
         position: 'fixed',
+        px: 2,
         top: 0,
         width: '100vw',
         zIndex: 9995,
+        [theme.breakpoints.up('md')]: {
+          marginLeft: 'var(--Sidebar-width)',
+          width: 'calc(100vw - var(--Sidebar-width))',
+        },
       }}
     >
       <GlobalStyles
-        styles={(theme) => ({
+        styles={{
           ':root': {
             '--Header-height': '52px',
-            [theme.breakpoints.up('md')]: {
-              '--Header-height': '0px',
-            },
           },
-        })}
+        }}
+      />
+      <Breadcrumbs
+        languageName={languageName}
+        messageId={messageId}
+        projectName={projectName}
       />
       <IconButton
         aria-label="Menu"
         color="primary"
         onClick={() => setIsSidebarOpen(!isSidebarOpen)}
         size="small"
+        sx={{
+          display: { md: 'none', xs: 'flex' },
+        }}
       >
         <MenuIcon />
       </IconButton>
-    </Paper>
+    </Box>
   );
 };