feature: add german translation and i18n support to some fields

packages/fossflow-app/src/App.tsx

@@ -103,7 +103,7 @@ function EditorPage() {
 
     // Default state if no saved data
     return {
-      title: 'Untitled Diagram',
+      title: '',
       icons: coreIcons,
       colors: defaultColors,
       items: [],
@@ -387,7 +387,7 @@ function EditorPage() {
 
     if (window.confirm(message)) {
       const emptyDiagram: DiagramData = {
-        title: 'Untitled Diagram',
+        title: '',
         icons: iconPackManager.loadedIcons, // Use currently loaded icons
         colors: defaultColors,
         items: [],

packages/fossflow-app/src/i18n/de-DE.json

@@ -0,0 +1,62 @@
+{
+  "nav": {
+    "newDiagram": "Neues Diagramm",
+    "saveSessionOnly": "Speichern (Nur Sitzung)",
+    "loadSessionOnly": "Laden (Nur Sitzung)",
+    "importFile": "Datei importieren",
+    "exportFile": "Datei exportieren",
+    "quickSaveSession": "Schnellspeichern (Sitzung)",
+    "serverStorage": "Serverspeicher"
+  },
+  "status": {
+    "current": "Aktuell",
+    "untitled": "Unbenanntes Diagramm",
+    "modified": "Geändert",
+    "sessionStorageNote": "Nur Sitzungsspeicher – exportieren, um dauerhaft zu speichern"
+  },
+  "dialog": {
+    "save": {
+      "title": "Diagramm speichern (Nur aktuelle Sitzung)",
+      "warningTitle": "Wichtig",
+      "warningMessage": "Diese Speicherung ist temporär und geht verloren, wenn du den Browser schließt.",
+      "warningExport": "Verwende <strong>Datei exportieren</strong>, um deine Arbeit dauerhaft zu speichern.",
+      "placeholder": "Diagrammnamen eingeben",
+      "btnSave": "Speichern",
+      "btnCancel": "Abbrechen"
+    },
+    "load": {
+      "title": "Diagramm laden (Nur aktuelle Sitzung)",
+      "noteTitle": "Hinweis",
+      "noteMessage": "Diese Speicherungen sind temporär. Exportiere deine Diagramme, um sie dauerhaft zu behalten.",
+      "noSavedDiagrams": "Keine gespeicherten Diagramme in dieser Sitzung gefunden",
+      "updated": "Aktualisiert",
+      "btnLoad": "Laden",
+      "btnDelete": "Löschen",
+      "btnClose": "Schließen"
+    },
+    "export": {
+      "title": "Diagramm exportieren",
+      "recommendedTitle": "Empfohlen",
+      "recommendedMessage": "Dies ist die beste Methode, um deine Arbeit dauerhaft zu speichern.",
+      "noteMessage": "Exportierte JSON-Dateien können später importiert oder mit anderen geteilt werden.",
+      "btnDownload": "JSON herunterladen",
+      "btnCancel": "Abbrechen"
+    },
+    "readOnly": {
+      "mode": "Nur-Lesen-Modus",
+      "failed": "Diagramm konnte nicht geladen werden"
+    }
+  },
+  "alert": {
+    "enterDiagramName": "Bitte einen Diagrammnamen eingeben",
+    "diagramExists": "Ein Diagramm mit dem Namen \"{{name}}\" existiert bereits in dieser Sitzung. Es wird überschrieben. Möchtest du wirklich fortfahren?",
+    "unsavedChanges": "Du hast ungespeicherte Änderungen. Trotzdem laden?",
+    "createNewDiagram": "Ein neues Diagramm erstellen?",
+    "unsavedChangesExport": "Du hast ungespeicherte Änderungen. Exportiere dein Diagramm zuerst, um es zu speichern. Trotzdem fortfahren?",
+    "confirmDelete": "Möchtest du dieses Diagramm wirklich löschen?",
+    "storageFull": "Speicher voll! Speicherverwaltung wird geöffnet...",
+    "autoSaveFailed": "Speicher voll! Bitte verwende die Speicherverwaltung, um Platz freizugeben.",
+    "beforeUnload": "Du hast ungespeicherte Änderungen. Möchtest du die Seite wirklich verlassen?",
+    "quotaExceeded": "Speicherkontingent überschritten. Bitte exportiere wichtige Diagramme und gib Speicherplatz frei."
+  }
+}

packages/fossflow-lib/src/components/ContextMenu/ContextMenuManager.tsx

@@ -4,6 +4,7 @@ import { generateId, findNearestUnoccupiedTile } from 'src/utils';
 import { useScene } from 'src/hooks/useScene';
 import { useModelStore } from 'src/stores/modelStore';
 import { VIEW_ITEM_DEFAULTS } from 'src/config';
+import { useTranslation } from 'src/stores/localeStore';
 import { ContextMenu } from './ContextMenu';
 
 interface Props {
@@ -23,6 +24,8 @@ export const ContextMenuManager = ({ anchorEl }: Props) => {
     return state.actions;
   });
 
+  const { t } = useTranslation('addMenu');
+
   const onClose = useCallback(() => {
     uiStateActions.setContextMenu(null);
   }, [uiStateActions]);
@@ -33,7 +36,7 @@ export const ContextMenuManager = ({ anchorEl }: Props) => {
       onClose={onClose}
       menuItems={[
         {
-          label: 'Add Node',
+          label: t('addNode'),
           onClick: () => {
             if (!contextMenu) return;
             if (model.icons.length > 0) {
@@ -60,7 +63,7 @@ export const ContextMenuManager = ({ anchorEl }: Props) => {
           }
         },
         {
-          label: 'Add Rectangle',
+          label: t('addRectangle'),
           onClick: () => {
             if (!contextMenu) return;
             if (model.colors.length > 0) {

packages/fossflow-lib/src/components/LabelSettings/LabelSettings.tsx

@@ -5,10 +5,12 @@ import {
   Slider
 } from '@mui/material';
 import { useUiStateStore } from 'src/stores/uiStateStore';
+import { useTranslation } from 'src/stores/localeStore';
 
 export const LabelSettings = () => {
   const labelSettings = useUiStateStore((state) => state.labelSettings);
   const setLabelSettings = useUiStateStore((state) => state.actions.setLabelSettings);
+  const { t } = useTranslation('labelSettings');
 
   const handlePaddingChange = (_event: Event, value: number | number[]) => {
     setLabelSettings({
@@ -20,15 +22,15 @@ export const LabelSettings = () => {
   return (
     <Box>
       <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
-        Configure label display settings
+        {t('description')}
       </Typography>
 
       <Box sx={{ mb: 3 }}>
         <Typography variant="body1" gutterBottom>
-          Expand Button Padding
+          {t('expandButtonPadding')}
         </Typography>
         <Typography variant="caption" color="text.secondary" sx={{ mb: 1, display: 'block' }}>
-          Bottom padding when expand button is visible (prevents text overlap)
+          {t('expandButtonPaddingDesc')}
         </Typography>
         <Slider
           value={labelSettings.expandButtonPadding}
@@ -41,7 +43,7 @@ export const LabelSettings = () => {
           sx={{ mt: 2 }}
         />
         <Typography variant="caption" color="text.secondary">
-          Current: {labelSettings.expandButtonPadding} theme units
+          {t('current').replace('{{value}}', String(labelSettings.expandButtonPadding))}
         </Typography>
       </Box>
     </Box>

packages/fossflow-lib/src/components/SettingsDialog/SettingsDialog.tsx

@@ -61,7 +61,7 @@ export const SettingsDialog = ({ iconPackManager }: SettingsDialogProps) => {
       fullWidth
     >
       <DialogTitle>
-        Settings
+        {t('settingsDialog.title')}
         <IconButton
           aria-label="close"
           onClick={handleClose}
@@ -79,8 +79,8 @@ export const SettingsDialog = ({ iconPackManager }: SettingsDialogProps) => {
         <Tabs value={tabValue} onChange={handleTabChange} sx={{ borderBottom: 1, borderColor: 'divider' }}>
           <Tab label={t('settings.hotkeys.title')} />
           <Tab label={t('settings.pan.title')} />
-          <Tab label="Zoom" />
-          <Tab label="Labels" />
+          <Tab label={t('settingsDialog.tabZoom')} />
+          <Tab label={t('settingsDialog.tabLabels')} />
           <Tab label={t('settings.connector.title')} />
           {iconPackManager && <Tab label={t('settings.iconPacks.title')} />}
         </Tabs>
@@ -103,7 +103,7 @@ export const SettingsDialog = ({ iconPackManager }: SettingsDialogProps) => {
         </Box>
       </DialogContent>
       <DialogActions>
-        <Button onClick={handleClose}>Close</Button>
+        <Button onClick={handleClose}>{t('settingsDialog.close')}</Button>
       </DialogActions>
     </Dialog>
   );

packages/fossflow-lib/src/components/UiOverlay/UiOverlay.tsx

@@ -14,7 +14,6 @@ import { DebugUtils } from 'src/components/DebugUtils/DebugUtils';
 import { useResizeObserver } from 'src/hooks/useResizeObserver';
 import { ContextMenuManager } from 'src/components/ContextMenu/ContextMenuManager';
 import { useScene } from 'src/hooks/useScene';
-import { useModelStore } from 'src/stores/modelStore';
 import { ExportImageDialog } from '../ExportImageDialog/ExportImageDialog';
 import { HelpDialog } from '../HelpDialog/HelpDialog';
 import { SettingsDialog } from '../SettingsDialog/SettingsDialog';
@@ -85,7 +84,7 @@ export const UiOverlay = () => {
   const itemControls = useUiStateStore((state) => {
     return state.itemControls;
   });
-  const { currentView } = useScene();
+  const { currentView, title } = useScene();
   const editorMode = useUiStateStore((state) => {
     return state.editorMode;
   });
@@ -95,9 +94,6 @@ export const UiOverlay = () => {
   const rendererEl = useUiStateStore((state) => {
     return state.rendererEl;
   });
-  const title = useModelStore((state) => {
-    return state.title;
-  });
   const iconPackManager = useUiStateStore((state) => {
     return state.iconPackManager;
   });

packages/fossflow-lib/src/hooks/useScene.ts

@@ -16,8 +16,11 @@ import { getItemByIdOrThrow } from 'src/utils';
 import {
   CONNECTOR_DEFAULTS,
   RECTANGLE_DEFAULTS,
-  TEXTBOX_DEFAULTS
+  TEXTBOX_DEFAULTS,
+  VIEW_DEFAULTS,
+  INITIAL_DATA
 } from 'src/config';
+import { useTranslation } from 'src/stores/localeStore';
 
 export const useScene = () => {
   const { views, colors, icons, items, version, title, description } =
@@ -32,7 +35,7 @@ export const useScene = () => {
         description: state.description
       }),
       shallow
-    );
+    ); 
   const { connectors: sceneConnectors, textBoxes: sceneTextBoxes } =
     useSceneStore(
       (state) => ({
@@ -42,6 +45,7 @@ export const useScene = () => {
       shallow
     );
   const currentViewId = useUiStateStore((state) => state.view);
+  const { t } = useTranslation('diagramViewStatus');
   const transactionInProgress = useRef(false);
 
   const modelStoreApi = useModelStoreApi();
@@ -422,13 +426,26 @@ export const useScene = () => {
     [createModelItem, createViewItem, saveToHistoryBeforeChange]
   );
 
+  const translatedTitle = useMemo(() => {
+    if (!title || title === INITIAL_DATA.title) return t('untitledDiagram');
+    return title;
+  }, [title, t]);
+
+  const translatedCurrentView = useMemo(() => {
+    return {
+      ...currentView,
+      name: currentView.name === VIEW_DEFAULTS.name ? t('untitledView') : currentView.name
+    };
+  }, [currentView, t]);
+
   return {
+    title: translatedTitle,
     items: itemsList,
     connectors: connectorsList,
     colors: colorsList,
     rectangles: rectanglesList,
     textBoxes: textBoxesList,
-    currentView,
+    currentView: translatedCurrentView,
     createModelItem,
     updateModelItem,
     deleteModelItem,

packages/fossflow-lib/src/i18n/bn-BD.ts

@@ -187,6 +187,26 @@ const locale: LocaleProps = {
     configPath2: "কনফিগারেশন অ্যাক্সেস করতে উপরের বাম দিকে।",
     canDisable: "আপনি চাইলে এই আচরণ নিষ্ক্রিয় করতে পারেন।",
     signature: "-Stan"
+  },
+  settingsDialog: {
+    title: "সেটিংস",
+    close: "বন্ধ করুন",
+    tabZoom: "জুম",
+    tabLabels: "লেবেল"
+  },
+  labelSettings: {
+    description: "লেবেল প্রদর্শন সেটিংস কনফিগার করুন",
+    expandButtonPadding: "প্রসারিত বোতামের প্যাডিং",
+    expandButtonPaddingDesc: "প্রসারিত বোতাম দৃশ্যমান হলে নিচের প্যাডিং (টেক্সট ওভারল্যাপ রোধ করে)",
+    current: "বর্তমান: {{value}} থিম ইউনিট"
+  },
+  diagramViewStatus: {
+    untitledDiagram: "শিরোনামহীন ডায়াগ্রাম",
+    untitledView: "শিরোনামহীন দৃশ্য"
+  },
+  addMenu: {
+    addNode: "নোড যোগ করুন",
+    addRectangle: "আয়তক্ষেত্র যোগ করুন"
   }
 };