show tools with component = null as greyed out tools with coming soon tooltip on hover. Other snmall styling snags

frontend/src/components/shared/TopControls.tsx

@@ -6,6 +6,7 @@ import VisibilityIcon from "@mui/icons-material/Visibility";
 import EditNoteIcon from "@mui/icons-material/EditNote";
 import FolderIcon from "@mui/icons-material/Folder";
 import { ModeType, isValidMode } from '../../contexts/NavigationContext';
+import { Tooltip } from "./Tooltip";
 
 const viewOptionStyle = {
   display: 'inline-flex',
@@ -17,44 +18,56 @@ const viewOptionStyle = {
 }
 
 
-// Create view options with icons and loading states
-const createViewOptions = (switchingTo: ModeType | null) => [
+// Build view options showing text only for current view; others icon-only with tooltip
+const createViewOptions = (currentView: ModeType, switchingTo: ModeType | null) => [
   {
     label: (
-      <div style={viewOptionStyle as React.CSSProperties}>
-        {switchingTo === "viewer" ? (
-          <Loader size="xs" />
-        ) : (
-          <VisibilityIcon fontSize="small" />
-        )}
-        <span>Read</span>
-      </div>
+      <Tooltip content="Viewer" position="bottom" arrow={true}>
+        <div style={viewOptionStyle as React.CSSProperties}>
+          {currentView === "viewer" ? (
+            <>
+              {switchingTo === "viewer" ? <Loader size="xs" /> : <VisibilityIcon fontSize="small" />}
+              <span>Viewer</span>
+            </>
+          ) : (
+            switchingTo === "viewer" ? <Loader size="xs" /> : <VisibilityIcon fontSize="small" />
+          )}
+        </div>
+      </Tooltip>
     ),
     value: "viewer",
   },
   {
     label: (
-      <div style={viewOptionStyle as React.CSSProperties}>
-        {switchingTo === "pageEditor" ? (
-          <Loader size="xs" />
-        ) : (
-          <EditNoteIcon fontSize="small" />
-        )}
-        <span>Page Editor</span>
-      </div>
+      <Tooltip content="Page Editor" position="bottom" arrow={true}>
+        <div style={viewOptionStyle as React.CSSProperties}>
+          {currentView === "pageEditor" ? (
+            <>
+              {switchingTo === "pageEditor" ? <Loader size="xs" /> : <EditNoteIcon fontSize="small" />}
+              <span>Page Editor</span>
+            </>
+          ) : (
+            switchingTo === "pageEditor" ? <Loader size="xs" /> : <EditNoteIcon fontSize="small" />
+          )}
+        </div>
+      </Tooltip>
     ),
     value: "pageEditor",
   },
   {
     label: (
-      <div style={viewOptionStyle as React.CSSProperties}>
-        {switchingTo === "fileEditor" ? (
-          <Loader size="xs" />
-        ) : (
-          <FolderIcon fontSize="small" />
-        )}
-        <span>File Manager</span>
-      </div>
+      <Tooltip content="Active Files" position="bottom" arrow={true}>
+        <div style={viewOptionStyle as React.CSSProperties}>
+          {currentView === "fileEditor" ? (
+            <>
+              {switchingTo === "fileEditor" ? <Loader size="xs" /> : <FolderIcon fontSize="small" />}
+              <span>Active Files</span>
+            </>
+          ) : (
+            switchingTo === "fileEditor" ? <Loader size="xs" /> : <FolderIcon fontSize="small" />
+          )}
+        </div>
+      </Tooltip>
     ),
     value: "fileEditor",
   },
@@ -103,11 +116,10 @@ const TopControls = ({
       {!isToolSelected && (
         <div className="flex justify-center mt-[0.5rem]">
             <SegmentedControl
-              data={createViewOptions(switchingTo)}
+              data={createViewOptions(currentView, switchingTo)}
               value={currentView}
               onChange={handleViewChange}
               color="blue"
-              radius="xl"
               fullWidth
               className={isRainbowMode ? rainbowStyles.rainbowSegmentedControl : ''}
               style={{
@@ -118,13 +130,18 @@ const TopControls = ({
               styles={{
                 root: {
                   borderRadius: 9999,
+                  maxHeight: '2.6rem',
                 },
                 control: {
                   borderRadius: 9999,
                 },
                 indicator: {
                   borderRadius: 9999,
+                  maxHeight: '2rem',
                 },
+                label: {
+                  paddingTop: '0rem',
+                }
               }}
             />
         </div>

frontend/src/components/tools/toolPicker/ToolButton.tsx

@@ -12,7 +12,9 @@ interface ToolButtonProps {
 }
 
 const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect }) => {
+  const isUnavailable = !tool.component && !tool.link;
   const handleClick = (id: string) => {
+    if (isUnavailable) return;
     if (tool.link) {
       // Open external link in new tab
       window.open(tool.link, '_blank', 'noopener,noreferrer');
@@ -22,8 +24,12 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect
     onSelect(id);
   };
 
+  const tooltipContent = isUnavailable
+    ? (<span><strong>Coming soon:</strong> {tool.description}</span>)
+    : tool.description;
+
   return (
-    <Tooltip content={tool.description} position="right" arrow={true} delay={500}>
+    <Tooltip content={tooltipContent} position="right" arrow={true} delay={500}>
       <Button
         variant={isSelected ? "filled" : "subtle"}
         onClick={()=> handleClick(id)}
@@ -32,15 +38,16 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect
         fullWidth
         justify="flex-start"
         className="tool-button"
-        styles={{ root: { borderRadius: 0, color: "var(--tools-text-and-icon-color)" } }}
+        aria-disabled={isUnavailable}
+        styles={{ root: { borderRadius: 0, color: "var(--tools-text-and-icon-color)", cursor: isUnavailable ? 'not-allowed' : undefined } }}
       >
-        <div className="tool-button-icon" style={{ color: "var(--tools-text-and-icon-color)", marginRight: "0.5rem", transform: "scale(0.8)", transformOrigin: "center" }}>{tool.icon}</div>
+        <div className="tool-button-icon" style={{ color: "var(--tools-text-and-icon-color)", marginRight: "0.5rem", transform: "scale(0.8)", transformOrigin: "center", opacity: isUnavailable ? 0.25 : 1 }}>{tool.icon}</div>
         <FitText
           text={tool.name}
           lines={1}
           minimumFontScale={0.8}
           as="span"
-          style={{ display: 'inline-block', maxWidth: '100%' }}
+          style={{ display: 'inline-block', maxWidth: '100%', opacity: isUnavailable ? 0.25 : 1 }}
         />
       </Button>
     </Tooltip>

frontend/src/components/viewer/Viewer.tsx

@@ -550,12 +550,14 @@ const Viewer = ({
               justifyContent: "center",
               pointerEvents: "none",
               background: "transparent",
+
             }}
           >
             <Paper
               radius="xl xl 0 0"
               shadow="sm"
               p={12}
+              pb={24}
               style={{
                 display: "flex",
                 alignItems: "center",

frontend/src/data/useTranslatedToolRegistry.tsx

@@ -40,7 +40,7 @@ import OCRSettings from '../components/tools/ocr/OCRSettings';
 import ConvertSettings from '../components/tools/convert/ConvertSettings';
 import ChangePermissionsSettings from '../components/tools/changePermissions/ChangePermissionsSettings';
 
-const showPlaceholderTools = false; // For development purposes. Allows seeing the full list of tools, even if they're unimplemented
+const showPlaceholderTools = true; // Show all tools; grey out unavailable ones in UI
 
 // Hook to get the translated tool registry
 export function useFlatToolRegistry(): ToolRegistry {
@@ -671,14 +671,13 @@ export function useFlatToolRegistry(): ToolRegistry {
 
     if (showPlaceholderTools) {
       return allTools;
-    } else {
-      const filteredTools = Object.keys(allTools)
-        .filter(key => allTools[key].component !== null || allTools[key].link)
-        .reduce((obj, key) => {
-          obj[key] = allTools[key];
-          return obj;
-        }, {} as ToolRegistry);
-      return filteredTools;
     }
+    const filteredTools = Object.keys(allTools)
+      .filter(key => allTools[key].component !== null || allTools[key].link)
+      .reduce((obj, key) => {
+        obj[key] = allTools[key];
+        return obj;
+      }, {} as ToolRegistry);
+    return filteredTools;
   }, [t]); // Only re-compute when translations change
 }

frontend/src/hooks/useToolSections.ts

@@ -64,7 +64,9 @@ export function useToolSections(filteredTools: [string /* FIX ME: Should be Tool
         Object.entries(subs).forEach(([s, tools]) => {
           const subcategoryId = s as SubcategoryId;
           if (!quick[subcategoryId]) quick[subcategoryId] = [];
-          quick[subcategoryId].push(...tools);
+          // Only include ready tools (have a component or external link) in Quick Access
+          const readyTools = tools.filter(({ tool }) => tool.component !== null || !!tool.link);
+          quick[subcategoryId].push(...readyTools);
         });
       }
     });