mirror of
https://github.com/willchen96/mike.git
synced 2026-06-24 21:38:06 +02:00
Add courtlistener intergration, liquid glass redesign, UI improvements, version control, various fixes
This commit is contained in:
willchen96
parent
d39f5806e5
commit
44e868eb42
106 changed files with 16350 additions and 7753 deletions
|
|
@ -1,7 +1,6 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { X } from "lucide-react";
|
||||
import {
|
||||
deleteWorkflowShare,
|
||||
|
|
@ -10,6 +9,7 @@ import {
|
|||
} from "@/app/lib/mikeApi";
|
||||
import { useAuth } from "@/contexts/AuthContext";
|
||||
import { EmailPillInput } from "../shared/EmailPillInput";
|
||||
import { Modal } from "../shared/Modal";
|
||||
|
||||
interface Share {
|
||||
id: string;
|
||||
|
|
@ -67,103 +67,74 @@ export function ShareWorkflowModal({
|
|||
}
|
||||
}
|
||||
|
||||
return createPortal(
|
||||
<div className="fixed inset-0 z-[101] flex items-center justify-center bg-black/20 backdrop-blur-xs">
|
||||
<div className="w-full max-w-2xl rounded-2xl bg-white shadow-2xl flex flex-col h-[600px]">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-gray-100">
|
||||
<div className="flex items-center gap-1.5 text-xs text-gray-400">
|
||||
<span>Workflows</span>
|
||||
<span>›</span>
|
||||
<span className="truncate max-w-[220px]">
|
||||
{workflowName}
|
||||
</span>
|
||||
<span>›</span>
|
||||
<span>People</span>
|
||||
</div>
|
||||
<button onClick={onClose} className="rounded-lg p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-600">
|
||||
<X className="h-4 w-4" />
|
||||
return (
|
||||
<Modal
|
||||
open
|
||||
onClose={onClose}
|
||||
breadcrumbs={["Workflows", workflowName, "People"]}
|
||||
primaryAction={{
|
||||
label: saving ? "Sharing…" : "Share",
|
||||
onClick: handleConfirm,
|
||||
disabled: saving || pendingEmails.length === 0,
|
||||
}}
|
||||
>
|
||||
<EmailPillInput
|
||||
emails={pendingEmails}
|
||||
onChange={setPendingEmails}
|
||||
validate={async (email) =>
|
||||
ownEmail && email === ownEmail
|
||||
? "You cannot share a workflow with yourself."
|
||||
: null
|
||||
}
|
||||
placeholder="Add people by email…"
|
||||
autoFocus
|
||||
/>
|
||||
|
||||
{/* Permission toggle */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-xs font-medium text-gray-700">Allow editing by share recipients</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAllowEdit((v) => !v)}
|
||||
className={`relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ${allowEdit ? "bg-gray-900" : "bg-gray-200"}`}
|
||||
>
|
||||
<span className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow transition-transform duration-200 ${allowEdit ? "translate-x-4" : "translate-x-0"}`} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="px-5 py-4 flex flex-col gap-4 flex-1 overflow-y-auto">
|
||||
<EmailPillInput
|
||||
emails={pendingEmails}
|
||||
onChange={setPendingEmails}
|
||||
validate={async (email) =>
|
||||
ownEmail && email === ownEmail
|
||||
? "You cannot share a workflow with yourself."
|
||||
: null
|
||||
}
|
||||
placeholder="Add people by email…"
|
||||
autoFocus
|
||||
/>
|
||||
|
||||
{/* Permission toggle */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-xs font-medium text-gray-700">Allow editing by share recipients</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAllowEdit((v) => !v)}
|
||||
className={`relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ${allowEdit ? "bg-gray-900" : "bg-gray-200"}`}
|
||||
>
|
||||
<span className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow transition-transform duration-200 ${allowEdit ? "translate-x-4" : "translate-x-0"}`} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Existing access */}
|
||||
<div>
|
||||
<p className="text-xs font-medium text-gray-700 mb-2">People with access</p>
|
||||
{loading ? (
|
||||
<div className="space-y-2">
|
||||
{[1, 2].map((i) => (
|
||||
<div key={i} className="flex items-center justify-between">
|
||||
<div className="h-3 w-40 rounded bg-gray-100 animate-pulse" />
|
||||
<div className="h-3 w-16 rounded bg-gray-100 animate-pulse" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : existingShares.length === 0 ? (
|
||||
<p className="text-sm text-gray-400">None</p>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
{existingShares.map((share) => (
|
||||
<div key={share.id} className="flex items-center justify-between py-1">
|
||||
<span className="text-sm text-gray-700 truncate">{share.shared_with_email}</span>
|
||||
<div className="flex items-center gap-3 shrink-0">
|
||||
<span className="text-xs text-gray-400">{share.allow_edit ? "Can edit" : "Read-only"}</span>
|
||||
<button
|
||||
onClick={() => handleRemoveShare(share.id)}
|
||||
className="text-gray-300 hover:text-red-500 transition-colors"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
{/* Existing access */}
|
||||
<div>
|
||||
<p className="text-xs font-medium text-gray-700 mb-2">People with access</p>
|
||||
{loading ? (
|
||||
<div className="space-y-2">
|
||||
{[1, 2].map((i) => (
|
||||
<div key={i} className="flex items-center justify-between">
|
||||
<div className="h-3 w-40 rounded bg-gray-100 animate-pulse" />
|
||||
<div className="h-3 w-16 rounded bg-gray-100 animate-pulse" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : existingShares.length === 0 ? (
|
||||
<p className="text-sm text-gray-400">None</p>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
{existingShares.map((share) => (
|
||||
<div key={share.id} className="flex items-center justify-between py-1">
|
||||
<span className="text-sm text-gray-700 truncate">{share.shared_with_email}</span>
|
||||
<div className="flex items-center gap-3 shrink-0">
|
||||
<span className="text-xs text-gray-400">{share.allow_edit ? "Can edit" : "Read-only"}</span>
|
||||
<button
|
||||
onClick={() => handleRemoveShare(share.id)}
|
||||
className="text-gray-300 hover:text-red-500 transition-colors"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="border-t border-gray-100 px-5 py-3 flex justify-end gap-2 mt-auto shrink-0">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="rounded-lg px-5 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleConfirm}
|
||||
disabled={saving || pendingEmails.length === 0}
|
||||
className="rounded-lg bg-gray-900 px-5 py-2 text-sm font-medium text-white hover:bg-gray-700 disabled:opacity-40 transition-colors"
|
||||
>
|
||||
{saving ? "Sharing…" : "Share"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue