- Updated .env.example to include configuration for OnlyOffice Document Server. - Modified the workspace configuration to remove the drive-suite path. - Adjusted TypeScript environment imports for consistency. - Enhanced Next.js configuration to disable canvas in Webpack. - Updated package.json to include new dependencies for OnlyOffice and PDF.js. - Added global styles for OnlyOffice theme integration in the CSS. - Created new layout and page components for the Drive feature, including public sharing and editing functionalities. - Updated metadata handling across various layouts to reflect the new app structure.
132 lines
3.6 KiB
TypeScript
132 lines
3.6 KiB
TypeScript
import { Icon } from "@iconify/react"
|
|
import type { DriveFileInfo } from "@/lib/api/types"
|
|
import { classifyDriveFile, type DriveMimeCategory } from "@/lib/drive/drive-filters"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export type DriveIconSize = "sm" | "md" | "lg"
|
|
|
|
const SIZE_CLASS: Record<DriveIconSize, string> = {
|
|
sm: "h-4 w-4",
|
|
md: "h-5 w-5",
|
|
lg: "h-10 w-10",
|
|
}
|
|
|
|
const FOLDER_COLOR = "text-amber-500"
|
|
|
|
const MIME_ICON: Record<DriveMimeCategory, { icon: string; color: string }> = {
|
|
folder: { icon: "mdi:folder", color: FOLDER_COLOR },
|
|
document: { icon: "mdi:file-document", color: "text-blue-600" },
|
|
spreadsheet: { icon: "mdi:file-excel", color: "text-green-600" },
|
|
presentation: { icon: "mdi:file-powerpoint", color: "text-amber-600" },
|
|
image: { icon: "mdi:file-image", color: "text-rose-500" },
|
|
pdf: { icon: "mdi:file-pdf-box", color: "text-red-600" },
|
|
video: { icon: "mdi:file-video", color: "text-red-500" },
|
|
audio: { icon: "mdi:file-music", color: "text-red-500" },
|
|
archive: { icon: "mdi:folder-zip", color: "text-[#5f6368]" },
|
|
other: { icon: "mdi:file", color: "text-blue-500" },
|
|
}
|
|
|
|
const SHARED_FOLDER_ICON = { icon: "mdi:folder-account", color: FOLDER_COLOR }
|
|
|
|
export type DriveFolderIconOptions = {
|
|
/** True when browsing the “Partagés avec moi” tree or a folder inside it. */
|
|
inSharedView?: boolean
|
|
}
|
|
|
|
export function isDriveSharedFolder(
|
|
file: DriveFileInfo,
|
|
options?: DriveFolderIconOptions
|
|
): boolean {
|
|
if (file.type !== "directory") return false
|
|
return Boolean(file.is_shared || options?.inSharedView)
|
|
}
|
|
|
|
export function driveMimeCategoryFor(file: DriveFileInfo): DriveMimeCategory {
|
|
return classifyDriveFile(file)
|
|
}
|
|
|
|
export function driveFolderIconMeta(file: DriveFileInfo, options?: DriveFolderIconOptions) {
|
|
return isDriveSharedFolder(file, options) ? SHARED_FOLDER_ICON : MIME_ICON.folder
|
|
}
|
|
|
|
export function driveMimeIconMeta(category: DriveMimeCategory) {
|
|
return MIME_ICON[category]
|
|
}
|
|
|
|
export function driveIconColor(file: DriveFileInfo, options?: DriveFolderIconOptions) {
|
|
const category = driveMimeCategoryFor(file)
|
|
if (category === "folder") {
|
|
return driveFolderIconMeta(file, options).color
|
|
}
|
|
return driveMimeIconMeta(category).color
|
|
}
|
|
|
|
export function DriveFolderIcon({
|
|
file,
|
|
inSharedView,
|
|
size = "sm",
|
|
className,
|
|
}: {
|
|
file: DriveFileInfo
|
|
inSharedView?: boolean
|
|
size?: DriveIconSize
|
|
className?: string
|
|
}) {
|
|
const { icon, color } = driveFolderIconMeta(file, { inSharedView })
|
|
return (
|
|
<span data-drive-type-icon className="inline-flex shrink-0">
|
|
<Icon
|
|
icon={icon}
|
|
className={cn(SIZE_CLASS[size], "shrink-0", color, className)}
|
|
aria-hidden
|
|
/>
|
|
</span>
|
|
)
|
|
}
|
|
|
|
export function DriveMimeCategoryIcon({
|
|
category,
|
|
size = "sm",
|
|
className,
|
|
}: {
|
|
category: DriveMimeCategory
|
|
size?: DriveIconSize
|
|
className?: string
|
|
}) {
|
|
const { icon, color } = driveMimeIconMeta(category)
|
|
return (
|
|
<span data-drive-type-icon className="inline-flex shrink-0">
|
|
<Icon
|
|
icon={icon}
|
|
className={cn(SIZE_CLASS[size], "shrink-0", color, className)}
|
|
aria-hidden
|
|
/>
|
|
</span>
|
|
)
|
|
}
|
|
|
|
export function DriveFileTypeIcon({
|
|
file,
|
|
inSharedView,
|
|
size = "sm",
|
|
className,
|
|
}: {
|
|
file: DriveFileInfo
|
|
inSharedView?: boolean
|
|
size?: DriveIconSize
|
|
className?: string
|
|
}) {
|
|
const category = driveMimeCategoryFor(file)
|
|
if (category === "folder") {
|
|
return (
|
|
<DriveFolderIcon
|
|
file={file}
|
|
inSharedView={inSharedView}
|
|
size={size}
|
|
className={className}
|
|
/>
|
|
)
|
|
}
|
|
return <DriveMimeCategoryIcon category={category} size={size} className={className} />
|
|
}
|