Restructure frontend code to allow for extensions (#4721)

# Description of Changes Move frontend code into `core` folder and add infrastructure for `proprietary` folder to include premium, non-OSS features
2025-10-28 10:29:36 +00:00
parent 960d48f80c
commit d2b38ef4b8
725 changed files with 2485 additions and 2226 deletions
@@ -0,0 +1,73 @@
+import React from 'react';
+import { ActionIcon } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { Tooltip } from '@app/components/shared/Tooltip';
+import AppsIcon from '@mui/icons-material/AppsRounded';
+import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
+import { useSidebarNavigation } from '@app/hooks/useSidebarNavigation';
+import { handleUnlessSpecialClick } from '@app/utils/clickHandlers';
+
+interface AllToolsNavButtonProps {
+  activeButton: string;
+  setActiveButton: (id: string) => void;
+}
+
+const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({ activeButton, setActiveButton }) => {
+  const { t } = useTranslation();
+  const { handleReaderToggle, handleBackToTools, selectedToolKey, leftPanelView } = useToolWorkflow();
+  const { getHomeNavigation } = useSidebarNavigation();
+
+  const handleClick = () => {
+    setActiveButton('tools');
+    // Preserve existing behavior used in QuickAccessBar header
+    handleReaderToggle();
+    handleBackToTools();
+  };
+
+  // Do not highlight All Tools when a specific tool is open (indicator is shown)
+  const isActive = activeButton === 'tools' && !selectedToolKey && leftPanelView === 'toolPicker';
+
+  const navProps = getHomeNavigation();
+
+  const handleNavClick = (e: React.MouseEvent) => {
+    handleUnlessSpecialClick(e, handleClick);
+  };
+
+  const iconNode = (
+    <span className="iconContainer">
+      <AppsIcon sx={{ fontSize: '2rem' }} />
+    </span>
+  );
+
+  return (
+    <Tooltip content={t("quickAccess.allTools", "All Tools")} position="right" arrow containerStyle={{ marginTop: "-1rem" }} maxWidth={200}>
+      <div className="flex flex-col items-center gap-1 mt-4 mb-2">
+        <ActionIcon
+          component="a"
+          href={navProps.href}
+          onClick={handleNavClick}
+          size={'lg'}
+          variant="subtle"
+          aria-label={t("quickAccess.allTools", "All Tools")}
+          style={{
+            backgroundColor: isActive ? 'var(--icon-tools-bg)' : 'var(--icon-inactive-bg)',
+            color: isActive ? 'var(--icon-tools-color)' : 'var(--icon-inactive-color)',
+            border: 'none',
+            borderRadius: '8px',
+            textDecoration: 'none'
+          }}
+          className={isActive ? 'activeIconScale' : ''}
+        >
+          {iconNode}
+        </ActionIcon>
+        <span className={`all-tools-text ${isActive ? 'active' : 'inactive'}`}>
+          {t("quickAccess.allTools", "All Tools")}
+        </span>
+      </div>
+    </Tooltip>
+  );
+};
+
+export default AllToolsNavButton;
+
+