Migrate secondary modals to shared frame
This commit is contained in:
Richard R
parent
bd3b99b3ee
commit
5e0303d065
5 changed files with 228 additions and 406 deletions
|
|
@ -1,15 +1,8 @@
|
|||
'use client';
|
||||
|
||||
import { Fragment, useState, useEffect } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogPanel,
|
||||
DialogTitle,
|
||||
Transition,
|
||||
TransitionChild,
|
||||
} from '@headlessui/react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { updateAppConfig } from '@/lib/client/dexie';
|
||||
import { Button, dialogPanelStyles } from '@/components/ui';
|
||||
import { Button, ModalFrame, ModalTitle } from '@/components/ui';
|
||||
|
||||
interface PrivacyModalProps {
|
||||
isOpen: boolean;
|
||||
|
|
@ -77,81 +70,46 @@ export function PrivacyModal({ isOpen, onAccept, onDismiss }: PrivacyModalProps)
|
|||
};
|
||||
|
||||
return (
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-[80]" onClose={onDismiss ?? (() => { })}>
|
||||
<TransitionChild
|
||||
as={Fragment}
|
||||
enter="ease-standard duration-slow"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-standard duration-base"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 overlay-dim backdrop-blur-sm" />
|
||||
</TransitionChild>
|
||||
<ModalFrame open={isOpen} onClose={onDismiss ?? (() => {})} panelTestId="privacy-modal" className="z-[80]">
|
||||
<ModalTitle>Privacy & Data Usage</ModalTitle>
|
||||
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-start justify-center p-4 pt-6 text-center sm:items-center sm:pt-4">
|
||||
<TransitionChild
|
||||
as={Fragment}
|
||||
enter="ease-standard duration-slow"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-standard duration-base"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<DialogPanel data-testid="privacy-modal" className={dialogPanelStyles({ size: 'md' })}>
|
||||
<DialogTitle
|
||||
as="h3"
|
||||
className="text-lg font-semibold leading-6 text-foreground"
|
||||
>
|
||||
Privacy & Data Usage
|
||||
</DialogTitle>
|
||||
<PrivacyModalBody origin={origin} />
|
||||
|
||||
<PrivacyModalBody origin={origin} />
|
||||
|
||||
<div className="mt-6 space-y-4">
|
||||
<div className="flex items-start gap-3 rounded-lg border border-line p-3 bg-surface-sunken">
|
||||
<div className="flex h-6 items-center">
|
||||
<input
|
||||
data-testid="privacy-agree-checkbox"
|
||||
id="privacy-agree"
|
||||
type="checkbox"
|
||||
checked={agreed}
|
||||
onChange={(e) => setAgreed(e.target.checked)}
|
||||
className="h-4 w-4 rounded border-line text-accent focus:ring-accent-line bg-surface"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-sm leading-6">
|
||||
<label htmlFor="privacy-agree" className="font-medium text-foreground select-none cursor-pointer">
|
||||
I have read and agree to the
|
||||
</label>{' '}
|
||||
<a href="/privacy" target="_blank" className="font-semibold text-accent hover:underline">
|
||||
Privacy Policy
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
data-testid="privacy-continue-button"
|
||||
variant="primary"
|
||||
size="lg"
|
||||
disabled={!agreed}
|
||||
onClick={handleAccept}
|
||||
>
|
||||
Continue
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
<div className="mt-6 space-y-4">
|
||||
<div className="flex items-start gap-3 rounded-lg border border-line p-3 bg-surface-sunken">
|
||||
<div className="flex h-6 items-center">
|
||||
<input
|
||||
data-testid="privacy-agree-checkbox"
|
||||
id="privacy-agree"
|
||||
type="checkbox"
|
||||
checked={agreed}
|
||||
onChange={(e) => setAgreed(e.target.checked)}
|
||||
className="h-4 w-4 rounded border-line text-accent focus:ring-accent-line bg-surface"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-sm leading-6">
|
||||
<label htmlFor="privacy-agree" className="font-medium text-foreground select-none cursor-pointer">
|
||||
I have read and agree to the
|
||||
</label>{' '}
|
||||
<a href="/privacy" target="_blank" className="font-semibold text-accent hover:underline">
|
||||
Privacy Policy
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
data-testid="privacy-continue-button"
|
||||
variant="primary"
|
||||
size="lg"
|
||||
disabled={!agreed}
|
||||
onClick={handleAccept}
|
||||
>
|
||||
Continue
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</ModalFrame>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -179,64 +137,28 @@ export function showPrivacyModal(): void {
|
|||
};
|
||||
|
||||
return (
|
||||
<Transition
|
||||
appear
|
||||
show={show}
|
||||
as={Fragment}
|
||||
<ModalFrame
|
||||
open={show}
|
||||
onClose={handleClose}
|
||||
afterLeave={() => {
|
||||
root.unmount();
|
||||
container.remove();
|
||||
}}
|
||||
>
|
||||
<Dialog as="div" className="relative z-50" onClose={handleClose}>
|
||||
<TransitionChild
|
||||
as={Fragment}
|
||||
enter="ease-standard duration-slow"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-standard duration-base"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
<ModalTitle>Privacy & Data Usage</ModalTitle>
|
||||
|
||||
<PrivacyModalBody origin={origin} />
|
||||
|
||||
<div className="mt-6 flex justify-end">
|
||||
<Button
|
||||
variant="primary"
|
||||
size="lg"
|
||||
onClick={handleClose}
|
||||
>
|
||||
<div className="fixed inset-0 overlay-dim backdrop-blur-sm" />
|
||||
</TransitionChild>
|
||||
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-start justify-center p-4 pt-6 text-center sm:items-center sm:pt-4">
|
||||
<TransitionChild
|
||||
as={Fragment}
|
||||
enter="ease-standard duration-slow"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-standard duration-base"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<DialogPanel className={dialogPanelStyles({ size: 'md' })}>
|
||||
<DialogTitle
|
||||
as="h3"
|
||||
className="text-lg font-semibold leading-6 text-foreground"
|
||||
>
|
||||
Privacy & Data Usage
|
||||
</DialogTitle>
|
||||
|
||||
<PrivacyModalBody origin={origin} />
|
||||
|
||||
<div className="mt-6 flex justify-end">
|
||||
<Button
|
||||
variant="primary"
|
||||
size="lg"
|
||||
onClick={handleClose}
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
</ModalFrame>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,9 @@
|
|||
'use client';
|
||||
|
||||
import { Fragment, useState } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogPanel,
|
||||
DialogTitle,
|
||||
Transition,
|
||||
TransitionChild,
|
||||
} from '@headlessui/react';
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import toast from 'react-hot-toast';
|
||||
import { Button, dialogPanelStyles } from '@/components/ui';
|
||||
import { Button, ModalFrame, ModalTitle } from '@/components/ui';
|
||||
|
||||
export type ClaimableCounts = {
|
||||
documents: number;
|
||||
|
|
@ -74,83 +67,48 @@ export default function ClaimDataModal({
|
|||
};
|
||||
|
||||
return (
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-[80]" onClose={onDismiss}>
|
||||
<TransitionChild
|
||||
as={Fragment}
|
||||
enter="ease-standard duration-slow"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-standard duration-base"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
<ModalFrame open={isOpen} onClose={onDismiss} panelTestId="claim-modal" className="z-[80]">
|
||||
<ModalTitle className="mb-4">Existing Data Found</ModalTitle>
|
||||
|
||||
<p className="text-sm text-soft mb-2">
|
||||
We found existing anonymous data from before auth was enabled.
|
||||
Claim it now to attach it to your account.
|
||||
</p>
|
||||
|
||||
<div className="mb-4 rounded-lg border border-line bg-surface-sunken p-3">
|
||||
<div className="text-xs font-semibold uppercase tracking-wide text-soft">Claimable data</div>
|
||||
<ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-soft">
|
||||
<li>{claimableCounts.documents} document(s)</li>
|
||||
<li>{claimableCounts.audiobooks} audiobook(s)</li>
|
||||
<li>{claimableCounts.preferences} preference set(s)</li>
|
||||
<li>{claimableCounts.progress} reading progress record(s)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-faint mb-6 italic">
|
||||
⚠️ First user to claim this data will own it and revoke access for anyone else.
|
||||
</p>
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button
|
||||
data-testid="claim-dismiss-button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onDismiss}
|
||||
disabled={isClaiming}
|
||||
>
|
||||
<div className="fixed inset-0 overlay-dim backdrop-blur-sm" />
|
||||
</TransitionChild>
|
||||
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-start justify-center p-4 pt-6 text-center sm:items-center sm:pt-4">
|
||||
<TransitionChild
|
||||
as={Fragment}
|
||||
enter="ease-standard duration-slow"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-standard duration-base"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<DialogPanel data-testid="claim-modal" className={dialogPanelStyles({ size: 'md' })}>
|
||||
<DialogTitle
|
||||
as="h3"
|
||||
className="text-lg font-semibold leading-6 text-foreground mb-4"
|
||||
>
|
||||
Existing Data Found
|
||||
</DialogTitle>
|
||||
|
||||
<p className="text-sm text-soft mb-2">
|
||||
We found existing anonymous data from before auth was enabled.
|
||||
Claim it now to attach it to your account.
|
||||
</p>
|
||||
|
||||
<div className="mb-4 rounded-lg border border-line bg-surface-sunken p-3">
|
||||
<div className="text-xs font-semibold uppercase tracking-wide text-soft">Claimable data</div>
|
||||
<ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-soft">
|
||||
<li>{claimableCounts.documents} document(s)</li>
|
||||
<li>{claimableCounts.audiobooks} audiobook(s)</li>
|
||||
<li>{claimableCounts.preferences} preference set(s)</li>
|
||||
<li>{claimableCounts.progress} reading progress record(s)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-faint mb-6 italic">
|
||||
⚠️ First user to claim this data will own it and revoke access for anyone else.
|
||||
</p>
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button
|
||||
data-testid="claim-dismiss-button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onDismiss}
|
||||
disabled={isClaiming}
|
||||
>
|
||||
Dismiss
|
||||
</Button>
|
||||
<Button
|
||||
data-testid="claim-submit-button"
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={handleClaim}
|
||||
disabled={isClaiming}
|
||||
>
|
||||
{isClaiming ? 'Claiming...' : 'Claim Data'}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
Dismiss
|
||||
</Button>
|
||||
<Button
|
||||
data-testid="claim-submit-button"
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={handleClaim}
|
||||
disabled={isClaiming}
|
||||
>
|
||||
{isClaiming ? 'Claiming...' : 'Claim Data'}
|
||||
</Button>
|
||||
</div>
|
||||
</ModalFrame>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
'use client';
|
||||
|
||||
import { Fragment, useCallback, useEffect, useState } from 'react';
|
||||
import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { getAllEpubDocuments, getAllHtmlDocuments, getAllPdfDocuments, updateAppConfig } from '@/lib/client/dexie';
|
||||
import { listDocuments, mimeTypeForDoc, uploadDocuments } from '@/lib/client/api/documents';
|
||||
import { useDocuments } from '@/contexts/DocumentContext';
|
||||
import type { BaseDocument } from '@/types/documents';
|
||||
import { cacheStoredDocumentFromBytes } from '@/lib/client/cache/documents';
|
||||
import { Button, dialogPanelStyles } from '@/components/ui';
|
||||
import { Button, ModalFrame, ModalTitle } from '@/components/ui';
|
||||
|
||||
type DexieMigrationModalProps = {
|
||||
isOpen: boolean;
|
||||
|
|
@ -137,78 +136,53 @@ export function DexieMigrationModal({
|
|||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-[80]" onClose={() => (closeDisabled ? null : onComplete())}>
|
||||
<TransitionChild
|
||||
as={Fragment}
|
||||
enter="ease-standard duration-slow"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-standard duration-base"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 overlay-dim backdrop-blur-sm" />
|
||||
</TransitionChild>
|
||||
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-start justify-center p-4 pt-6 text-center sm:items-center sm:pt-4">
|
||||
<TransitionChild
|
||||
as={Fragment}
|
||||
enter="ease-standard duration-slow"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-standard duration-base"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<DialogPanel data-testid="migration-modal" className={dialogPanelStyles({ size: 'md' })}>
|
||||
<DialogTitle as="h3" className="text-lg font-semibold leading-6 text-foreground mb-4">
|
||||
{title}
|
||||
</DialogTitle>
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm text-soft mb-2">
|
||||
Found {localCount} document{localCount === 1 ? '' : 's'} stored locally from an older version.
|
||||
{displayMissingCount > 0 ? (
|
||||
<> {displayMissingCount} {displayMissingCount === 1 ? 'is' : 'are'} not here yet.</>
|
||||
) : null}
|
||||
{' '}This app now stores documents on the server and keeps a local cache for speed.
|
||||
</p>
|
||||
{isUploading && (
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-soft">{status}</p>
|
||||
<div className="h-2 w-full rounded bg-surface-sunken">
|
||||
<div className="h-2 rounded bg-accent" style={{ width: `${Math.max(1, Math.round(progress))}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{!isUploading && status ? <p className="text-xs text-danger">{status}</p> : null}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3 mt-6">
|
||||
<Button
|
||||
data-testid="migration-skip-button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleSkip}
|
||||
disabled={isUploading}
|
||||
>
|
||||
Skip
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={handleUpload}
|
||||
disabled={isUploading}
|
||||
>
|
||||
{isUploading ? 'Uploading…' : 'Upload'}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
<ModalFrame
|
||||
open={isOpen}
|
||||
onClose={() => {
|
||||
if (!closeDisabled) onComplete();
|
||||
}}
|
||||
panelTestId="migration-modal"
|
||||
className="z-[80]"
|
||||
>
|
||||
<ModalTitle className="mb-4">{title}</ModalTitle>
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm text-soft mb-2">
|
||||
Found {localCount} document{localCount === 1 ? '' : 's'} stored locally from an older version.
|
||||
{displayMissingCount > 0 ? (
|
||||
<> {displayMissingCount} {displayMissingCount === 1 ? 'is' : 'are'} not here yet.</>
|
||||
) : null}
|
||||
{' '}This app now stores documents on the server and keeps a local cache for speed.
|
||||
</p>
|
||||
{isUploading && (
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-soft">{status}</p>
|
||||
<div className="h-2 w-full rounded bg-surface-sunken">
|
||||
<div className="h-2 rounded bg-accent" style={{ width: `${Math.max(1, Math.round(progress))}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
)}
|
||||
{!isUploading && status ? <p className="text-xs text-danger">{status}</p> : null}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3 mt-6">
|
||||
<Button
|
||||
data-testid="migration-skip-button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleSkip}
|
||||
disabled={isUploading}
|
||||
>
|
||||
Skip
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={handleUpload}
|
||||
disabled={isUploading}
|
||||
>
|
||||
{isUploading ? 'Uploading…' : 'Upload'}
|
||||
</Button>
|
||||
</div>
|
||||
</ModalFrame>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
'use client';
|
||||
|
||||
import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
|
||||
import { Fragment, useEffect, useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { BaseDocument } from '@/types/documents';
|
||||
import { Button, dialogPanelStyles } from '@/components/ui';
|
||||
import { Button, ModalFrame, ModalTitle } from '@/components/ui';
|
||||
|
||||
interface DocumentSelectionModalProps {
|
||||
isOpen: boolean;
|
||||
|
|
@ -114,116 +113,83 @@ export function DocumentSelectionModal({
|
|||
};
|
||||
|
||||
return (
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-[60]" onClose={onClose}>
|
||||
<TransitionChild
|
||||
as={Fragment}
|
||||
enter="ease-standard duration-slow"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-standard duration-base"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 overlay-dim backdrop-blur-sm" />
|
||||
</TransitionChild>
|
||||
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-start justify-center p-4 pt-6 text-center sm:items-center sm:pt-4">
|
||||
<TransitionChild
|
||||
as={Fragment}
|
||||
enter="ease-standard duration-slow"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-standard duration-base"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<DialogPanel className={dialogPanelStyles({ size: 'lg', className: 'flex h-[80vh] flex-col' })}>
|
||||
<DialogTitle
|
||||
as="h3"
|
||||
className="text-lg font-semibold leading-6 text-foreground mb-4 flex-shrink-0 flex justify-between items-center"
|
||||
>
|
||||
{title}
|
||||
{files.length > 0 && (
|
||||
<div className="flex items-center text-sm font-normal">
|
||||
<label className="flex items-center gap-2 cursor-pointer select-none text-soft hover:text-foreground transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="rounded border-muted text-accent focus:ring-accent-line"
|
||||
checked={allSelected}
|
||||
ref={input => {
|
||||
if (input) input.indeterminate = isIndeterminate;
|
||||
}}
|
||||
onChange={(e) => handleSelectAll(e.target.checked)}
|
||||
/>
|
||||
Select All
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</DialogTitle>
|
||||
|
||||
<div className="flex-1 overflow-auto border border-line rounded-lg bg-background p-2 min-h-0">
|
||||
{isLoading ? (
|
||||
<DocumentSelectionSkeleton />
|
||||
) : errorMessage ? (
|
||||
<div className="flex items-center justify-center h-full text-danger">{errorMessage}</div>
|
||||
) : files.length === 0 ? (
|
||||
<div className="flex items-center justify-center h-full text-soft">No documents found.</div>
|
||||
) : (
|
||||
<div className="space-y-0.5">
|
||||
{files.map((file) => {
|
||||
const isSelected = selectedIds.has(file.id);
|
||||
return (
|
||||
<div
|
||||
key={file.id}
|
||||
onClick={(e) => handleRowClick(e, file.id)}
|
||||
className={`flex items-center gap-3 px-3 py-2 rounded-md cursor-pointer text-sm select-none
|
||||
${isSelected ? 'bg-accent-wash' : 'hover:bg-accent-wash'}
|
||||
`}
|
||||
>
|
||||
<div className="flex-shrink-0" onClick={(e) => e.stopPropagation()}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isSelected}
|
||||
onChange={(e) => handleCheckboxChange(file.id, e.target.checked)}
|
||||
className="rounded border-muted text-accent focus:ring-accent-line"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={`flex-1 truncate ${
|
||||
isSelected ? 'text-accent font-medium' : 'text-foreground'
|
||||
}`}
|
||||
>
|
||||
{file.name}
|
||||
</div>
|
||||
<div className="text-soft text-xs whitespace-nowrap">{formatSize(file.size)}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex justify-end gap-3 flex-shrink-0">
|
||||
<Button variant="outline" size="md" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="md"
|
||||
onClick={handleConfirmClick}
|
||||
disabled={isLoading || selectedCount === 0 || isProcessing}
|
||||
>
|
||||
{isProcessing ? 'Processing...' : `${confirmLabel} ${selectedCount > 0 ? `(${selectedCount})` : ''}`}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
<ModalFrame open={isOpen} onClose={onClose} size="lg" panelClassName="flex h-[80vh] flex-col" className="z-[60]">
|
||||
<ModalTitle className="mb-4 flex flex-shrink-0 items-center justify-between">
|
||||
{title}
|
||||
{files.length > 0 && (
|
||||
<div className="flex items-center text-sm font-normal">
|
||||
<label className="flex items-center gap-2 cursor-pointer select-none text-soft hover:text-foreground transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="rounded border-muted text-accent focus:ring-accent-line"
|
||||
checked={allSelected}
|
||||
ref={input => {
|
||||
if (input) input.indeterminate = isIndeterminate;
|
||||
}}
|
||||
onChange={(e) => handleSelectAll(e.target.checked)}
|
||||
/>
|
||||
Select All
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
)}
|
||||
</ModalTitle>
|
||||
|
||||
<div className="flex-1 overflow-auto border border-line rounded-lg bg-background p-2 min-h-0">
|
||||
{isLoading ? (
|
||||
<DocumentSelectionSkeleton />
|
||||
) : errorMessage ? (
|
||||
<div className="flex items-center justify-center h-full text-danger">{errorMessage}</div>
|
||||
) : files.length === 0 ? (
|
||||
<div className="flex items-center justify-center h-full text-soft">No documents found.</div>
|
||||
) : (
|
||||
<div className="space-y-0.5">
|
||||
{files.map((file) => {
|
||||
const isSelected = selectedIds.has(file.id);
|
||||
return (
|
||||
<div
|
||||
key={file.id}
|
||||
onClick={(e) => handleRowClick(e, file.id)}
|
||||
className={`flex items-center gap-3 px-3 py-2 rounded-md cursor-pointer text-sm select-none ${
|
||||
isSelected ? 'bg-accent-wash' : 'hover:bg-accent-wash'
|
||||
}`}
|
||||
>
|
||||
<div className="flex-shrink-0" onClick={(e) => e.stopPropagation()}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isSelected}
|
||||
onChange={(e) => handleCheckboxChange(file.id, e.target.checked)}
|
||||
className="rounded border-muted text-accent focus:ring-accent-line"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={`flex-1 truncate ${
|
||||
isSelected ? 'text-accent font-medium' : 'text-foreground'
|
||||
}`}
|
||||
>
|
||||
{file.name}
|
||||
</div>
|
||||
<div className="text-soft text-xs whitespace-nowrap">{formatSize(file.size)}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex justify-end gap-3 flex-shrink-0">
|
||||
<Button variant="outline" size="md" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="md"
|
||||
onClick={handleConfirmClick}
|
||||
disabled={isLoading || selectedCount === 0 || isProcessing}
|
||||
>
|
||||
{isProcessing ? 'Processing...' : `${confirmLabel} ${selectedCount > 0 ? `(${selectedCount})` : ''}`}
|
||||
</Button>
|
||||
</div>
|
||||
</ModalFrame>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@ export function ModalFrame({
|
|||
panelClassName,
|
||||
panelTestId,
|
||||
onKeyDown,
|
||||
afterLeave,
|
||||
}: {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
|
|
@ -52,9 +53,10 @@ export function ModalFrame({
|
|||
panelClassName?: string;
|
||||
panelTestId?: string;
|
||||
onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
|
||||
afterLeave?: () => void;
|
||||
}) {
|
||||
return (
|
||||
<Transition appear show={open} as={Fragment}>
|
||||
<Transition appear show={open} as={Fragment} afterLeave={afterLeave}>
|
||||
<Dialog as="div" role={undefined} className={cn('relative z-50', className)} onClose={onClose} onKeyDown={onKeyDown}>
|
||||
<TransitionChild
|
||||
as={Fragment}
|
||||
|
|
|
|||
Loading…
Reference in a new issue