merge: Add link to Github repo (#19)

frontend/package.json

@@ -13,6 +13,7 @@
     "format": "prettier --write ./**/*.{js,jsx,ts,tsx,css,md,json} --config ./.prettierrc.json"
   },
   "dependencies": {
+    "@icons-pack/react-simple-icons": "^10.0.0",
     "lucide-react": "^0.439.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

frontend/src/components/AppInfo.jsx

@@ -0,0 +1,35 @@
+// Copyright DB InfraGO AG and contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { useState, useEffect } from 'react';
+import { ROUTE_PREFIX } from '../APIConfig';
+import { SiGithub } from '@icons-pack/react-simple-icons';
+
+export const AppInfo = () => {
+  const [currentVersion, setCurrentVersion] = useState(null);
+
+  useEffect(() => {
+    fetch(`${ROUTE_PREFIX}/static/version.json`)
+      .then((response) => response.json())
+      .then((data) => setCurrentVersion(data.git))
+      .catch((error) => {
+        console.error(error);
+        setCurrentVersion({ version: 'Fetch failed' });
+      });
+  }, []);
+
+  return (
+    <div className="text-black dark:text-gray-100 print:hidden">
+      {currentVersion && <p>Version: {currentVersion.version}</p>}
+      <a
+        href="https://github.com/DSD-DBS/capella-model-explorer"
+        className="flex items-center space-x-2 hover:underline"
+        target="_blank">
+        <span>Contribute on GitHub</span>
+        <div className="flex h-6 w-6 items-center justify-center rounded-full bg-custom-light">
+          <SiGithub className="h-5 w-5 text-black" />
+        </div>
+      </a>
+    </div>
+  );
+};

frontend/src/components/InstanceView.jsx

@@ -5,7 +5,7 @@ import { useEffect, useRef, useState } from 'react';
 import { SVGDisplay } from './SVGDisplay';
 import { Spinner } from './Spinner';
 import { Printer } from 'lucide-react';
-import { SoftwareVersion } from './SoftwareVersion';
+import { AppInfo } from './AppInfo';
 
 export const InstanceView = ({ templateName, objectID, endpoint }) => {
   const [details, setDetails] = useState([]);
@@ -112,7 +112,7 @@ export const InstanceView = ({ templateName, objectID, endpoint }) => {
         })}
       </div>
       <div className="my-8 text-center 3xl:hidden">
-        <SoftwareVersion />
+        <AppInfo />
       </div>
     </>
   );

frontend/src/views/HomeView.jsx

@@ -4,7 +4,7 @@
 import React, { useState, useEffect } from 'react';
 import { WiredTemplatesList } from '../components/WiredTemplatesList';
 import { API_BASE_URL } from '../APIConfig';
-import { SoftwareVersion } from '../components/SoftwareVersion';
+import { AppInfo } from '../components/AppInfo';
 import { ModelDiff } from '../components/ModelDiff';
 
 export const HomeView = () => {
@@ -127,8 +127,8 @@ export const HomeView = () => {
       <div className="mt-4">
         <WiredTemplatesList />
       </div>
-      <div className="mt-8 text-center 3xl:fixed 3xl:bottom-4 3xl:left-4 3xl:block 3xl:text-left">
-        <SoftwareVersion />
+      <div className="mt-10 text-center 3xl:fixed 3xl:bottom-4 3xl:left-4 3xl:block 3xl:text-left">
+        <AppInfo />
       </div>
     </div>
   );

frontend/src/views/TemplateView.jsx

@@ -15,7 +15,7 @@ import { useMediaQuery } from "react-responsive";
 import { Header } from "../components/Header";
 import { InstanceView } from "../components/InstanceView";
 import { TemplateDetails } from "../components/TemplateDetails";
-import { SoftwareVersion } from "../components/SoftwareVersion";
+import { AppInfo } from "../components/AppInfo";
 
 export const TemplateView = ({ endpoint }) => {
   let { templateName, objectID } = useParams();
@@ -107,9 +107,15 @@ export const TemplateView = ({ endpoint }) => {
           </div>
         </main>
       </div>
-      <div className="hidden text-center 3xl:fixed 3xl:bottom-4 3xl:left-4 3xl:mb-0 3xl:mt-0 3xl:block 3xl:text-left">
-        <SoftwareVersion />
-      </div>
+      {!objectID && !singleObjectID ? (
+        <div className="fixed bottom-4 left-1/2 mb-0 -translate-x-1/2 text-center 3xl:left-4 3xl:translate-x-0 3xl:text-left">
+          <AppInfo />
+        </div>
+      ) : (
+        <div className="hidden text-center 3xl:fixed 3xl:bottom-4 3xl:left-4 3xl:mb-0 3xl:mt-0 3xl:block 3xl:text-left">
+          <AppInfo />
+        </div>
+      )}
     </div>
   );
 };