Fe/v2

.gitignore

@@ -32,6 +32,9 @@ package-lock.json
 # production
 /build
 
+#llm
+.claude/
+
 # misc
 .DS_Store
 /*.development
@@ -54,3 +57,7 @@ node_modules/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+# Claude Code
+.claude/settings.local.json
+.claude/hooks/node_modules/

.prettierignore

@@ -1,5 +1,5 @@
 node_modules
 build
-public
+/public
 out
 styles

CHANGELOG.md

@@ -1,3 +1,23 @@
+## 2.0.0
+
+- **New features**
+  - New toast notification system with animations, replacing the previous snackbar library
+  - Modal is now a global component, available across all private views
+  - Profile view added to the v2 private layout
+  - Bilingual about page
+
+- **Accessibility improvements**
+  - Breadcrumbs reviewed and updated for screen reader compatibility in private routes
+
+- **Bug fixes**
+  - Fixed routing logic to prevent Tech Admins from accessing unauthorized routes
+  - Fixed offline view layout and behavior
+  - Fixed navigation horizontal overflow
+
+- **Internal**
+  - Completed v2 component migration for public routes (Login, Recovery, Code, NotFound)
+  - v2 private layout components (PrivateLayout, TopBar, SideBar) now fully migrated
+
 ## 1.9.3
 
 - **Technical improvements**

README.md

@@ -46,3 +46,4 @@ See `LICENSE.txt`. Licensed under the EUPL-1.2 or later. You may obtain a copy o
 ## Contributing
 
 Please read our [Contributing Guidelines](docs/INDEX.md) for details on our code of conduct and the process for submitting pull requests.
+

package.json

@@ -58,7 +58,6 @@
     "dayjs": "^1.11.13",
     "eslint": "^10.0.3",
     "i18next": "^23.11.5",
-    "notistack": "^3.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.0.0",
     "react-hook-form": "^7.45.0",
@@ -70,11 +69,13 @@
     "react-router-dom": "^6.14.2",
     "rehype-raw": "^7.0.0",
     "semver": "^7.7.4",
+    "tailwind-merge": "^3.6.0",
     "tailwindcss": "^4.1.18",
     "yup": "^1.3.3"
   },
   "devDependencies": {
     "@capacitor/cli": "^8.2.0",
+    "@eslint/js": "^10.0.1",
     "@playwright/test": "^1.55.1",
     "@types/jest": "^29.5.3",
     "@types/node": "^22.7.5",
@@ -87,6 +88,7 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "knip": "^5.33.2",
+    "mariadb": "^3.5.2",
     "prettier": "^3.0.0",
     "typescript": "^5.6.3",
     "vite": "^5.4.20",

playwright.config.ts

@@ -23,6 +23,7 @@ export default defineConfig({
     screenshot: 'only-on-failure',
     video: 'on-first-retry',
 
+    reducedMotion: 'reduce',
     actionTimeout: 15_000,
     navigationTimeout: 15_000,
 

public/font/nunito/nunito-sans.css

@@ -0,0 +1,15 @@
+@font-face {
+    font-family: 'Nunito Sans';
+    src: url('/font/nunito/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf') format('truetype');
+    font-weight: 200 1000;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Nunito Sans';
+    src: url('/font/nunito/NunitoSans-Italic-VariableFont_YTLC,opsz,wdth,wght.ttf') format('truetype');
+    font-weight: 200 1000;
+    font-style: italic;
+    font-display: swap;
+}

src/App.tsx

@@ -2,10 +2,9 @@ import { BrowserRouter } from 'react-router-dom';
 import { ErrorBoundary } from './components';
 import { getRuntimeConfig } from './config';
 import { useAndroidBackButton } from './hooks';
-import Layout from './layout';
 import Routes from './routes';
 import { AppStore } from './store';
-import { AppThemeProvider } from './theme';
+import { AppThemeProvider } from '@/theme';
 
 /**
  * Inner component that uses router hooks
@@ -15,11 +14,7 @@ const AppContent: React.FC = () => {
   // Handle Android back button navigation
   useAndroidBackButton();
 
-  return (
-    <Layout>
-      <Routes />
-    </Layout>
-  );
+  return <Routes />;
 };
 
 /**

src/components/Buttons/CodeButton/CodeButton.tsx

@@ -19,7 +19,7 @@ const CodeButton: FC<ButtonProps> = ({ ...restOfProps }) => {
           onClick={() => {
             navigator.clipboard.writeText(code).then(() =>
               dispatch({
-                type: 'ADD_POPUP',
+                type: 'ADD_TOAST',
                 message: { message: t('ui.accessibility.codeCopied'), type: 'success' },
               })
             );

src/components/Buttons/LikeButton/LikeButton.tsx

@@ -47,7 +47,7 @@ const LikeButton = forwardRef<HTMLButtonElement, Props>(({ item, disabled, onCha
           : addCommentLike(item.id));
       if (response.error) {
         updateLikeStatus(!likeStatus); // Revert like status if API call fails
-        dispatch({ type: 'ADD_POPUP', message: { message: t('errors.failed'), type: 'error' } });
+        dispatch({ type: 'ADD_TOAST', message: { message: t('errors.failed'), type: 'error' } });
       }
     } finally {
       setIsPending(false);

src/components/Buttons/ResetMultiplePasswordsButton/ResetMultiplePasswordsButton.tsx

@@ -111,7 +111,7 @@ const ResetMultiplePasswordsButton = forwardRef<HTMLButtonElement, Props>(
           if (error) {
             hasError = true;
             dispatch({
-              type: 'ADD_POPUP',
+              type: 'ADD_TOAST',
               message: {
                 message: `${t('errors.failed')} (${user.realname || user.displayname})`,
                 type: 'error',
@@ -123,7 +123,7 @@ const ResetMultiplePasswordsButton = forwardRef<HTMLButtonElement, Props>(
           hasSuccess = true;
           const userHasEmail = Boolean(user.email);
           dispatch({
-            type: 'ADD_POPUP',
+            type: 'ADD_TOAST',
             message: {
               message: t('auth.forgotPassword.successfulUser', {
                 user: user.realname || user.displayname,
@@ -135,7 +135,7 @@ const ResetMultiplePasswordsButton = forwardRef<HTMLButtonElement, Props>(
         });
 
         if (!hasSuccess && hasError) {
-          dispatch({ type: 'ADD_POPUP', message: { message: t('errors.failed'), type: 'error' } });
+          dispatch({ type: 'ADD_TOAST', message: { message: t('errors.failed'), type: 'error' } });
         }
 
         setConfirm(false);

src/components/Buttons/ResetPasswordButton/ResetPasswordButton.tsx

@@ -40,7 +40,7 @@ const ResetPasswordButton: FC<Props> = ({ target, hasEmail = false, onSuccess, .
   const handleReset = async (event: SyntheticEvent) => {
     event.stopPropagation();
     if (!target.hash_id) {
-      dispatch({ type: 'ADD_POPUP', message: { message: t('errors.failed'), type: 'error' } });
+      dispatch({ type: 'ADD_TOAST', message: { message: t('errors.failed'), type: 'error' } });
       return;
     }
 
@@ -49,10 +49,10 @@ const ResetPasswordButton: FC<Props> = ({ target, hasEmail = false, onSuccess, .
       const response = await resetUserPassword(target.hash_id);
 
       if (response.error) {
-        dispatch({ type: 'ADD_POPUP', message: { message: t('errors.failed'), type: 'error' } });
+        dispatch({ type: 'ADD_TOAST', message: { message: t('errors.failed'), type: 'error' } });
       } else {
         dispatch({
-          type: 'ADD_POPUP',
+          type: 'ADD_TOAST',
           message: {
             message: t('auth.forgotPassword.successfulUser', {
               user: target.realname || target.displayname,
@@ -67,7 +67,7 @@ const ResetPasswordButton: FC<Props> = ({ target, hasEmail = false, onSuccess, .
         onSuccess?.();
       }
     } catch {
-      dispatch({ type: 'ADD_POPUP', message: { message: t('errors.failed'), type: 'error' } });
+      dispatch({ type: 'ADD_TOAST', message: { message: t('errors.failed'), type: 'error' } });
     }
 
     setConfirm(false);

src/components/ChangePassword/ChangePassword.tsx

@@ -161,7 +161,7 @@ const ChangePassword: React.FC<Props> = ({
     }
 
     if (tmp_token && !result.error) {
-      dispatch({ type: 'ADD_POPUP', message: { message: t('auth.password.success'), type: 'success' } });
+      dispatch({ type: 'ADD_TOAST', message: { message: t('auth.password.success'), type: 'success' } });
       navigate('/', { replace: true });
     }
   };

src/components/DataForms/BugForms.tsx

@@ -50,7 +50,7 @@ const BugForms: React.FC<BugFormsProps> = ({ onClose, onSubmit }) => {
   };
 
   return (
-    <Stack overflow="auto" p={2} gap={2}>
+    <Stack overflow="auto" p={2} gap={2} data-testid={TEST_IDS.BUG_DIALOG}>
       <Typography variant="h1">{t(`actions.add`, { var: t(`scopes.bugs.name`).toLowerCase() })}</Typography>
       <form onSubmit={handleSubmit(handleFormSubmit)} noValidate>
         <Stack gap={2}>

src/components/DataTable/Item.tsx

@@ -85,7 +85,7 @@ const Item: React.FC<Props> = ({ row, column, onReload }) => {
     e.stopPropagation();
     navigator.clipboard
       .writeText(String(value))
-      .then(() => dispatch({ type: 'ADD_POPUP', message: { message: t('auth.password.copied'), type: 'success' } }));
+      .then(() => dispatch({ type: 'ADD_TOAST', message: { message: t('auth.password.copied'), type: 'success' } }));
   };
 
   // Main switch statement organized by data type

src/components/DelegateVote/DelegateVote.tsx

@@ -64,10 +64,10 @@ const DelegateVote = ({ open, delegate, onClose, triggerRef }: Props) => {
     const response = await delegateVote(selected.hash_id, box_id);
 
     if (response.error) {
-      dispatch({ type: 'ADD_POPUP', message: { message: t('errors.failed'), type: 'error' } });
+      dispatch({ type: 'ADD_TOAST', message: { message: t('errors.failed'), type: 'error' } });
     }
 
-    dispatch({ type: 'ADD_POPUP', message: { message: t('delegation.status.success'), type: 'success' } });
+    dispatch({ type: 'ADD_TOAST', message: { message: t('delegation.status.success'), type: 'success' } });
     handleClose();
   };
 
@@ -76,10 +76,10 @@ const DelegateVote = ({ open, delegate, onClose, triggerRef }: Props) => {
     const response = await revokeDelegation(box_id);
 
     if (response.error) {
-      dispatch({ type: 'ADD_POPUP', message: { message: t('errors.failed'), type: 'error' } });
+      dispatch({ type: 'ADD_TOAST', message: { message: t('errors.failed'), type: 'error' } });
     }
 
-    dispatch({ type: 'ADD_POPUP', message: { message: t('delegation.status.revoked'), type: 'success' } });
+    dispatch({ type: 'ADD_TOAST', message: { message: t('delegation.status.revoked'), type: 'success' } });
     handleClose();
   };