From 48b743b2c692b2f41a485cd3093aba68815d5746 Mon Sep 17 00:00:00 2001
From: Ethan Graf <ethan@Beacon.local>
Date: Mon, 8 Jun 2026 19:10:33 -0400
Subject: [PATCH] Add vault creation UI

---
 src/components/VaultManager.tsx | 216 ++++++++++++++++++++++++++++++++
 1 file changed, 216 insertions(+)
 create mode 100644 src/components/VaultManager.tsx

diff --git a/src/components/VaultManager.tsx b/src/components/VaultManager.tsx
new file mode 100644
index 0000000..dffc961
--- /dev/null
+++ b/src/components/VaultManager.tsx
@@ -0,0 +1,216 @@
+import { useEffect, useState } from 'react';
+import { Modal } from './Modal';
+import { CloudIcon, LaptopIcon, InfoIcon } from '../icons';
+import { useHabitatAuth } from '../auth/habitatAuth';
+
+type VaultManagerProps = {
+  open: boolean;
+  onClose: () => void;
+  onOpenVault: (path: string, type: 'local' | 'synced', did: string | null) => void;
+  onOpenSettings?: () => void;
+};
+
+export function VaultManager({ open, onClose, onOpenVault, onOpenSettings }: VaultManagerProps) {
+  const [path, setPath] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
+  const { authInfo } = useHabitatAuth();
+  const isAuthenticated = !!authInfo;
+  const [vaultType, setVaultType] = useState<'local' | 'synced'>('synced');
+
+  // Clear error whenever the modal opens so previous errors don't linger.
+  useEffect(() => {
+    if (open) {
+      setError(null);
+    }
+  }, [open]);
+
+  // If user is not authenticated, force local vault type.
+  useEffect(() => {
+    if (!isAuthenticated) {
+      setVaultType('local');
+    }
+  }, [isAuthenticated]);
+
+  // Fetch avatar from public Bluesky API when authenticated.
+  useEffect(() => {
+    if (!isAuthenticated || !authInfo) {
+      setAvatarUrl(null);
+      return;
+    }
+    let cancelled = false;
+    async function fetchAvatar() {
+      try {
+        const res = await fetch(`https://api.bsky.app/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(authInfo!.handle)}`);
+        if (!res.ok) return;
+        const data = await res.json();
+        if (!cancelled && data.avatar) {
+          setAvatarUrl(data.avatar);
+        }
+      } catch {
+        // Ignore fetch errors; fallback to initial letter.
+      }
+    }
+    fetchAvatar();
+    return () => { cancelled = true; };
+  }, [isAuthenticated, authInfo]);
+
+  const handleOpen = () => {
+    if (!path.trim()) {
+      setError('Please select a directory');
+      return;
+    }
+    setError(null);
+    onOpenVault(path.trim(), vaultType, isAuthenticated ? authInfo.did : null);
+    onClose();
+  };
+
+  const handleSelectDirectory = async () => {
+    try {
+      const result = await window.textile?.vault?.showOpenDialog();
+      if (result && !result.canceled && result.filePaths.length > 0) {
+        setPath(result.filePaths[0]!);
+        setError(null);
+      }
+    } catch {
+      // Dialog may not be available in browser dev environment
+    }
+  };
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      ariaLabel="Create Vault dialog"
+      title="Create Vault"
+      panelClassName="w-full max-w-md"
+      bodyClassName="flex min-h-0 flex-1 flex-col gap-4 p-5"
+    >
+      <div className="space-y-5">
+        <div>
+          <span className="text-foreground/80 mb-1 block text-xs font-medium">
+            Directory
+          </span>
+          <div className="flex gap-2 items-center">
+            <span className="flex-1 truncate text-xs text-foreground/60">
+              {path || 'No directory selected'}
+            </span>
+            <button
+              type="button"
+              onClick={handleSelectDirectory}
+              className="bg-primary/10 text-primary hover:bg-primary/20 border border-primary/30 rounded-md px-2.5 py-1.5 text-xs shrink-0 transition-colors cursor-pointer"
+            >
+              Browse…
+            </button>
+          </div>
+          {error && <p className="text-destructive text-xs mt-1">{error}</p>}
+        </div>
+
+        <div>
+          <div className="flex items-center gap-1 mb-1.5">
+            <span className="text-foreground/80 text-xs font-medium">
+              Sync to your Personal Data Server (PDS)
+            </span>
+            <button
+              type="button"
+              className="text-foreground/40 hover:text-foreground/70 cursor-help inline-block border-0 bg-transparent p-0"
+              title="Syncing your files to your Personal Data Server (PDS) enables sharing files to other devices and is needed for live collaboration. Keeping your files local will ensure Textile never sends your files off your device."
+              aria-label="Info about PDS sync"
+              onClick={(e) => e.preventDefault()}
+            >
+              <InfoIcon className="size-3.5" />
+            </button>
+          </div>
+          <div className="flex border border-border rounded-md overflow-hidden">
+            <button
+              type="button"
+              onClick={() => isAuthenticated && setVaultType('synced')}
+              disabled={!isAuthenticated}
+              className={`flex-1 flex items-center justify-center gap-1.5 py-1.5 text-xs cursor-pointer ${
+                vaultType === 'synced'
+                  ? 'bg-primary text-primary-foreground font-medium'
+                  : 'bg-background text-foreground/60 hover:bg-border/20'
+              } ${!isAuthenticated ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
+            >
+              <CloudIcon className="size-3.5" />
+              Sync to PDS
+            </button>
+            <button
+              type="button"
+              onClick={() => setVaultType('local')}
+              className={`flex-1 flex items-center justify-center gap-1.5 py-1.5 text-xs border-l border-border cursor-pointer ${
+                vaultType === 'local'
+                  ? 'bg-primary text-primary-foreground font-medium'
+                  : 'bg-background text-foreground/60 hover:bg-border/20'
+              }`}
+            >
+              <LaptopIcon className="size-3.5" />
+              Keep my files local
+            </button>
+          </div>
+          {isAuthenticated && (
+            <div className={`flex items-center gap-1.5 mt-1.5 ${vaultType === 'synced' ? '' : 'invisible'}`}>
+              {avatarUrl ? (
+                <img
+                  src={avatarUrl}
+                  alt=""
+                  className="rounded-full size-5 object-cover"
+                  aria-hidden
+                />
+              ) : (
+                <div className="bg-primary text-primary-foreground flex items-center justify-center rounded-full size-5 text-[10px] font-semibold">
+                  {authInfo.handle.charAt(0).toUpperCase()}
+                </div>
+              )}
+              <span className="text-foreground/80 text-xs">
+                {authInfo.handle}
+              </span>
+              <button
+                type="button"
+                onClick={() => {
+                  onClose();
+                  onOpenSettings?.();
+                }}
+                className="text-foreground/40 hover:text-foreground/70 cursor-pointer border-0 bg-transparent p-0 text-[10px]"
+              >
+                Switch Account
+              </button>
+            </div>
+          )}
+          {!isAuthenticated && (
+            <p className="text-foreground/60 text-xs mt-1">
+              <button
+                type="button"
+                onClick={() => {
+                  onClose();
+                  onOpenSettings?.();
+                }}
+                className="text-primary hover:underline cursor-pointer border-0 bg-transparent p-0 text-xs"
+              >
+                Sign in to your Atmosphere Account
+              </button>{' '}
+              to enable syncing.
+            </p>
+          )}
+        </div>
+      </div>
+
+      <div className="mt-auto flex justify-end gap-2">
+        <button
+          type="button"
+          onClick={onClose}
+          className="border-border bg-background text-foreground hover:bg-border/30 rounded-md border px-3 py-1.5 text-xs cursor-pointer"
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          onClick={handleOpen}
+          className="bg-primary text-primary-foreground hover:opacity-90 rounded-md px-3 py-1.5 text-xs cursor-pointer"
+        >
+          Create Vault
+        </button>
+      </div>
+    </Modal>
+  );
+}
-- 
2.54.0