homeio

1"use client";
2
3import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog";
4import { Save, X } from "@/components/icons/platform-icons";
5import type { FileReadResponse } from "@/lib/shared/contracts/files";
6import { PreviewBody } from "@/modules/files/components/content/file-manager-open-file-preview";
7import {
8  FILES_BADGE_SURFACE,
9  FILES_PANEL_INSET,
10} from "@/modules/files/components/file-manager-surface";
11import { getFileIcon, type FileEntry } from "@/modules/files/components/file-manager-presenters";
12import React, { useState } from "react";
13import type { SetStateAction } from "react";
14
15type OpenFileDialogProps = {
16  canSaveOpenFile: boolean;
17  editorNotice: string | null;
18  fileContentErrorMessage: string;
19  fileContentIsError: boolean;
20  fileContentIsLoading: boolean;
21  hasUnsavedChanges: boolean;
22  onChangeOpenFileDraft: (value: SetStateAction<string>) => void;
23  onClose: () => void;
24  onSave: () => void;
25  openFile: { entry: FileEntry };
26  openFileAssetUrl: string;
27  openFileBadgeLabel: string;
28  openFileContent: string;
29  openFileKey: string | null;
30  openFileLanguage: string;
31  openFileViewer: FileReadResponse | null;
32  showSaveOpenFile: boolean;
33};
34
35export function OpenFileDialog({
36  canSaveOpenFile,
37  editorNotice,
38  fileContentErrorMessage,
39  fileContentIsError,
40  fileContentIsLoading,
41  hasUnsavedChanges,
42  onChangeOpenFileDraft,
43  onClose,
44  onSave,
45  openFile,
46  openFileAssetUrl,
47  openFileBadgeLabel,
48  openFileContent,
49  openFileKey,
50  openFileLanguage,
51  openFileViewer,
52  showSaveOpenFile,
53}: OpenFileDialogProps) {
54  const [showDiscardConfirm, setShowDiscardConfirm] = useState(false);
55
56  const headerEntry =
57    openFileViewer && openFile.entry.type === "file"
58      ? { ...openFile.entry, ext: openFileViewer.ext ?? openFile.entry.ext }
59      : openFile.entry;
60
61  function handleCloseRequest() {
62    if (hasUnsavedChanges) {
63      setShowDiscardConfirm(true);
64    } else {
65      onClose();
66    }
67  }
68
69  return (
70    <>
71      <Dialog open onOpenChange={(open) => { if (!open) handleCloseRequest(); }}>
72        <DialogContent
73          showCloseButton={false}
74          aria-label={`Open file ${openFile.entry.name}`}
75          className={`h-[min(88vh,920px)] w-[min(96vw,76rem)] max-w-[min(96vw,76rem)] gap-0 overflow-hidden rounded-[calc(var(--radius)+0.5rem)] border-glass-border/70 bg-popover/90 p-0 shadow-[0_24px_64px_rgba(0,0,0,0.45)] backdrop-blur-2xl sm:max-w-[min(96vw,76rem)] lg:w-[min(92vw,84rem)] lg:max-w-[min(92vw,84rem)] ${FILES_PANEL_INSET}`}
76        >
77          {/* Accessible title/description (visually hidden) */}
78          <DialogTitle className="sr-only">{openFile.entry.name}</DialogTitle>
79          <DialogDescription className="sr-only">
80            File editor — {openFileBadgeLabel}
81          </DialogDescription>
82
83          {/* Window chrome title bar */}
84          <div className="flex h-11 shrink-0 select-none items-center gap-0 border-b border-glass-border/50 bg-popover/70 backdrop-blur-2xl">
85            {/* Traffic lights */}
86            <div className="flex items-center gap-1.5 px-4">
87              <button
88                onClick={handleCloseRequest}
89                className="group flex size-3 cursor-pointer items-center justify-center rounded-full bg-[#ff5f57] transition-all hover:brightness-110"
90                aria-label="Close"
91              >
92                <X className="size-[7px] text-[#6a0002] opacity-0 transition-opacity group-hover:opacity-100" />
93              </button>
94              <span className="size-3 rounded-full bg-white/10" />
95              <span className="size-3 rounded-full bg-white/10" />
96            </div>
97
98            {/* Centered file tab */}
99            <div className="flex flex-1 items-center justify-center">
100              <div className="flex items-center gap-2 rounded-[var(--system-radius-control)] border border-glass-border/50 bg-background/35 px-3 py-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]">
101                <span className="flex size-4 shrink-0 items-center justify-center text-primary/80">
102                  {getFileIcon(headerEntry)}
103                </span>
104                <span className="max-w-[32ch] truncate text-xs font-medium text-foreground/90">
105                  {openFile.entry.name}
106                </span>
107                {hasUnsavedChanges ? (
108                  <span
109                    className="size-1.5 shrink-0 rounded-full bg-status-amber"
110                    title="Unsaved changes"
111                  />
112                ) : null}
113                <span className={`${FILES_BADGE_SURFACE} px-1.5 py-px text-[10px] uppercase tracking-wider text-primary/70`}>
114                  {openFileBadgeLabel}
115                </span>
116              </div>
117            </div>
118
119            {/* Right gutter — balances traffic lights */}
120            <div className="flex w-[76px] items-center justify-end px-4">
121              {hasUnsavedChanges ? (
122                <span className="text-[11px] tabular-nums text-muted-foreground/40">⌘S</span>
123              ) : null}
124            </div>
125          </div>
126
127          {/* Editor body */}
128          <div className="relative min-h-0 flex-1">
129            <PreviewBody
130              fileContentErrorMessage={fileContentErrorMessage}
131              fileContentIsError={fileContentIsError}
132              fileContentIsLoading={fileContentIsLoading}
133              onChangeOpenFileDraft={onChangeOpenFileDraft}
134              onSaveOpenFile={onSave}
135              openFile={openFile}
136              openFileAssetUrl={openFileAssetUrl}
137              openFileContent={openFileContent}
138              openFileKey={openFileKey}
139              openFileLanguage={openFileLanguage}
140              openFileViewer={openFileViewer}
141            />
142
143            {/* Floating save button */}
144            {showSaveOpenFile && !showDiscardConfirm ? (
145              <div className="pointer-events-none absolute inset-x-0 bottom-0 flex justify-end p-4">
146                <button
147                  onClick={onSave}
148                  disabled={!canSaveOpenFile}
149                  className="system-primary-action pointer-events-auto inline-flex h-9 items-center gap-1.5 px-4 text-sm font-medium transition-all hover:brightness-110 disabled:pointer-events-none disabled:opacity-0"
150                >
151                  <Save className="size-3.5" />
152                  Save
153                </button>
154              </div>
155            ) : null}
156
157            {/* Inline discard confirmation strip */}
158            {showDiscardConfirm ? (
159              <div className="absolute inset-x-0 bottom-0 flex items-center justify-between gap-4 border-t border-glass-border/50 bg-popover/90 px-5 py-3 backdrop-blur-xl">
160                <p className="text-sm text-foreground/75">
161                  Discard changes to{" "}
162                  <span className="font-medium text-foreground">{openFile.entry.name}</span>?
163                </p>
164                <div className="flex items-center gap-2">
165                  <button
166                    onClick={() => setShowDiscardConfirm(false)}
167                    className="h-8 rounded-[var(--system-radius-control)] border border-glass-border/60 bg-white/5 px-3 text-xs font-medium text-foreground/70 transition-colors hover:bg-white/8 hover:text-foreground"
168                  >
169                    Keep editing
170                  </button>
171                  <button
172                    onClick={() => { setShowDiscardConfirm(false); onClose(); }}
173                    className="h-8 rounded-[var(--system-radius-control)] border border-status-red/20 bg-status-red/12 px-3 text-xs font-medium text-status-red transition-colors hover:bg-status-red/20"
174                  >
175                    Discard
176                  </button>
177                </div>
178              </div>
179            ) : null}
180          </div>
181
182          {/* Status bar */}
183          {editorNotice && !showDiscardConfirm ? (
184            <div className="shrink-0 border-t border-glass-border/50 bg-background/30 px-4 py-2">
185              <span className="text-[11px] text-muted-foreground/60">{editorNotice}</span>
186            </div>
187          ) : null}
188        </DialogContent>
189      </Dialog>
190    </>
191  );
192}
193