Merge pull request #194 from quick-fix/small-tweaks

fix: duplicate page title on /app and scroll-to-top on privacy/terms

Author: ayoub3bidi

README.md

@@ -22,11 +22,11 @@
 
 ## What it is
 
-Bayan Flow is a an open source educational tool with **45 algorithms** across five categories. Choose an algorithm and step through or autoplay the visualization. Optional **Python** implementations run in the browser (Pyodide `0.27.5`), with a **complexity** panel after completion and **video export** (horizontal or vertical MP4) when you want to share or study offline.
+Bayan Flow is an open source educational tool with **45 algorithms** across five categories. Choose an algorithm and step through or autoplay the visualization. Optional **Python** implementations run in the browser (Pyodide `0.27.5`), with a **complexity** panel after completion and **video export** (horizontal or vertical MP4) when you want to share or study offline.
 
 ## Features (overview)
 
-| Mode                 | Algorithms | What you get |
+| Category             | Algorithms | What you get |
 | -------------------- | ---------- | ------------ |
 | **Sorting**          | 14         | Random array, color-coded bars, ascending/descending order, comparison and non-comparison families |
 | **Pathfinding**      | 9          | Grid-based search on configurable presets; start/end, walls, open/closed/path highlighting |

src/components/DocumentTitle.jsx

@@ -13,7 +13,7 @@ const ROUTE_TITLE_KEYS = {
   '/privacy': 'legal.privacyTitle',
   '/terms': 'legal.termsTitle',
   '/roadmap': 'roadmap.hero.title',
-  '/app': 'header.title',
+  '/app': 'app.pageTitle',
 };
 
 function getRouteDescriptions(pathname, t) {

src/components/DocumentTitle.test.jsx

@@ -193,6 +193,20 @@ describe('DocumentTitle', () => {
     );
   });
 
+  it('should set app route title', () => {
+    render(
+      <I18nextProvider i18n={i18n}>
+        <MemoryRouter initialEntries={['/app']}>
+          <DocumentTitle />
+        </MemoryRouter>
+      </I18nextProvider>
+    );
+
+    const baseTitle = i18n.t('header.title');
+    const appTitle = i18n.t('app.pageTitle');
+    expect(document.title).toBe(`${baseTitle} - ${appTitle}`);
+  });
+
   it('should set canonical and og:url for the active route', () => {
     render(
       <I18nextProvider i18n={i18n}>

src/components/LegalDocument.jsx

@@ -4,6 +4,7 @@
  * See LICENSE for details.
  */
 
+import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import Footer from './Footer';
 import ThemeToggle from './ThemeToggle';
@@ -16,6 +17,12 @@ import LanguageSwitcher from './LanguageSwitcher';
  * @param {Array<{ id: string, title: string, paragraphs: string[], list?: string[] }>} props.sections
  */
 function LegalDocument({ title, lastUpdated, sections }) {
+  useEffect(() => {
+    if (!window.location.hash) {
+      window.scrollTo(0, 0);
+    }
+  }, []);
+
   return (
     <div className="min-h-screen relative overflow-x-hidden flex flex-col">
       <div className="fixed inset-0 bg-linear-to-b from-bg via-bg to-surface-elevated pointer-events-none" />

src/components/LegalDocument.test.jsx

@@ -50,6 +50,7 @@ const renderLegalDocument = () =>
 describe('LegalDocument', () => {
   beforeEach(async () => {
     await i18n.changeLanguage('en');
+    window.scrollTo = vi.fn();
   });
 
   it('renders title, last updated, and section content', () => {
@@ -67,6 +68,18 @@ describe('LegalDocument', () => {
     expect(screen.getByTestId('legal-footer')).toBeInTheDocument();
   });
 
+  it('scrolls to top when no hash fragment is present', () => {
+    renderLegalDocument();
+    expect(window.scrollTo).toHaveBeenCalledWith(0, 0);
+  });
+
+  it('preserves scroll position when a hash fragment is present', () => {
+    window.location.hash = '#intro';
+    renderLegalDocument();
+    expect(window.scrollTo).not.toHaveBeenCalled();
+    window.location.hash = '';
+  });
+
   it('links back to the home page', () => {
     renderLegalDocument();
 

src/i18n/locales/ar/translation.json

@@ -4,6 +4,9 @@
     "backToHome": "عودة إلى الرئيسية",
     "save": "حفظ"
   },
+  "app": {
+    "pageTitle": "مُصوِّر الخوارزميات التفاعلي"
+  },
   "header": {
     "title": "بيان Flow",
     "subtitle": "الوضوح في الخوارزميات",

src/i18n/locales/en/translation.json

@@ -4,6 +4,9 @@
     "backToHome": "Back to Home",
     "save": "Save"
   },
+  "app": {
+    "pageTitle": "Interactive Algorithm Visualizer"
+  },
   "header": {
     "title": "Bayan Flow",
     "subtitle": "Clarity in Algorithms",

src/i18n/locales/fr/translation.json

@@ -4,6 +4,9 @@
     "backToHome": "Retour à l'Accueil",
     "save": "Enregistrer"
   },
+  "app": {
+    "pageTitle": "Visualiseur Interactif d'Algorithmes"
+  },
   "header": {
     "title": "Bayan Flow",
     "subtitle": "Clarté dans les Algorithmes",