+ );
+}
diff --git a/frontend/src/core/components/onboarding/slides/DesktopInstallSlide.tsx b/frontend/src/core/components/onboarding/slides/DesktopInstallSlide.tsx
new file mode 100644
index 000000000..9cebfbb9c
--- /dev/null
+++ b/frontend/src/core/components/onboarding/slides/DesktopInstallSlide.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { SlideConfig } from '@app/types/types';
+import { UNIFIED_CIRCLE_CONFIG } from '@app/components/onboarding/slides/unifiedBackgroundConfig';
+import { DesktopInstallTitle, type OSOption } from '@app/components/onboarding/slides/DesktopInstallTitle';
+
+export type { OSOption };
+
+interface DesktopInstallSlideProps {
+ osLabel: string;
+ osUrl: string;
+ osOptions?: OSOption[];
+ onDownloadUrlChange?: (url: string) => void;
+}
+
+const DesktopInstallBody = () => {
+ const { t } = useTranslation();
+
+ return (
+
+ {t(
+ 'onboarding.desktopInstall.body',
+ 'Stirling works best as a desktop app. You can use it offline, access documents faster, and make edits locally on your computer.',
+ )}
+
+ );
+};
+
+export default function DesktopInstallSlide({
+ osLabel,
+ osUrl,
+ osOptions = [],
+ onDownloadUrlChange,
+}: DesktopInstallSlideProps): SlideConfig {
+
+ return {
+ key: 'desktop-install',
+ title: (
+
+ ),
+ body: ,
+ downloadUrl: osUrl,
+ background: {
+ gradientStops: ['#2563EB', '#0EA5E9'],
+ circles: UNIFIED_CIRCLE_CONFIG,
+ },
+ };
+}
+
diff --git a/frontend/src/core/components/onboarding/slides/DesktopInstallTitle.tsx b/frontend/src/core/components/onboarding/slides/DesktopInstallTitle.tsx
new file mode 100644
index 000000000..ac42b518b
--- /dev/null
+++ b/frontend/src/core/components/onboarding/slides/DesktopInstallTitle.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Menu, ActionIcon } from '@mantine/core';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+export interface OSOption {
+ label: string;
+ url: string;
+ value: string;
+}
+
+interface DesktopInstallTitleProps {
+ osLabel: string;
+ osUrl: string;
+ osOptions: OSOption[];
+ onDownloadUrlChange?: (url: string) => void;
+}
+
+export const DesktopInstallTitle: React.FC = ({
+ osLabel,
+ osUrl,
+ osOptions,
+ onDownloadUrlChange
+}) => {
+ const { t } = useTranslation();
+ const [selectedOsUrl, setSelectedOsUrl] = React.useState(osUrl);
+
+ React.useEffect(() => {
+ setSelectedOsUrl(osUrl);
+ }, [osUrl]);
+
+ const handleOsSelect = React.useCallback((option: OSOption) => {
+ setSelectedOsUrl(option.url);
+ onDownloadUrlChange?.(option.url);
+ }, [onDownloadUrlChange]);
+
+ const currentOsOption = osOptions.find(opt => opt.url === selectedOsUrl) ||
+ (osOptions.length > 0 ? osOptions[0] : { label: osLabel, url: osUrl });
+
+ const displayLabel = currentOsOption.label || osLabel;
+ const title = displayLabel
+ ? t('onboarding.desktopInstall.titleWithOs', 'Download for {{osLabel}}', { osLabel: displayLabel })
+ : t('onboarding.desktopInstall.title', 'Download');
+
+ // If only one option or no options, don't show dropdown
+ if (osOptions.length <= 1) {
+ return
{title}
;
+ }
+
+ return (
+
+ {title}
+
+
+ );
+};
+
diff --git a/frontend/src/core/components/onboarding/slides/PlanOverviewSlide.tsx b/frontend/src/core/components/onboarding/slides/PlanOverviewSlide.tsx
new file mode 100644
index 000000000..3b8d4bfb0
--- /dev/null
+++ b/frontend/src/core/components/onboarding/slides/PlanOverviewSlide.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { SlideConfig, LicenseNotice } from '@app/types/types';
+import { UNIFIED_CIRCLE_CONFIG } from '@app/components/onboarding/slides/unifiedBackgroundConfig';
+
+interface PlanOverviewSlideProps {
+ isAdmin: boolean;
+ licenseNotice?: LicenseNotice;
+ loginEnabled?: boolean;
+}
+
+const DEFAULT_FREE_TIER_LIMIT = 5;
+
+const PlanOverviewTitle: React.FC<{ isAdmin: boolean }> = ({ isAdmin }) => {
+ const { t } = useTranslation();
+ return (
+ <>
+ {isAdmin
+ ? t('onboarding.planOverview.adminTitle', 'Admin Overview')
+ : t('onboarding.planOverview.userTitle', 'Plan Overview')}
+
+ );
+};
+
+const AdminOverviewBody: React.FC<{ freeTierLimit: number; loginEnabled: boolean }> = ({
+ freeTierLimit,
+ loginEnabled,
+}) => {
+ const adminBodyKey = loginEnabled
+ ? 'onboarding.planOverview.adminBodyLoginEnabled'
+ : 'onboarding.planOverview.adminBodyLoginDisabled';
+
+ const defaultValue = loginEnabled
+ ? 'As an admin, you can manage users, configure settings, and monitor server health. The first {{freeTierLimit}} people on your server get to use Stirling free of charge.'
+ : 'Once you enable login mode, you can manage users, configure settings, and monitor server health. The first {{freeTierLimit}} people on your server get to use Stirling free of charge.';
+
+ return (
+ }}
+ defaults={defaultValue}
+ />
+ );
+};
+
+const UserOverviewBody: React.FC = () => {
+ const { t } = useTranslation();
+ return (
+
+ {t(
+ 'onboarding.planOverview.userBody',
+ "Invite teammates, assign roles, and keep your documents organized in one secure workspace. Enable login mode whenever you're ready to grow beyond solo use.",
+ )}
+
+ );
+};
+
+const PlanOverviewBody: React.FC<{ isAdmin: boolean; freeTierLimit: number; loginEnabled: boolean }> = ({
+ isAdmin,
+ freeTierLimit,
+ loginEnabled,
+}) =>
+ isAdmin ? : ;
+
+export default function PlanOverviewSlide({
+ isAdmin,
+ licenseNotice,
+ loginEnabled = false,
+}: PlanOverviewSlideProps): SlideConfig {
+ const freeTierLimit = licenseNotice?.freeTierLimit ?? DEFAULT_FREE_TIER_LIMIT;
+
+ return {
+ key: isAdmin ? 'admin-overview' : 'plan-overview',
+ title: ,
+ body: ,
+ background: {
+ gradientStops: isAdmin ? ['#4F46E5', '#0EA5E9'] : ['#F97316', '#EF4444'],
+ circles: UNIFIED_CIRCLE_CONFIG,
+ },
+ };
+}
+
diff --git a/frontend/src/core/components/onboarding/slides/SecurityCheckSlide.tsx b/frontend/src/core/components/onboarding/slides/SecurityCheckSlide.tsx
new file mode 100644
index 000000000..0efb2f591
--- /dev/null
+++ b/frontend/src/core/components/onboarding/slides/SecurityCheckSlide.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { Select } from '@mantine/core';
+import { SlideConfig } from '@app/types/types';
+import LocalIcon from '@app/components/shared/LocalIcon';
+import { UNIFIED_CIRCLE_CONFIG } from '@app/components/onboarding/slides/unifiedBackgroundConfig';
+import i18n from '@app/i18n';
+import styles from '@app/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css';
+
+interface SecurityCheckSlideProps {
+ selectedRole: 'admin' | 'user' | null;
+ onRoleSelect: (role: 'admin' | 'user' | null) => void;
+}
+
+export default function SecurityCheckSlide({
+ selectedRole,
+ onRoleSelect,
+}: SecurityCheckSlideProps): SlideConfig {
+ return {
+ key: 'security-check',
+ title: 'Security Check',
+ body: (
+
+
+
+
+ {i18n.t('onboarding.securityCheck.message', 'The application has undergone significant changes recently. Your server admin\'s attention may be required. Please confirm your role to continue.')}
+
+
+
+
+ ),
+ background: {
+ gradientStops: ['#5B21B6', '#2563EB'],
+ circles: UNIFIED_CIRCLE_CONFIG,
+ },
+ };
+}
+
+
diff --git a/frontend/src/core/components/onboarding/slides/ServerLicenseSlide.tsx b/frontend/src/core/components/onboarding/slides/ServerLicenseSlide.tsx
new file mode 100644
index 000000000..f118d2ac0
--- /dev/null
+++ b/frontend/src/core/components/onboarding/slides/ServerLicenseSlide.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { Trans } from 'react-i18next';
+import { SlideConfig, LicenseNotice } from '@app/types/types';
+import { UNIFIED_CIRCLE_CONFIG } from '@app/components/onboarding/slides/unifiedBackgroundConfig';
+import i18n from '@app/i18n';
+
+interface ServerLicenseSlideProps {
+ licenseNotice?: LicenseNotice;
+}
+
+const DEFAULT_FREE_TIER_LIMIT = 5;
+
+export default function ServerLicenseSlide({ licenseNotice }: ServerLicenseSlideProps = {}): SlideConfig {
+ const freeTierLimit = licenseNotice?.freeTierLimit ?? DEFAULT_FREE_TIER_LIMIT;
+ const totalUsers = licenseNotice?.totalUsers ?? null;
+ const isOverLimit = licenseNotice?.isOverLimit ?? false;
+ const formattedTotalUsers = totalUsers != null ? totalUsers.toLocaleString() : null;
+ const overLimitUserCopy = formattedTotalUsers ?? `more than ${freeTierLimit}`;
+ const title = isOverLimit
+ ? i18n.t('onboarding.serverLicense.overLimitTitle', 'Server License Needed')
+ : i18n.t('onboarding.serverLicense.freeTitle', 'Server License');
+ const key = isOverLimit ? 'server-license-over-limit' : 'server-license';
+
+ const overLimitBody = (
+ ,
+ }}
+ defaults="Our licensing permits up to {{freeTierLimit}} users for free per server. You have {{overLimitUserCopy}} Stirling users. To continue uninterrupted, upgrade to the Stirling Server plan - unlimited seats, PDF text editing, and full admin control for $99/server/mo."
+ />
+ );
+
+ const freeBody = (
+ ,
+ }}
+ defaults="Our Open-Core licensing permits up to {{freeTierLimit}} users for free per server. To scale uninterrupted and get early access to our new PDF text editing tool, we recommend the Stirling Server plan - full editing and unlimited seats for $99/server/mo."
+ />
+ );
+
+ const body = isOverLimit ? overLimitBody : freeBody;
+
+ return {
+ key,
+ title,
+ body,
+ background: {
+ gradientStops: isOverLimit ? ['#F472B6', '#8B5CF6'] : ['#F97316', '#F59E0B'],
+ circles: UNIFIED_CIRCLE_CONFIG,
+ },
+ };
+}
+
+
diff --git a/frontend/src/core/components/onboarding/slides/WelcomeSlide.tsx b/frontend/src/core/components/onboarding/slides/WelcomeSlide.tsx
new file mode 100644
index 000000000..eb9160eba
--- /dev/null
+++ b/frontend/src/core/components/onboarding/slides/WelcomeSlide.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { useTranslation, Trans } from 'react-i18next';
+import { SlideConfig } from '@app/types/types';
+import styles from '@app/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css';
+import { UNIFIED_CIRCLE_CONFIG } from '@app/components/onboarding/slides/unifiedBackgroundConfig';
+
+function WelcomeSlideTitle() {
+ const { t } = useTranslation();
+
+ return (
+
+ {t('onboarding.welcomeSlide.title', 'Welcome to Stirling')}
+ V2
+
+ );
+}
+
+const WelcomeSlideBody = () => (
+
+ }}
+ defaults="Stirling PDF is now ready for teams of all sizes. This update includes a new layout, powerful new admin capabilities, and our most requested feature - Edit Text."
+ />
+
+);
+
+export default function WelcomeSlide(): SlideConfig {
+ return {
+ key: 'welcome',
+ title: ,
+ body: ,
+ background: {
+ gradientStops: ['#7C3AED', '#EC4899'],
+ circles: UNIFIED_CIRCLE_CONFIG,
+ },
+ };
+}
+
diff --git a/frontend/src/core/components/onboarding/slides/unifiedBackgroundConfig.ts b/frontend/src/core/components/onboarding/slides/unifiedBackgroundConfig.ts
new file mode 100644
index 000000000..8ba3c0fbb
--- /dev/null
+++ b/frontend/src/core/components/onboarding/slides/unifiedBackgroundConfig.ts
@@ -0,0 +1,30 @@
+import { AnimatedCircleConfig } from '@app/types/types';
+
+/**
+ * Unified circle background configuration used across all onboarding slides.
+ * Only gradient colors change between slides, creating smooth transitions.
+ */
+export const UNIFIED_CIRCLE_CONFIG: AnimatedCircleConfig[] = [
+ {
+ position: 'bottom-left',
+ size: 270,
+ color: 'rgba(255, 255, 255, 0.25)',
+ opacity: 0.9,
+ amplitude: 24,
+ duration: 4.5,
+ offsetX: 18,
+ offsetY: 14,
+ },
+ {
+ position: 'top-right',
+ size: 300,
+ color: 'rgba(255, 255, 255, 0.2)',
+ opacity: 0.9,
+ amplitude: 28,
+ duration: 4.5,
+ delay: 0.5,
+ offsetX: 24,
+ offsetY: 18,
+ },
+];
+
diff --git a/frontend/src/core/components/onboarding/tourGlow.ts b/frontend/src/core/components/onboarding/tourGlow.ts
new file mode 100644
index 000000000..a043f7c01
--- /dev/null
+++ b/frontend/src/core/components/onboarding/tourGlow.ts
@@ -0,0 +1,18 @@
+export const addGlowToElements = (selectors: string[]) => {
+ selectors.forEach((selector) => {
+ const element = document.querySelector(selector);
+ if (element) {
+ if (selector === '[data-tour="settings-content-area"]') {
+ element.classList.add('tour-content-glow');
+ } else {
+ element.classList.add('tour-nav-glow');
+ }
+ }
+ });
+};
+
+export const removeAllGlows = () => {
+ document.querySelectorAll('.tour-content-glow').forEach((el) => el.classList.remove('tour-content-glow'));
+ document.querySelectorAll('.tour-nav-glow').forEach((el) => el.classList.remove('tour-nav-glow'));
+};
+
diff --git a/frontend/src/core/components/onboarding/tourSteps.ts b/frontend/src/core/components/onboarding/tourSteps.ts
new file mode 100644
index 000000000..a3f7b6cfc
--- /dev/null
+++ b/frontend/src/core/components/onboarding/tourSteps.ts
@@ -0,0 +1,33 @@
+export enum TourStep {
+ ALL_TOOLS,
+ SELECT_CROP_TOOL,
+ TOOL_INTERFACE,
+ FILES_BUTTON,
+ FILE_SOURCES,
+ WORKBENCH,
+ VIEW_SWITCHER,
+ VIEWER,
+ PAGE_EDITOR,
+ ACTIVE_FILES,
+ FILE_CHECKBOX,
+ SELECT_CONTROLS,
+ CROP_SETTINGS,
+ RUN_BUTTON,
+ RESULTS,
+ FILE_REPLACEMENT,
+ PIN_BUTTON,
+ WRAP_UP,
+}
+
+export enum AdminTourStep {
+ WELCOME,
+ CONFIG_BUTTON,
+ SETTINGS_OVERVIEW,
+ TEAMS_AND_USERS,
+ SYSTEM_CUSTOMIZATION,
+ DATABASE_SECTION,
+ CONNECTIONS_SECTION,
+ ADMIN_TOOLS,
+ WRAP_UP,
+}
+
diff --git a/frontend/src/core/components/onboarding/userStepsConfig.ts b/frontend/src/core/components/onboarding/userStepsConfig.ts
new file mode 100644
index 000000000..bd914210f
--- /dev/null
+++ b/frontend/src/core/components/onboarding/userStepsConfig.ts
@@ -0,0 +1,173 @@
+import type { StepType } from '@reactour/tour';
+import type { TFunction } from 'i18next';
+import { TourStep } from '@app/components/onboarding/tourSteps';
+
+interface UserStepActions {
+ saveWorkbenchState: () => void;
+ closeFilesModal: () => void;
+ backToAllTools: () => void;
+ selectCropTool: () => void;
+ loadSampleFile: () => void;
+ switchToViewer: () => void;
+ switchToPageEditor: () => void;
+ switchToActiveFiles: () => void;
+ selectFirstFile: () => void;
+ pinFile: () => void;
+ modifyCropSettings: () => void;
+ executeTool: () => void;
+ openFilesModal: () => void;
+}
+
+interface CreateUserStepsConfigArgs {
+ t: TFunction;
+ actions: UserStepActions;
+}
+
+export function createUserStepsConfig({ t, actions }: CreateUserStepsConfigArgs): Record {
+ const {
+ saveWorkbenchState,
+ closeFilesModal,
+ backToAllTools,
+ selectCropTool,
+ loadSampleFile,
+ switchToViewer,
+ switchToPageEditor,
+ switchToActiveFiles,
+ selectFirstFile,
+ pinFile,
+ modifyCropSettings,
+ executeTool,
+ openFilesModal,
+ } = actions;
+
+ return {
+ [TourStep.ALL_TOOLS]: {
+ selector: '[data-tour="tool-panel"]',
+ content: t('onboarding.allTools', 'This is the Tools panel, where you can browse and select from all available PDF tools.'),
+ position: 'center',
+ padding: 0,
+ action: () => {
+ saveWorkbenchState();
+ closeFilesModal();
+ backToAllTools();
+ },
+ },
+ [TourStep.SELECT_CROP_TOOL]: {
+ selector: '[data-tour="tool-button-crop"]',
+ content: t('onboarding.selectCropTool', "Let's select the Crop tool to demonstrate how to use one of the tools."),
+ position: 'right',
+ padding: 0,
+ actionAfter: () => selectCropTool(),
+ },
+ [TourStep.TOOL_INTERFACE]: {
+ selector: '[data-tour="tool-panel"]',
+ content: t('onboarding.toolInterface', "This is the Crop tool interface. As you can see, there's not much there because we haven't added any PDF files to work with yet."),
+ position: 'center',
+ padding: 0,
+ },
+ [TourStep.FILES_BUTTON]: {
+ selector: '[data-tour="files-button"]',
+ content: t('onboarding.filesButton', "The Files button on the Quick Access bar allows you to upload PDFs to use the tools on."),
+ position: 'right',
+ padding: 10,
+ action: () => openFilesModal(),
+ },
+ [TourStep.FILE_SOURCES]: {
+ selector: '[data-tour="file-sources"]',
+ content: t('onboarding.fileSources', "You can upload new files or access recent files from here. For the tour, we'll just use a sample file."),
+ position: 'right',
+ padding: 0,
+ actionAfter: () => {
+ loadSampleFile();
+ closeFilesModal();
+ },
+ },
+ [TourStep.WORKBENCH]: {
+ selector: '[data-tour="workbench"]',
+ content: t('onboarding.workbench', 'This is the Workbench - the main area where you view and edit your PDFs.'),
+ position: 'center',
+ padding: 0,
+ },
+ [TourStep.VIEW_SWITCHER]: {
+ selector: '[data-tour="view-switcher"]',
+ content: t('onboarding.viewSwitcher', 'Use these controls to select how you want to view your PDFs.'),
+ position: 'bottom',
+ padding: 0,
+ },
+ [TourStep.VIEWER]: {
+ selector: '[data-tour="workbench"]',
+ content: t('onboarding.viewer', "The Viewer lets you read and annotate your PDFs."),
+ position: 'center',
+ padding: 0,
+ action: () => switchToViewer(),
+ },
+ [TourStep.PAGE_EDITOR]: {
+ selector: '[data-tour="workbench"]',
+ content: t('onboarding.pageEditor', "The Page Editor allows you to do various operations on the pages within your PDFs, such as reordering, rotating and deleting."),
+ position: 'center',
+ padding: 0,
+ action: () => switchToPageEditor(),
+ },
+ [TourStep.ACTIVE_FILES]: {
+ selector: '[data-tour="workbench"]',
+ content: t('onboarding.activeFiles', "The Active Files view shows all of the PDFs you have loaded into the tool, and allows you to select which ones to process."),
+ position: 'center',
+ padding: 0,
+ action: () => switchToActiveFiles(),
+ },
+ [TourStep.FILE_CHECKBOX]: {
+ selector: '[data-tour="file-card-checkbox"]',
+ content: t('onboarding.fileCheckbox', "Clicking one of the files selects it for processing. You can select multiple files for batch operations."),
+ position: 'top',
+ padding: 10,
+ },
+ [TourStep.SELECT_CONTROLS]: {
+ selector: '[data-tour="right-rail-controls"]',
+ highlightedSelectors: ['[data-tour="right-rail-controls"]', '[data-tour="right-rail-settings"]'],
+ content: t('onboarding.selectControls', "The Right Rail contains buttons to quickly select/deselect all of your active PDFs, along with buttons to change the app's theme or language."),
+ position: 'left',
+ padding: 5,
+ action: () => selectFirstFile(),
+ },
+ [TourStep.CROP_SETTINGS]: {
+ selector: '[data-tour="crop-settings"]',
+ content: t('onboarding.cropSettings', "Now that we've selected the file we want crop, we can configure the Crop tool to choose the area that we want to crop the PDF to."),
+ position: 'left',
+ padding: 10,
+ action: () => modifyCropSettings(),
+ },
+ [TourStep.RUN_BUTTON]: {
+ selector: '[data-tour="run-button"]',
+ content: t('onboarding.runButton', "Once the tool has been configured, this button allows you to run the tool on all the selected PDFs."),
+ position: 'top',
+ padding: 10,
+ actionAfter: () => executeTool(),
+ },
+ [TourStep.RESULTS]: {
+ selector: '[data-tour="tool-panel"]',
+ content: t('onboarding.results', "After the tool has finished running, the Review step will show a preview of the results in this panel, and allow you to undo the operation or download the file. "),
+ position: 'center',
+ padding: 0,
+ },
+ [TourStep.FILE_REPLACEMENT]: {
+ selector: '[data-tour="file-card-checkbox"]',
+ content: t('onboarding.fileReplacement', "The modified file will replace the original file in the Workbench automatically, allowing you to easily run it through more tools."),
+ position: 'left',
+ padding: 10,
+ },
+ [TourStep.PIN_BUTTON]: {
+ selector: '[data-tour="file-card-pin"]',
+ content: t('onboarding.pinButton', "You can use the Pin button if you'd rather your files stay active after running tools on them."),
+ position: 'left',
+ padding: 10,
+ action: () => pinFile(),
+ },
+ [TourStep.WRAP_UP]: {
+ selector: '[data-tour="help-button"]',
+ content: t('onboarding.wrapUp', "You're all set! You've learnt about the main areas of the app and how to use them. Click the Help button whenever you like to see this tour again."),
+ position: 'right',
+ padding: 10,
+ },
+ };
+}
+
diff --git a/frontend/src/core/components/shared/AdminAnalyticsChoiceModal.tsx b/frontend/src/core/components/shared/AdminAnalyticsChoiceModal.tsx
index 7a8974a3a..f72d28452 100644
--- a/frontend/src/core/components/shared/AdminAnalyticsChoiceModal.tsx
+++ b/frontend/src/core/components/shared/AdminAnalyticsChoiceModal.tsx
@@ -1,4 +1,13 @@
-import { Modal, Stack, Button, Text, Title, Anchor } from '@mantine/core';
+import {
+ Modal,
+ Stack,
+ Button,
+ Text,
+ Title,
+ Anchor,
+ useMantineTheme,
+ useComputedColorScheme,
+} from '@mantine/core';
import { useTranslation } from 'react-i18next';
import { useState } from 'react';
import { Z_ANALYTICS_MODAL } from '@app/styles/zIndex';
@@ -15,6 +24,21 @@ export default function AdminAnalyticsChoiceModal({ opened, onClose }: AdminAnal
const { refetch } = useAppConfig();
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
+ const theme = useMantineTheme();
+ const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true });
+ const isDark = computedColorScheme === 'dark';
+ const privacyHighlightStyles = {
+ color: isDark ? '#FFFFFF' : theme.colors.blue[7],
+ padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
+ borderRadius: theme.radius.md,
+ fontWeight: 700,
+ textAlign: 'center' as const,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: theme.spacing.xs,
+ letterSpacing: 0.3,
+ };
const handleChoice = async (enableAnalytics: boolean) => {
setLoading(true);
@@ -60,7 +84,10 @@ export default function AdminAnalyticsChoiceModal({ opened, onClose }: AdminAnal
{t('analytics.title', 'Do you want make Stirling PDF better?')}
- {t('analytics.paragraph1', 'Stirling PDF has opt in analytics to help us improve the product. We do not track any personal information or file contents.')}
+ {t('analytics.paragraph1', 'Stirling PDF has opt in analytics to help us improve the product.')}
+
+
+ • {t('analytics.privacyAssurance', 'We do not track any personal information or the contents of your files.')} •
diff --git a/frontend/src/core/components/shared/AppConfigModal.tsx b/frontend/src/core/components/shared/AppConfigModal.tsx
index e7ddf0f0e..fe351c0ae 100644
--- a/frontend/src/core/components/shared/AppConfigModal.tsx
+++ b/frontend/src/core/components/shared/AppConfigModal.tsx
@@ -1,5 +1,5 @@
import React, { useMemo, useState, useEffect } from 'react';
-import { Modal, Text, ActionIcon, Tooltip } from '@mantine/core';
+import { Modal, Text, ActionIcon, Tooltip, Group } from '@mantine/core';
import { useNavigate, useLocation } from 'react-router-dom';
import LocalIcon from '@app/components/shared/LocalIcon';
import { createConfigNavSections } from '@app/components/shared/config/configNavSections';
@@ -8,6 +8,7 @@ import { useAppConfig } from '@app/contexts/AppConfigContext';
import '@app/components/shared/AppConfigModal.css';
import { useIsMobile } from '@app/hooks/useIsMobile';
import { Z_INDEX_OVER_FULLSCREEN_SURFACE, Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
+import { useLicenseAlert } from '@app/hooks/useLicenseAlert';
interface AppConfigModalProps {
opened: boolean;
@@ -20,6 +21,7 @@ const AppConfigModal: React.FC = ({ opened, onClose }) => {
const navigate = useNavigate();
const location = useLocation();
const { config } = useAppConfig();
+ const licenseAlert = useLicenseAlert();
// Extract section from URL path (e.g., /settings/people -> people)
const getSectionFromPath = (pathname: string): NavKey | null => {
@@ -64,8 +66,8 @@ const AppConfigModal: React.FC = ({ opened, onClose }) => {
headerBorder: 'var(--modal-header-border)',
}), []);
- // Get isAdmin, runningEE, and loginEnabled from app config
- const isAdmin = config?.isAdmin ?? false;
+ // Get isAdmin and runningEE from app config
+ const isAdmin = true // config?.isAdmin ?? false;
const runningEE = config?.runningEE ?? false;
const loginEnabled = config?.enableLogin ?? false;
@@ -138,6 +140,10 @@ const AppConfigModal: React.FC = ({ opened, onClose }) => {
const isDisabled = item.disabled ?? false;
const color = isActive ? colors.navItemActive : colors.navItem;
const iconSize = isMobile ? 28 : 18;
+ const showPlanWarning =
+ item.key === 'adminPlan' &&
+ licenseAlert.active &&
+ licenseAlert.audience === 'admin';
const navItemContent = (
+ 
+ )}
+