@opencloning/ui 1.0.0

package/src/components/form/TextFieldValidate.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Alert, Button, FormControl, TextField } from '@mui/material';
+
+export default function TextFieldValidate({ getterFunction, onChange, label, defaultHelperText = '' }) {
+  const [helperText, setHelperText] = React.useState('');
+  const [userInput, setUserInput] = React.useState('');
+  const [error, setError] = React.useState(false);
+  const [connectionError, setConnectionError] = React.useState(false);
+  const [connectionAttempt, setConnectionAttempt] = React.useState(0);
+  React.useEffect(() => {
+    // Send an empty response to clear the form
+    onChange('', null);
+    // Validate assemblyId with a 500ms delay
+    if ((userInput !== '')) {
+      setHelperText(`Validating ${label}...`);
+      const timeOutId = setTimeout(async () => {
+        try {
+          const resp = await getterFunction(userInput);
+          if (resp === null) {
+            setHelperText(`${label} does not exist`);
+            setError(true);
+          } else {
+            setHelperText('');
+            setError(false);
+          }
+          onChange(userInput, resp);
+        } catch (e) {
+          console.error(e);
+          setConnectionError(true);
+        }
+      }, 500);
+      return () => clearTimeout(timeOutId);
+    }
+    // Also set to null if assemblyId is empty
+    setHelperText(defaultHelperText);
+    setError(false);
+    return () => {};
+  }, [userInput, connectionAttempt]);
+
+  if (connectionError) {
+    return (
+      <Alert
+        sx={{ alignItems: 'center' }}
+        severity="error"
+        action={(
+          <Button color="inherit" size="small" onClick={() => { setConnectionError(false); setConnectionAttempt(connectionAttempt + 1); }}>
+            Retry
+          </Button>
+    )}
+      >
+        Could not connect to server for validation.
+      </Alert>
+    );
+  }
+  return (
+    <FormControl fullWidth>
+      <TextField
+        label={label}
+        value={userInput}
+        error={error}
+        helperText={helperText}
+        onChange={(event) => { setUserInput(event.target.value); }}
+      />
+    </FormControl>
+
+  );
+}

package/src/components/form/ValidatedTextField.jsx

@@ -0,0 +1,33 @@
+import { TextField } from '@mui/material';
+import React from 'react';
+import CustomFormHelperText from './CustomFormHelperText';
+
+function ValidatedTextField({ id, value, onInputChange, errorChecker, updateValidationStatus, required, submissionAttempted, floatingHelperText, initialHelperText = '', ...rest }) {
+  const defaultPars = { inputProps: { style: { fontSize: 14 } }, FormHelperTextProps: { component: 'div' } };
+  const [error, setError] = React.useState(false);
+  const [helperText, setHelperText] = React.useState(initialHelperText);
+  const [touched, setTouched] = React.useState(false);
+
+  const handleChange = (event) => {
+    onInputChange(event);
+    setTouched(true);
+  };
+
+  React.useEffect(() => {
+    if (!submissionAttempted && !touched) return;
+    if (required && value.length === 0) {
+      setError(true);
+      setHelperText('Field required');
+      updateValidationStatus(id, true);
+      return;
+    }
+    const { error: newError, helperText: newHelperText } = errorChecker(value);
+    setError(newError);
+    setHelperText(newHelperText);
+    updateValidationStatus(id, newError);
+  }, [value, touched, submissionAttempted]);
+  const renderedHelperText = floatingHelperText ? (<CustomFormHelperText>{helperText}</CustomFormHelperText>) : helperText;
+  return (<TextField id={id} value={value} {...defaultPars} {...rest} onChange={handleChange} error={error} helperText={renderedHelperText} />);
+}
+
+export default ValidatedTextField;

package/src/components/form/intermediates_disclaimer.svg

@@ -0,0 +1,181 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="66.574898mm"
+   height="68.316658mm"
+   viewBox="0 0 66.574898 68.316658"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
+   sodipodi:docname="intermediates_disclaimer.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+   <sodipodi:namedview
+      id="namedview1"
+      pagecolor="#ffffff"
+      bordercolor="#666666"
+      borderopacity="1.0"
+      inkscape:showpageshadow="2"
+      inkscape:pageopacity="0.0"
+      inkscape:pagecheckerboard="0"
+      inkscape:deskcolor="#d1d1d1"
+      inkscape:document-units="mm"
+      inkscape:zoom="1.1615876"
+      inkscape:cx="-41.753202"
+      inkscape:cy="89.102194"
+      inkscape:window-width="1400"
+      inkscape:window-height="774"
+      inkscape:window-x="353"
+      inkscape:window-y="96"
+      inkscape:window-maximized="0"
+      inkscape:current-layer="layer1" />
+   <defs
+      id="defs1" />
+   <g
+      inkscape:label="Layer 1"
+      inkscape:groupmode="layer"
+      id="layer1"
+      transform="translate(-41.665391,-77.454446)">
+      <path
+         style="fill:none;stroke:#000000;stroke-width:0.865;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+         d="M 55.372552,95.314967 V 103.046"
+         id="path2" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:0.865;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+         d="m 55.372552,119.87934 v 7.73102"
+         id="path2-1" />
+      <rect
+         style="fill:#ffffff;fill-opacity:1;stroke:#2e7d32;stroke-width:0.92259;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         id="rect2"
+         width="26.491732"
+         height="17.76988"
+         x="42.126686"
+         y="77.915741"
+         ry="1.8777486" />
+      <rect
+         style="fill:#ffffff;fill-opacity:1;stroke:#106ba3;stroke-width:0.92259;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         id="rect2-5"
+         width="26.491732"
+         height="17.76988"
+         x="42.126686"
+         y="102.39127"
+         ry="1.8777486" />
+      <rect
+         style="fill:#ffffff;fill-opacity:1;stroke:#106ba3;stroke-width:0.92259;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         id="rect2-3"
+         width="26.491732"
+         height="17.76988"
+         x="42.126686"
+         y="127.53993"
+         ry="1.8777486" />
+      <text
+         xml:space="preserve"
+         style="font-size:4.23333px;line-height:1;font-family:arial;-inkscape-font-specification:arial;text-align:center;text-anchor:middle;stroke-width:0.264583"
+         x="55.319843"
+         y="85.781624"
+         id="text2"><tspan
+         sodipodi:role="line"
+         id="tspan2"
+         style="line-height:1;stroke-width:0.264583"
+         x="55.319843"
+         y="85.781624">sequence</tspan><tspan
+         sodipodi:role="line"
+         style="line-height:1;stroke-width:0.264583"
+         x="55.319843"
+         y="90.014954"
+         id="tspan3">in database</tspan></text>
+      <text
+         xml:space="preserve"
+         style="font-size:4.23333px;line-height:1;font-family:arial;-inkscape-font-specification:arial;text-align:center;text-anchor:middle;stroke-width:0.264583"
+         x="55.319843"
+         y="110.25405"
+         id="text2-3"><tspan
+         sodipodi:role="line"
+         id="tspan2-5"
+         style="line-height:1;stroke-width:0.264583"
+         x="55.319843"
+         y="110.25405">intermediate</tspan><tspan
+         sodipodi:role="line"
+         style="line-height:1;stroke-width:0.264583"
+         x="55.319843"
+         y="114.48738"
+         id="tspan4">sequence</tspan></text>
+      <text
+         xml:space="preserve"
+         style="font-size:4.23333px;line-height:1;font-family:arial;-inkscape-font-specification:arial;text-align:center;text-anchor:middle;stroke-width:0.264583"
+         x="55.38702"
+         y="134.98517"
+         id="text2-3-2"><tspan
+         sodipodi:role="line"
+         id="tspan2-5-8"
+         style="line-height:1;stroke-width:0.264583"
+         x="55.38702"
+         y="134.98517">sequence</tspan><tspan
+         sodipodi:role="line"
+         style="line-height:1;stroke-width:0.264583"
+         x="55.38702"
+         y="139.21851"
+         id="tspan4-5">being saved</tspan></text>
+      <text
+         xml:space="preserve"
+         style="font-size:4.23333px;line-height:1;font-family:arial;-inkscape-font-specification:arial;text-align:center;text-anchor:middle;stroke-width:0.264583"
+         x="92.760109"
+         y="133.68188"
+         id="text2-3-2-4"><tspan
+         sodipodi:role="line"
+         style="line-height:1;stroke-width:0.264583"
+         x="92.760109"
+         y="133.68188"
+         id="tspan4-5-5">will get a new</tspan><tspan
+         sodipodi:role="line"
+         style="line-height:1;stroke-width:0.264583"
+         x="92.760109"
+         y="137.91522"
+         id="tspan5">entry in the</tspan><tspan
+         sodipodi:role="line"
+         style="line-height:1;stroke-width:0.264583"
+         x="92.760109"
+         y="142.14854"
+         id="tspan6">database</tspan></text>
+      <text
+         xml:space="preserve"
+         style="font-size:4.23333px;line-height:1;font-family:arial;-inkscape-font-specification:arial;text-align:center;text-anchor:middle;stroke-width:0.264583"
+         x="92.896538"
+         y="105.99592"
+         id="text2-3-2-4-7"><tspan
+         sodipodi:role="line"
+         style="line-height:1;stroke-width:0.264583"
+         x="92.896538"
+         y="105.99592"
+         id="tspan8">will be contained</tspan><tspan
+         sodipodi:role="line"
+         style="line-height:1;stroke-width:0.264583"
+         x="92.896538"
+         y="110.22925"
+         id="tspan10">within the entry </tspan><tspan
+         sodipodi:role="line"
+         style="line-height:1;stroke-width:0.264583"
+         x="92.896538"
+         y="114.46258"
+         id="tspan13">of the sequence</tspan><tspan
+         sodipodi:role="line"
+         style="line-height:1;stroke-width:0.264583"
+         x="92.896538"
+         y="118.69591"
+         id="tspan14">being saved</tspan></text>
+      <text
+         xml:space="preserve"
+         style="font-size:4.23333px;line-height:1;font-family:arial;-inkscape-font-specification:arial;text-align:center;text-anchor:middle;stroke-width:0.264583"
+         x="92.772514"
+         y="87.870384"
+         id="text2-3-2-4-7-8"><tspan
+         sodipodi:role="line"
+         style="line-height:1;stroke-width:0.264583"
+         x="92.772514"
+         y="87.870384"
+         id="tspan14-5">stays the same</tspan></text>
+   </g>
+</svg>

package/src/components/navigation/ButtonWithMenu.jsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+
+export default function ButtonWithMenu({ children, menuItems }) {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <Button
+        id="basic-button"
+        aria-controls={open ? 'basic-menu' : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? 'true' : undefined}
+        onClick={handleClick}
+        sx={{ color: 'white' }}
+      >
+        {children}
+      </Button>
+      <Menu
+        id="basic-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{
+          'aria-labelledby': 'basic-button',
+        }}
+      >
+        {menuItems.map((item) => (
+          <MenuItem key={item.display} onClick={() => { item.onClick(); handleClose(); }}>{item.display}</MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+}

package/src/components/navigation/CustomTab.jsx

@@ -0,0 +1,14 @@
+import { Tab } from '@mui/material';
+import React from 'react';
+
+const CustomTab = React.forwardRef(({ label, index, ...other }, ref) => (
+  <Tab
+    label={label}
+    id={`tab-${index}`}
+    aria-controls={`tab-panel-${index}`}
+    ref={ref}
+    {...other}
+  />
+));
+
+export default CustomTab;

package/src/components/navigation/FeedbackDialog.jsx

@@ -0,0 +1,34 @@
+import { Dialog, DialogContent, DialogTitle } from '@mui/material';
+import React from 'react';
+
+function FeedbackDialog({ open, setOpen }) {
+  return (
+    <Dialog open={open} onClose={() => setOpen(false)} className="load-example-dialog">
+      <DialogTitle sx={{ textAlign: 'center', fontSize: 'x-large' }}> 😊 Give feedback 😭 </DialogTitle>
+      <DialogContent sx={{ fontSize: 'large' }}>
+        <p>
+          🙏 Thanks for using OpenCloning!
+        </p>
+        <p>
+          {' '}
+          Your feedback is really appreciated:
+          <ul>
+            <li style={{ marginBottom: 10 }}>
+              If you use GitHub,
+              {' '}
+              <a href="https://github.com/manulera/OpenCloning/issues/new" target="_blank" rel="noopener noreferrer">create an issue</a>
+            </li>
+            <li>
+              Otherwise, send an email to
+              {' '}
+              <a href="mailto:manuel.lera-ramirez@ucl.ac.uk">manuel.lera-ramirez@ucl.ac.uk</a>
+            </li>
+          </ul>
+
+        </p>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default React.memo(FeedbackDialog);

package/src/components/navigation/GithubCornerRight.jsx

@@ -0,0 +1,29 @@
+// From https://github.com/tholman/github-corners under MIT license
+// The MIT License (MIT)
+// Copyright (c) 2025 Tim Holman
+// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+// associated documentation files (the "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+// sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject
+// to the following conditions:
+// The above copyright notice and this permission notice shall be included in all copies or substantial
+// portions of the Software.
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
+// LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
+// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+// WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+// SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+import React from 'react';
+
+function GithubCornerRight() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 250 250" fill="#1976d2">
+      <path d="M0 0l115 115h15l12 27 108 108V0z" fill="#fff" />
+      <path className="octo-arm" d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16" style={{ '-webkit-transform-origin': '130px 106px', transformOrigin: '130px 106px' }} />
+      <path className="octo-body" d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z" />
+    </svg>
+
+  );
+}
+
+export default GithubCornerRight;

package/src/components/navigation/MainAppBar.css

@@ -0,0 +1,26 @@
+.app-bar {
+    position: relative;
+}
+
+.github-corner {
+    position: fixed !important;
+    top: 0px !important;
+    right: 0px !important;
+    padding: 0px !important;
+}
+
+
+.app-bar-container button[type="button"] {
+    font-size: large;
+    margin-left: 20px;
+    margin-right: 20px;
+    color: white;
+}
+
+.app-name {
+    font-size: 4em;
+    font-weight: 200;
+    text-align: center;
+}
+
+

package/src/components/navigation/MainAppBar.jsx

@@ -0,0 +1,205 @@
+import React from 'react';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import Container from '@mui/material/Container';
+import { Button, Tooltip } from '@mui/material';
+import './MainAppBar.css';
+import { useDispatch } from 'react-redux';
+import IconButton from '@mui/material/IconButton';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import MenuIcon from '@mui/icons-material/Menu';
+import ButtonWithMenu from './ButtonWithMenu';
+import { downloadCloningStrategyAsSvg, formatTemplate, loadHistoryFile, loadFilesToSessionStorage } from '@opencloning/utils/readNwrite';
+import SelectExampleDialog from './SelectExampleDialog';
+import SelectTemplateDialog from './SelectTemplateDialog';
+import FeedbackDialog from './FeedbackDialog';
+import { cloningActions } from '@opencloning/store/cloning';
+import VersionDialog from './VersionDialog';
+import useAlerts from '../../hooks/useAlerts';
+import DownloadCloningStrategyDialog from '../DownloadCloningStrategyDialog';
+import LoadCloningHistoryWrapper from '../LoadCloningHistoryWrapper';
+import useValidateState from '../../hooks/useValidateState';
+import GithubCornerRight from './GithubCornerRight';
+import useHttpClient from '../../hooks/useHttpClient';
+
+const { setCurrentTab, setState: setCloningState } = cloningActions;
+
+function MainAppBar() {
+  const [openExampleDialog, setOpenExampleDialog] = React.useState(false);
+  const [openTemplateDialog, setOpenTemplateDialog] = React.useState(false);
+  const [openFeedbackDialog, setOpenFeedbackDialog] = React.useState(false);
+  const [openCloningStrategyDialog, setOpenCloningStrategyDialog] = React.useState(false);
+  const [fileList, setFileList] = React.useState([]);
+  const [openVersionDialog, setOpenVersionDialog] = React.useState(false);
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const openMenu = Boolean(anchorEl);
+  const httpClient = useHttpClient();
+
+  const dispatch = useDispatch();
+  const { addAlert } = useAlerts();
+  const validateState = useValidateState();
+
+  // Hidden input field, used to load files.
+  const fileInputRef = React.useRef(null);
+
+  const fileMenu = [
+    { display: 'Save cloning history to file', onClick: () => setOpenCloningStrategyDialog(true) },
+    { display: 'Load cloning history from file', onClick: () => { fileInputRef.current.click(); fileInputRef.current.value = ''; } },
+    { display: 'Print cloning history to svg',
+      onClick: async () => {
+        await dispatch(setCurrentTab(0));
+        downloadCloningStrategyAsSvg('history.svg');
+      } },
+  ];
+
+
+  const handleCloseDialog = async (url, isTemplate) => {
+    setOpenExampleDialog(false);
+    setOpenTemplateDialog(false);
+    if (url) {
+      let data;
+      if (url.endsWith('.zip')) {
+        // For zip files, get as blob and process with loadHistoryFile
+        const { data: blob } = await httpClient.get(url, { responseType: 'blob' });
+        const fileName = url.split('/').pop();
+        // eslint-disable-next-line no-undef
+        const file = new File([blob], fileName);
+        const { cloningStrategy, verificationFiles } = await loadHistoryFile(file);
+        data = await validateState(cloningStrategy);
+        await loadFilesToSessionStorage(verificationFiles, 0);
+      } else {
+        // For JSON files, get as JSON
+        let { data: jsonData } = await httpClient.get(url);
+        data = await validateState(jsonData);
+      }
+      if (isTemplate) {
+        data = formatTemplate(data, url);
+      }
+      dispatch(setCloningState(data));
+      dispatch(setCurrentTab(0))
+    }
+  };
+
+  // TODO: turn these into <a> elements.
+  const helpMenu = [
+    { display: 'Newsletter', onClick: () => window.open('https://eepurl.com/h9-n71') },
+    { display: 'About the project', onClick: () => window.open('https://github.com/manulera/OpenCloning') },
+    { display: 'GitHub repository', onClick: () => window.open('https://github.com/manulera/OpenCloning_frontend') },
+    { display: 'Demo videos', onClick: () => window.open('https://www.youtube.com/watch?v=n0hedzvpW88&list=PLpv3x-ensLZkJToD2E6ejefADmHcUPYSJ&index=1') },
+    { display: 'App version', onClick: () => setOpenVersionDialog(true) },
+  ];
+
+  const onFileChange = async (event) => {
+    const { files } = event.target;
+    if (files[0].name.endsWith('.json') || files[0].name.endsWith('.zip')) {
+      setFileList([...files]);
+    } else {
+      setFileList([]);
+      addAlert({ message: 'Only JSON and zip files are accepted', severity: 'error' });
+    }
+    event.target.value = '';
+  };
+
+  // If you want to do something on page load, you can do it here.
+  // React.useEffect(() => {
+  //   const fetchExample = async () => {
+  //     dispatch(setCurrentTab(3));
+  //     // Wait for the primer designer to be rendered
+  //     setTimeout(() => {
+  //       // Click on button that says Open primer designer
+  //       const primerDesignerButton = document.querySelector('.main-sequence-editor button');
+  //       if (primerDesignerButton) {
+  //         primerDesignerButton.click();
+  //       }
+  //     }, 300);
+  //   };
+  //   fetchExample();
+  // }, []);
+
+  const handleMenuOpen = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <AppBar position="static" className="app-bar">
+      <div className="app-name">OpenCloning</div>
+      <Tooltip title="View source code on GitHub" placement="left" componentsProps={{ tooltip: { sx: { fontSize: '1rem' } } }}>
+        <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
+          <Button
+            className="github-corner"
+            onClick={() => window.open('https://github.com/manulera/OpenCloning')}
+            aria-label="GitHub repository"
+          >
+            <GithubCornerRight />
+          </Button>
+        </Box>
+      </Tooltip>
+      <Container className="app-bar-container">
+        <Toolbar variant="dense" sx={{ minHeight: 50, justifyContent: 'center' }}>
+          {/* Mobile menu button and dropdown */}
+          <Box sx={{ display: { xs: 'flex', md: 'none' } }}>
+            <IconButton
+              size="large"
+              edge="start"
+              color="inherit"
+              aria-label="menu"
+              onClick={handleMenuOpen}
+            >
+              <MenuIcon />
+            </IconButton>
+            <Menu
+              anchorEl={anchorEl}
+              open={openMenu}
+              onClose={handleMenuClose}
+              sx={{ display: { xs: 'block', md: 'none' } }}
+            >
+              {/* File menu items */}
+              {fileMenu.map((item) => (
+                <MenuItem key={item.display} onClick={() => { item.onClick(); handleMenuClose(); }}>
+                  {item.display}
+                </MenuItem>
+              ))}
+              {/* Help menu items */}
+              {helpMenu.map((item) => (
+                <MenuItem key={item.display} onClick={() => { item.onClick(); handleMenuClose(); }}>
+                  {item.display}
+                </MenuItem>
+              ))}
+              <MenuItem><a style={{ color: 'inherit', textDecoration: 'none' }} target="_blank" href="https://docs.opencloning.org">Documentation</a></MenuItem>
+              <MenuItem onClick={() => { setOpenExampleDialog(true); handleMenuClose(); }}>Examples</MenuItem>
+              <MenuItem onClick={() => { setOpenTemplateDialog(true); handleMenuClose(); }}>Templates</MenuItem>
+              <MenuItem onClick={() => { setOpenFeedbackDialog(true); handleMenuClose(); }}>Feedback</MenuItem>
+            </Menu>
+          </Box>
+
+          {/* Desktop buttons - hidden on mobile */}
+          <Box sx={{ display: { xs: 'none', md: 'flex' }, gap: 1 }}>
+            <ButtonWithMenu menuItems={fileMenu}>File</ButtonWithMenu>
+            <input type="file" ref={fileInputRef} style={{ display: 'none' }} onChange={onFileChange} accept=".json,.zip" />
+            {fileList && <LoadCloningHistoryWrapper fileList={fileList} clearFiles={() => setFileList([])} />}
+            <ButtonWithMenu menuItems={helpMenu}>About</ButtonWithMenu>
+            <Button><a style={{ color: 'inherit', textDecoration: 'none' }} target="_blank" href="https://docs.opencloning.org">Documentation</a></Button>
+            <Button onClick={() => setOpenExampleDialog(true)}>Examples</Button>
+            <Button onClick={() => setOpenTemplateDialog(true)}>Templates</Button>
+            <Button onClick={() => setOpenFeedbackDialog(true)}>Feedback</Button>
+          </Box>
+
+        </Toolbar>
+      </Container>
+      <SelectExampleDialog onClose={handleCloseDialog} open={openExampleDialog} />
+      {/* Conditional, since we only want to make request to github if templates want to be used */}
+      {openTemplateDialog && <SelectTemplateDialog onClose={handleCloseDialog} open={openTemplateDialog} />}
+      <FeedbackDialog open={openFeedbackDialog} setOpen={setOpenFeedbackDialog} />
+      {openCloningStrategyDialog && <DownloadCloningStrategyDialog open={openCloningStrategyDialog} setOpen={setOpenCloningStrategyDialog} />}
+      <VersionDialog open={openVersionDialog} setOpen={setOpenVersionDialog} />
+    </AppBar>
+  );
+}
+
+export default MainAppBar;