fix(file-manager,esigner): display user-friendly file type labels (DOCX, XLSX, PDF) instead of raw MIME

- Add getMimeTypeDisplayLabel() in both apps: map long MIME types to short
  labels (XLSX, DOCX, PPTX, PDF) with fallback for unknown types
- File Manager files/[id]: use for Type in subtitle and Details
- eSigner files/[id]: use for Type in preview area and File Information

Author: coodos

platforms/esigner/src/lib/utils/mime-type.ts

@@ -0,0 +1,18 @@
+/**
+ * Returns a short, user-friendly label for a MIME type (e.g. DOCX, XLSX, PDF)
+ * instead of long strings like application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
+ */
+export function getMimeTypeDisplayLabel(mimeType: string): string {
+	if (!mimeType || typeof mimeType !== "string") return mimeType ?? "";
+	const m = mimeType.toLowerCase();
+	// Office / common document types
+	if (m.includes("spreadsheetml.sheet") || m.includes("ms-excel")) return "XLSX";
+	if (m.includes("wordprocessingml.document") || m.includes("msword")) return "DOCX";
+	if (m.includes("presentationml") || m.includes("ms-powerpoint")) return "PPTX";
+	if (m === "application/pdf") return "PDF";
+	// Generic fallback: last meaningful part
+	const parts = m.split(/[/+]/);
+	const last = parts[parts.length - 1];
+	if (last && last !== "application" && last.length <= 20) return last.toUpperCase();
+	return mimeType;
+}

platforms/esigner/src/routes/(protected)/files/[id]/+page.svelte

@@ -9,6 +9,7 @@
 	import { PUBLIC_ESIGNER_BASE_URL } from '$env/static/public';
 	import { toast } from '$lib/stores/toast';
 	import { isMobileDevice, getDeepLinkUrl } from '$lib/utils/mobile-detection';
+	import { getMimeTypeDisplayLabel } from '$lib/utils/mime-type';
 
 	let file = $state<any>(null);
 	let invitations = $state<any[]>([]);
@@ -376,7 +377,7 @@
 						<div class="bg-white rounded-lg shadow-lg p-6 sm:p-12 text-center max-w-md">
 							<div class="text-4xl sm:text-6xl mb-4">📄</div>
 							<p class="text-gray-600 mb-2">Preview not available for this file type</p>
-							<p class="text-sm text-gray-500">{file.mimeType}</p>
+							<p class="text-sm text-gray-500">{getMimeTypeDisplayLabel(file.mimeType || '')}</p>
 							<button
 								onclick={() => showDownloadModal = true}
 								class="inline-block mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
@@ -449,7 +450,7 @@
 							</div>
 							<div class="flex justify-between gap-2">
 								<span class="text-gray-600 flex-shrink-0">Type:</span>
-								<span class="text-gray-900 font-medium break-all text-right text-xs sm:text-sm">{file.mimeType}</span>
+								<span class="text-gray-900 font-medium break-all text-right text-xs sm:text-sm">{getMimeTypeDisplayLabel(file.mimeType || '')}</span>
 							</div>
 							<div class="flex justify-between gap-2">
 								<span class="text-gray-600 flex-shrink-0">Created:</span>

platforms/file-manager/src/lib/utils/mime-type.ts

@@ -0,0 +1,18 @@
+/**
+ * Returns a short, user-friendly label for a MIME type (e.g. DOCX, XLSX, PDF)
+ * instead of long strings like application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
+ */
+export function getMimeTypeDisplayLabel(mimeType: string): string {
+	if (!mimeType || typeof mimeType !== "string") return mimeType ?? "";
+	const m = mimeType.toLowerCase();
+	// Office / common document types
+	if (m.includes("spreadsheetml.sheet") || m.includes("ms-excel")) return "XLSX";
+	if (m.includes("wordprocessingml.document") || m.includes("msword")) return "DOCX";
+	if (m.includes("presentationml") || m.includes("ms-powerpoint")) return "PPTX";
+	if (m === "application/pdf") return "PDF";
+	// Generic fallback: last meaningful part (e.g. "sheet", "pdf")
+	const parts = m.split(/[/+]/);
+	const last = parts[parts.length - 1];
+	if (last && last !== "application" && last.length <= 20) return last.toUpperCase();
+	return mimeType;
+}

platforms/file-manager/src/routes/(protected)/files/[id]/+page.svelte

@@ -4,6 +4,7 @@
 	import { goto } from '$app/navigation';
 	import { isAuthenticated } from '$lib/stores/auth';
 	import { apiClient } from '$lib/utils/axios';
+	import { getMimeTypeDisplayLabel } from '$lib/utils/mime-type';
 	import { PUBLIC_FILE_MANAGER_BASE_URL } from '$env/static/public';
 	import { toast } from '$lib/stores/toast';
 	import { fetchFileAccess, grantFileAccess, revokeFileAccess, fileAccess } from '$lib/stores/access';
@@ -367,7 +368,7 @@
 			<div class="w-full lg:w-[70%] bg-white rounded-lg shadow-sm border border-gray-200 p-4 sm:p-6">
 				<div class="mb-4">
 					<h1 class="text-xl sm:text-2xl font-bold text-gray-900 mb-2">{file.displayName || file.name}</h1>
-					<p class="text-xs sm:text-sm text-gray-500">Size: {formatFileSize(file.size)} • Type: {file.mimeType}</p>
+					<p class="text-xs sm:text-sm text-gray-500">Size: {formatFileSize(file.size)} • Type: {getMimeTypeDisplayLabel(file.mimeType)}</p>
 				</div>
 
 				{#if previewUrl}
@@ -417,7 +418,7 @@
 						</div>
 						<div>
 							<dt class="text-gray-500 font-medium">Type</dt>
-							<dd class="text-gray-900 mt-1">{file.mimeType}</dd>
+							<dd class="text-gray-900 mt-1">{getMimeTypeDisplayLabel(file.mimeType)}</dd>
 						</div>
 						<div>
 							<dt class="text-gray-500 font-medium">Created</dt>