From eb18c0b1724a1d68fe4bff75cf3c7d2c9a2efdd4 Mon Sep 17 00:00:00 2001
From: Matthias Mair <code@mjmair.com>
Date: Fri, 26 Sep 2025 02:51:24 +0200
Subject: [PATCH] feat(forntend): Re-Add About link to main nav dropdown
 (#10395)

* Re-Add About link to main nav dropdown
Closes #10392

* disable text selection on most of version dialog - maybe that helps ppl. copying the right section

* highlight the correct copy button
---
 src/frontend/src/components/buttons/CopyButton.tsx     |  7 +++++--
 .../src/components/modals/AboutInvenTreeModal.tsx      | 10 ++++++++--
 src/frontend/src/components/nav/MainMenu.tsx           |  8 ++++++++
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/components/buttons/CopyButton.tsx b/src/frontend/src/components/buttons/CopyButton.tsx
index 79edcc174c..dff4a42588 100644
--- a/src/frontend/src/components/buttons/CopyButton.tsx
+++ b/src/frontend/src/components/buttons/CopyButton.tsx
@@ -2,6 +2,7 @@ import { t } from '@lingui/core/macro';
 import {
   ActionIcon,
   Button,
+  type DefaultMantineColor,
   CopyButton as MantineCopyButton,
   type MantineSize,
   Text,
@@ -16,12 +17,14 @@ export function CopyButton({
   value,
   label,
   content,
-  size
+  size,
+  color = 'gray'
 }: Readonly<{
   value: any;
   label?: string;
   content?: JSX.Element;
   size?: MantineSize;
+  color?: DefaultMantineColor;
 }>) {
   const ButtonComponent = label ? Button : ActionIcon;
 
@@ -30,7 +33,7 @@ export function CopyButton({
       {({ copied, copy }) => (
         <Tooltip label={copied ? t`Copied` : t`Copy`} withArrow>
           <ButtonComponent
-            color={copied ? 'teal' : 'gray'}
+            color={copied ? 'teal' : color}
             onClick={copy}
             variant='transparent'
             size={size ?? 'sm'}
diff --git a/src/frontend/src/components/modals/AboutInvenTreeModal.tsx b/src/frontend/src/components/modals/AboutInvenTreeModal.tsx
index 8a353a8086..806e868e51 100644
--- a/src/frontend/src/components/modals/AboutInvenTreeModal.tsx
+++ b/src/frontend/src/components/modals/AboutInvenTreeModal.tsx
@@ -156,7 +156,7 @@ const AboutContent = ({
   }
 
   return (
-    <Stack>
+    <Stack style={{ userSelect: 'none' }}>
       <Divider />
       <Group justify='space-between' wrap='nowrap'>
         <StylishText size='lg'>
@@ -187,7 +187,13 @@ const AboutContent = ({
       </Table>
       <Divider />
       <Group justify='space-between'>
-        <CopyButton value={copyval} label={t`Copy version information`} />
+        <div style={{ border: '1px solid orange', borderRadius: '8px' }}>
+          <CopyButton
+            value={copyval}
+            label={t`Copy version information`}
+            color='orange'
+          />
+        </div>
         <Space />
         <Button
           onClick={() => {
diff --git a/src/frontend/src/components/nav/MainMenu.tsx b/src/frontend/src/components/nav/MainMenu.tsx
index 63407c756f..caef11a2e1 100644
--- a/src/frontend/src/components/nav/MainMenu.tsx
+++ b/src/frontend/src/components/nav/MainMenu.tsx
@@ -9,6 +9,7 @@ import {
 } from '@mantine/core';
 import {
   IconChevronDown,
+  IconInfoCircle,
   IconLogout,
   IconMoonStars,
   IconSettings,
@@ -18,6 +19,7 @@ import {
 } from '@tabler/icons-react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useShallow } from 'zustand/react/shallow';
+import { aboutInvenTree } from '../../defaults/links';
 import { doLogout } from '../../functions/auth';
 import * as classes from '../../main.css';
 import { useUserState } from '../../states/UserState';
@@ -90,6 +92,12 @@ export function MainMenu() {
           >
             <Trans>Change Color Mode</Trans>
           </Menu.Item>
+          <Menu.Item
+            onClick={() => aboutInvenTree()}
+            leftSection={<IconInfoCircle />}
+          >
+            <Trans>About InvenTree</Trans>
+          </Menu.Item>
           <Menu.Divider />
           <Menu.Item
             leftSection={<IconLogout />}