apunkt/mike
1
0
Fork 0
mirror of https://github.com/willchen96/mike.git synced 2026-07-06 22:12:10 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add courtlistener intergration, liquid glass redesign, UI improvements, version control, various fixes

Browse source
This commit is contained in:
willchen96 2026-06-06 15:48:47 +08:00
parent d39f5806e5
commit 44e868eb42
106 changed files with 16350 additions and 7753 deletions
Download patch file Download diff file Expand all files Collapse all files

463
frontend/src/app/components/projects/ProjectPageParts.tsx
View file

@ -2,18 +2,20 @@
import { type CSSProperties, useState } from "react";
import {
Download,
CornerDownRight,
File,
FileText,
Loader2,
Pencil,
Plus,
MessageSquare,
Search,
Table2,
Users,
} from "lucide-react";
import { HeaderSearchBtn } from "@/app/components/shared/HeaderSearchBtn";
import { PageHeader } from "@/app/components/shared/PageHeader";
import { RenameableTitle } from "@/app/components/shared/RenameableTitle";
import type { MikeProject } from "@/app/components/shared/types";
import type { MikeDocumentVersion } from "@/app/lib/mikeApi";
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";
@ -25,32 +27,18 @@ export type ProjectContextMenu = {
showFolderActions: boolean;
};
export const CHECK_W = "w-8 shrink-0";
export const NAME_COL_W = "w-[300px] shrink-0";
export const NAME_COL_W = "w-[332px] shrink-0";
export const DOC_NAME_COL_W =
"w-[260px] sm:w-[300px] md:w-[360px] lg:w-[420px] xl:w-[500px] 2xl:w-[560px] shrink-0";
"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 = 8;
function treeControlWidth(depth: number) {
return TREE_CONTROL_WIDTH_PX * (Math.max(0, depth) + 1);
}
export function treeControlCellStyle(depth: number): CSSProperties | undefined {
if (depth <= 0) return undefined;
const width = treeControlWidth(depth);
return {
justifyContent: "flex-start",
minWidth: width,
paddingLeft: TREE_NAME_PADDING_PX + depth * TREE_CONTROL_WIDTH_PX,
width,
};
}
const TREE_NAME_PADDING_PX = 16;
export function treeNameCellStyle(depth: number): CSSProperties | undefined {
if (depth <= 0) return undefined;
return { left: treeControlWidth(depth) };
return {
paddingLeft: TREE_NAME_PADDING_PX + depth * TREE_CONTROL_WIDTH_PX,
};
}
export function formatBytes(bytes: number): string {
@ -78,17 +66,24 @@ export function DocIcon({ fileType }: { fileType: string | null }) {
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: MikeDocumentVersion[];
versions: DocumentVersion[];
depth?: number;
onDownloadVersion: (
docId: string,
@ -98,8 +93,9 @@ export function DocVersionHistory({
onOpenVersion?: (versionId: string, versionLabel: string) => void;
onRenameVersion?: (
versionId: string,
displayName: string | null,
filename: string | null,
) => Promise<void> | void;
onExtensionChangeBlocked?: (filename: string) => void;
}) {
const [editingVersionId, setEditingVersionId] = useState<string | null>(
null,
@ -108,40 +104,69 @@ export function DocVersionHistory({
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 (
<div className="flex items-center h-9 border-b border-gray-50 text-xs text-gray-500 bg-gray-50/60">
<div
className={`sticky left-0 z-[60] ${CHECK_W} bg-gray-50/60 self-stretch`}
style={treeControlCellStyle(depth)}
/>
<div
className={`sticky left-8 z-[60] ${DOC_NAME_COL_W} bg-gray-50/60 p-2`}
style={treeNameCellStyle(depth)}
>
<div className="flex items-center gap-2">
<Loader2 className="h-3 w-3 animate-spin text-gray-400" />
<span>Loading versions…</span>
<>
{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>
</div>
</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/60">
<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] ${CHECK_W} bg-gray-50/60 self-stretch`}
style={treeControlCellStyle(depth)}
/>
<div
className={`sticky left-8 z-[60] ${DOC_NAME_COL_W} bg-gray-50/60 p-2`}
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>
@ -150,7 +175,10 @@ export function DocVersionHistory({
);
}
const ordered = [...versions].reverse();
const olderVersions = versions.filter((v) => v.id !== currentVersionId);
if (olderVersions.length === 0) return null;
const ordered = [...olderVersions].reverse();
return (
<>
{ordered.map((v) => {
@ -161,7 +189,7 @@ export function DocVersionHistory({
: v.source === "upload"
? "Original"
: "—";
const displayLabel = v.display_name?.trim() || numberLabel;
const displayLabel = v.filename?.trim() || numberLabel;
const dt = new Date(v.created_at);
const dateLabel = Number.isNaN(dt.valueOf())
? ""
@ -173,7 +201,7 @@ export function DocVersionHistory({
minute: "2-digit",
});
const isEditing = editingVersionId === v.id;
const rowBg = "bg-gray-100";
return (
<div
key={`ver-${docId}-${v.id}`}
@ -181,20 +209,20 @@ export function DocVersionHistory({
if (isEditing) return;
onOpenVersion?.(v.id, displayLabel);
}}
className="group flex items-center h-9 pr-3 md:pr-10 border-b border-gray-50 bg-gray-50/60 text-xs text-gray-600 cursor-pointer hover:bg-gray-100/80 transition-colors"
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] ${CHECK_W} bg-gray-50/60 group-hover:bg-gray-100/80 self-stretch`}
style={treeControlCellStyle(depth)}
/>
<div
className={`sticky left-8 z-[60] ${DOC_NAME_COL_W} bg-gray-50/60 group-hover:bg-gray-100/80 p-2`}
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-2">
<span className="shrink-0 text-gray-400">
↳
<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
@ -212,53 +240,48 @@ export function DocVersionHistory({
}
}}
onBlur={() => void commit(v.id)}
className="min-w-0 flex-1 max-w-[240px] border-b border-gray-300 bg-transparent text-xs text-gray-800 outline-none focus:border-gray-500"
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="font-medium text-gray-700 truncate">
<span className="truncate text-sm text-gray-700">
{displayLabel}
</span>
)}
{!isEditing && onRenameVersion && (
<button
onClick={(e) => {
e.stopPropagation();
setEditingVersionId(v.id);
setEditingValue(
v.display_name ?? "",
);
}}
title="Rename version"
className="shrink-0 rounded p-0.5 text-gray-400 opacity-0 group-hover:opacity-100 hover:text-gray-700 hover:bg-gray-200 transition"
>
<Pencil className="h-3 w-3" />
</button>
)}
<span className="text-gray-400 truncate">
{dateLabel}
</span>
<span className="text-gray-300 shrink-0">
·
</span>
<span className="text-gray-400 truncate">
{v.source}
</span>
</div>
</div>
<div className="ml-auto w-20 shrink-0" />
<div className="w-24 shrink-0" />
<div className="ml-auto w-20 shrink-0" />
<div className="w-8 shrink-0 flex justify-end">
<button
onClick={(e) => {
e.stopPropagation();
onDownloadVersion(docId, v.id, filename);
}}
title="Download this version"
className="flex items-center justify-center w-6 h-6 rounded text-gray-500 hover:text-gray-800 hover:bg-gray-100 transition-colors"
>
<Download className="h-3.5 w-3.5" />
</button>
<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>
);
@ -269,20 +292,43 @@ export function DocVersionHistory({
export function ProjectPageSkeleton() {
return (
<div className="flex-1 overflow-y-auto bg-white">
<div className="mb-1 flex items-start justify-between px-4 py-3 md:px-10">
<div className="flex items-center gap-1.5 text-2xl font-medium font-serif">
<span className="text-gray-400">Projects</span>
<span className="text-gray-300">›</span>
<div className="h-6 w-40 rounded bg-gray-100 animate-pulse" />
</div>
<div className="flex items-center gap-4">
<div className="h-8 w-8 rounded bg-gray-100 animate-pulse" />
<div className="h-8 w-8 rounded bg-gray-100 animate-pulse" />
<div className="h-8 w-11 rounded bg-gray-100 animate-pulse" />
<div className="h-8 w-28 rounded bg-gray-100 animate-pulse" />
</div>
</div>
<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" />
@ -293,8 +339,8 @@ export function ProjectPageSkeleton() {
</div>
</div>
<div className="flex items-center h-8 pr-3 md:pr-10 border-b border-gray-200">
<div className="w-8 shrink-0" />
<div className="flex-1 min-w-0 pl-3 pr-4">
<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">
@ -310,8 +356,8 @@ export function ProjectPageSkeleton() {
key={i}
className="flex items-center h-10 pr-3 md:pr-10 border-b border-gray-50"
>
<div className="w-8 shrink-0" />
<div className="flex-1 min-w-0 pl-3 pr-4">
<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">
@ -335,21 +381,19 @@ export function ProjectPageHeader({
creatingReview,
docsCount,
onBackToProjects,
onOpenDocuments,
onTitleCommit,
onSearchChange,
onOpenPeople,
onNewChat,
onNewReview,
}: {
project: MikeProject;
project: Project;
tab: ProjectTab;
search: string;
creatingChat: boolean;
creatingReview: boolean;
docsCount: number;
onBackToProjects: () => void;
onOpenDocuments: () => void;
onTitleCommit: (newName: string) => void | Promise<void>;
onSearchChange: (search: string) => void;
onOpenPeople: () => void;
@ -357,109 +401,88 @@ export function ProjectPageHeader({
onNewReview: () => void;
}) {
return (
<div className="mb-1 flex items-start justify-between px-4 py-3 md:px-10">
<div>
<div className="flex items-center gap-1.5 text-2xl font-medium font-serif">
<button
onClick={onBackToProjects}
className="text-gray-400 hover:text-gray-600 transition-colors"
>
Projects
</button>
<span className="text-gray-300">›</span>
{tab !== "documents" ? (
<button
onClick={onOpenDocuments}
className="text-gray-500 hover:text-gray-700 transition-colors"
>
{project.name}
{project.cm_number ? (
<span className="ml-1 text-gray-400">
(#{project.cm_number})
</span>
) : null}
</button>
) : (
<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
}
/>
)}
{tab !== "documents" && (
<>
<span className="text-gray-300">›</span>
<span className="text-gray-900">
{tab === "assistant"
? "Assistant"
: "Tabular Reviews"}
),
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>
</>
)}
</div>
</div>
<div className="flex items-center gap-4">
<HeaderSearchBtn
value={search}
onChange={onSearchChange}
placeholder="Search…"
/>
<button
onClick={onOpenPeople}
className="flex h-8 w-8 items-center justify-center text-sm text-gray-500 transition-colors hover:text-gray-900 cursor-pointer"
title="People with access"
aria-label="People with access"
>
<Users className="h-4 w-4" />
</button>
<div className="relative group">
<button
onClick={() => !creatingChat && onNewChat()}
className={`flex h-8 items-center justify-center gap-1.5 text-sm transition-colors ${
!creatingChat
? "text-gray-500 hover:text-gray-900 cursor-pointer"
: "text-gray-300 cursor-default"
}`}
>
{creatingChat ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<Plus className="h-4 w-4" />
)}
Chat
</button>
</div>
<div className="relative group">
<button
onClick={() =>
docsCount > 0 && !creatingReview && onNewReview()
}
className={`flex h-8 items-center justify-center gap-1.5 text-sm transition-colors ${
docsCount > 0
? "text-gray-500 hover:text-gray-900 cursor-pointer"
: "text-gray-300 cursor-default"
}`}
>
{creatingReview ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<Plus className="h-4 w-4" />
)}
Tabular Review
</button>
{docsCount === 0 && (
<div className="pointer-events-none absolute right-0 top-full mt-1.5 z-10 hidden group-hover:flex items-center whitespace-nowrap rounded-lg bg-gray-900 px-2.5 py-1.5 text-xs text-white shadow-lg">
Upload a document first
</div>
)}
</div>
</div>
</div>
),
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()
);
}