+
+ );
+ }
+
+ // Determine preview type based on MIME type
+ const mimePrefix = mimeType?.split('/')[0];
+
+
+
+ switch (mimePrefix) {
+ case 'image':
+ return (
+
+ JSON Preview (Fallback)
+
+
+ Raw content
+
+
+
+ {previewContent || 'No content available'}
+
+
+
+ {renderPreview()}
+
+
+
+ );
+}
diff --git a/src/components/FilePreview/renderers/ImageRenderer.tsx b/src/components/FilePreview/renderers/ImageRenderer.tsx
new file mode 100644
index 0000000..314c336
--- /dev/null
+++ b/src/components/FilePreview/renderers/ImageRenderer.tsx
@@ -0,0 +1,18 @@
+import styles from '../FilePreview.module.css';
+
+interface ImageRendererProps {
+ previewUrl: string;
+ fileName: string;
+ onError: () => void;
+}
+
+export function ImageRenderer({ previewUrl, fileName, onError }: ImageRendererProps) {
+ return (
+ ⚠️
+ {error}
+ + 0 ? styles.nestedTable : styles.jsonTable} ${level > 0 ? styles.nestedTableIndented : ''}`}>
+
+ );
+ };
+
+ try {
+ const parsedJson = JSON.parse(previewContent);
+
+ let preprocessedData;
+ if (Array.isArray(parsedJson)) {
+ preprocessedData = preprocessJson(parsedJson, 'root');
+ } else if (typeof parsedJson === 'object' && parsedJson !== null) {
+ if (parsedJson.result && typeof parsedJson.result === 'string') {
+ try {
+ const parsedResult = JSON.parse(parsedJson.result);
+ parsedJson.result = parsedResult;
+ } catch (e) {
+ // If parsing fails, keep as string - it will be handled by the string processing logic
+ }
+ }
+
+ const entries = Object.entries(parsedJson);
+
+ preprocessedData = {
+ keys: entries.map(([key]) => key),
+ values: entries.map(([key, value]) => {
+ if (typeof value === 'object' && value !== null) {
+ const processed = preprocessJson(value, '');
+ return processed;
+ } else if (typeof value === 'string') {
+ try {
+ const parsedString = JSON.parse(value);
+ if (typeof parsedString === 'object' && parsedString !== null) {
+ return preprocessJson(parsedString, '');
+ } else {
+ let processedValue = value.replace(/\\n/g, ' ').replace(/\n/g, ' ');
+ const numValue = parseFloat(value);
+ if (!isNaN(numValue) && (key.toLowerCase().includes('timestamp') || key.toLowerCase().includes('time'))) {
+ processedValue = formatTimestamp(value);
+ }
+ return String(processedValue);
+ }
+ } catch (e) {
+ let processedValue = value.replace(/\\n/g, ' ').replace(/\n/g, ' ');
+ const numValue = parseFloat(value);
+ if (!isNaN(numValue) && (key.toLowerCase().includes('timestamp') || key.toLowerCase().includes('time'))) {
+ processedValue = formatTimestamp(value);
+ }
+ return String(processedValue);
+ }
+ } else {
+ let processedValue = value;
+
+ if (typeof value === 'number' && (key.toLowerCase().includes('timestamp') || key.toLowerCase().includes('time'))) {
+ processedValue = formatTimestamp(value);
+ return String(processedValue);
+ }
+
+ return processedValue;
+ }
+ }),
+ types: entries.map(([, value]) => {
+ if (typeof value === 'object' && value !== null) {
+ return Array.isArray(value) ? 'array' : 'object';
+ } else if (typeof value === 'string') {
+ try {
+ const parsedString = JSON.parse(value);
+ if (typeof parsedString === 'object' && parsedString !== null) {
+ return Array.isArray(parsedString) ? 'array' : 'object';
+ }
+ } catch (e) {
+ // Ignore parsing errors
+ }
+ return 'string';
+ }
+ return typeof value;
+ }),
+ isNested: entries.map(([, value]) => {
+ if (typeof value === 'object' && value !== null) {
+ return true;
+ } else if (typeof value === 'string') {
+ try {
+ const parsedString = JSON.parse(value);
+ return typeof parsedString === 'object' && parsedString !== null;
+ } catch (e) {
+ return false;
+ }
+ }
+ return false;
+ })
+ };
+ console.log(preprocessedData);
+ } else {
+ preprocessedData = {
+ keys: ['value'],
+ values: [String(parsedJson)],
+ types: [typeof parsedJson],
+ isNested: [false]
+ };
+ }
+
+ return (
+ 0 ? styles.nestedTableBody : styles.jsonTableBody}>
+ {data.keys.map((key, index) => {
+ const typeClass = data.types[index] ? `jsonValue${data.types[index].charAt(0).toUpperCase() + data.types[index].slice(1)}` : '';
+ const typeClassName = styles[typeClass] || '';
+ const rowPath = `${parentPath}.${key}`;
+ const isCollapsed = collapsedRows.has(rowPath);
+ const shouldShowCollapse = isLongContent(data.values[index], data.types[index]);
+
+ return (
+
+ 0 ? styles.nestedTableRow : styles.jsonTableRow} ${isCollapsed ? styles.collapsedRow : styles.notCollapsedRow}`}
+ >
+
+ );
+ })}
+ 0 ? styles.nestedTableKey : styles.jsonTableKey}>
+ {key}
+ {shouldShowCollapse && (
+
+ )}
+
+ 0 ? styles.nestedTableValue : styles.jsonTableValue} ${typeClassName}`}>
+ {data.isNested[index] ? (
+
+
+ {shouldShowCollapse && isCollapsed ? (
+
+ {getPreview(data.values[index], data.types[index])}
+
+ ) : (
+ data.values[index].isArray ? (
+
+ ) : (
+
+ {isCollapsed ? (
+
+ ) : (
+ typeof data.values[index] === 'object' && data.values[index] !== null && 'keys' in data.values[index] ?
+ renderTable(data.values[index], level + 1, rowPath) :
+ Error: Invalid nested data
+ )
+ )}
+
+ {data.values[index].items.slice(0, 10).map((item: any) => String(item)).join(', ')}
+ {data.values[index].length > 10 && `, ... (${data.values[index].length} items)`}
+
+ ) : (
+ <>
+ {data.values[index].items.map((item: any, itemIndex: number) => (
+
+
+ {String(item)}
+
+
+ ))}
+
+ )}
+
+ {shouldShowCollapse && isCollapsed ? (
+
+ {getPreview(data.values[index], data.types[index])}
+
+ ) : (
+
+ {String(data.values[index])}
+
+ )}
+
+ )}
+
+
+ );
+ } catch (parseError) {
+ const rawData = {
+ keys: ['Raw Content'],
+ values: [previewContent],
+ types: ['string'],
+ isNested: [false]
+ };
+
+ return (
+
+
+ {renderTable(preprocessedData, 0, 'root')}
+
+ {preprocessedData.keys.length} {t('files.preview.json.properties', 'properties')}
+
+
+
+ );
+ }
+}
diff --git a/src/components/FilePreview/renderers/LoadingRenderer.tsx b/src/components/FilePreview/renderers/LoadingRenderer.tsx
new file mode 100644
index 0000000..e86f747
--- /dev/null
+++ b/src/components/FilePreview/renderers/LoadingRenderer.tsx
@@ -0,0 +1,13 @@
+import { useLanguage } from '../../../contexts/LanguageContext';
+import styles from '../FilePreview.module.css';
+
+export function LoadingRenderer() {
+ const { t } = useLanguage();
+
+ return (
+
+ {t('files.preview.json.invalid', 'Raw Content (Invalid JSON)')}: {fileName}
+
+ {renderTable(rawData)}
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/FilePreview/renderers/PdfRenderer.tsx b/src/components/FilePreview/renderers/PdfRenderer.tsx
new file mode 100644
index 0000000..bb7b189
--- /dev/null
+++ b/src/components/FilePreview/renderers/PdfRenderer.tsx
@@ -0,0 +1,19 @@
+import styles from '../FilePreview.module.css';
+
+interface PdfRendererProps {
+ previewUrl: string;
+ fileName: string;
+ onError: () => void;
+}
+
+export function PdfRenderer({ previewUrl, fileName, onError }: PdfRendererProps) {
+ return (
+
+ );
+}
diff --git a/src/components/FilePreview/renderers/TextRenderer.tsx b/src/components/FilePreview/renderers/TextRenderer.tsx
new file mode 100644
index 0000000..83bf48e
--- /dev/null
+++ b/src/components/FilePreview/renderers/TextRenderer.tsx
@@ -0,0 +1,21 @@
+import styles from '../FilePreview.module.css';
+
+interface TextRendererProps {
+ previewUrl: string;
+ fileName: string;
+ mimeType?: string;
+ onError: () => void;
+}
+
+export function TextRenderer({ previewUrl, fileName, mimeType, onError }: TextRendererProps) {
+ return (
+
+ );
+}
diff --git a/src/components/FilePreview/renderers/UnsupportedRenderer.tsx b/src/components/FilePreview/renderers/UnsupportedRenderer.tsx
new file mode 100644
index 0000000..5878351
--- /dev/null
+++ b/src/components/FilePreview/renderers/UnsupportedRenderer.tsx
@@ -0,0 +1,26 @@
+import { useLanguage } from '../../../contexts/LanguageContext';
+import styles from '../FilePreview.module.css';
+
+interface UnsupportedRendererProps {
+ previewUrl: string;
+ fileName: string;
+}
+
+export function UnsupportedRenderer({ previewUrl, fileName }: UnsupportedRendererProps) {
+ const { t } = useLanguage();
+
+ return (
+ {t('files.preview.loading', 'Loading preview...')}
+
+
+ );
+}
diff --git a/src/components/FilePreview/renderers/index.ts b/src/components/FilePreview/renderers/index.ts
new file mode 100644
index 0000000..6ae4cc0
--- /dev/null
+++ b/src/components/FilePreview/renderers/index.ts
@@ -0,0 +1,8 @@
+export { JsonRenderer } from './JsonRenderer';
+export { ImageRenderer } from './ImageRenderer';
+export { TextRenderer } from './TextRenderer';
+export { PdfRenderer } from './PdfRenderer';
+export { ApplicationRenderer } from './ApplicationRenderer';
+export { UnsupportedRenderer } from './UnsupportedRenderer';
+export { LoadingRenderer } from './LoadingRenderer';
+export { ErrorRenderer } from './ErrorRenderer';
diff --git a/src/components/Popup/Popup.module.css b/src/components/Popup/Popup.module.css
index bf0f79b..42741ff 100644
--- a/src/components/Popup/Popup.module.css
+++ b/src/components/Popup/Popup.module.css
@@ -77,23 +77,90 @@
font-size: 18px;
font-weight: 400;
color: var(--color-text);
+ flex: 1;
+ min-width: 0;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.headerActions {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ flex-shrink: 0;
+ margin-left: 16px;
+}
+
+.actionButton {
+ display: flex;
+ height: 35px;
+ width: 35px;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
+ padding: 15px;
+ border: none;
+ border-radius: 25px;
+ font-size: 14px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ white-space: nowrap;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ background: var(--color-secondary);
+ color: white;
+}
+
+.actionButton:hover {
+ background: var(--color-secondary-hover);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+
+.actionButton:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+
+
+
+.spinner {
+ width: 14px;
+ height: 14px;
+ border: 2px solid transparent;
+ border-top: 2px solid currentColor;
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
}
.closeButton {
- background: none;
+ background: var(--color-primary);
border: none;
- font-size: 24px;
- color: var(--color-primary);
+ font-size: 18px;
+ color: #3A3A3A;
cursor: pointer;
- padding: 4px;
- border-radius: 4px;
+ padding: 8px;
+ border-radius: 25px;
transition: all 0.2s ease;
line-height: 1;
+ margin-left: 8px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 35px;
+ width: 35px;
}
.closeButton:hover {
- background-color: var(--color-bg);
- color: var(--color-primary-hover);
+ background-color: var(--color-primary-hover);
+ color: #3A3A3A;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Content section */
@@ -114,6 +181,43 @@
flex-shrink: 0;
}
+/* Dark mode support for action buttons */
+[data-theme="dark"] .actionButton.primary {
+ background: #3182ce;
+}
+
+[data-theme="dark"] .actionButton.primary:hover:not(:disabled) {
+ background: #2c5aa0;
+ box-shadow: 0 2px 4px rgba(49, 130, 206, 0.3);
+}
+
+[data-theme="dark"] .actionButton.secondary {
+ background: #4a5568;
+}
+
+[data-theme="dark"] .actionButton.secondary:hover:not(:disabled) {
+ background: #2d3748;
+ box-shadow: 0 2px 4px rgba(74, 85, 104, 0.3);
+}
+
+[data-theme="dark"] .actionButton.success {
+ background: #38a169;
+}
+
+[data-theme="dark"] .actionButton.success:hover:not(:disabled) {
+ background: #2f855a;
+ box-shadow: 0 2px 4px rgba(56, 161, 105, 0.3);
+}
+
+[data-theme="dark"] .actionButton.danger {
+ background: #e53e3e;
+}
+
+[data-theme="dark"] .actionButton.danger:hover:not(:disabled) {
+ background: #c53030;
+ box-shadow: 0 2px 4px rgba(229, 62, 62, 0.3);
+}
+
/* Responsive design */
@media (max-width: 640px) {
.popup {
@@ -139,6 +243,25 @@
.header {
padding: 16px;
+ flex-direction: column;
+ gap: 12px;
+ align-items: stretch;
+ }
+
+ .title {
+ text-align: center;
+ margin-bottom: 8px;
+ }
+
+ .headerActions {
+ justify-content: center;
+ flex-wrap: wrap;
+ margin-left: 0;
+ }
+
+ .actionButton {
+ padding: 6px 12px;
+ font-size: 12px;
}
.footer {
diff --git a/src/components/Popup/Popup.tsx b/src/components/Popup/Popup.tsx
index 217d393..a172217 100644
--- a/src/components/Popup/Popup.tsx
+++ b/src/components/Popup/Popup.tsx
@@ -1,6 +1,16 @@
import React from 'react';
import styles from './Popup.module.css';
+// Action button interface
+export interface PopupAction {
+ label: string;
+ icon?: string | React.ReactElement;
+ onClick: () => void;
+ disabled?: boolean;
+ loading?: boolean;
+ variant?: 'primary' | 'secondary' | 'success' | 'danger';
+}
+
// Generic popup props
export interface PopupProps {
isOpen: boolean;
@@ -11,6 +21,7 @@ export interface PopupProps {
className?: string;
size?: 'small' | 'medium' | 'large' | 'fullscreen';
closable?: boolean;
+ actions?: PopupAction[];
}
// Generic Popup component - can be used for any content
@@ -22,7 +33,8 @@ export function Popup({
footerContent,
className = '',
size = 'medium',
- closable = true
+ closable = true,
+ actions = []
}: PopupProps) {
// Handle escape key
@@ -60,15 +72,45 @@ export function Popup({
{/* Header */}
📄
+ {t('files.preview.unsupported', 'Preview not available for this file type')}
+{fileName}
+ + {t('files.action.download', 'Download')} + +{title}
- {closable && ( - - )} +
+ {/* Action buttons */}
+ {actions.map((action, index) => (
+
+ ))}
+
+ {/* Close button */}
+ {closable && (
+
+ )}
+