homeio

1"use client";
2
3import { Input } from "@/components/ui/input";
4import {
5  Dialog,
6  DialogContent,
7  DialogDescription,
8  DialogHeader,
9  DialogTitle,
10} from "@/components/ui/dialog";
11import { ArrowLeft, Loader2, Plus, RefreshCw, Search, X } from "@/components/icons/platform-icons";
12
13export type AddNetworkShareDraft = {
14  host: string;
15  share: string;
16  username: string;
17  password: string;
18};
19
20type AddNetworkShareDialogProps = {
21  createPending: boolean;
22  discoverSharesPending: boolean;
23  discoveredShares: string[];
24  draft: AddNetworkShareDraft;
25  isBusy: boolean;
26  isOpen: boolean;
27  onClose: () => void;
28  onDiscoverServers: () => void;
29  onDiscoverShares: () => void;
30  onDraftChange: (updater: AddNetworkShareDraft | ((draft: AddNetworkShareDraft) => AddNetworkShareDraft)) => void;
31  onSelectShare: (share: string) => void;
32  onSubmit: () => void;
33};
34
35function FieldLabel({ children }: { children: React.ReactNode }) {
36  return (
37    <div className="mb-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
38      {children}
39    </div>
40  );
41}
42
43export function AddNetworkShareDialog({
44  createPending,
45  discoverSharesPending,
46  discoveredShares,
47  draft,
48  isBusy,
49  isOpen,
50  onClose,
51  onDiscoverServers,
52  onDiscoverShares,
53  onDraftChange,
54  onSelectShare,
55  onSubmit,
56}: AddNetworkShareDialogProps) {
57  function update<K extends keyof AddNetworkShareDraft>(key: K, value: AddNetworkShareDraft[K]) {
58    onDraftChange((current) => ({ ...current, [key]: value }));
59  }
60
61  return (
62    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
63      <DialogContent showCloseButton={false} className="max-w-[34rem] gap-0 border-glass-border bg-popover/96 p-0 shadow-2xl shadow-black/45 backdrop-blur-2xl">
64        <DialogHeader className="sr-only">
65          <DialogTitle>Add Network Share</DialogTitle>
66          <DialogDescription>Connect to an SMB share</DialogDescription>
67        </DialogHeader>
68
69        {/* Window chrome title bar */}
70        <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">
71          {/* Traffic lights */}
72          <div className="flex items-center gap-1.5 px-4">
73            <button
74              onClick={onClose}
75              className="group flex size-3 cursor-pointer items-center justify-center rounded-full bg-[#ff5f57] transition-all hover:brightness-110"
76              aria-label="Close"
77            >
78              <X className="size-[7px] text-[#6a0002] opacity-0 transition-opacity group-hover:opacity-100" />
79            </button>
80            <span className="size-3 rounded-full bg-white/10" />
81            <span className="size-3 rounded-full bg-white/10" />
82          </div>
83
84          {/* Centered title */}
85          <div className="flex flex-1 items-center justify-center">
86            <span className="text-xs font-medium text-foreground/80">Add Network Share</span>
87          </div>
88
89          {/* Right action — back button to balance */}
90          <div className="flex items-center justify-end px-4">
91            <button
92              type="button"
93              onClick={onClose}
94              className="inline-flex h-6 items-center gap-1 rounded-md border border-glass-border bg-background/80 px-2 text-[11px] text-muted-foreground transition-colors hover:bg-background/50 hover:text-foreground"
95              aria-label="Back"
96            >
97              <ArrowLeft className="size-3" />
98              Back
99            </button>
100          </div>
101        </div>
102
103        <div className="space-y-5 px-5 py-5">
104          {/* Server */}
105          <div>
106            <FieldLabel>Server</FieldLabel>
107            <div className="flex gap-2">
108              <Input
109                value={draft.host}
110                onChange={(event) => update("host", event.target.value)}
111                placeholder="Host or IP (e.g. nas.local, 192.168.1.100)"
112                className="h-8 rounded-lg border-glass-border bg-background/55 px-3 text-xs text-foreground placeholder:text-muted-foreground/60 focus-visible:border-primary/40 focus-visible:ring-0"
113              />
114              <button
115                type="button"
116                onClick={onDiscoverServers}
117                disabled={isBusy}
118                className="inline-flex h-8 shrink-0 items-center gap-1.5 rounded-lg border border-glass-border bg-background/55 px-3 text-xs text-muted-foreground transition-colors hover:bg-background/50 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
119              >
120                <RefreshCw className="size-3" />
121                Scan
122              </button>
123            </div>
124          </div>
125
126          {/* Credentials */}
127          <div>
128            <FieldLabel>Credentials</FieldLabel>
129            <div className="grid grid-cols-2 gap-2">
130              <Input
131                value={draft.username}
132                onChange={(event) => update("username", event.target.value)}
133                placeholder="Username"
134                className="h-8 rounded-lg border-glass-border bg-background/55 px-3 text-xs text-foreground placeholder:text-muted-foreground/60 focus-visible:border-primary/40 focus-visible:ring-0"
135              />
136              <Input
137                type="password"
138                value={draft.password}
139                onChange={(event) => update("password", event.target.value)}
140                placeholder="Password"
141                className="h-8 rounded-lg border-glass-border bg-background/55 px-3 text-xs text-foreground placeholder:text-muted-foreground/60 focus-visible:border-primary/40 focus-visible:ring-0"
142              />
143            </div>
144          </div>
145
146          {/* Share */}
147          <div>
148            <FieldLabel>Share</FieldLabel>
149            <div className="flex gap-2">
150              <Input
151                value={draft.share}
152                onChange={(event) => update("share", event.target.value)}
153                placeholder="Share name (e.g. Media, Documents)"
154                className="h-8 rounded-lg border-glass-border bg-background/55 px-3 text-xs text-foreground placeholder:text-muted-foreground/60 focus-visible:border-primary/40 focus-visible:ring-0"
155              />
156              <button
157                type="button"
158                onClick={onDiscoverShares}
159                disabled={isBusy}
160                className="inline-flex h-8 shrink-0 items-center gap-1.5 rounded-lg border border-glass-border bg-background/55 px-3 text-xs text-muted-foreground transition-colors hover:bg-background/50 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
161              >
162                {discoverSharesPending ? (
163                  <Loader2 className="size-3 animate-spin" />
164                ) : (
165                  <Search className="size-3" />
166                )}
167                Find
168              </button>
169            </div>
170
171            {discoveredShares.length > 0 ? (
172              <div className="mt-2.5 flex flex-wrap gap-1.5">
173                {discoveredShares.map((shareName) => (
174                  <button
175                    key={shareName}
176                    type="button"
177                    onClick={() => onSelectShare(shareName)}
178                    className="rounded-lg border border-glass-border bg-background/55 px-2.5 py-1 text-xs text-muted-foreground transition-colors hover:bg-background/75 hover:text-foreground"
179                  >
180                    {shareName}
181                  </button>
182                ))}
183              </div>
184            ) : null}
185          </div>
186        </div>
187
188        <div className="flex items-center justify-end gap-2 border-t border-glass-border/60 px-5 py-4">
189          <button
190            type="button"
191            onClick={onClose}
192            className="h-8 rounded-lg border border-glass-border bg-background/55 px-3 text-xs text-muted-foreground transition-colors hover:bg-background/50 hover:text-foreground"
193          >
194            Cancel
195          </button>
196          <button
197            type="button"
198            onClick={onSubmit}
199            disabled={isBusy}
200            className="inline-flex h-8 items-center gap-1.5 rounded-lg bg-primary/20 px-3 text-xs font-medium text-primary transition-colors hover:bg-primary/30 disabled:cursor-not-allowed disabled:opacity-50"
201          >
202            {createPending ? <Loader2 className="size-3 animate-spin" /> : <Plus className="size-3" />}
203            Add Share
204          </button>
205        </div>
206      </DialogContent>
207    </Dialog>
208  );
209}
210