mirror of
https://github.com/willchen96/mike.git
synced 2026-06-14 20:55:13 +02:00
488 lines
19 KiB
TypeScript
488 lines
19 KiB
TypeScript
"use client";
|
|
|
|
import { type CSSProperties, useState } from "react";
|
|
import {
|
|
CornerDownRight,
|
|
File,
|
|
FileText,
|
|
Loader2,
|
|
MessageSquare,
|
|
Search,
|
|
Table2,
|
|
Users,
|
|
} from "lucide-react";
|
|
import { PageHeader } from "@/app/components/shared/PageHeader";
|
|
import { RenameableTitle } from "@/app/components/shared/RenameableTitle";
|
|
import type { Project } from "@/app/components/shared/types";
|
|
import type { DocumentVersion } from "@/app/lib/mikeApi";
|
|
import { RowActions } from "@/app/components/shared/RowActions";
|
|
|
|
export type ProjectTab = "documents" | "assistant" | "reviews";
|
|
|
|
export type ProjectContextMenu = {
|
|
x: number;
|
|
y: number;
|
|
docId?: string | null;
|
|
folderId: string | null;
|
|
showFolderActions: boolean;
|
|
};
|
|
|
|
export const NAME_COL_W = "w-[332px] shrink-0";
|
|
export const DOC_NAME_COL_W =
|
|
"w-[292px] sm:w-[332px] md:w-[392px] lg:w-[452px] xl:w-[532px] 2xl:w-[592px] shrink-0";
|
|
|
|
const TREE_CONTROL_WIDTH_PX = 32;
|
|
const TREE_NAME_PADDING_PX = 16;
|
|
|
|
export function treeNameCellStyle(depth: number): CSSProperties | undefined {
|
|
if (depth <= 0) return undefined;
|
|
return {
|
|
paddingLeft: TREE_NAME_PADDING_PX + depth * TREE_CONTROL_WIDTH_PX,
|
|
};
|
|
}
|
|
|
|
export function formatBytes(bytes: number): string {
|
|
if (bytes < 1024) return `${bytes} B`;
|
|
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
|
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
|
}
|
|
|
|
export function formatDate(iso: string) {
|
|
return new Date(iso).toLocaleDateString(undefined, {
|
|
day: "numeric",
|
|
month: "short",
|
|
year: "numeric",
|
|
});
|
|
}
|
|
|
|
export function DocIcon({ fileType }: { fileType: string | null }) {
|
|
if (fileType === "pdf")
|
|
return <FileText className="h-4 w-4 text-red-600 shrink-0" />;
|
|
if (fileType === "docx" || fileType === "doc")
|
|
return <File className="h-4 w-4 text-blue-600 shrink-0" />;
|
|
return <File className="h-4 w-4 text-gray-500 shrink-0" />;
|
|
}
|
|
|
|
export function DocVersionHistory({
|
|
docId,
|
|
filename,
|
|
fileType,
|
|
activeVersionNumber,
|
|
currentVersionId,
|
|
loading,
|
|
versions,
|
|
depth = 0,
|
|
onDownloadVersion,
|
|
onOpenVersion,
|
|
onRenameVersion,
|
|
onExtensionChangeBlocked,
|
|
}: {
|
|
docId: string;
|
|
filename: string;
|
|
fileType: string | null;
|
|
activeVersionNumber: number | null;
|
|
currentVersionId: string | null;
|
|
loading: boolean;
|
|
versions: DocumentVersion[];
|
|
depth?: number;
|
|
onDownloadVersion: (
|
|
docId: string,
|
|
versionId: string,
|
|
filename: string,
|
|
) => void;
|
|
onOpenVersion?: (versionId: string, versionLabel: string) => void;
|
|
onRenameVersion?: (
|
|
versionId: string,
|
|
filename: string | null,
|
|
) => Promise<void> | void;
|
|
onExtensionChangeBlocked?: (filename: string) => void;
|
|
}) {
|
|
const [editingVersionId, setEditingVersionId] = useState<string | null>(
|
|
null,
|
|
);
|
|
const [editingValue, setEditingValue] = useState("");
|
|
|
|
const commit = async (versionId: string) => {
|
|
const trimmed = editingValue.trim();
|
|
const previousFilename = versions
|
|
.find((version) => version.id === versionId)
|
|
?.filename?.trim();
|
|
if (
|
|
previousFilename &&
|
|
(trimmed.length === 0 ||
|
|
hasFilenameExtensionChange(previousFilename, trimmed))
|
|
) {
|
|
onExtensionChangeBlocked?.(previousFilename);
|
|
return;
|
|
}
|
|
|
|
setEditingVersionId(null);
|
|
const next = trimmed.length > 0 ? trimmed : null;
|
|
await onRenameVersion?.(versionId, next);
|
|
};
|
|
|
|
if (loading && versions.length === 0) {
|
|
const skeletonCount = Math.max(0, (activeVersionNumber ?? 1) - 1);
|
|
return (
|
|
<>
|
|
{Array.from({ length: skeletonCount }).map((_, index) => (
|
|
<div
|
|
key={`ver-skeleton-${docId}-${index}`}
|
|
className="flex h-10 items-center pr-8 bg-gray-100"
|
|
>
|
|
<div
|
|
className={`sticky left-0 z-[60] ${DOC_NAME_COL_W} bg-gray-100 py-2 pl-4 pr-2`}
|
|
style={treeNameCellStyle(depth)}
|
|
>
|
|
<div className="flex items-center gap-4">
|
|
<div className="h-2.5 w-2.5 shrink-0 rounded bg-gray-200 animate-pulse" />
|
|
<div className="h-4 w-4 shrink-0 rounded bg-gray-200 animate-pulse" />
|
|
<div className="h-3 w-32 rounded bg-gray-200 animate-pulse" />
|
|
</div>
|
|
</div>
|
|
<div className="ml-auto w-20 shrink-0">
|
|
<div className="h-3 w-8 rounded bg-gray-200 animate-pulse" />
|
|
</div>
|
|
<div className="w-24 shrink-0">
|
|
<div className="h-3 w-10 rounded bg-gray-200 animate-pulse" />
|
|
</div>
|
|
<div className="w-20 shrink-0 pl-1">
|
|
<div className="h-3 w-5 rounded bg-gray-200 animate-pulse" />
|
|
</div>
|
|
<div className="w-32 shrink-0">
|
|
<div className="h-3 w-16 rounded bg-gray-200 animate-pulse" />
|
|
</div>
|
|
<div className="w-32 shrink-0">
|
|
<div className="h-3 w-10 rounded bg-gray-200 animate-pulse" />
|
|
</div>
|
|
<div className="w-8 shrink-0" />
|
|
</div>
|
|
))}
|
|
</>
|
|
);
|
|
}
|
|
|
|
if (versions.length === 0) {
|
|
return (
|
|
<div className="flex items-center h-9 border-b border-gray-50 text-xs text-gray-400 bg-gray-50/80">
|
|
<div
|
|
className={`sticky left-0 z-[60] ${DOC_NAME_COL_W} bg-gray-50/80 py-2 pl-4 pr-2`}
|
|
style={treeNameCellStyle(depth)}
|
|
>
|
|
<div>No version history.</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const olderVersions = versions.filter((v) => v.id !== currentVersionId);
|
|
if (olderVersions.length === 0) return null;
|
|
|
|
const ordered = [...olderVersions].reverse();
|
|
return (
|
|
<>
|
|
{ordered.map((v) => {
|
|
const numberLabel =
|
|
typeof v.version_number === "number" &&
|
|
v.version_number >= 1
|
|
? `${v.version_number}`
|
|
: v.source === "upload"
|
|
? "Original"
|
|
: "—";
|
|
const displayLabel = v.filename?.trim() || numberLabel;
|
|
const dt = new Date(v.created_at);
|
|
const dateLabel = Number.isNaN(dt.valueOf())
|
|
? ""
|
|
: dt.toLocaleString(undefined, {
|
|
month: "short",
|
|
day: "numeric",
|
|
year: "numeric",
|
|
hour: "numeric",
|
|
minute: "2-digit",
|
|
});
|
|
const isEditing = editingVersionId === v.id;
|
|
const rowBg = "bg-gray-100";
|
|
return (
|
|
<div
|
|
key={`ver-${docId}-${v.id}`}
|
|
onClick={() => {
|
|
if (isEditing) return;
|
|
onOpenVersion?.(v.id, displayLabel);
|
|
}}
|
|
className={`group flex h-10 cursor-pointer items-center pr-8 text-sm text-gray-500 transition-colors hover:bg-gray-200 ${rowBg}`}
|
|
>
|
|
<div
|
|
className={`sticky left-0 z-[60] ${DOC_NAME_COL_W} ${rowBg} py-2 pl-4 pr-2 transition-colors group-hover:bg-gray-200`}
|
|
style={treeNameCellStyle(depth)}
|
|
>
|
|
<div className="flex items-center gap-4">
|
|
<span className="flex h-2.5 w-2.5 shrink-0 items-center justify-center">
|
|
<CornerDownRight
|
|
className="h-3.5 w-3.5 text-gray-400"
|
|
aria-hidden="true"
|
|
/>
|
|
</span>
|
|
<DocIcon fileType={fileType} />
|
|
{isEditing ? (
|
|
<input
|
|
autoFocus
|
|
value={editingValue}
|
|
onClick={(e) => e.stopPropagation()}
|
|
onChange={(e) =>
|
|
setEditingValue(e.target.value)
|
|
}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault();
|
|
void commit(v.id);
|
|
} else if (e.key === "Escape") {
|
|
setEditingVersionId(null);
|
|
}
|
|
}}
|
|
onBlur={() => void commit(v.id)}
|
|
className="min-w-0 flex-1 border-b border-gray-300 bg-transparent text-sm text-gray-800 outline-none focus:border-gray-500"
|
|
/>
|
|
) : (
|
|
<span className="truncate text-sm text-gray-700">
|
|
{displayLabel}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="ml-auto w-20 shrink-0 truncate text-xs uppercase text-gray-500">
|
|
{fileType ?? <span className="text-gray-300">—</span>}
|
|
</div>
|
|
<div className="w-24 shrink-0 truncate text-sm text-gray-400">
|
|
—
|
|
</div>
|
|
<div className="w-20 shrink-0 truncate pl-1 text-sm text-gray-500">
|
|
{numberLabel}
|
|
</div>
|
|
<div className="w-32 shrink-0 truncate text-sm text-gray-500">
|
|
{dateLabel ? formatDate(v.created_at) : <span className="text-gray-300">—</span>}
|
|
</div>
|
|
<div className="w-32 shrink-0 truncate text-sm text-gray-400">
|
|
—
|
|
</div>
|
|
<div
|
|
className="w-8 shrink-0 flex justify-end"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<RowActions
|
|
onRename={
|
|
onRenameVersion
|
|
? () => {
|
|
setEditingVersionId(v.id);
|
|
setEditingValue(v.filename ?? "");
|
|
}
|
|
: undefined
|
|
}
|
|
renameLabel="Rename version"
|
|
onDownload={() =>
|
|
onDownloadVersion(docId, v.id, filename)
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function ProjectPageSkeleton() {
|
|
return (
|
|
<div className="flex-1 overflow-y-auto">
|
|
<PageHeader
|
|
align="start"
|
|
actionGap="lg"
|
|
breadcrumbs={[
|
|
{ label: "Projects" },
|
|
{ loading: true, skeletonClassName: "w-40" },
|
|
]}
|
|
actionGroups={[
|
|
[
|
|
{
|
|
disabled: true,
|
|
iconOnly: true,
|
|
title: "Search",
|
|
icon: <Search className="h-4 w-4" />,
|
|
},
|
|
{
|
|
disabled: true,
|
|
iconOnly: true,
|
|
title: "People with access",
|
|
icon: <Users className="h-4 w-4" />,
|
|
},
|
|
],
|
|
[
|
|
{
|
|
disabled: true,
|
|
icon: <MessageSquare className="h-4 w-4" />,
|
|
label: <span className="hidden sm:inline">New Chat</span>,
|
|
},
|
|
{
|
|
disabled: true,
|
|
icon: <Table2 className="h-4 w-4" />,
|
|
label: <span className="hidden sm:inline">New Review</span>,
|
|
},
|
|
],
|
|
]}
|
|
/>
|
|
<div className="flex items-center h-10 px-4 md:px-10 border-b border-gray-200 gap-5">
|
|
<div className="h-3 w-20 rounded bg-gray-100 animate-pulse" />
|
|
<div className="h-3 w-10 rounded bg-gray-100 animate-pulse" />
|
|
<div className="h-3 w-24 rounded bg-gray-100 animate-pulse" />
|
|
<div className="ml-auto flex items-center gap-5">
|
|
<div className="h-3 w-24 rounded bg-gray-100 animate-pulse" />
|
|
<div className="h-3 w-24 rounded bg-gray-100 animate-pulse" />
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center h-8 pr-3 md:pr-10 border-b border-gray-200">
|
|
<div className={`${DOC_NAME_COL_W} flex shrink-0 items-center gap-4 pl-4 pr-2`}>
|
|
<div className="h-2.5 w-2.5 rounded bg-gray-100 animate-pulse" />
|
|
<div className="h-2.5 w-8 rounded bg-gray-100 animate-pulse" />
|
|
</div>
|
|
<div className="w-20 shrink-0">
|
|
<div className="h-2.5 w-8 rounded bg-gray-100 animate-pulse" />
|
|
</div>
|
|
<div className="w-24 shrink-0">
|
|
<div className="h-2.5 w-8 rounded bg-gray-100 animate-pulse" />
|
|
</div>
|
|
<div className="w-8 shrink-0" />
|
|
</div>
|
|
{[1, 2, 3, 4, 5].map((i) => (
|
|
<div
|
|
key={i}
|
|
className="flex items-center h-10 pr-3 md:pr-10 border-b border-gray-50"
|
|
>
|
|
<div className={`${DOC_NAME_COL_W} flex shrink-0 items-center gap-4 pl-4 pr-2`}>
|
|
<div className="h-2.5 w-2.5 shrink-0 rounded bg-gray-100 animate-pulse" />
|
|
<div className="h-3.5 w-56 rounded bg-gray-100 animate-pulse" />
|
|
</div>
|
|
<div className="w-20 shrink-0">
|
|
<div className="h-3 w-8 rounded bg-gray-100 animate-pulse" />
|
|
</div>
|
|
<div className="w-24 shrink-0">
|
|
<div className="h-3 w-12 rounded bg-gray-100 animate-pulse" />
|
|
</div>
|
|
<div className="w-8 shrink-0" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function ProjectPageHeader({
|
|
project,
|
|
tab,
|
|
search,
|
|
creatingChat,
|
|
creatingReview,
|
|
docsCount,
|
|
onBackToProjects,
|
|
onTitleCommit,
|
|
onSearchChange,
|
|
onOpenPeople,
|
|
onNewChat,
|
|
onNewReview,
|
|
}: {
|
|
project: Project;
|
|
tab: ProjectTab;
|
|
search: string;
|
|
creatingChat: boolean;
|
|
creatingReview: boolean;
|
|
docsCount: number;
|
|
onBackToProjects: () => void;
|
|
onTitleCommit: (newName: string) => void | Promise<void>;
|
|
onSearchChange: (search: string) => void;
|
|
onOpenPeople: () => void;
|
|
onNewChat: () => void;
|
|
onNewReview: () => void;
|
|
}) {
|
|
return (
|
|
<PageHeader
|
|
breadcrumbs={[
|
|
{
|
|
label: "Projects",
|
|
onClick: onBackToProjects,
|
|
title: "Back to Projects",
|
|
},
|
|
{
|
|
label: (
|
|
<RenameableTitle
|
|
value={project.name}
|
|
onCommit={onTitleCommit}
|
|
/>
|
|
),
|
|
suffix: project.cm_number ? (
|
|
<span className="ml-1 text-gray-400">
|
|
(#{project.cm_number})
|
|
</span>
|
|
) : null,
|
|
},
|
|
]}
|
|
align="start"
|
|
actionGap="lg"
|
|
actionGroups={[
|
|
[
|
|
{
|
|
type: "search",
|
|
value: search,
|
|
onChange: onSearchChange,
|
|
placeholder: "Search…",
|
|
},
|
|
{
|
|
onClick: onOpenPeople,
|
|
iconOnly: true,
|
|
title: "People with access",
|
|
icon: <Users className="h-4 w-4" />,
|
|
},
|
|
],
|
|
[
|
|
{
|
|
onClick: onNewChat,
|
|
disabled: creatingChat,
|
|
icon: creatingChat ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
<MessageSquare className="h-4 w-4" />
|
|
),
|
|
label: <span className="hidden sm:inline">New Chat</span>,
|
|
},
|
|
{
|
|
onClick: onNewReview,
|
|
disabled: docsCount === 0 || creatingReview,
|
|
icon: creatingReview ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
<Table2 className="h-4 w-4" />
|
|
),
|
|
label: (
|
|
<span className="hidden sm:inline">
|
|
New Review
|
|
</span>
|
|
),
|
|
tooltip: docsCount === 0 ? "Upload a document first" : null,
|
|
},
|
|
],
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function filenameExtension(filename: string) {
|
|
const trimmed = filename.trim();
|
|
const dotIndex = trimmed.lastIndexOf(".");
|
|
if (dotIndex <= 0 || dotIndex === trimmed.length - 1) return null;
|
|
return trimmed.slice(dotIndex);
|
|
}
|
|
|
|
function hasFilenameExtensionChange(previous: string, next: string) {
|
|
const previousExtension = filenameExtension(previous);
|
|
if (previousExtension == null) return false;
|
|
return (
|
|
filenameExtension(next)?.toLowerCase() !==
|
|
previousExtension.toLowerCase()
|
|
);
|
|
}
|