-
) : leftPanelView === 'toolPicker' ? (
// Tool Picker View
-
+
+
{/* Close Button - Only show in preview mode */}
{onClose && previewFile && (
{
+ const currentSelection = stateRef.current.ui.selectedFileIds;
+ const newFileIds = addedFilesWithIds.map(({ id }) => id);
+ dispatch({ type: 'SET_SELECTED_FILES', payload: { fileIds: [...currentSelection, ...newFileIds] } });
+ }
+
// File operations using unified addFiles helper with persistence
- const addRawFiles = useCallback(async (files: File[], options?: { insertAfterPageId?: string }): Promise => {
+ const addRawFiles = useCallback(async (files: File[], options?: { insertAfterPageId?: string; selectFiles?: boolean }): Promise => {
const addedFilesWithIds = await addFiles('raw', { files, ...options }, stateRef, filesRef, dispatch, lifecycleManager);
+
+ // Auto-select the newly added files if requested
+ if (options?.selectFiles && addedFilesWithIds.length > 0) {
+ selectFiles(addedFilesWithIds);
+ }
+
// Persist to IndexedDB if enabled
if (indexedDB && enablePersistence && addedFilesWithIds.length > 0) {
await Promise.all(addedFilesWithIds.map(async ({ file, id, thumbnail }) => {
@@ -94,8 +106,14 @@ function FileContextInner({
return result.map(({ file }) => file);
}, []);
- const addStoredFiles = useCallback(async (filesWithMetadata: Array<{ file: File; originalId: FileId; metadata: any }>): Promise => {
+ const addStoredFiles = useCallback(async (filesWithMetadata: Array<{ file: File; originalId: FileId; metadata: any }>, options?: { selectFiles?: boolean }): Promise => {
const result = await addFiles('stored', { filesWithMetadata }, stateRef, filesRef, dispatch, lifecycleManager);
+
+ // Auto-select the newly added files if requested
+ if (options?.selectFiles && result.length > 0) {
+ selectFiles(result);
+ }
+
return result.map(({ file }) => file);
}, []);
diff --git a/frontend/src/contexts/file/fileActions.ts b/frontend/src/contexts/file/fileActions.ts
index d0c565783..8d91f8855 100644
--- a/frontend/src/contexts/file/fileActions.ts
+++ b/frontend/src/contexts/file/fileActions.ts
@@ -88,6 +88,12 @@ interface AddFileOptions {
insertAfterPageId?: string;
}
+export interface AddedFile {
+ file: File;
+ id: FileId;
+ thumbnail?: string;
+}
+
/**
* Unified file addition helper - replaces addFiles/addProcessedFiles/addStoredFiles
*/
@@ -98,13 +104,13 @@ export async function addFiles(
filesRef: React.MutableRefObject>,
dispatch: React.Dispatch,
lifecycleManager: FileLifecycleManager
-): Promise> {
+): Promise {
// Acquire mutex to prevent race conditions
await addFilesMutex.lock();
try {
const fileRecords: FileRecord[] = [];
- const addedFiles: Array<{ file: File; id: FileId; thumbnail?: string }> = [];
+ const addedFiles: AddedFile[] = [];
// Build quickKey lookup from existing files for deduplication
const existingQuickKeys = buildQuickKeySet(stateRef.current.files.byId);
diff --git a/frontend/src/hooks/tools/split/useSplitOperation.ts b/frontend/src/hooks/tools/split/useSplitOperation.ts
index e3d9a1727..394fb694d 100644
--- a/frontend/src/hooks/tools/split/useSplitOperation.ts
+++ b/frontend/src/hooks/tools/split/useSplitOperation.ts
@@ -1,16 +1,16 @@
+import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
-import { ToolType, useToolOperation } from '../shared/useToolOperation';
+import { ToolType, useToolOperation, ToolOperationConfig } from '../shared/useToolOperation';
import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
import { SplitParameters, defaultParameters } from './useSplitParameters';
import { SPLIT_MODES } from '../../../constants/splitConstants';
+import { useToolResources } from '../shared/useToolResources';
// Static functions that can be used by both the hook and automation executor
-export const buildSplitFormData = (parameters: SplitParameters, selectedFiles: File[]): FormData => {
+export const buildSplitFormData = (parameters: SplitParameters, file: File): FormData => {
const formData = new FormData();
- selectedFiles.forEach(file => {
- formData.append("fileInput", file);
- });
+ formData.append("fileInput", file);
switch (parameters.mode) {
case SPLIT_MODES.BY_PAGES:
@@ -57,7 +57,7 @@ export const getSplitEndpoint = (parameters: SplitParameters): string => {
// Static configuration object
export const splitOperationConfig = {
- toolType: ToolType.multiFile,
+ toolType: ToolType.singleFile,
buildFormData: buildSplitFormData,
operationType: 'splitPdf',
endpoint: getSplitEndpoint,
@@ -67,9 +67,20 @@ export const splitOperationConfig = {
export const useSplitOperation = () => {
const { t } = useTranslation();
+ const { extractZipFiles } = useToolResources();
- return useToolOperation({
+ // Custom response handler that extracts ZIP files
+ // Can't add to exported config because it requires access to the zip code so must be part of the hook
+ const responseHandler = useCallback(async (blob: Blob, originalFiles: File[]): Promise => {
+ // Split operations return ZIP files with multiple PDF pages
+ return await extractZipFiles(blob);
+ }, [extractZipFiles]);
+
+ const splitConfig: ToolOperationConfig = {
...splitOperationConfig,
+ responseHandler,
getErrorMessage: createStandardErrorHandler(t('split.error.failed', 'An error occurred while splitting the PDF.'))
- });
+ };
+
+ return useToolOperation(splitConfig);
};
diff --git a/frontend/src/hooks/useCookieConsent.ts b/frontend/src/hooks/useCookieConsent.ts
new file mode 100644
index 000000000..3eacaa7bd
--- /dev/null
+++ b/frontend/src/hooks/useCookieConsent.ts
@@ -0,0 +1,230 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+declare global {
+ interface Window {
+ CookieConsent: {
+ run: (config: any) => void;
+ show: (show?: boolean) => void;
+ };
+ }
+}
+
+interface CookieConsentConfig {
+ analyticsEnabled?: boolean;
+}
+
+export const useCookieConsent = ({ analyticsEnabled = false }: CookieConsentConfig = {}) => {
+ const { t } = useTranslation();
+ const [isInitialized, setIsInitialized] = useState(false);
+
+ useEffect(() => {
+ if (!analyticsEnabled) {
+ console.log('Cookie consent not enabled - analyticsEnabled is false');
+ return;
+ }
+
+ // Prevent double initialization
+ if (window.CookieConsent) {
+ setIsInitialized(true);
+ // Force show the modal if it exists but isn't visible
+ setTimeout(() => {
+ window.CookieConsent.show();
+ }, 100);
+ return;
+ }
+
+ // Load the cookie consent CSS files first
+ const mainCSS = document.createElement('link');
+ mainCSS.rel = 'stylesheet';
+ mainCSS.href = '/css/cookieconsent.css';
+ document.head.appendChild(mainCSS);
+
+ const customCSS = document.createElement('link');
+ customCSS.rel = 'stylesheet';
+ customCSS.href = '/css/cookieconsentCustomisation.css';
+ document.head.appendChild(customCSS);
+
+ // Load the cookie consent library
+ const script = document.createElement('script');
+ script.src = '/js/thirdParty/cookieconsent.umd.js';
+ script.onload = () => {
+ // Small delay to ensure DOM is ready
+ setTimeout(() => {
+
+ // Detect current theme and set appropriate mode
+ const detectTheme = () => {
+ const mantineScheme = document.documentElement.getAttribute('data-mantine-color-scheme');
+ const hasLightClass = document.documentElement.classList.contains('light');
+ const hasDarkClass = document.documentElement.classList.contains('dark');
+ const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+ // Priority: Mantine attribute > CSS classes > system preference
+ let isDarkMode = false;
+
+ if (mantineScheme) {
+ isDarkMode = mantineScheme === 'dark';
+ } else if (hasLightClass) {
+ isDarkMode = false;
+ } else if (hasDarkClass) {
+ isDarkMode = true;
+ } else {
+ isDarkMode = systemPrefersDark;
+ }
+
+ // Always explicitly set or remove the class
+ document.documentElement.classList.toggle('cc--darkmode', isDarkMode);
+
+ return isDarkMode;
+ };
+
+ // Initial theme detection with slight delay to ensure DOM is ready
+ setTimeout(() => {
+ detectTheme();
+ }, 50);
+
+ // Check if CookieConsent is available
+ if (!window.CookieConsent) {
+ console.error('CookieConsent is not available on window object');
+ return;
+ }
+
+ // Listen for theme changes
+ const themeObserver = new MutationObserver((mutations) => {
+ mutations.forEach((mutation) => {
+ if (mutation.type === 'attributes' &&
+ (mutation.attributeName === 'data-mantine-color-scheme' ||
+ mutation.attributeName === 'class')) {
+ detectTheme();
+ }
+ });
+ });
+
+ themeObserver.observe(document.documentElement, {
+ attributes: true,
+ attributeFilter: ['data-mantine-color-scheme', 'class']
+ });
+
+
+ // Initialize cookie consent with full configuration
+ try {
+ window.CookieConsent.run({
+ autoShow: true,
+ hideFromBots: false,
+ guiOptions: {
+ consentModal: {
+ layout: "bar",
+ position: "bottom",
+ equalWeightButtons: true,
+ flipButtons: true
+ },
+ preferencesModal: {
+ layout: "box",
+ position: "right",
+ equalWeightButtons: true,
+ flipButtons: true
+ }
+ },
+ categories: {
+ necessary: {
+ readOnly: true
+ },
+ analytics: {}
+ },
+ language: {
+ default: "en",
+ translations: {
+ en: {
+ consentModal: {
+ title: t('cookieBanner.popUp.title', 'How we use Cookies'),
+ description: t('cookieBanner.popUp.description.1', 'We use cookies and other technologies to make Stirling PDF work better for youâhelping us improve our tools and keep building features you\'ll love.') +
+ "
" +
+ t('cookieBanner.popUp.description.2', 'If you\'d rather not, clicking \'No Thanks\' will only enable the essential cookies needed to keep things running smoothly.'),
+ acceptAllBtn: t('cookieBanner.popUp.acceptAllBtn', 'Okay'),
+ acceptNecessaryBtn: t('cookieBanner.popUp.acceptNecessaryBtn', 'No Thanks'),
+ showPreferencesBtn: t('cookieBanner.popUp.showPreferencesBtn', 'Manage preferences'),
+ },
+ preferencesModal: {
+ title: t('cookieBanner.preferencesModal.title', 'Consent Preferences Center'),
+ acceptAllBtn: t('cookieBanner.preferencesModal.acceptAllBtn', 'Accept all'),
+ acceptNecessaryBtn: t('cookieBanner.preferencesModal.acceptNecessaryBtn', 'Reject all'),
+ savePreferencesBtn: t('cookieBanner.preferencesModal.savePreferencesBtn', 'Save preferences'),
+ closeIconLabel: t('cookieBanner.preferencesModal.closeIconLabel', 'Close modal'),
+ serviceCounterLabel: t('cookieBanner.preferencesModal.serviceCounterLabel', 'Service|Services'),
+ sections: [
+ {
+ title: t('cookieBanner.preferencesModal.subtitle', 'Cookie Usage'),
+ description: t('cookieBanner.preferencesModal.description.1', 'Stirling PDF uses cookies and similar technologies to enhance your experience and understand how our tools are used. This helps us improve performance, develop the features you care about, and provide ongoing support to our users.') +
+ "
" +
+ t('cookieBanner.preferencesModal.description.2', 'Stirling PDF cannotâand will neverâtrack or access the content of the documents you use.') +
+ " " +
+ t('cookieBanner.preferencesModal.description.3', 'Your privacy and trust are at the core of what we do.') +
+ ""
+ },
+ {
+ title: t('cookieBanner.preferencesModal.necessary.title.1', 'Strictly Necessary Cookies') +
+ "" +
+ t('cookieBanner.preferencesModal.necessary.title.2', 'Always Enabled') +
+ "",
+ description: t('cookieBanner.preferencesModal.necessary.description', 'These cookies are essential for the website to function properly. They enable core features like setting your privacy preferences, logging in, and filling out formsâwhich is why they can\'t be turned off.'),
+ linkedCategory: "necessary"
+ },
+ {
+ title: t('cookieBanner.preferencesModal.analytics.title', 'Analytics'),
+ description: t('cookieBanner.preferencesModal.analytics.description', 'These cookies help us understand how our tools are being used, so we can focus on building the features our community values most. Rest assuredâStirling PDF cannot and will never track the content of the documents you work with.'),
+ linkedCategory: "analytics"
+ }
+ ]
+ }
+ }
+ }
+ }
+ });
+
+ // Force show after initialization
+ setTimeout(() => {
+ window.CookieConsent.show();
+
+ // Debug: Check if modal elements exist
+ const ccMain = document.getElementById('cc-main');
+ const consentModal = document.querySelector('.cm-wrapper');
+
+ }, 200);
+
+ } catch (error) {
+ console.error('Error initializing CookieConsent:', error);
+ }
+ setIsInitialized(true);
+ }, 100); // Small delay to ensure DOM is ready
+ };
+
+ script.onerror = () => {
+ console.error('Failed to load cookie consent library');
+ };
+
+ document.head.appendChild(script);
+
+ return () => {
+ // Cleanup script and CSS when component unmounts
+ if (document.head.contains(script)) {
+ document.head.removeChild(script);
+ }
+ if (document.head.contains(mainCSS)) {
+ document.head.removeChild(mainCSS);
+ }
+ if (document.head.contains(customCSS)) {
+ document.head.removeChild(customCSS);
+ }
+ };
+ }, [analyticsEnabled, t]);
+
+ const showCookiePreferences = () => {
+ if (isInitialized && window.CookieConsent) {
+ window.CookieConsent.show(true);
+ }
+ };
+
+ return {
+ showCookiePreferences
+ };
+};
diff --git a/frontend/src/hooks/useFileHandler.ts b/frontend/src/hooks/useFileHandler.ts
index 475affa6f..8c2a4e2a1 100644
--- a/frontend/src/hooks/useFileHandler.ts
+++ b/frontend/src/hooks/useFileHandler.ts
@@ -9,12 +9,12 @@ export const useFileHandler = () => {
const addToActiveFiles = useCallback(async (file: File) => {
// Let FileContext handle deduplication with quickKey logic
- await actions.addFiles([file]);
+ await actions.addFiles([file], { selectFiles: true });
}, [actions.addFiles]);
const addMultipleFiles = useCallback(async (files: File[]) => {
// Let FileContext handle deduplication with quickKey logic
- await actions.addFiles(files);
+ await actions.addFiles(files, { selectFiles: true });
}, [actions.addFiles]);
// Add stored files preserving their original IDs to prevent session duplicates
@@ -25,7 +25,7 @@ export const useFileHandler = () => {
});
if (newFiles.length > 0) {
- await actions.addStoredFiles(newFiles);
+ await actions.addStoredFiles(newFiles, { selectFiles: true });
}
console.log(`đ Added ${newFiles.length} stored files (${filesWithMetadata.length - newFiles.length} skipped as duplicates)`);
diff --git a/frontend/src/index.css b/frontend/src/index.css
index ec2585e8c..b4bb41b3e 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,5 +1,11 @@
-body {
+html, body {
margin: 0;
+ padding: 0;
+ height: 100%;
+ overflow-x: hidden;
+}
+
+body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
@@ -11,3 +17,38 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
+
+/* CSS Variables */
+:root {
+ --footer-height: 2rem;
+}
+
+/* Footer link styling - make buttons and links look identical */
+.footer-link {
+ color: var(--mantine-color-gray-6);
+ text-decoration: none;
+ transition: color 0.2s ease;
+ border: none;
+ background: none;
+ cursor: pointer;
+ font-family: inherit;
+ font-size: inherit;
+ padding: 0;
+}
+
+.footer-link:hover {
+ color: var(--mantine-color-blue-8);
+ text-decoration: underline;
+}
+
+.stirling-link {
+ color: var(--mantine-color-blue-6);
+ text-decoration: none;
+ font-weight: 500;
+ transition: color 0.2s ease;
+}
+
+.stirling-link:hover {
+ color: var(--mantine-color-blue-8);
+ text-decoration: underline;
+}
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 9443f0be6..55fe7f046 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -7,6 +7,7 @@ import { ColorSchemeScript } from '@mantine/core';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import './i18n'; // Initialize i18next
+import posthog from 'posthog-js';
import { PostHogProvider } from 'posthog-js/react';
// Compute initial color scheme
@@ -21,22 +22,39 @@ function getInitialScheme(): 'light' | 'dark' {
}
}
+posthog.init(import.meta.env.VITE_PUBLIC_POSTHOG_KEY, {
+ api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST,
+ defaults: '2025-05-24',
+ capture_exceptions: true, // This enables capturing exceptions using Error Tracking, set to false if you don't want this
+ debug: false,
+ opt_out_capturing_by_default: false, // We handle opt-out via cookie consent
+});
+
+function updatePosthogConsent(){
+ if(typeof(posthog) == "undefined") {
+ return;
+ }
+ const optIn = (window.CookieConsent as any).acceptedCategory('analytics');
+ optIn?
+ posthog.opt_in_capturing() : posthog.opt_out_capturing();
+
+ console.log("Updated analytics consent: ", optIn? "opted in" : "opted out");
+ }
+
+window.addEventListener("cc:onConsent", updatePosthogConsent);
+window.addEventListener("cc:onChange", updatePosthogConsent);
+
const container = document.getElementById('root');
if (!container) {
throw new Error("Root container missing in index.html");
}
+
const root = ReactDOM.createRoot(container); // Finds the root DOM element
root.render(
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index 12c1f4d7f..961662123 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -11,6 +11,7 @@ import Workbench from "../components/layout/Workbench";
import QuickAccessBar from "../components/shared/QuickAccessBar";
import RightRail from "../components/shared/RightRail";
import FileManager from "../components/FileManager";
+import Footer from "../components/shared/Footer";
export default function HomePage() {
@@ -38,17 +39,20 @@ export default function HomePage() {
// Note: File selection limits are now handled directly by individual tools
return (
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
);
-}
\ No newline at end of file
+}
diff --git a/frontend/src/styles/cookieconsent.css b/frontend/src/styles/cookieconsent.css
new file mode 100644
index 000000000..331632b13
--- /dev/null
+++ b/frontend/src/styles/cookieconsent.css
@@ -0,0 +1,59 @@
+/* Cookie Consent Modal Styling - Ensure proper z-index */
+
+/* Ensure cookie consent appears above everything */
+#cc-main {
+ z-index: 999999 !important;
+}
+
+/* Additional styling if needed */
+.cm-wrapper,
+.pm-wrapper {
+ z-index: 999999 !important;
+}
+
+/* Dark mode styling */
+.cc--darkmode .cm {
+ background: #2d2d2d !important;
+ color: #ffffff !important;
+ border-top: 1px solid #444 !important;
+}
+
+.cc--darkmode .pm {
+ background: #2d2d2d !important;
+ color: #ffffff !important;
+}
+
+.cc--darkmode .pm-overlay {
+ background: rgba(0, 0, 0, 0.7) !important;
+}
+
+/* Button styling */
+.cc--darkmode .cm__btn {
+ background: #444 !important;
+ color: #ffffff !important;
+ border: 1px solid #666 !important;
+}
+
+.cc--darkmode .cm__btn:hover {
+ background: #555 !important;
+}
+
+.cc--darkmode .pm__btn {
+ background: #444 !important;
+ color: #ffffff !important;
+ border: 1px solid #666 !important;
+}
+
+.cc--darkmode .pm__btn:hover {
+ background: #555 !important;
+}
+
+/* Ensure ScrollArea doesn't interfere */
+.mantine-ScrollArea-root {
+ position: relative !important;
+}
+
+/* Override any potential conflicts */
+[data-mantine-color-scheme="dark"] #cc-main {
+ color: #ffffff !important;
+}
\ No newline at end of file
diff --git a/frontend/src/theme/mantineTheme.ts b/frontend/src/theme/mantineTheme.ts
index 4eebe5f82..2cd70d645 100644
--- a/frontend/src/theme/mantineTheme.ts
+++ b/frontend/src/theme/mantineTheme.ts
@@ -318,7 +318,7 @@ export const mantineTheme = createTheme({
},
control: {
color: 'var(--text-secondary)',
- '[data-active]': {
+ '[dataActive]': {
backgroundColor: 'var(--bg-surface)',
color: 'var(--text-primary)',
boxShadow: 'var(--shadow-sm)',
diff --git a/frontend/src/types/fileContext.ts b/frontend/src/types/fileContext.ts
index 644b3dbfe..d9bd8751e 100644
--- a/frontend/src/types/fileContext.ts
+++ b/frontend/src/types/fileContext.ts
@@ -214,9 +214,9 @@ export type FileContextAction =
export interface FileContextActions {
// File management - lightweight actions only
- addFiles: (files: File[], options?: { insertAfterPageId?: string }) => Promise;
+ addFiles: (files: File[], options?: { insertAfterPageId?: string; selectFiles?: boolean }) => Promise;
addProcessedFiles: (filesWithThumbnails: Array<{ file: File; thumbnail?: string; pageCount?: number }>) => Promise;
- addStoredFiles: (filesWithMetadata: Array<{ file: File; originalId: FileId; metadata: FileMetadata }>) => Promise;
+ addStoredFiles: (filesWithMetadata: Array<{ file: File; originalId: FileId; metadata: FileMetadata }>, options?: { selectFiles?: boolean }) => Promise;
removeFiles: (fileIds: FileId[], deleteFromStorage?: boolean) => Promise;
updateFileRecord: (id: FileId, updates: Partial) => void;
reorderFiles: (orderedFileIds: FileId[]) => void;