feat: add full-width dropzone state and tool branding to tool page

apps/web/src/components/common/tool-dropzone.tsx

@@ -0,0 +1,85 @@
+import type { Tool } from "@snapotter/shared";
+import { FileImage, Lock } from "lucide-react";
+import { useMemo } from "react";
+import { useTranslation } from "@/contexts/i18n-context";
+import { format } from "@/lib/format";
+import { ICON_MAP } from "@/lib/icon-map";
+import { MULTI_FILE_TOOLS } from "@/lib/tool-display-modes";
+import { getToolDescription, getToolName } from "@/lib/tool-i18n";
+import { Dropzone } from "./dropzone";
+
+interface ToolDropzoneProps {
+  tool: Tool;
+  accept?: string;
+  fileFilter?: (file: File) => boolean;
+  multiple?: boolean;
+  onFiles: (files: File[]) => void;
+  onUrlImport?: (file: File) => void;
+}
+
+const FORMATS_LIMIT = 8;
+
+export function ToolDropzone({
+  tool,
+  accept,
+  fileFilter,
+  multiple,
+  onFiles,
+  onUrlImport,
+}: ToolDropzoneProps) {
+  const { t } = useTranslation();
+
+  const IconComponent =
+    (ICON_MAP[tool.icon] as React.ComponentType<{ className?: string }>) ?? FileImage;
+
+  const isMultiFile = MULTI_FILE_TOOLS.has(tool.id);
+  const resolvedMultiple = multiple ?? isMultiFile;
+
+  const formatsDisplay = useMemo(() => {
+    const inputs = tool.acceptedInputs;
+    if (!inputs || inputs.length === 0) return null;
+    const formatted = inputs.map((ext) => ext.replace(/^\./, "").toUpperCase());
+    if (formatted.length <= FORMATS_LIMIT) {
+      return formatted.join(", ");
+    }
+    const visible = formatted.slice(0, FORMATS_LIMIT).join(", ");
+    return `${visible} ${format(t.toolPage.andMore, { count: formatted.length - FORMATS_LIMIT })}`;
+  }, [tool.acceptedInputs, t.toolPage.andMore]);
+
+  return (
+    <div className="flex flex-col items-center gap-6 w-full max-w-lg px-4 py-8">
+      {/* Tool branding */}
+      <div className="flex flex-col items-center gap-3 text-center">
+        <div className="p-3 rounded-xl bg-primary/10">
+          <IconComponent className="h-8 w-8 text-primary" />
+        </div>
+        <h1 className="text-xl font-semibold text-foreground">
+          {getToolName(t, tool.id, tool.name)}
+        </h1>
+        <p className="text-sm text-muted-foreground max-w-sm">
+          {getToolDescription(t, tool.id, tool.description)}
+        </p>
+      </div>
+
+      {/* Dropzone */}
+      <Dropzone
+        onFiles={onFiles}
+        onUrlImport={onUrlImport}
+        accept={accept}
+        multiple={resolvedMultiple}
+        fileFilter={fileFilter}
+      />
+
+      {/* Accepted formats */}
+      {formatsDisplay && (
+        <p className="text-xs text-muted-foreground text-center">{formatsDisplay}</p>
+      )}
+
+      {/* Privacy note */}
+      <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
+        <Lock className="h-3 w-3 shrink-0" />
+        {t.toolPage.privacyNote}
+      </p>
+    </div>
+  );
+}

apps/web/src/pages/tool-page.tsx

@@ -17,6 +17,7 @@ import { type BgPreviewState, ImageViewer } from "@/components/common/image-view
 import { ReviewPanel } from "@/components/common/review-panel";
 import { SideBySideComparison } from "@/components/common/side-by-side-comparison";
 import { ThumbnailStrip } from "@/components/common/thumbnail-strip";
+import { ToolDropzone } from "@/components/common/tool-dropzone";
 import { FeatureInstallPrompt } from "@/components/features/feature-install-prompt";
 import { AppLayout } from "@/components/layout/app-layout";
 import { CropCanvas } from "@/components/tools/crop-canvas";
@@ -26,8 +27,8 @@ import type { PreviewTransform } from "@/components/tools/rotate-settings";
 import { useTranslation } from "@/contexts/i18n-context";
 import { useAuth } from "@/hooks/use-auth";
 import { useMobile } from "@/hooks/use-mobile";
-import { recordRecentTool } from "@/hooks/use-recent-tools";
 import { usePageTitle } from "@/hooks/use-page-title";
+import { recordRecentTool } from "@/hooks/use-recent-tools";
 import { formatFileSize } from "@/lib/download";
 import { format } from "@/lib/format";
 import { ICON_MAP } from "@/lib/icon-map";
@@ -41,6 +42,7 @@ import { useFileStore } from "@/stores/file-store";
 import { useHtmlToImageStore } from "@/stores/html-to-image-store";
 import { usePdfToImageStore } from "@/stores/pdf-to-image-store";
 import { useQrStore } from "@/stores/qr-store";
+import { useSettingsStore } from "@/stores/settings-store";
 import { useSplitStore } from "@/stores/split-store";
 
 const MediaPlayerView = lazy(() =>
@@ -183,6 +185,7 @@ export function ToolPage() {
   usePageTitle(tool ? getToolName(t, tool.id, tool.name) : undefined);
   const { hasPermission } = useAuth();
   const isAdmin = hasPermission("settings:write");
+  const disabledTools = useSettingsStore((s) => s.disabledTools);
 
   const breadcrumb = useMemo(() => {
     if (!tool) return undefined;
@@ -382,6 +385,22 @@ export function ToolPage() {
     URL.revokeObjectURL(url);
   }, [batchZipBlob, batchZipFilename]);
 
+  if (toolId && TOOLS.some((tt) => tt.id === toolId) && disabledTools.includes(toolId)) {
+    return (
+      <AppLayout>
+        <div className="flex flex-col items-center justify-center h-full gap-4 text-muted-foreground">
+          <p className="text-lg font-medium">{t.toolPage.disabledByAdmin}</p>
+          <Link
+            to="/"
+            className="px-4 py-2 rounded-lg bg-primary text-primary-foreground text-sm font-medium"
+          >
+            {t.toolPage.browseOtherTools}
+          </Link>
+        </div>
+      </AppLayout>
+    );
+  }
+
   if (!tool || !registryEntry) {
     return (
       <AppLayout>
@@ -410,13 +429,15 @@ export function ToolPage() {
 
   if (isAiTool && !toolInstalled && featureBundle) {
     return (
-      <AppLayout>
+      <AppLayout breadcrumb={breadcrumb}>
+        <div className="flex-1 flex items-center justify-center overflow-y-auto bg-muted/20">
           <FeatureInstallPrompt
             bundle={featureBundle}
             isAdmin={isAdmin}
             toolName={tool?.name}
             toolDescription={tool?.description}
           />
+        </div>
       </AppLayout>
     );
   }
@@ -849,6 +870,24 @@ export function ToolPage() {
 
   // Mobile layout: full-height image area with BottomSheet for settings
   if (isMobile) {
+    // Full-width dropzone when no file is loaded (non-generator tools)
+    if (!hasFile && !isNoDropzone) {
+      return (
+        <AppLayout breadcrumb={breadcrumb}>
+          <div className="flex-1 flex items-center justify-center overflow-y-auto bg-muted/20">
+            <ToolDropzone
+              tool={tool}
+              accept={toolAccept}
+              fileFilter={toolFileFilter}
+              multiple
+              onFiles={handleFiles}
+              onUrlImport={handleUrlImport}
+            />
+          </div>
+        </AppLayout>
+      );
+    }
+
     return (
       <AppLayout breadcrumb={breadcrumb}>
         <div className="flex flex-col w-full h-full">
@@ -905,6 +944,24 @@ export function ToolPage() {
     );
   }
 
+  // Desktop: full-width dropzone when no file is loaded (non-generator tools)
+  if (!hasFile && !isNoDropzone) {
+    return (
+      <AppLayout breadcrumb={breadcrumb}>
+        <div className="flex-1 flex items-center justify-center overflow-y-auto bg-muted/20">
+          <ToolDropzone
+            tool={tool}
+            accept={toolAccept}
+            fileFilter={toolFileFilter}
+            multiple
+            onFiles={handleFiles}
+            onUrlImport={handleUrlImport}
+          />
+        </div>
+      </AppLayout>
+    );
+  }
+
   // Desktop layout: side-by-side
   return (
     <AppLayout breadcrumb={breadcrumb}>

packages/shared/src/i18n/ar.ts

@@ -2441,6 +2441,10 @@ export const ar: TranslationKeys = {
     downloadAllZip: "تحميل الكل (ZIP)",
     hideSettings: "إخفاء الإعدادات",
     imageArea: "منطقة الصورة",
+    disabledByAdmin: "This tool has been disabled by your administrator",
+    browseOtherTools: "Browse other tools",
+    privacyNote: "Files are processed on your server and never leave your network",
+    andMore: "and {count} more",
   },
   homePage: {
     generatingPreview: "جاري إنشاء المعاينة...",

packages/shared/src/i18n/de.ts

@@ -2455,6 +2455,10 @@ export const de: TranslationKeys = {
     downloadAllZip: "Alle herunterladen (ZIP)",
     hideSettings: "Einstellungen ausblenden",
     imageArea: "Bildbereich",
+    disabledByAdmin: "This tool has been disabled by your administrator",
+    browseOtherTools: "Browse other tools",
+    privacyNote: "Files are processed on your server and never leave your network",
+    andMore: "and {count} more",
   },
   homePage: {
     generatingPreview: "Vorschau wird generiert...",

packages/shared/src/i18n/en.ts

@@ -2405,6 +2405,10 @@ export const en = {
     downloadAllZip: "Download All (ZIP)",
     hideSettings: "Hide Settings",
     imageArea: "Image area",
+    disabledByAdmin: "This tool has been disabled by your administrator",
+    browseOtherTools: "Browse other tools",
+    privacyNote: "Files are processed on your server and never leave your network",
+    andMore: "and {count} more",
   },
   homePage: {
     generatingPreview: "Generating preview...",

packages/shared/src/i18n/es.ts

@@ -2437,6 +2437,10 @@ export const es: TranslationKeys = {
     downloadAllZip: "Descargar todo (ZIP)",
     hideSettings: "Ocultar configuracion",
     imageArea: "Area de imagen",
+    disabledByAdmin: "This tool has been disabled by your administrator",
+    browseOtherTools: "Browse other tools",
+    privacyNote: "Files are processed on your server and never leave your network",
+    andMore: "and {count} more",
   },
   homePage: {
     generatingPreview: "Generando vista previa...",

packages/shared/src/i18n/fr.ts

@@ -2456,6 +2456,10 @@ export const fr: TranslationKeys = {
     downloadAllZip: "Tout telecharger (ZIP)",
     hideSettings: "Masquer les parametres",
     imageArea: "Zone d'image",
+    disabledByAdmin: "This tool has been disabled by your administrator",
+    browseOtherTools: "Browse other tools",
+    privacyNote: "Files are processed on your server and never leave your network",
+    andMore: "and {count} more",
   },
   homePage: {
     generatingPreview: "Generation de l'apercu...",

packages/shared/src/i18n/hi.ts

@@ -2438,6 +2438,10 @@ export const hi: TranslationKeys = {
     downloadAllZip: "सभी डाउनलोड करें (ZIP)",
     hideSettings: "सेटिंग्स छुपाएं",
     imageArea: "इमेज क्षेत्र",
+    disabledByAdmin: "This tool has been disabled by your administrator",
+    browseOtherTools: "Browse other tools",
+    privacyNote: "Files are processed on your server and never leave your network",
+    andMore: "and {count} more",
   },
   homePage: {
     generatingPreview: "प्रीव्यू जनरेट हो रहा है...",

packages/shared/src/i18n/id.ts

@@ -2450,6 +2450,10 @@ export const id: TranslationKeys = {
     downloadAllZip: "Unduh Semua (ZIP)",
     hideSettings: "Sembunyikan Pengaturan",
     imageArea: "Area gambar",
+    disabledByAdmin: "This tool has been disabled by your administrator",
+    browseOtherTools: "Browse other tools",
+    privacyNote: "Files are processed on your server and never leave your network",
+    andMore: "and {count} more",
   },
   homePage: {
     generatingPreview: "Membuat pratinjau...",

packages/shared/src/i18n/it.ts

@@ -2449,6 +2449,10 @@ export const it: TranslationKeys = {
     downloadAllZip: "Scarica tutto (ZIP)",
     hideSettings: "Nascondi impostazioni",
     imageArea: "Area immagine",
+    disabledByAdmin: "This tool has been disabled by your administrator",
+    browseOtherTools: "Browse other tools",
+    privacyNote: "Files are processed on your server and never leave your network",
+    andMore: "and {count} more",
   },
   homePage: {
     generatingPreview: "Generazione anteprima...",

packages/shared/src/i18n/ja.ts

@@ -2408,6 +2408,10 @@ export const ja: TranslationKeys = {
     downloadAllZip: "一括ダウンロード（ZIP）",
     hideSettings: "設定を隠す",
     imageArea: "画像エリア",
+    disabledByAdmin: "This tool has been disabled by your administrator",
+    browseOtherTools: "Browse other tools",
+    privacyNote: "Files are processed on your server and never leave your network",
+    andMore: "and {count} more",
   },
   homePage: {
     generatingPreview: "プレビューを生成中...",

packages/shared/src/i18n/ko.ts

@@ -2393,6 +2393,10 @@ export const ko: TranslationKeys = {
     downloadAllZip: "전체 다운로드 (ZIP)",
     hideSettings: "설정 숨기기",
     imageArea: "이미지 영역",
+    disabledByAdmin: "This tool has been disabled by your administrator",
+    browseOtherTools: "Browse other tools",
+    privacyNote: "Files are processed on your server and never leave your network",
+    andMore: "and {count} more",
   },
   homePage: {
     generatingPreview: "미리보기 생성 중...",

packages/shared/src/i18n/nl.ts

@@ -2452,6 +2452,10 @@ export const nl: TranslationKeys = {
     downloadAllZip: "Alles downloaden (ZIP)",
     hideSettings: "Instellingen verbergen",
     imageArea: "Afbeeldingsgebied",
+    disabledByAdmin: "This tool has been disabled by your administrator",
+    browseOtherTools: "Browse other tools",
+    privacyNote: "Files are processed on your server and never leave your network",
+    andMore: "and {count} more",
   },
   homePage: {
     generatingPreview: "Preview genereren...",

packages/shared/src/i18n/pl.ts

@@ -2453,6 +2453,10 @@ export const pl: TranslationKeys = {
     downloadAllZip: "Pobierz wszystko (ZIP)",
     hideSettings: "Ukryj ustawienia",
     imageArea: "Obszar obrazu",
+    disabledByAdmin: "This tool has been disabled by your administrator",
+    browseOtherTools: "Browse other tools",
+    privacyNote: "Files are processed on your server and never leave your network",
+    andMore: "and {count} more",
   },
   homePage: {
     generatingPreview: "Generowanie podglądu...",

packages/shared/src/i18n/pt-BR.ts

@@ -2449,6 +2449,10 @@ export const ptBR: TranslationKeys = {
     downloadAllZip: "Baixar tudo (ZIP)",
     hideSettings: "Ocultar configuracoes",
     imageArea: "Area da imagem",
+    disabledByAdmin: "This tool has been disabled by your administrator",
+    browseOtherTools: "Browse other tools",
+    privacyNote: "Files are processed on your server and never leave your network",
+    andMore: "and {count} more",
   },
   homePage: {
     generatingPreview: "Gerando visualizacao...",

packages/shared/src/i18n/ru.ts

@@ -2451,6 +2451,10 @@ export const ru: TranslationKeys = {
     downloadAllZip: "Скачать всё (ZIP)",
     hideSettings: "Скрыть настройки",
     imageArea: "Область изображения",
+    disabledByAdmin: "This tool has been disabled by your administrator",
+    browseOtherTools: "Browse other tools",
+    privacyNote: "Files are processed on your server and never leave your network",
+    andMore: "and {count} more",
   },
   homePage: {
     generatingPreview: "Генерация предпросмотра...",

packages/shared/src/i18n/sv.ts

@@ -2448,6 +2448,10 @@ export const sv: TranslationKeys = {
     downloadAllZip: "Ladda ner alla (ZIP)",
     hideSettings: "Dolj installningar",
     imageArea: "Bildomrade",
+    disabledByAdmin: "This tool has been disabled by your administrator",
+    browseOtherTools: "Browse other tools",
+    privacyNote: "Files are processed on your server and never leave your network",
+    andMore: "and {count} more",
   },
   homePage: {
     generatingPreview: "Genererar forhandsvisning...",

packages/shared/src/i18n/th.ts

@@ -2430,6 +2430,10 @@ export const th: TranslationKeys = {
     downloadAllZip: "ดาวน์โหลดทั้งหมด (ZIP)",
     hideSettings: "ซ่อนการตั้งค่า",
     imageArea: "พื้นที่ภาพ",
+    disabledByAdmin: "This tool has been disabled by your administrator",
+    browseOtherTools: "Browse other tools",
+    privacyNote: "Files are processed on your server and never leave your network",
+    andMore: "and {count} more",
   },
   homePage: {
     generatingPreview: "กำลังสร้างตัวอย่าง...",

packages/shared/src/i18n/tr.ts

@@ -2453,6 +2453,10 @@ export const tr: TranslationKeys = {
     downloadAllZip: "Tümünü İndir (ZIP)",
     hideSettings: "Ayarları Gizle",
     imageArea: "Görüntü alanı",
+    disabledByAdmin: "This tool has been disabled by your administrator",
+    browseOtherTools: "Browse other tools",
+    privacyNote: "Files are processed on your server and never leave your network",
+    andMore: "and {count} more",
   },
   homePage: {
     generatingPreview: "Önizleme oluşturuluyor...",

packages/shared/src/i18n/uk.ts

@@ -2451,6 +2451,10 @@ export const uk: TranslationKeys = {
     downloadAllZip: "Завантажити все (ZIP)",
     hideSettings: "Сховати налаштування",
     imageArea: "Область зображення",
+    disabledByAdmin: "This tool has been disabled by your administrator",
+    browseOtherTools: "Browse other tools",
+    privacyNote: "Files are processed on your server and never leave your network",
+    andMore: "and {count} more",
   },
   homePage: {
     generatingPreview: "Генерація попереднього перегляду...",

packages/shared/src/i18n/vi.ts

@@ -2450,6 +2450,10 @@ export const vi: TranslationKeys = {
     downloadAllZip: "Tải tất cả (ZIP)",
     hideSettings: "Ẩn cài đặt",
     imageArea: "Vùng ảnh",
+    disabledByAdmin: "This tool has been disabled by your administrator",
+    browseOtherTools: "Browse other tools",
+    privacyNote: "Files are processed on your server and never leave your network",
+    andMore: "and {count} more",
   },
   homePage: {
     generatingPreview: "Đang tạo bản xem trước...",

packages/shared/src/i18n/zh-CN.ts

@@ -2383,6 +2383,10 @@ export const zhCN: TranslationKeys = {
     downloadAllZip: "全部下载（ZIP）",
     hideSettings: "隐藏设置",
     imageArea: "图片区域",
+    disabledByAdmin: "This tool has been disabled by your administrator",
+    browseOtherTools: "Browse other tools",
+    privacyNote: "Files are processed on your server and never leave your network",
+    andMore: "and {count} more",
   },
   homePage: {
     generatingPreview: "正在生成预览...",

packages/shared/src/i18n/zh-TW.ts

@@ -2381,6 +2381,10 @@ export const zhTW: TranslationKeys = {
     downloadAllZip: "全部下載（ZIP）",
     hideSettings: "隱藏設定",
     imageArea: "影像區域",
+    disabledByAdmin: "This tool has been disabled by your administrator",
+    browseOtherTools: "Browse other tools",
+    privacyNote: "Files are processed on your server and never leave your network",
+    andMore: "and {count} more",
   },
   homePage: {
     generatingPreview: "正在產生預覽...",