Lodestone-Team · adabingw · Jun 17, 2024 · Jun 17, 2024 · Jun 17, 2024
diff --git a/dashboard/pages/index.tsx b/dashboard/pages/index.tsx
@@ -44,9 +44,9 @@ import { toast } from 'react-toastify';
 import RequireSetup from 'utils/router/RequireSetup';
 import InstanceTabs from 'pages/InstanceTabs/InstanceTabs';
 import ProfilePage from 'pages/settings/profile';
-import CoreSettings from 'pages/settings/CoreSettings';
 import UserSettings from 'pages/settings/UserSettings';
-
+import GlobalTabs from 'pages/settings/GlobalSettings';
+import GenericSetting from 'pages/settings/GenericSettings';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -68,12 +68,20 @@ const InstanceTabList = [
   'tunnels',
 ];
 
-export const CoreSettingsTabList = [
+const GlobalTabList = [
+    {
+        title: 'Global Settings',
+        path: 'core-settings',
+        content: <GlobalTabs />,
+    },
     {
-    title: 'General',
-      path: 'general',
-      content: <CoreSettings />,
+        title: 'Version Info',
+        path: 'version',
+        content: <GenericSetting />,
     },
+];
+
+export const CoreSettingsTabList = [
     {
       title: 'Users',
       path: 'users',
@@ -324,6 +332,13 @@ export default function App() {
                     key={i}
                   />
                 ))}
+                {GlobalTabList.map((tab, i) => (
+                  <Route
+                    path={`/dashboard/${tab.path}`}
+                    element={tab.content}
+                    key={i}
+                  />
+                ))}
                 <Route path="/" element={<Home />} />
               </Route>
               <Route element={<SettingsLayout />}>

diff --git a/dashboard/src/components/DashboardLayout/GlobalInstanceSetting.tsx b/dashboard/src/components/DashboardLayout/GlobalInstanceSetting.tsx
@@ -0,0 +1,80 @@
+import { useEffect, useMemo, useState } from 'react';
+import { RadioGroup } from '@headlessui/react';
+import { useContext } from 'react';
+import clsx from 'clsx';
+import { BrowserLocationContext } from 'data/BrowserLocationContext';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faAngleRight, faAngleDown } from '@fortawesome/free-solid-svg-icons';
+import { tabs } from 'pages/settings/GlobalSettings';
+import { useGlobalSettings } from 'data/GlobalSettings';
+
+export const GlobalInstanceSetting = ({
+  className = '',
+  children,
+}: {
+  className?: string;
+  children?: React.ReactNode;
+}) => {
+
+  const { setPathname } = useContext(BrowserLocationContext);
+  const setActive = useMemo(() => location.pathname.split('/')[2], [location.pathname]);
+  const { data: globalSettings } = useGlobalSettings();
+
+  const [ expand, setExpand ] = useState(false);
+
+  useEffect(() => {
+    if (location.pathname == '/dashboard/core-settings' || location.pathname == '/dashboard/version') {
+        setExpand(true);
+    }
+  }, [])
+
+  return (
+    <RadioGroup
+      className={`child:w-full mx-1 flex min-h-0 flex-col gap-y-1 overflow-x-hidden px-1 pb-1 ${className}`}
+      onChange={setPathname}
+    >
+      <RadioGroup.Label 
+        className="text-small font-bold leading-snug text-gray-faded/30 flex justify-between items-center hover:cursor-pointer"
+        onClick={() => setExpand(!expand)}>
+        GLOBAL SETTINGS
+        <FontAwesomeIcon icon={expand ? faAngleDown : faAngleRight}/>
+      </RadioGroup.Label>
+
+      {expand &&
+        tabs.map((tab) => (
+          (tab.title !== 'Playitgg' || globalSettings?.playit_enabled) &&
+          <RadioGroup.Option
+            key={tab.path}
+            value={`/dashboard/${tab.path}`}
+            className="rounded-md outline-none focus-visible:bg-gray-800 child:w-full"
+          >
+            <button
+              className={clsx(
+                'flex flex-row items-center gap-x-1.5',
+                'cursor-pointer rounded-md px-2 py-1',
+                'text-medium font-medium leading-5 tracking-normal',
+                'hover:bg-gray-800',
+                'focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-blue-faded/50',
+                setActive === tab.path
+                  ? 'bg-gray-800 outline outline-1 outline-fade-700'
+                  : ''
+              )}
+              onClick={() => setPathname(`/dashboard/${tab.path}`)}
+            >
+              <div
+                className={clsx(
+                  setActive === tab.path
+                    ? 'text-white/50'
+                    : 'text-gray-faded/30'
+                )}
+              >
+                {tab.icon}
+              </div>
+              <div className="text-gray-300">{tab.title}</div>
+            </button>
+          </RadioGroup.Option>
+        ))}
+      {children}
+    </RadioGroup>
+  );
+};
diff --git a/dashboard/src/components/DashboardLayout/LeftNav.tsx b/dashboard/src/components/DashboardLayout/LeftNav.tsx
@@ -11,14 +11,15 @@ import { SelectedInstanceInfo } from './SelectedInstanceInfo';
 import { InstanceContext } from 'data/InstanceContext';
 import IntegrationsList from './IntegrationsList';
 import { PlayitggOverview } from 'components/PlayitggOverview';
+import { GlobalInstanceSetting } from './GlobalInstanceSetting';
 export default function LeftNav({ className }: { className?: string }) {
   const { showCreateInstance, setShowCreateInstance } =
     useContext(InstanceContext);
   const canCreateInstance = useUserAuthorized('can_create_instance');
   const userLoggedIn = useUserLoggedIn();
   return (
     <div
-      className={`overflow-y-overlay flex w-full flex-col items-center overflow-y-auto px-2 ${className}`}
+      className={`overflow-y-overlay scrollbar-gutter-stable flex w-full flex-col items-center overflow-y-auto px-2 ${className}`}
     >
       <div className="mt-10 flex h-full w-full grow flex-col ">
         <UserMenu />
@@ -46,8 +47,8 @@ export default function LeftNav({ className }: { className?: string }) {
             </div>
           </Dialog>
         </Transition>
-
         <div className="h-full">
+          <GlobalInstanceSetting />
           <SelectedInstanceInfo />
 
           <InstanceList className="mt-6">

diff --git a/dashboard/src/components/DashboardLayout/SelectedInstanceInfo.tsx b/dashboard/src/components/DashboardLayout/SelectedInstanceInfo.tsx
@@ -44,7 +44,7 @@ export const SelectedInstanceInfo = ({
   const uuid = selectedInstance?.uuid;
   if (!selectedInstance || !uuid) {
     return (
-      <div className="mx-1 px-1 text-gray-faded/30">
+      <div className="mx-1 mt-3 px-1 text-gray-faded/30">
         <div className="text-small font-bold leading-snug text-gray-faded/30">
           SELECTED INSTANCE
         </div>
@@ -64,7 +64,7 @@ export const SelectedInstanceInfo = ({
 
   return (
     <RadioGroup
-      className={`child:w-full mx-1 flex min-h-0 flex-col gap-y-1 overflow-x-hidden px-1 pb-1 ${className}`}
+      className={`child:w-full mx-1 mt-3 flex min-h-0 flex-col gap-y-1 overflow-x-hidden px-1 pb-1 ${className}`}
       onChange={setPathname}
     >
       <RadioGroup.Label className="text-small font-bold leading-snug text-gray-faded/30">

diff --git a/dashboard/src/components/UserMenu.tsx b/dashboard/src/components/UserMenu.tsx
@@ -120,7 +120,7 @@ const UserMenu = () => {
         icon={faCog}
         onClick={() => {
           localStorage.setItem('lastVisitedRoute', location.pathname);
-          setPathname('/settings/general');
+          setPathname('/settings/users');
         }}
       />
     </div>

diff --git a/dashboard/src/pages/settings.tsx b/dashboard/src/pages/settings.tsx
@@ -1,7 +1,6 @@
 import { Tab } from '@headlessui/react';
 import { useContext, useState } from 'react';
 import { useUserInfo } from 'data/UserInfo';
-import CoreSettings from 'pages/settings/CoreSettings';
 import UserSettings from 'pages/settings/UserSettings';
 import { SettingsContext } from 'data/SettingsContext';
 import { useDocumentTitle } from 'usehooks-ts';
@@ -11,10 +10,6 @@ const SettingsPage = () => {
   const { tabIndex, setTabIndex, selectUser } = useContext(SettingsContext);
 
   const tabList = [
-    {
-      title: 'General',
-      content: <CoreSettings />,
-    },
     {
       title: 'Users',
       content: <UserSettings />,

diff --git a/dashboard/src/pages/settings/GenericSettings.tsx b/dashboard/src/pages/settings/GenericSettings.tsx
@@ -0,0 +1,49 @@
+import { useCoreInfo } from 'data/SystemInfo';
+import { useDocumentTitle } from 'usehooks-ts';
+import packageJson from '../../../package.json';
+
+export const GenericSetting = () => {
+  useDocumentTitle('Lodestone Generic Settings - Lodestone');
+  const { data: coreInfo } = useCoreInfo();
+
+  return (
+    <>
+      <div className="relative mx-auto flex h-full w-full max-w-2xl flex-col @container ">
+        <div className="flex w-full flex-col gap-12 overflow-y-scroll px-4 pt-14">
+          <h1 className="dashboard-instance-heading">Version Info</h1>
+          <div className="flex w-full flex-col gap-4 @4xl:flex-row">
+            <div className="w-[28rem]">
+              <h2 className="text-h2 font-bold tracking-medium">
+
+              </h2>
+            </div>
+            <div className="w-full rounded-lg border border-gray-faded/30 child:w-full child:border-b child:border-gray-faded/30 first:child:rounded-t-lg last:child:rounded-b-lg last:child:border-b-0">
+                <div
+                    className={`flex flex-row justify-between group relative gap-4 bg-gray-800 px-4 py-3 text-medium h-fit`}
+                >
+                    <div className={`flex min-w-0 grow flex-col`}>
+                        <div className="flex row">
+                        <label className="text-medium font-medium text-gray-300">Dashboard version</label>
+                        </div>
+                    </div>
+                    {packageJson.version}
+                </div>
+                <div
+                    className={`flex flex-row items-center justify-between group relative gap-4 bg-gray-800 px-4 py-3 text-medium`}
+                >
+                    <div className={`flex min-w-0 grow flex-col`}>
+                        <div className="flex row">
+                        <label className="text-medium font-medium text-gray-300">Core version</label>
+                        </div>
+                    </div>
+                    {coreInfo ? coreInfo.version : 'unavailable'}
+                </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default GenericSetting;
diff --git a/dashboard/src/pages/settings/GlobalSettings.tsx b/dashboard/src/pages/settings/GlobalSettings.tsx
@@ -0,0 +1,62 @@
+
+import { cn } from 'utils/util';
+import { CommandHistoryContextProvider } from 'data/CommandHistoryContext';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+    faGears,
+    faJarWheat,
+} from '@fortawesome/free-solid-svg-icons';
+import CoreSettings from './CoreSettings';
+import GenericSetting from './GenericSettings';
+
+export const tabs = [
+    {
+        title: 'Core Settings',
+        displayTitle: null,
+        path: 'core-settings',
+        width: 'max-w-4xl',
+        icon: <FontAwesomeIcon icon={faGears} />,
+        content: <CoreSettings />,
+    },
+    {
+        title: 'Verion Info',
+        displayTitle: null,
+        path: 'version',
+        width: 'max-w-4xl',
+        icon: <FontAwesomeIcon icon={faJarWheat} />,
+        content: <GenericSetting />,
+    }
+];
+
+const GlobalTabs = () => {
+  return (
+    <CommandHistoryContextProvider>
+    {tabs.map((tab, index) => {
+        return (
+            <div
+            className={cn(
+                'relative mx-auto flex h-full w-full flex-row justify-center @container',
+                tab.width
+            )}
+            key={index}
+            >
+            <div
+                className="gutter-stable -mx-3 flex grow flex-row items-stretch overflow-y-auto pl-4 pr-2"
+            >
+                <div className="flex h-fit min-h-full w-full flex-col gap-2 pt-6 pb-10 focus:outline-none">
+                {tab.displayTitle && (
+                    <div className="flex font-title text-h1 font-bold leading-tight text-gray-300">
+                    {tab.displayTitle}
+                    </div>
+                )}
+                {tab.content}
+                </div>
+            </div>
+            </div>
+        )
+    })}
+    </CommandHistoryContextProvider>
+  );
+};
+
+export default GlobalTabs;