{subcategory.tools.map(({ id, tool }) => {
const matchedSynonym = matchedTextMap.get(id);
-
+
return (
void;
+ onSelect: (id: ToolId) => void;
rounded?: boolean;
disableNavigation?: boolean;
matchedSynonym?: string;
@@ -28,7 +29,7 @@ const ToolButton: React.FC = ({ id, tool, isSelected, onSelect,
const binding = hotkeys[id];
const { getToolNavigation } = useToolNavigation();
- const handleClick = (id: string) => {
+ const handleClick = (id: ToolId) => {
if (isUnavailable) return;
if (tool.link) {
// Open external link in new tab
@@ -47,12 +48,16 @@ const ToolButton: React.FC = ({ id, tool, isSelected, onSelect,
: (
{tool.description}
- {binding && (
-
+
+ {binding ? (
+ <>
{t('settings.hotkeys.shortcut', 'Shortcut')}
-
+
+ ) : (
+
{t('settings.hotkeys.noShortcut', 'No shortcut set')}
)}
+
);
@@ -102,7 +107,7 @@ const ToolButton: React.FC = ({ id, tool, isSelected, onSelect,
fullWidth
justify="flex-start"
className="tool-button"
- styles={{
+ styles={{
root: { borderRadius: 0, color: "var(--tools-text-and-icon-color)", overflow: 'visible' },
label: { overflow: 'visible' }
}}
@@ -123,7 +128,7 @@ const ToolButton: React.FC = ({ id, tool, isSelected, onSelect,
fullWidth
justify="flex-start"
className="tool-button"
- styles={{
+ styles={{
root: { borderRadius: 0, color: "var(--tools-text-and-icon-color)", overflow: 'visible' },
label: { overflow: 'visible' }
}}
diff --git a/frontend/src/contexts/FileManagerContext.tsx b/frontend/src/contexts/FileManagerContext.tsx
index 28a30fc20..8c7f6182d 100644
--- a/frontend/src/contexts/FileManagerContext.tsx
+++ b/frontend/src/contexts/FileManagerContext.tsx
@@ -39,6 +39,7 @@ interface FileManagerContextValue {
onAddToRecents: (file: StirlingFileStub) => void;
onUnzipFile: (file: StirlingFileStub) => Promise;
onNewFilesSelect: (files: File[]) => void;
+ onGoogleDriveSelect: (files: File[]) => void;
// External props
recentFiles: StirlingFileStub[];
@@ -546,6 +547,19 @@ export const FileManagerProvider: React.FC = ({
}
}, [refreshRecentFiles]);
+ const handleGoogleDriveSelect = useCallback(async (files: File[]) => {
+ if (files.length > 0) {
+ try {
+ // Process Google Drive files same as local files
+ onNewFilesSelect(files);
+ await refreshRecentFiles();
+ onClose();
+ } catch (error) {
+ console.error('Failed to process Google Drive files:', error);
+ }
+ }
+ }, [onNewFilesSelect, refreshRecentFiles, onClose]);
+
const handleUnzipFile = useCallback(async (file: StirlingFileStub) => {
try {
// Load the full file from storage
@@ -623,6 +637,7 @@ export const FileManagerProvider: React.FC = ({
onAddToRecents: handleAddToRecents,
onUnzipFile: handleUnzipFile,
onNewFilesSelect,
+ onGoogleDriveSelect: handleGoogleDriveSelect,
// External props
recentFiles,
@@ -656,6 +671,7 @@ export const FileManagerProvider: React.FC = ({
handleAddToRecents,
handleUnzipFile,
onNewFilesSelect,
+ handleGoogleDriveSelect,
recentFiles,
isFileSupported,
modalHeight,
diff --git a/frontend/src/contexts/HotkeyContext.tsx b/frontend/src/contexts/HotkeyContext.tsx
index fe9cbb600..c5a0f2649 100644
--- a/frontend/src/contexts/HotkeyContext.tsx
+++ b/frontend/src/contexts/HotkeyContext.tsx
@@ -2,14 +2,17 @@ import React, { createContext, useCallback, useContext, useEffect, useMemo, useS
import { HotkeyBinding, bindingEquals, bindingMatchesEvent, deserializeBindings, getDisplayParts, isMacLike, normalizeBinding, serializeBindings } from '../utils/hotkeys';
import { useToolWorkflow } from './ToolWorkflowContext';
import { ToolId } from '../types/toolId';
+import { ToolCategoryId, ToolRegistryEntry } from '../data/toolsTaxonomy';
+
+type Bindings = Partial>;
interface HotkeyContextValue {
- hotkeys: Record;
- defaults: Record;
+ hotkeys: Bindings;
+ defaults: Bindings;
isMac: boolean;
- updateHotkey: (toolId: string, binding: HotkeyBinding) => void;
- resetHotkey: (toolId: string) => void;
- isBindingAvailable: (binding: HotkeyBinding, excludeToolId?: string) => boolean;
+ updateHotkey: (toolId: ToolId, binding: HotkeyBinding) => void;
+ resetHotkey: (toolId: ToolId) => void;
+ isBindingAvailable: (binding: HotkeyBinding, excludeToolId?: ToolId) => boolean;
pauseHotkeys: () => void;
resumeHotkeys: () => void;
areHotkeysPaused: boolean;
@@ -20,46 +23,29 @@ const HotkeyContext = createContext(undefined);
const STORAGE_KEY = 'stirlingpdf.hotkeys';
-const KEY_ORDER: string[] = [
- 'Digit1', 'Digit2', 'Digit3', 'Digit4', 'Digit5', 'Digit6', 'Digit7', 'Digit8', 'Digit9', 'Digit0',
- 'KeyQ', 'KeyW', 'KeyE', 'KeyR', 'KeyT', 'KeyY', 'KeyU', 'KeyI', 'KeyO', 'KeyP',
- 'KeyA', 'KeyS', 'KeyD', 'KeyF', 'KeyG', 'KeyH', 'KeyJ', 'KeyK', 'KeyL',
- 'KeyZ', 'KeyX', 'KeyC', 'KeyV', 'KeyB', 'KeyN', 'KeyM',
- 'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12',
-];
+const generateDefaultHotkeys = (toolEntries: [ToolId, ToolRegistryEntry][], macLike: boolean): Bindings => {
+ const defaults: Bindings = {};
-const generateDefaultHotkeys = (toolIds: string[], macLike: boolean): Record => {
- const defaults: Record = {};
- let index = 0;
- let useShift = false;
+ // Get Quick Access tools (RECOMMENDED_TOOLS category) from registry
+ const quickAccessTools = toolEntries
+ .filter(([_, tool]) => tool.categoryId === ToolCategoryId.RECOMMENDED_TOOLS)
+ .map(([toolId, _]) => toolId);
- const nextBinding = (): HotkeyBinding => {
- if (index >= KEY_ORDER.length) {
- index = 0;
- if (!useShift) {
- useShift = true;
- } else {
- // If we somehow run out of combinations, wrap back around (unlikely given tool count)
- useShift = false;
- }
+ // Assign Cmd+Option+Number (Mac) or Ctrl+Alt+Number (Windows) to Quick Access tools
+ quickAccessTools.forEach((toolId, index) => {
+ if (index < 9) { // Limit to Digit1-9
+ const digitNumber = index + 1;
+ defaults[toolId] = {
+ code: `Digit${digitNumber}`,
+ alt: true,
+ shift: false,
+ meta: macLike,
+ ctrl: !macLike,
+ };
}
-
- const code = KEY_ORDER[index];
- index += 1;
-
- return {
- code,
- alt: true,
- shift: useShift,
- meta: macLike,
- ctrl: !macLike,
- };
- };
-
- toolIds.forEach(toolId => {
- defaults[toolId] = nextBinding();
});
+ // All other tools have no default (will be undefined in the record)
return defaults;
};
@@ -74,7 +60,7 @@ const shouldIgnoreTarget = (target: EventTarget | null): boolean => {
export const HotkeyProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const { toolRegistry, handleToolSelect } = useToolWorkflow();
const isMac = useMemo(() => isMacLike(), []);
- const [customBindings, setCustomBindings] = useState>(() => {
+ const [customBindings, setCustomBindings] = useState(() => {
if (typeof window === 'undefined') {
return {};
}
@@ -82,16 +68,16 @@ export const HotkeyProvider: React.FC<{ children: React.ReactNode }> = ({ childr
});
const [areHotkeysPaused, setHotkeysPaused] = useState(false);
- const toolIds = useMemo(() => Object.keys(toolRegistry), [toolRegistry]);
+ const toolEntries = useMemo(() => Object.entries(toolRegistry), [toolRegistry]) as [ToolId, ToolRegistryEntry][];
- const defaults = useMemo(() => generateDefaultHotkeys(toolIds, isMac), [toolIds, isMac]);
+ const defaults = useMemo(() => generateDefaultHotkeys(toolEntries, isMac), [toolRegistry, isMac]);
// Remove bindings for tools that are no longer present
useEffect(() => {
setCustomBindings(prev => {
- const next: Record = {};
+ const next: Bindings = {};
let changed = false;
- Object.entries(prev).forEach(([toolId, binding]) => {
+ (Object.entries(prev) as [ToolId, HotkeyBinding][]).forEach(([toolId, binding]) => {
if (toolRegistry[toolId]) {
next[toolId] = binding;
} else {
@@ -103,13 +89,21 @@ export const HotkeyProvider: React.FC<{ children: React.ReactNode }> = ({ childr
}, [toolRegistry]);
const resolved = useMemo(() => {
- const merged: Record = {};
- toolIds.forEach(toolId => {
+ const merged: Bindings = {};
+ toolEntries.forEach(([toolId, _]) => {
const custom = customBindings[toolId];
- merged[toolId] = custom ? normalizeBinding(custom) : defaults[toolId];
+ const defaultBinding = defaults[toolId];
+
+ // Only add to resolved if there's a custom binding or a default binding
+ if (custom) {
+ merged[toolId] = normalizeBinding(custom);
+ } else if (defaultBinding) {
+ merged[toolId] = defaultBinding;
+ }
+ // If neither exists, don't add to merged (tool has no hotkey)
});
return merged;
- }, [customBindings, defaults, toolIds]);
+ }, [customBindings, defaults, toolEntries]);
useEffect(() => {
if (typeof window === 'undefined') {
@@ -118,7 +112,7 @@ export const HotkeyProvider: React.FC<{ children: React.ReactNode }> = ({ childr
window.localStorage.setItem(STORAGE_KEY, serializeBindings(customBindings));
}, [customBindings]);
- const isBindingAvailable = useCallback((binding: HotkeyBinding, excludeToolId?: string) => {
+ const isBindingAvailable = useCallback((binding: HotkeyBinding, excludeToolId?: ToolId) => {
const normalized = normalizeBinding(binding);
return Object.entries(resolved).every(([toolId, existing]) => {
if (toolId === excludeToolId) {
@@ -128,7 +122,7 @@ export const HotkeyProvider: React.FC<{ children: React.ReactNode }> = ({ childr
});
}, [resolved]);
- const updateHotkey = useCallback((toolId: string, binding: HotkeyBinding) => {
+ const updateHotkey = useCallback((toolId: ToolId, binding: HotkeyBinding) => {
setCustomBindings(prev => {
const normalized = normalizeBinding(binding);
const defaultsForTool = defaults[toolId];
@@ -142,7 +136,7 @@ export const HotkeyProvider: React.FC<{ children: React.ReactNode }> = ({ childr
});
}, [defaults]);
- const resetHotkey = useCallback((toolId: string) => {
+ const resetHotkey = useCallback((toolId: ToolId) => {
setCustomBindings(prev => {
if (!(toolId in prev)) {
return prev;
@@ -165,12 +159,12 @@ export const HotkeyProvider: React.FC<{ children: React.ReactNode }> = ({ childr
if (event.repeat) return;
if (shouldIgnoreTarget(event.target)) return;
- const entries = Object.entries(resolved) as Array<[string, HotkeyBinding]>;
+ const entries = Object.entries(resolved) as [ToolId, HotkeyBinding][];
for (const [toolId, binding] of entries) {
if (bindingMatchesEvent(binding, event)) {
event.preventDefault();
event.stopPropagation();
- handleToolSelect(toolId as ToolId);
+ handleToolSelect(toolId);
break;
}
}
@@ -208,4 +202,4 @@ export const useHotkeys = (): HotkeyContextValue => {
throw new Error('useHotkeys must be used within a HotkeyProvider');
}
return context;
-};
\ No newline at end of file
+};
diff --git a/frontend/src/contexts/ToolWorkflowContext.tsx b/frontend/src/contexts/ToolWorkflowContext.tsx
index 98a0fd37d..73ef058bf 100644
--- a/frontend/src/contexts/ToolWorkflowContext.tsx
+++ b/frontend/src/contexts/ToolWorkflowContext.tsx
@@ -73,10 +73,10 @@ function toolWorkflowReducer(state: ToolWorkflowState, action: ToolWorkflowActio
// Context value interface
interface ToolWorkflowContextValue extends ToolWorkflowState {
// Tool management (from hook)
- selectedToolKey: string | null;
+ selectedToolKey: ToolId | null;
selectedTool: ToolRegistryEntry | null;
- toolRegistry: Record;
- getSelectedTool: (toolId: string | null) => ToolRegistryEntry | null;
+ toolRegistry: Partial;
+ getSelectedTool: (toolId: ToolId | null) => ToolRegistryEntry | null;
// UI Actions
setSidebarsVisible: (visible: boolean) => void;
@@ -101,7 +101,7 @@ interface ToolWorkflowContextValue extends ToolWorkflowState {
handleReaderToggle: () => void;
// Computed values
- filteredTools: Array<{ item: [string, ToolRegistryEntry]; matchedText?: string }>; // Filtered by search
+ filteredTools: Array<{ item: [ToolId, ToolRegistryEntry]; matchedText?: string }>; // Filtered by search
isPanelVisible: boolean;
}
diff --git a/frontend/src/data/useTranslatedToolRegistry.tsx b/frontend/src/data/useTranslatedToolRegistry.tsx
index 745738566..fc500aaee 100644
--- a/frontend/src/data/useTranslatedToolRegistry.tsx
+++ b/frontend/src/data/useTranslatedToolRegistry.tsx
@@ -824,7 +824,7 @@ export function useFlatToolRegistry(): ToolRegistry {
name: t("home.compare.title", "Compare"),
component: null,
description: t("home.compare.desc", "Compare two PDF documents and highlight differences"),
- categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
+ categoryId: ToolCategoryId.STANDARD_TOOLS /* TODO: Change to RECOMMENDED_TOOLS when component is implemented */,
subcategoryId: SubcategoryId.GENERAL,
synonyms: getSynonyms(t, "compare"),
supportsAutomate: false,
diff --git a/frontend/src/hooks/useAppConfig.ts b/frontend/src/hooks/useAppConfig.ts
index cb23cfb60..cfca99b57 100644
--- a/frontend/src/hooks/useAppConfig.ts
+++ b/frontend/src/hooks/useAppConfig.ts
@@ -21,7 +21,6 @@ export interface AppConfig {
runningProOrHigher?: boolean;
runningEE?: boolean;
license?: string;
- GoogleDriveEnabled?: boolean;
SSOAutoLogin?: boolean;
serverCertificateEnabled?: boolean;
error?: string;
diff --git a/frontend/src/hooks/useGoogleDrivePicker.ts b/frontend/src/hooks/useGoogleDrivePicker.ts
new file mode 100644
index 000000000..5c9ead572
--- /dev/null
+++ b/frontend/src/hooks/useGoogleDrivePicker.ts
@@ -0,0 +1,98 @@
+/**
+ * React hook for Google Drive file picker
+ */
+
+import { useState, useCallback, useEffect } from 'react';
+import {
+ getGoogleDrivePickerService,
+ isGoogleDriveConfigured,
+ getGoogleDriveConfig,
+} from '../services/googleDrivePickerService';
+
+interface UseGoogleDrivePickerOptions {
+ multiple?: boolean;
+ mimeTypes?: string;
+}
+
+interface UseGoogleDrivePickerReturn {
+ isEnabled: boolean;
+ isLoading: boolean;
+ error: string | null;
+ openPicker: (options?: UseGoogleDrivePickerOptions) => Promise;
+}
+
+/**
+ * Hook to use Google Drive file picker
+ */
+export function useGoogleDrivePicker(): UseGoogleDrivePickerReturn {
+ const [isEnabled, setIsEnabled] = useState(false);
+ const [isLoading, setIsLoading] = useState(false);
+ const [error, setError] = useState(null);
+ const [isInitialized, setIsInitialized] = useState(false);
+
+ // Check if Google Drive is configured on mount
+ useEffect(() => {
+ const configured = isGoogleDriveConfigured();
+ setIsEnabled(configured);
+ }, []);
+
+ /**
+ * Initialize the Google Drive service (lazy initialization)
+ */
+ const initializeService = useCallback(async () => {
+ if (isInitialized) return;
+
+ const config = getGoogleDriveConfig();
+ if (!config) {
+ throw new Error('Google Drive is not configured');
+ }
+
+ const service = getGoogleDrivePickerService();
+ await service.initialize(config);
+ setIsInitialized(true);
+ }, [isInitialized]);
+
+ /**
+ * Open the Google Drive picker
+ */
+ const openPicker = useCallback(
+ async (options: UseGoogleDrivePickerOptions = {}): Promise => {
+ if (!isEnabled) {
+ setError('Google Drive is not configured');
+ return [];
+ }
+
+ try {
+ setIsLoading(true);
+ setError(null);
+
+ // Initialize service if needed
+ await initializeService();
+
+ // Open picker
+ const service = getGoogleDrivePickerService();
+ const files = await service.openPicker({
+ multiple: options.multiple ?? true,
+ mimeTypes: options.mimeTypes,
+ });
+
+ return files;
+ } catch (err) {
+ const errorMessage = err instanceof Error ? err.message : 'Failed to open Google Drive picker';
+ setError(errorMessage);
+ console.error('Google Drive picker error:', err);
+ return [];
+ } finally {
+ setIsLoading(false);
+ }
+ },
+ [isEnabled, initializeService]
+ );
+
+ return {
+ isEnabled,
+ isLoading,
+ error,
+ openPicker,
+ };
+}
diff --git a/frontend/src/hooks/useSidebarNavigation.ts b/frontend/src/hooks/useSidebarNavigation.ts
index a65ea96de..42f92e0f1 100644
--- a/frontend/src/hooks/useSidebarNavigation.ts
+++ b/frontend/src/hooks/useSidebarNavigation.ts
@@ -2,6 +2,7 @@ import { useCallback } from 'react';
import { useToolNavigation } from './useToolNavigation';
import { useToolWorkflow } from '../contexts/ToolWorkflowContext';
import { handleUnlessSpecialClick } from '../utils/clickHandlers';
+import { ToolId } from 'src/types/toolId';
export interface SidebarNavigationProps {
/** Full URL for the navigation (for href attribute) */
@@ -16,7 +17,7 @@ export interface SidebarNavigationProps {
*/
export function useSidebarNavigation(): {
getHomeNavigation: () => SidebarNavigationProps;
- getToolNavigation: (toolId: string) => SidebarNavigationProps | null;
+ getToolNavigation: (toolId: ToolId) => SidebarNavigationProps | null;
} {
const { getToolNavigation: getToolNavProps } = useToolNavigation();
const { getSelectedTool } = useToolWorkflow();
@@ -32,14 +33,14 @@ export function useSidebarNavigation(): {
return { href, onClick: defaultNavClick };
}, [defaultNavClick]);
- const getToolNavigation = useCallback((toolId: string): SidebarNavigationProps | null => {
+ const getToolNavigation = useCallback((toolId: ToolId): SidebarNavigationProps | null => {
// Handle special nav sections that aren't tools
if (toolId === 'read') return { href: '/read', onClick: defaultNavClick };
if (toolId === 'automate') return { href: '/automate', onClick: defaultNavClick };
const tool = getSelectedTool(toolId);
if (!tool) return null;
-
+
// Delegate to useToolNavigation for true tools
return getToolNavProps(toolId, tool);
}, [getToolNavProps, getSelectedTool, defaultNavClick]);
@@ -48,4 +49,4 @@ export function useSidebarNavigation(): {
getHomeNavigation,
getToolNavigation
};
-}
\ No newline at end of file
+}
diff --git a/frontend/src/hooks/useToolManagement.tsx b/frontend/src/hooks/useToolManagement.tsx
index 3239cbaaa..054e99304 100644
--- a/frontend/src/hooks/useToolManagement.tsx
+++ b/frontend/src/hooks/useToolManagement.tsx
@@ -1,16 +1,17 @@
import { useState, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useFlatToolRegistry } from "../data/useTranslatedToolRegistry";
-import { getAllEndpoints, type ToolRegistryEntry } from "../data/toolsTaxonomy";
+import { getAllEndpoints, type ToolRegistryEntry, type ToolRegistry } from "../data/toolsTaxonomy";
import { useMultipleEndpointsEnabled } from "./useEndpointConfig";
import { FileId } from '../types/file';
+import { ToolId } from 'src/types/toolId';
interface ToolManagementResult {
selectedTool: ToolRegistryEntry | null;
toolSelectedFileIds: FileId[];
- toolRegistry: Record;
+ toolRegistry: Partial;
setToolSelectedFileIds: (fileIds: FileId[]) => void;
- getSelectedTool: (toolKey: string | null) => ToolRegistryEntry | null;
+ getSelectedTool: (toolKey: ToolId | null) => ToolRegistryEntry | null;
}
export const useToolManagement = (): ToolManagementResult => {
@@ -30,9 +31,9 @@ export const useToolManagement = (): ToolManagementResult => {
return endpoints.length === 0 || endpoints.some((endpoint: string) => endpointStatus[endpoint] === true);
}, [endpointsLoading, endpointStatus, baseRegistry]);
- const toolRegistry: Record = useMemo(() => {
- const availableToolRegistry: Record = {};
- Object.keys(baseRegistry).forEach(toolKey => {
+ const toolRegistry: Partial = useMemo(() => {
+ const availableToolRegistry: Partial = {};
+ (Object.keys(baseRegistry) as ToolId[]).forEach(toolKey => {
if (isToolAvailable(toolKey)) {
const baseTool = baseRegistry[toolKey as keyof typeof baseRegistry];
availableToolRegistry[toolKey] = {
@@ -45,7 +46,7 @@ export const useToolManagement = (): ToolManagementResult => {
return availableToolRegistry;
}, [isToolAvailable, t, baseRegistry]);
- const getSelectedTool = useCallback((toolKey: string | null): ToolRegistryEntry | null => {
+ const getSelectedTool = useCallback((toolKey: ToolId | null): ToolRegistryEntry | null => {
return toolKey ? toolRegistry[toolKey] || null : null;
}, [toolRegistry]);
diff --git a/frontend/src/hooks/useToolSections.ts b/frontend/src/hooks/useToolSections.ts
index 5c5be8773..40eac31e6 100644
--- a/frontend/src/hooks/useToolSections.ts
+++ b/frontend/src/hooks/useToolSections.ts
@@ -2,9 +2,10 @@ import { useMemo } from 'react';
import { SUBCATEGORY_ORDER, SubcategoryId, ToolCategoryId, ToolRegistryEntry } from '../data/toolsTaxonomy';
import { useTranslation } from 'react-i18next';
+import { ToolId } from 'src/types/toolId';
type SubcategoryIdMap = {
- [subcategoryId in SubcategoryId]: Array<{ id: string /* FIX ME: Should be ToolId */; tool: ToolRegistryEntry }>;
+ [subcategoryId in SubcategoryId]: Array<{ id: ToolId; tool: ToolRegistryEntry }>;
}
type GroupedTools = {
@@ -14,7 +15,7 @@ type GroupedTools = {
export interface SubcategoryGroup {
subcategoryId: SubcategoryId;
tools: {
- id: string /* FIX ME: Should be ToolId */;
+ id: ToolId;
tool: ToolRegistryEntry;
}[];
};
@@ -28,7 +29,7 @@ export interface ToolSection {
};
export function useToolSections(
- filteredTools: Array<{ item: [string /* FIX ME: Should be ToolId */, ToolRegistryEntry]; matchedText?: string }>,
+ filteredTools: Array<{ item: [ToolId, ToolRegistryEntry]; matchedText?: string }>,
searchQuery?: string
) {
const { t } = useTranslation();
@@ -37,7 +38,7 @@ export function useToolSections(
if (!filteredTools || !Array.isArray(filteredTools)) {
return {} as GroupedTools;
}
-
+
const grouped = {} as GroupedTools;
filteredTools.forEach(({ item: [id, tool] }) => {
const categoryId = tool.categoryId;
@@ -105,11 +106,11 @@ export function useToolSections(
if (!filteredTools || !Array.isArray(filteredTools)) {
return [];
}
-
+
const subMap = {} as SubcategoryIdMap;
- const seen = new Set();
+ const seen = new Set();
filteredTools.forEach(({ item: [id, tool] }) => {
- const toolId = id as string /* FIX ME: Should be ToolId */;
+ const toolId = id as ToolId;
if (seen.has(toolId)) return;
seen.add(toolId);
const sub = tool.subcategoryId;
diff --git a/frontend/src/services/googleDrivePickerService.ts b/frontend/src/services/googleDrivePickerService.ts
new file mode 100644
index 000000000..cb5b02b87
--- /dev/null
+++ b/frontend/src/services/googleDrivePickerService.ts
@@ -0,0 +1,295 @@
+/**
+ * Google Drive Picker Service
+ * Handles Google Drive file picker integration
+ */
+
+import { loadScript } from '../utils/scriptLoader';
+
+const SCOPES = 'https://www.googleapis.com/auth/drive.readonly';
+const SESSION_STORAGE_ID = 'googleDrivePickerAccessToken';
+
+interface GoogleDriveConfig {
+ clientId: string;
+ apiKey: string;
+ appId: string;
+}
+
+interface PickerOptions {
+ multiple?: boolean;
+ mimeTypes?: string | null;
+}
+
+// Expandable mime types for Google Picker
+const expandableMimeTypes: Record = {
+ 'image/*': ['image/jpeg', 'image/png', 'image/svg+xml'],
+};
+
+/**
+ * Convert file input accept attribute to Google Picker mime types
+ */
+function fileInputToGooglePickerMimeTypes(accept?: string): string | null {
+ if (!accept || accept === '' || accept.includes('*/*')) {
+ // Setting null will accept all supported mimetypes
+ return null;
+ }
+
+ const mimeTypes: string[] = [];
+ accept.split(',').forEach((part) => {
+ const trimmedPart = part.trim();
+ if (!(trimmedPart in expandableMimeTypes)) {
+ mimeTypes.push(trimmedPart);
+ return;
+ }
+
+ expandableMimeTypes[trimmedPart].forEach((mimeType) => {
+ mimeTypes.push(mimeType);
+ });
+ });
+
+ return mimeTypes.join(',').replace(/\s+/g, '');
+}
+
+class GoogleDrivePickerService {
+ private config: GoogleDriveConfig | null = null;
+ private tokenClient: any = null;
+ private accessToken: string | null = null;
+ private gapiLoaded = false;
+ private gisLoaded = false;
+
+ constructor() {
+ this.accessToken = sessionStorage.getItem(SESSION_STORAGE_ID);
+ }
+
+ /**
+ * Initialize the service with credentials
+ */
+ async initialize(config: GoogleDriveConfig): Promise {
+ this.config = config;
+
+ // Load Google APIs
+ await Promise.all([
+ this.loadGapi(),
+ this.loadGis(),
+ ]);
+ }
+
+ /**
+ * Load Google API client
+ */
+ private async loadGapi(): Promise {
+ if (this.gapiLoaded) return;
+
+ await loadScript({
+ src: 'https://apis.google.com/js/api.js',
+ id: 'gapi-script',
+ });
+
+ return new Promise((resolve) => {
+ window.gapi.load('client:picker', async () => {
+ await window.gapi.client.load('https://www.googleapis.com/discovery/v1/apis/drive/v3/rest');
+ this.gapiLoaded = true;
+ resolve();
+ });
+ });
+ }
+
+ /**
+ * Load Google Identity Services
+ */
+ private async loadGis(): Promise {
+ if (this.gisLoaded) return;
+
+ await loadScript({
+ src: 'https://accounts.google.com/gsi/client',
+ id: 'gis-script',
+ });
+
+ if (!this.config) {
+ throw new Error('Google Drive config not initialized');
+ }
+
+ this.tokenClient = window.google.accounts.oauth2.initTokenClient({
+ client_id: this.config.clientId,
+ scope: SCOPES,
+ callback: () => {}, // Will be overridden during picker creation
+ });
+
+ this.gisLoaded = true;
+ }
+
+ /**
+ * Open the Google Drive picker
+ */
+ async openPicker(options: PickerOptions = {}): Promise {
+ if (!this.config) {
+ throw new Error('Google Drive service not initialized');
+ }
+
+ // Request access token
+ await this.requestAccessToken();
+
+ // Create and show picker
+ return this.createPicker(options);
+ }
+
+ /**
+ * Request access token from Google
+ */
+ private requestAccessToken(): Promise {
+ return new Promise((resolve, reject) => {
+ if (!this.tokenClient) {
+ reject(new Error('Token client not initialized'));
+ return;
+ }
+
+ this.tokenClient.callback = (response: any) => {
+ if (response.error !== undefined) {
+ reject(new Error(response.error));
+ return;
+ }
+ if(response.access_token == null){
+ reject(new Error("No acces token in response"));
+ }
+
+ this.accessToken = response.access_token;
+ sessionStorage.setItem(SESSION_STORAGE_ID, this.accessToken ?? "");
+ resolve();
+ };
+
+ this.tokenClient.requestAccessToken({
+ prompt: this.accessToken === null ? 'consent' : '',
+ });
+ });
+ }
+
+ /**
+ * Create and display the Google Picker
+ */
+ private createPicker(options: PickerOptions): Promise {
+ return new Promise((resolve, reject) => {
+ if (!this.config || !this.accessToken) {
+ reject(new Error('Not initialized or no access token'));
+ return;
+ }
+
+ const mimeTypes = fileInputToGooglePickerMimeTypes(options.mimeTypes || undefined);
+
+ const view1 = new window.google.picker.DocsView().setIncludeFolders(true);
+ if (mimeTypes !== null) {
+ view1.setMimeTypes(mimeTypes);
+ }
+
+ const view2 = new window.google.picker.DocsView()
+ .setIncludeFolders(true)
+ .setEnableDrives(true);
+ if (mimeTypes !== null) {
+ view2.setMimeTypes(mimeTypes);
+ }
+
+ const builder = new window.google.picker.PickerBuilder()
+ .setDeveloperKey(this.config.apiKey)
+ .setAppId(this.config.appId)
+ .setOAuthToken(this.accessToken)
+ .addView(view1)
+ .addView(view2)
+ .setCallback((data: any) => this.pickerCallback(data, resolve, reject));
+
+ if (options.multiple) {
+ builder.enableFeature(window.google.picker.Feature.MULTISELECT_ENABLED);
+ }
+
+ const picker = builder.build();
+ picker.setVisible(true);
+ });
+ }
+
+ /**
+ * Handle picker selection callback
+ */
+ private async pickerCallback(
+ data: any,
+ resolve: (files: File[]) => void,
+ reject: (error: Error) => void
+ ): Promise {
+ if (data.action === window.google.picker.Action.PICKED) {
+ try {
+ const files = await Promise.all(
+ data[window.google.picker.Response.DOCUMENTS].map(async (pickedFile: any) => {
+ const fileId = pickedFile[window.google.picker.Document.ID];
+ const res = await window.gapi.client.drive.files.get({
+ fileId: fileId,
+ alt: 'media',
+ });
+
+ // Convert response body to File object
+ const file = new File(
+ [new Uint8Array(res.body.length).map((_: any, i: number) => res.body.charCodeAt(i))],
+ pickedFile.name,
+ {
+ type: pickedFile.mimeType,
+ lastModified: pickedFile.lastModified,
+ }
+ );
+ return file;
+ })
+ );
+
+ resolve(files);
+ } catch (error) {
+ reject(error instanceof Error ? error : new Error('Failed to download files'));
+ }
+ } else if (data.action === window.google.picker.Action.CANCEL) {
+ resolve([]); // User cancelled, return empty array
+ }
+ }
+
+ /**
+ * Sign out and revoke access token
+ */
+ signOut(): void {
+ if (this.accessToken) {
+ sessionStorage.removeItem(SESSION_STORAGE_ID);
+ window.google?.accounts.oauth2.revoke(this.accessToken, () => {});
+ this.accessToken = null;
+ }
+ }
+}
+
+// Singleton instance
+let serviceInstance: GoogleDrivePickerService | null = null;
+
+/**
+ * Get or create the Google Drive picker service instance
+ */
+export function getGoogleDrivePickerService(): GoogleDrivePickerService {
+ if (!serviceInstance) {
+ serviceInstance = new GoogleDrivePickerService();
+ }
+ return serviceInstance;
+}
+
+/**
+ * Check if Google Drive credentials are configured
+ */
+export function isGoogleDriveConfigured(): boolean {
+ const clientId = import.meta.env.VITE_GOOGLE_DRIVE_CLIENT_ID;
+ const apiKey = import.meta.env.VITE_GOOGLE_DRIVE_API_KEY;
+ const appId = import.meta.env.VITE_GOOGLE_DRIVE_APP_ID;
+
+ return !!(clientId && apiKey && appId);
+}
+
+/**
+ * Get Google Drive configuration from environment variables
+ */
+export function getGoogleDriveConfig(): GoogleDriveConfig | null {
+ if (!isGoogleDriveConfigured()) {
+ return null;
+ }
+
+ return {
+ clientId: import.meta.env.VITE_GOOGLE_DRIVE_CLIENT_ID,
+ apiKey: import.meta.env.VITE_GOOGLE_DRIVE_API_KEY,
+ appId: import.meta.env.VITE_GOOGLE_DRIVE_APP_ID,
+ };
+}
diff --git a/frontend/src/utils/scriptLoader.ts b/frontend/src/utils/scriptLoader.ts
new file mode 100644
index 000000000..bf0b64ded
--- /dev/null
+++ b/frontend/src/utils/scriptLoader.ts
@@ -0,0 +1,55 @@
+/**
+ * Utility for dynamically loading external scripts
+ */
+
+interface ScriptLoadOptions {
+ src: string;
+ id?: string;
+ async?: boolean;
+ defer?: boolean;
+ onLoad?: () => void;
+}
+
+const loadedScripts = new Set();
+
+export function loadScript({ src, id, async = true, defer = false, onLoad }: ScriptLoadOptions): Promise {
+ return new Promise((resolve, reject) => {
+ // Check if already loaded
+ const scriptId = id || src;
+ if (loadedScripts.has(scriptId)) {
+ resolve();
+ return;
+ }
+
+ // Check if script already exists in DOM
+ const existingScript = id ? document.getElementById(id) : document.querySelector(`script[src="${src}"]`);
+ if (existingScript) {
+ loadedScripts.add(scriptId);
+ resolve();
+ return;
+ }
+
+ // Create and append script
+ const script = document.createElement('script');
+ script.src = src;
+ if (id) script.id = id;
+ script.async = async;
+ script.defer = defer;
+
+ script.onload = () => {
+ loadedScripts.add(scriptId);
+ if (onLoad) onLoad();
+ resolve();
+ };
+
+ script.onerror = () => {
+ reject(new Error(`Failed to load script: ${src}`));
+ };
+
+ document.head.appendChild(script);
+ });
+}
+
+export function isScriptLoaded(idOrSrc: string): boolean {
+ return loadedScripts.has(idOrSrc);
+}
diff --git a/frontend/src/utils/toolSearch.ts b/frontend/src/utils/toolSearch.ts
index dda5749a8..8bd963564 100644
--- a/frontend/src/utils/toolSearch.ts
+++ b/frontend/src/utils/toolSearch.ts
@@ -1,8 +1,9 @@
+import { ToolId } from "src/types/toolId";
import { ToolRegistryEntry } from "../data/toolsTaxonomy";
import { scoreMatch, minScoreForQuery, normalizeForSearch } from "./fuzzySearch";
export interface RankedToolItem {
- item: [string, ToolRegistryEntry];
+ item: [ToolId, ToolRegistryEntry];
matchedText?: string;
}
@@ -10,18 +11,18 @@ export function filterToolRegistryByQuery(
toolRegistry: Record,
query: string
): RankedToolItem[] {
- const entries = Object.entries(toolRegistry);
+ const entries = Object.entries(toolRegistry) as [ToolId, ToolRegistryEntry][];
if (!query.trim()) {
- return entries.map(([id, tool]) => ({ item: [id, tool] as [string, ToolRegistryEntry] }));
+ return entries.map(([id, tool]) => ({ item: [id, tool] as [ToolId, ToolRegistryEntry] }));
}
const nq = normalizeForSearch(query);
const threshold = minScoreForQuery(query);
- const exactName: Array<{ id: string; tool: ToolRegistryEntry; pos: number }> = [];
- const exactSyn: Array<{ id: string; tool: ToolRegistryEntry; text: string; pos: number }> = [];
- const fuzzyName: Array<{ id: string; tool: ToolRegistryEntry; score: number; text: string }> = [];
- const fuzzySyn: Array<{ id: string; tool: ToolRegistryEntry; score: number; text: string }> = [];
+ const exactName: Array<{ id: ToolId; tool: ToolRegistryEntry; pos: number }> = [];
+ const exactSyn: Array<{ id: ToolId; tool: ToolRegistryEntry; text: string; pos: number }> = [];
+ const fuzzyName: Array<{ id: ToolId; tool: ToolRegistryEntry; score: number; text: string }> = [];
+ const fuzzySyn: Array<{ id: ToolId; tool: ToolRegistryEntry; score: number; text: string }> = [];
for (const [id, tool] of entries) {
const nameNorm = normalizeForSearch(tool.name || '');
@@ -78,7 +79,7 @@ export function filterToolRegistryByQuery(
const seen = new Set();
const ordered: RankedToolItem[] = [];
- const push = (id: string, tool: ToolRegistryEntry, matchedText?: string) => {
+ const push = (id: ToolId, tool: ToolRegistryEntry, matchedText?: string) => {
if (seen.has(id)) return;
seen.add(id);
ordered.push({ item: [id, tool], matchedText });
@@ -92,7 +93,7 @@ export function filterToolRegistryByQuery(
if (ordered.length > 0) return ordered;
// Fallback: return everything unchanged
- return entries.map(([id, tool]) => ({ item: [id, tool] as [string, ToolRegistryEntry] }));
+ return entries.map(([id, tool]) => ({ item: [id, tool] as [ToolId, ToolRegistryEntry] }));
}