-
+
{hasPrefix(location.pathname, '/admin') && (
- {adminSubItems.map((item) => (
+ {adminSubItems.map(item => (
v1.0.0
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 62441ee..01c00a7 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -41,7 +41,8 @@ export default function Layout() {
{ path: '/search', title: 'Search' },
{ path: '/settings', title: 'Settings' },
];
- const currentPageTitle = navItems.find(item => location.pathname === item.path)?.title || 'Documents';
+ const currentPageTitle =
+ navItems.find(item => location.pathname === item.path)?.title || 'Documents';
// Show loading while checking authentication status
if (isCheckingAuth) {
@@ -61,12 +62,13 @@ export default function Layout() {
{/* Header Title */}
-
- {currentPageTitle}
-
+
{currentPageTitle}
{/* User Dropdown */}
-
+
{/* Main Content */}
-
-
);
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/README.md b/frontend/src/components/README.md
index e3f64a5..8bbeed2 100644
--- a/frontend/src/components/README.md
+++ b/frontend/src/components/README.md
@@ -124,10 +124,10 @@ Card placeholder with optional elements:
// Custom configuration
-
@@ -183,12 +183,7 @@ function DocumentList() {
return ;
}
- return (
-
- );
+ return ;
}
```
diff --git a/frontend/src/components/Skeleton.tsx b/frontend/src/components/Skeleton.tsx
index 8010790..9c8d319 100644
--- a/frontend/src/components/Skeleton.tsx
+++ b/frontend/src/components/Skeleton.tsx
@@ -16,7 +16,7 @@ export function Skeleton({
animation = 'pulse',
}: SkeletonProps) {
const baseClasses = 'bg-gray-200 dark:bg-gray-600';
-
+
const variantClasses = {
default: 'rounded',
text: 'rounded-md h-4',
@@ -32,17 +32,13 @@ export function Skeleton({
const style = {
width: width !== undefined ? (typeof width === 'number' ? `${width}px` : width) : undefined,
- height: height !== undefined ? (typeof height === 'number' ? `${height}px` : height) : undefined,
+ height:
+ height !== undefined ? (typeof height === 'number' ? `${height}px` : height) : undefined,
};
return (
);
@@ -61,10 +57,7 @@ export function SkeletonText({ lines = 3, className = '', lineClassName = '' }:
1 ? 'w-3/4' : 'w-full'
- )}
+ className={cn(lineClassName, i === lines - 1 && lines > 1 ? 'w-3/4' : 'w-full')}
/>
))}
@@ -85,14 +78,7 @@ export function SkeletonAvatar({ size = 'md', className = '' }: SkeletonAvatarPr
const pixelSize = typeof size === 'number' ? size : sizeMap[size];
- return (
-
- );
+ return
;
}
interface SkeletonCardProps {
@@ -111,7 +97,12 @@ export function SkeletonCard({
textLines = 3,
}: SkeletonCardProps) {
return (
-
+
{showAvatar && (
@@ -121,12 +112,8 @@ export function SkeletonCard({
)}
- {showTitle && (
-
- )}
- {showText && (
-
- )}
+ {showTitle &&
}
+ {showText &&
}
);
}
@@ -163,7 +150,10 @@ export function SkeletonTable({
{Array.from({ length: columns }).map((_, colIndex) => (
|
-
+
|
))}
@@ -220,11 +210,12 @@ export function InlineLoader({ size = 'md', className = '' }: InlineLoaderProps)
return (
);
}
// Re-export SkeletonTable for backward compatibility
export { SkeletonTable as SkeletonTableExport };
-
diff --git a/frontend/src/components/Table.tsx b/frontend/src/components/Table.tsx
index a3972e3..7b28cbb 100644
--- a/frontend/src/components/Table.tsx
+++ b/frontend/src/components/Table.tsx
@@ -5,7 +5,7 @@ import { cn } from '../utils/cn';
export interface Column
{
key: keyof T;
header: string;
- render?: (value: any, row: T, index: number) => React.ReactNode;
+ render?: (value: any, _row: T, _index: number) => React.ReactNode;
className?: string;
}
@@ -17,6 +17,47 @@ export interface TableProps {
rowKey?: keyof T | ((row: T) => string);
}
+// Skeleton table component for loading state
+function SkeletonTable({
+ rows = 5,
+ columns = 4,
+ className = '',
+}: {
+ rows?: number;
+ columns?: number;
+ className?: string;
+}) {
+ return (
+
+
+
+
+ {Array.from({ length: columns }).map((_, i) => (
+ |
+
+ |
+ ))}
+
+
+
+ {Array.from({ length: rows }).map((_, rowIndex) => (
+
+ {Array.from({ length: columns }).map((_, colIndex) => (
+ |
+
+ |
+ ))}
+
+ ))}
+
+
+
-
-
-
- {Array.from({ length: columns }).map((_, i) => (
- |
-
- |
- ))}
-
-
-
- {Array.from({ length: rows }).map((_, rowIndex) => (
-
- {Array.from({ length: columns }).map((_, colIndex) => (
- |
-
- |
- ))}
-
- ))}
-
-
-
- {columns.map((column) => (
+ {columns.map(column => (
| >({
|
) : (
data.map((row, index) => (
-
- {columns.map((column) => (
+
+ {columns.map(column => (
|
- {column.render
- ? column.render(row[column.key], row, index)
- : row[column.key]}
+ {column.render ? column.render(row[column.key], row, index) : row[column.key]}
|
))}
diff --git a/frontend/src/components/Toast.tsx b/frontend/src/components/Toast.tsx
index 8822b15..6f193c3 100644
--- a/frontend/src/components/Toast.tsx
+++ b/frontend/src/components/Toast.tsx
@@ -11,9 +11,10 @@ export interface ToastProps {
onClose?: (id: string) => void;
}
-const getToastStyles = (type: ToastType) => {
- const baseStyles = 'flex items-center gap-3 p-4 rounded-lg shadow-lg border-l-4 transition-all duration-300';
-
+const getToastStyles = (_type: ToastType) => {
+ const baseStyles =
+ 'flex items-center gap-3 p-4 rounded-lg shadow-lg border-l-4 transition-all duration-300';
+
const typeStyles = {
info: 'bg-blue-50 dark:bg-blue-900/30 border-blue-500 dark:border-blue-400',
warning: 'bg-yellow-50 dark:bg-yellow-900/30 border-yellow-500 dark:border-yellow-400',
@@ -69,15 +70,11 @@ export function Toast({ id, type, message, duration = 5000, onClose }: ToastProp
return (
{icons[type]}
-
- {message}
-
+
{message}