ultisuite-client/components/drive/drive-browser-chrome.tsx
R3D347HR4Y 6ec95262af Add OnlyOffice integration and update project configurations
- 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.
2026-06-07 15:49:21 +02:00

110 lines
3.8 KiB
TypeScript

"use client"
import { useMemo } from "react"
import { toast } from "sonner"
import { BreadcrumbNav } from "@/components/drive/breadcrumb-nav"
import { DriveBulkToolbar } from "@/components/drive/drive-bulk-toolbar"
import { DriveFilterBar } from "@/components/drive/drive-filter-bar"
import { DriveSortMenu } from "@/components/drive/drive-sort-menu"
import { DriveViewModeToggle } from "@/components/drive/drive-view-mode-toggle"
import { DriveSearchBreadcrumb } from "@/components/drive/drive-search-breadcrumb"
import type { DriveFileInfo } from "@/lib/api/types"
import type { DriveSearchState } from "@/lib/drive/drive-search"
import type { DriveView } from "@/lib/drive/drive-url"
import { DRIVE_CARD_PAD_X, DRIVE_FILTER_CONTENT_GAP } from "@/lib/drive/drive-chrome-classes"
import { useDriveMutations } from "@/lib/api/hooks/use-drive-queries"
import { useDriveUIStore } from "@/lib/stores/drive-ui-store"
import { cn } from "@/lib/utils"
const VIEW_TITLES: Partial<Record<DriveView, string>> = {
recent: "Récents",
starred: "Favoris",
trash: "Corbeille",
}
export function DriveBrowserChrome({
view,
segments,
isTrash,
items,
searchState,
}: {
view: DriveView
segments: string[]
isTrash?: boolean
items: DriveFileInfo[]
searchState?: DriveSearchState | null
}) {
const selectedPaths = useDriveUIStore((s) => s.selectedPaths)
const clearSelection = useDriveUIStore((s) => s.clearSelection)
const mutations = useDriveMutations()
const selectedTargets = useMemo(
() => items.filter((f) => selectedPaths.has(f.path)),
[items, selectedPaths]
)
const showBulk = selectedTargets.length > 0
const showBreadcrumb = view === "files" || view === "shared"
const showSearchBreadcrumb = view === "search" && searchState
const title = VIEW_TITLES[view]
const allowShare = view !== "shared"
const showEmptyTrash = view === "trash" && !showBulk && items.length > 0
const onEmptyTrash = async () => {
if (!window.confirm("Vider la corbeille ? Cette action est irréversible.")) return
try {
await mutations.emptyTrash.mutateAsync()
clearSelection()
toast.success("Corbeille vidée")
} catch {
toast.error("Impossible de vider la corbeille")
}
}
return (
<div className={cn("shrink-0", DRIVE_FILTER_CONTENT_GAP)}>
<div className={cn("flex min-h-12 shrink-0 items-center justify-between gap-4 py-1", DRIVE_CARD_PAD_X)}>
<div className="min-w-0 flex-1">
{showSearchBreadcrumb ? (
<DriveSearchBreadcrumb search={searchState} />
) : showBreadcrumb ? (
<BreadcrumbNav
view={view}
segments={segments}
writable={view === "files"}
/>
) : title ? (
<div className="flex min-w-0 items-center gap-3">
<p className="text-[1.375rem] font-normal leading-snug tracking-tight text-[#202124] dark:text-foreground">
{title}
</p>
{showEmptyTrash ? (
<button
type="button"
className="shrink-0 text-sm font-medium text-[#1a73e8] hover:underline dark:text-[#8ab4f8]"
onClick={() => void onEmptyTrash()}
disabled={mutations.emptyTrash.isPending}
>
Vider la corbeille
</button>
) : null}
</div>
) : null}
</div>
<div className="flex shrink-0 items-center gap-2">
<DriveSortMenu />
<DriveViewModeToggle />
</div>
</div>
{showBulk ? (
<DriveBulkToolbar
targets={selectedTargets}
isTrash={isTrash}
allowShare={allowShare}
/>
) : (
<DriveFilterBar showContacts={view !== "trash"} />
)}
</div>
)
}