-
- {/* Search Bar - Always visible at the top */}
+ {!fullscreenExpanded && (
-
-
-
- {searchQuery.trim().length > 0 ? (
- // Searching view (replaces both picker and content)
-
- handleToolSelect(id as ToolId)}
- searchQuery={searchQuery}
- />
-
- ) : leftPanelView === 'toolPicker' ? (
- // Tool Picker View
-
-
handleToolSelect(id as ToolId)}
- filteredTools={filteredTools}
- isSearching={Boolean(searchQuery && searchQuery.trim().length > 0)}
+
+
+ {!isMobile && leftPanelView === 'toolPicker' && (
+
+
+
+
+
+ )}
- {/* Tool content */}
-
-
- {selectedToolKey && (
-
- )}
-
+
+ {searchQuery.trim().length > 0 ? (
+
+ handleToolSelect(id as ToolId)}
+ searchQuery={searchQuery}
+ />
+
+ ) : leftPanelView === 'toolPicker' ? (
+
+ handleToolSelect(id as ToolId)}
+ filteredTools={filteredTools}
+ isSearching={Boolean(searchQuery && searchQuery.trim().length > 0)}
+ />
+
+ ) : (
+
+
+
+ {selectedToolKey ? (
+
+ ) : (
+
+ {t('toolPanel.placeholder', 'Choose a tool to get started')}
+
+ )}
+
+
-
- )}
-
+ )}
+
+ {fullscreenExpanded && (
+
handleToolSelect(id)}
+ onToggleDescriptions={() => updatePreference('showLegacyToolDescriptions', !preferences.showLegacyToolDescriptions)}
+ onExitFullscreenMode={() => setToolPanelMode('sidebar')}
+ toggleLabel={toggleLabel}
+ geometry={fullscreenGeometry}
+ />
+ )}
);
}
diff --git a/frontend/src/components/tools/ToolPanelModePrompt.css b/frontend/src/components/tools/ToolPanelModePrompt.css
new file mode 100644
index 0000000000..50e8ad7117
--- /dev/null
+++ b/frontend/src/components/tools/ToolPanelModePrompt.css
@@ -0,0 +1,200 @@
+.tool-panel-mode-prompt__modal {
+ background: color-mix(in srgb, var(--bg-toolbar) 94%, transparent);
+ border: 1px solid color-mix(in srgb, var(--border-subtle) 70%, transparent);
+ box-shadow: 0 32px 64px color-mix(in srgb, var(--shadow-color, rgba(15, 23, 42, 0.55)) 20%, transparent);
+ max-width: min(46rem, 100%);
+}
+
+.tool-panel-mode-prompt__options {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 1.5rem;
+}
+
+.tool-panel-mode-prompt__card {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ background: linear-gradient(145deg,
+ color-mix(in srgb, var(--bg-surface) 96%, transparent),
+ color-mix(in srgb, var(--bg-muted) 70%, transparent)
+ );
+ width: 100%;
+ max-width: 19rem;
+}
+
+.tool-panel-mode-prompt__card--sidebar {
+ border: 1px solid color-mix(in srgb, var(--accent-primary, var(--mantine-color-blue-6, #228be6)) 18%, var(--border-subtle));
+ background: linear-gradient(165deg,
+ color-mix(in srgb, var(--bg-surface) 96%, transparent),
+ color-mix(in srgb, var(--accent-primary, var(--mantine-color-blue-6, #228be6)) 8%, transparent)
+ );
+}
+
+.tool-panel-mode-prompt__preview {
+ border-radius: 0.9rem;
+ border: 1px solid color-mix(in srgb, var(--border-subtle) 70%, transparent);
+ background: linear-gradient(135deg, color-mix(in srgb, var(--bg-muted) 82%, transparent), transparent 75%);
+ padding: 0.75rem;
+ width: 100%;
+ display: flex;
+ gap: 0.65rem;
+ min-height: 6.5rem;
+ margin-top: auto;
+}
+
+.tool-panel-mode-prompt__preview--sidebar {
+ align-items: stretch;
+}
+
+.tool-panel-mode-prompt__sidebar-panel {
+ width: 3rem;
+ border-radius: 0.65rem;
+ padding: 0.45rem;
+ display: flex;
+ flex-direction: column;
+ gap: 0.45rem;
+ background: linear-gradient(180deg,
+ color-mix(in srgb, var(--bg-muted) 88%, transparent),
+ color-mix(in srgb, var(--bg-muted) 72%, transparent)
+ );
+ border: 1px solid color-mix(in srgb, var(--border-subtle) 65%, transparent);
+}
+
+.tool-panel-mode-prompt__sidebar-search {
+ height: 0.5rem;
+ border-radius: 0.4rem;
+ background: color-mix(in srgb, var(--bg-background) 90%, transparent);
+ border: 1px solid color-mix(in srgb, var(--border-subtle) 60%, transparent);
+}
+
+.tool-panel-mode-prompt__sidebar-item {
+ height: 0.55rem;
+ border-radius: 0.35rem;
+ background: color-mix(in srgb, var(--accent-primary, var(--mantine-color-blue-6, #228be6)) 32%, var(--bg-muted));
+}
+
+.tool-panel-mode-prompt__sidebar-item--muted {
+ background: color-mix(in srgb, var(--bg-background) 88%, transparent);
+}
+
+.tool-panel-mode-prompt__workspace {
+ flex: 1;
+ border-radius: 0.65rem;
+ border: 1px solid color-mix(in srgb, var(--border-subtle) 65%, transparent);
+ padding: 0.5rem;
+ display: grid;
+ gap: 0.35rem;
+ grid-template-rows: 1.4fr 0.6fr;
+ background: linear-gradient(160deg,
+ color-mix(in srgb, var(--bg-background) 94%, transparent),
+ color-mix(in srgb, var(--bg-muted) 68%, transparent)
+ );
+}
+
+.tool-panel-mode-prompt__workspace-page {
+ border-radius: 0.45rem;
+ background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
+ border: 1px solid color-mix(in srgb, var(--border-subtle) 55%, transparent);
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg-background) 60%, transparent);
+}
+
+.tool-panel-mode-prompt__workspace-page--secondary {
+ opacity: 0.55;
+}
+
+.tool-panel-mode-prompt__preview--legacy {
+ align-items: flex-start;
+ justify-content: center;
+ padding: 0.65rem 0.6rem;
+}
+
+.tool-panel-mode-prompt__legacy-columns {
+ width: 100%;
+ display: flex;
+ gap: 0.45rem;
+ justify-content: space-between;
+}
+
+.tool-panel-mode-prompt__legacy-column {
+ flex: 1;
+ display: grid;
+ gap: 0.3rem;
+}
+
+.tool-panel-mode-prompt__legacy-card {
+ border-radius: 0.45rem;
+ border: 1px solid color-mix(in srgb, var(--border-subtle) 55%, transparent);
+ background: linear-gradient(150deg,
+ color-mix(in srgb, var(--bg-muted) 88%, transparent),
+ color-mix(in srgb, var(--bg-background) 76%, transparent)
+ );
+ height: 1.2rem;
+}
+
+.tool-panel-mode-prompt__legacy-card--muted {
+ opacity: 0.55;
+}
+
+.tool-panel-mode-prompt__preview--fullscreen {
+ align-items: flex-start;
+ justify-content: center;
+ padding: 0.65rem 0.6rem;
+}
+
+.tool-panel-mode-prompt__fullscreen-columns {
+ width: 100%;
+ display: flex;
+ gap: 0.45rem;
+ justify-content: space-between;
+}
+
+.tool-panel-mode-prompt__fullscreen-column {
+ flex: 1;
+ display: grid;
+ gap: 0.3rem;
+}
+
+.tool-panel-mode-prompt__fullscreen-card {
+ border-radius: 0.45rem;
+ border: 1px solid color-mix(in srgb, var(--border-subtle) 55%, transparent);
+ background: linear-gradient(150deg,
+ color-mix(in srgb, var(--bg-muted) 88%, transparent),
+ color-mix(in srgb, var(--bg-background) 76%, transparent)
+ );
+ height: 1.2rem;
+}
+
+.tool-panel-mode-prompt__fullscreen-card--muted {
+ opacity: 0.55;
+}
+
+.tool-panel-mode-prompt__card-content {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ flex: 1;
+}
+
+.tool-panel-mode-prompt__action {
+ box-shadow: none;
+}
+
+.tool-panel-mode-prompt__action:hover {
+ box-shadow: 0 10px 18px color-mix(in srgb, var(--accent-primary, var(--mantine-color-blue-6, #228be6)) 25%, transparent);
+}
+
+.tool-panel-mode-prompt__maybe-later {
+ color: color-mix(in srgb, var(--text-secondary) 90%, var(--text-muted));
+}
+
+.tool-panel-mode-prompt__maybe-later:hover {
+ background: color-mix(in srgb, var(--bg-muted) 78%, transparent);
+}
+
+@media (max-width: 600px) {
+ .tool-panel-mode-prompt__options {
+ grid-template-columns: 1fr;
+ justify-items: stretch;
+ }
+}
diff --git a/frontend/src/components/tools/ToolPanelModePrompt.tsx b/frontend/src/components/tools/ToolPanelModePrompt.tsx
new file mode 100644
index 0000000000..770cf2eee0
--- /dev/null
+++ b/frontend/src/components/tools/ToolPanelModePrompt.tsx
@@ -0,0 +1,141 @@
+import { useEffect, useState } from 'react';
+import { Badge, Button, Card, Group, Modal, Stack, Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
+import { usePreferences } from '../../contexts/PreferencesContext';
+import './ToolPanelModePrompt.css';
+import type { ToolPanelMode } from '../../constants/toolPanel';
+
+const ToolPanelModePrompt = () => {
+ const { t } = useTranslation();
+ const { toolPanelMode, setToolPanelMode } = useToolWorkflow();
+ const { preferences, updatePreference } = usePreferences();
+ const [opened, setOpened] = useState(false);
+
+ const shouldShowPrompt = !preferences.toolPanelModePromptSeen;
+
+ useEffect(() => {
+ if (shouldShowPrompt) {
+ setOpened(true);
+ }
+ }, [shouldShowPrompt]);
+
+ const handleSelect = (mode: ToolPanelMode) => {
+ setToolPanelMode(mode);
+ updatePreference('defaultToolPanelMode', mode);
+ updatePreference('toolPanelModePromptSeen', true);
+ setOpened(false);
+ };
+
+ const handleDismiss = () => {
+ updatePreference('toolPanelModePromptSeen', true);
+ setOpened(false);
+ };
+
+ return (
+
+
+
+ {t('toolPanel.modePrompt.description', 'Preview both layouts and decide how you want to explore Stirling PDF tools.')}
+
+
+
+
+
+
+ {t('toolPanel.modePrompt.sidebarTitle', 'Sidebar mode')}
+
+ {t('toolPanel.modePrompt.sidebarDescription', 'Keep tools alongside your workspace for quick switching.')}
+
+
+
+ {t('toolPanel.modePrompt.recommended', 'Recommended')}
+
+
+
+
+
+
+
+
+
+ {t('toolPanel.modePrompt.fullscreenTitle', 'Fullscreen mode')}
+
+ {t('toolPanel.modePrompt.fullscreenDescription', 'Browse every tool in a catalogue that covers the workspace until you pick one.')}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default ToolPanelModePrompt;
diff --git a/frontend/src/components/tools/ToolPicker.tsx b/frontend/src/components/tools/ToolPicker.tsx
index 4b0c545364..f158f036e0 100644
--- a/frontend/src/components/tools/ToolPicker.tsx
+++ b/frontend/src/components/tools/ToolPicker.tsx
@@ -4,13 +4,20 @@ import { useTranslation } from "react-i18next";
import { ToolRegistryEntry } from "../../data/toolsTaxonomy";
import "./toolPicker/ToolPicker.css";
import { useToolSections } from "../../hooks/useToolSections";
+import type { SubcategoryGroup } from "../../hooks/useToolSections";
+import { useFavoriteToolItems } from "../../hooks/tools/useFavoriteToolItems";
import NoToolsFound from "./shared/NoToolsFound";
import { renderToolButtons } from "./shared/renderToolButtons";
+import Badge from "../shared/Badge";
+import SubcategoryHeader from "./shared/SubcategoryHeader";
+import ToolButton from "./toolPicker/ToolButton";
+import { useToolWorkflow } from "../../contexts/ToolWorkflowContext";
+import { ToolId } from "../../types/toolId";
interface ToolPickerProps {
selectedToolKey: string | null;
onSelect: (id: string) => void;
- filteredTools: Array<{ item: [string, ToolRegistryEntry]; matchedText?: string }>;
+ filteredTools: Array<{ item: [ToolId, ToolRegistryEntry]; matchedText?: string }>;
isSearching?: boolean;
}
@@ -61,11 +68,23 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
}, []);
const { sections: visibleSections } = useToolSections(filteredTools);
+ const { favoriteTools, toolRegistry } = useToolWorkflow();
+
+ const favoriteToolItems = useFavoriteToolItems(favoriteTools, toolRegistry);
const quickSection = useMemo(
() => visibleSections.find(s => s.key === 'quick'),
[visibleSections]
);
+
+ const recommendedItems = useMemo(() => {
+ if (!quickSection) return [] as Array<{ id: string; tool: ToolRegistryEntry }>;
+ const items: Array<{ id: string; tool: ToolRegistryEntry }> = [];
+ quickSection.subcategories.forEach((sc: SubcategoryGroup) => sc.tools.forEach((toolEntry) => items.push(toolEntry)));
+ return items;
+ }, [quickSection]);
+
+ const recommendedCount = useMemo(() => favoriteToolItems.length + recommendedItems.length, [favoriteToolItems.length, recommendedItems.length]);
const allSection = useMemo(
() => visibleSections.find(s => s.key === 'all'),
[visibleSections]
@@ -87,7 +106,9 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
};
// Build flat list by subcategory for search mode
- const { searchGroups } = useToolSections(isSearching ? filteredTools : []);
+ const emptyFilteredTools: ToolPickerProps['filteredTools'] = [];
+ const effectiveFilteredForSearch: ToolPickerProps['filteredTools'] = isSearching ? filteredTools : emptyFilteredTools;
+ const { searchGroups } = useToolSections(effectiveFilteredForSearch);
return (
) : (
- searchGroups.map(group => renderToolButtons(t, group, selectedToolKey, onSelect))
+ searchGroups.map(group => renderToolButtons(t, group, selectedToolKey, onSelect, true, false, filteredTools, true))
)}
) : (
@@ -142,24 +163,46 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
onClick={() => scrollTo(quickAccessRef)}
>
{t("toolPicker.quickAccess", "QUICK ACCESS")}
-
- {quickSection?.subcategories.reduce((acc, sc) => acc + sc.tools.length, 0)}
-
+
+ {recommendedCount}
+