Changes

Co-authored-by: Reifonas <211114984+Reifonas@users.noreply.github.com>
2026-05-14 16:57:12 +00:00
parent 09e5ecfb03
commit e2009dd37b
1 changed files with 206 additions and 83 deletions
@@ -1,17 +1,23 @@
 import { useState, useCallback } from 'react';
-import { Cloud, Loader2, Link2 } from 'lucide-react';
+import { Cloud, Loader2, Link2, FolderOpen } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
  Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogTrigger,
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 import { useModelStore } from '@/stores/useModelStore';
 import { toast } from 'sonner';
 import { getSupportedExtension, convertToGLB } from '@/lib/convertToGLB';
 import { convertIFCtoGLB } from '@/lib/convertIFC';
+import {
+  buildRawUrl, getFileBrowserToken, listFolder, type FBItem, type FolderListing,
+} from '@/lib/filebrowser';
+import { FolderBrowser } from './FolderBrowser';

 const DEFAULT_URL = 'https://store.tracksteel.com.br/demo.ifc';
+const DEFAULT_FOLDER = 'https://store.tracksteel.com.br/';

 const PRESETS: { label: string; url: string }[] = [
  { label: 'Demo IFC (TrackSteel)', url: DEFAULT_URL },
@@ -35,20 +41,6 @@ function normalizeCloudUrl(input: string): string {
  }
 }

-/** Tenta obter um token JWT de uma instância FileBrowser NoAuth (POST /api/login vazio). */
-async function tryFileBrowserToken(origin: string): Promise<string | null> {
-  try {
-    const r = await fetch(`${origin}/api/login`, { method: 'POST', mode: 'cors' });
-    if (!r.ok) return null;
-    const txt = (await r.text()).trim();
-    // FileBrowser devolve o JWT como texto puro
-    if (txt && txt.split('.').length === 3) return txt;
-    return null;
-  } catch {
-    return null;
-  }
-}
-
 /** Faz fetch tentando vários endpoints típicos de hosts que servem SPA (FileBrowser etc.). */
 async function smartFetch(rawUrl: string): Promise<Response> {
  const url = normalizeCloudUrl(rawUrl.trim());
@@ -61,17 +53,12 @@ async function smartFetch(rawUrl: string): Promise<Response> {
  const u = new URL(url);
  const path = u.pathname.startsWith('/api/raw/') ? u.pathname : `/api/raw${u.pathname}`;

-  // 1ª tentativa: /api/raw/... cru
  try {
    const r = await fetch(`${u.origin}${path}${u.search}`, { mode: 'cors' });
    if (r.ok && !(r.headers.get('content-type') || '').includes('text/html')) return r;
-    if (r.status !== 401) {
-      // pode ser outro erro — segue para fluxo de token
-    }
  } catch { /* continua */ }

-  // 2ª tentativa: pega token JWT NoAuth e usa ?auth=
-  const token = await tryFileBrowserToken(u.origin);
+  const token = await getFileBrowserToken(u.origin);
  if (token) {
    const sep = u.search ? '&' : '?';
    const r = await fetch(`${u.origin}${path}${u.search}${sep}auth=${encodeURIComponent(token)}`, { mode: 'cors' });
@@ -85,9 +72,7 @@ async function smartFetch(rawUrl: string): Promise<Response> {
 }

 interface CloudLoaderProps {
-  /** Renderiza como botão compacto (para HUD do AR) */
  compact?: boolean;
-  /** Variante visual do botão */
  variant?: 'default' | 'outline';
  className?: string;
 }
@@ -96,40 +81,62 @@ export function CloudLoader({ compact = false, variant = 'outline', className }:
  const addModel = useModelStore((s) => s.addModel);
  const modelsCount = useModelStore((s) => s.models.length);
  const maxModels = useModelStore((s) => s.maxModels);
+
  const [open, setOpen] = useState(false);
-  const [url, setUrl] = useState(DEFAULT_URL);
+  const [tab, setTab] = useState<'file' | 'folder'>('file');
  const [loading, setLoading] = useState(false);

-  const handleLoad = useCallback(async (rawUrl: string) => {
-    if (!rawUrl) return;
+  // ---- modo Arquivo
+  const [url, setUrl] = useState(DEFAULT_URL);
+
+  // ---- modo Pasta
+  const [folderInput, setFolderInput] = useState(DEFAULT_FOLDER);
+  const [listing, setListing] = useState<FolderListing | null>(null);
+  const [browsingLoading, setBrowsingLoading] = useState(false);
+  const [selectedName, setSelectedName] = useState<string | null>(null);
+  const [showAll, setShowAll] = useState(false);
+
+  /** Importa um buffer já baixado para a cena (conversão se necessário). */
+  const importBuffer = useCallback(async (buffer: ArrayBuffer, fileName: string) => {
+    const ext = getSupportedExtension(fileName);
+    if (!ext) throw new Error('Extensão não suportada (use GLB, OBJ, STL ou IFC)');
+
+    let blob: Blob, outName = fileName, outSize = buffer.byteLength;
+    if (ext === 'glb') {
+      blob = new Blob([buffer], { type: 'model/gltf-binary' });
+    } else if (ext === 'ifc') {
+      const r = await convertIFCtoGLB(buffer, fileName);
+      blob = r.blob; outName = r.fileName; outSize = r.fileSize;
+    } else {
+      const r = await convertToGLB(buffer, ext, fileName);
+      blob = r.blob; outName = r.fileName; outSize = r.fileSize;
+    }
+    const blobUrl = URL.createObjectURL(blob);
+    addModel({ fileName: outName, fileSize: outSize, url: blobUrl });
+    return outName;
+  }, [addModel]);
+
+  const ensureCanAdd = useCallback(() => {
    if (modelsCount >= maxModels) {
      toast.error(`Limite de ${maxModels} peças simultâneas atingido. Remova uma antes de adicionar outra.`);
-      return;
+      return false;
    }
+    return true;
+  }, [modelsCount, maxModels]);
+
+  // ============= MODO ARQUIVO =============
+  const handleLoadFile = useCallback(async (rawUrl: string) => {
+    if (!rawUrl || !ensureCanAdd()) return;
    setLoading(true);
    try {
      const fileName = rawUrl.split('/').pop()?.split('?')[0] || 'modelo-cloud';
-      const ext = getSupportedExtension(fileName);
-      if (!ext) {
+      if (!getSupportedExtension(fileName)) {
        toast.error('URL deve apontar para .GLB, .OBJ, .STL ou .IFC');
        return;
      }
-
      const response = await smartFetch(rawUrl);
      const buffer = await response.arrayBuffer();
-
-      let blob: Blob, outName = fileName, outSize = buffer.byteLength;
-      if (ext === 'glb') {
-        blob = new Blob([buffer], { type: 'model/gltf-binary' });
-      } else if (ext === 'ifc') {
-        const r = await convertIFCtoGLB(buffer, fileName);
-        blob = r.blob; outName = r.fileName; outSize = r.fileSize;
-      } else {
-        const r = await convertToGLB(buffer, ext, fileName);
-        blob = r.blob; outName = r.fileName; outSize = r.fileSize;
-      }
-      const blobUrl = URL.createObjectURL(blob);
-      addModel({ fileName: outName, fileSize: outSize, url: blobUrl });
+      const outName = await importBuffer(buffer, fileName);
      toast.success(`"${outName}" adicionado à cena`);
      setOpen(false);
    } catch (err) {
@@ -138,7 +145,57 @@ export function CloudLoader({ compact = false, variant = 'outline', className }:
    } finally {
      setLoading(false);
    }
-  }, [addModel, modelsCount, maxModels]);
+  }, [ensureCanAdd, importBuffer]);
+
+  // ============= MODO PASTA =============
+  const openFolder = useCallback(async (folderUrl: string) => {
+    if (!folderUrl) return;
+    setBrowsingLoading(true);
+    setSelectedName(null);
+    try {
+      const result = await listFolder({ folderUrl });
+      setListing(result);
+    } catch (err) {
+      console.error(err);
+      setListing(null);
+      toast.error(err instanceof Error ? err.message : 'Falha ao abrir pasta');
+    } finally {
+      setBrowsingLoading(false);
+    }
+  }, []);
+
+  const navigateTo = useCallback(async (path: string) => {
+    if (!listing) return;
+    setBrowsingLoading(true);
+    setSelectedName(null);
+    try {
+      const result = await listFolder({ origin: listing.origin, path });
+      setListing(result);
+    } catch (err) {
+      console.error(err);
+      toast.error(err instanceof Error ? err.message : 'Falha ao navegar');
+    } finally {
+      setBrowsingLoading(false);
+    }
+  }, [listing]);
+
+  const handleLoadSelected = useCallback(async () => {
+    if (!listing || !selectedName || !ensureCanAdd()) return;
+    setLoading(true);
+    try {
+      const rawUrl = buildRawUrl(listing.origin, listing.path, selectedName, listing.token);
+      const response = await smartFetch(rawUrl);
+      const buffer = await response.arrayBuffer();
+      const outName = await importBuffer(buffer, selectedName);
+      toast.success(`"${outName}" adicionado à cena`);
+      setOpen(false);
+    } catch (err) {
+      console.error(err);
+      toast.error(err instanceof Error ? err.message : 'Falha ao carregar arquivo');
+    } finally {
+      setLoading(false);
+    }
+  }, [listing, selectedName, ensureCanAdd, importBuffer]);

  return (
    <Dialog open={open} onOpenChange={setOpen}>
@@ -158,61 +215,127 @@ export function CloudLoader({ compact = false, variant = 'outline', className }:
          </Button>
        )}
      </DialogTrigger>
-      <DialogContent className="sm:max-w-md">
+      <DialogContent className="sm:max-w-lg">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Cloud className="h-4 w-4 text-primary" />
            Carregar modelo da nuvem
          </DialogTitle>
          <DialogDescription className="text-xs">
-            URL direta para .GLB, .OBJ, .STL ou .IFC. Dropbox use <code>?dl=1</code>, OneDrive <code>?download=1</code>.
-            FileBrowser é detectado automaticamente.
+            Aceita URL direta de arquivo ou URL de pasta (FileBrowser).
          </DialogDescription>
        </DialogHeader>

-        <div className="space-y-3">
-          <div className="space-y-1.5">
-            <Label htmlFor="cloud-url" className="text-xs font-mono">URL do modelo</Label>
-            <div className="flex gap-2">
-              <Link2 className="h-4 w-4 text-muted-foreground mt-2.5 shrink-0" />
-              <Input
-                id="cloud-url"
-                value={url}
-                onChange={(e) => setUrl(e.target.value)}
-                placeholder="https://exemplo.com/modelo.glb"
-                disabled={loading}
-                className="font-mono text-xs"
-              />
-            </div>
-          </div>
+        <Tabs value={tab} onValueChange={(v) => setTab(v as 'file' | 'folder')} className="w-full">
+          <TabsList className="grid grid-cols-2 w-full">
+            <TabsTrigger value="file" className="text-xs font-mono gap-1.5">
+              <Link2 className="h-3 w-3" /> Arquivo
+            </TabsTrigger>
+            <TabsTrigger value="folder" className="text-xs font-mono gap-1.5">
+              <FolderOpen className="h-3 w-3" /> Pasta
+            </TabsTrigger>
+          </TabsList>

-          {PRESETS.length > 0 && (
+          {/* ============ TAB ARQUIVO ============ */}
+          <TabsContent value="file" className="space-y-3 mt-3">
            <div className="space-y-1.5">
-              <Label className="text-xs font-mono text-muted-foreground">Templates prontos</Label>
-              <div className="flex flex-wrap gap-1.5">
-                {PRESETS.map((p) => (
-                  <Button
-                    key={p.url}
-                    variant="ghost"
-                    size="sm"
-                    className="h-7 text-[10px] font-mono border border-border"
-                    disabled={loading}
-                    onClick={() => setUrl(p.url)}
-                  >
-                    {p.label}
-                  </Button>
-                ))}
+              <Label htmlFor="cloud-url" className="text-xs font-mono">URL do modelo</Label>
+              <div className="flex gap-2">
+                <Link2 className="h-4 w-4 text-muted-foreground mt-2.5 shrink-0" />
+                <Input
+                  id="cloud-url"
+                  value={url}
+                  onChange={(e) => setUrl(e.target.value)}
+                  placeholder="https://exemplo.com/modelo.glb"
+                  disabled={loading}
+                  className="font-mono text-xs"
+                />
+              </div>
+              <p className="text-[10px] text-muted-foreground">
+                Dropbox use <code>?dl=1</code>, OneDrive <code>?download=1</code>. FileBrowser é detectado automaticamente.
+              </p>
+            </div>
+
+            {PRESETS.length > 0 && (
+              <div className="space-y-1.5">
+                <Label className="text-xs font-mono text-muted-foreground">Templates prontos</Label>
+                <div className="flex flex-wrap gap-1.5">
+                  {PRESETS.map((p) => (
+                    <Button
+                      key={p.url}
+                      variant="ghost"
+                      size="sm"
+                      className="h-7 text-[10px] font-mono border border-border"
+                      disabled={loading}
+                      onClick={() => setUrl(p.url)}
+                    >
+                      {p.label}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+            )}
+          </TabsContent>
+
+          {/* ============ TAB PASTA ============ */}
+          <TabsContent value="folder" className="space-y-3 mt-3">
+            <div className="space-y-1.5">
+              <Label htmlFor="folder-url" className="text-xs font-mono">URL da pasta (FileBrowser)</Label>
+              <div className="flex gap-2">
+                <Input
+                  id="folder-url"
+                  value={folderInput}
+                  onChange={(e) => setFolderInput(e.target.value)}
+                  placeholder="https://store.exemplo.com/modelos/"
+                  disabled={browsingLoading || loading}
+                  className="font-mono text-xs"
+                />
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => openFolder(folderInput.trim())}
+                  disabled={browsingLoading || loading || !folderInput.trim()}
+                  className="gap-1.5 text-xs"
+                >
+                  {browsingLoading ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <FolderOpen className="h-3.5 w-3.5" />}
+                  Abrir
+                </Button>
              </div>
            </div>
-          )}
-        </div>
+
+            {listing && (
+              <FolderBrowser
+                origin={listing.origin}
+                path={listing.path}
+                items={listing.items}
+                loading={browsingLoading}
+                selectedName={selectedName}
+                showAll={showAll}
+                onToggleShowAll={setShowAll}
+                onNavigate={navigateTo}
+                onSelect={setSelectedName}
+              />
+            )}
+          </TabsContent>
+        </Tabs>

        <DialogFooter>
          <Button variant="ghost" onClick={() => setOpen(false)} disabled={loading}>Cancelar</Button>
-          <Button onClick={() => handleLoad(url.trim())} disabled={loading || !url.trim()} className="gap-2">
-            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Cloud className="h-4 w-4" />}
-            {loading ? 'Baixando…' : 'Carregar'}
-          </Button>
+          {tab === 'file' ? (
+            <Button onClick={() => handleLoadFile(url.trim())} disabled={loading || !url.trim()} className="gap-2">
+              {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Cloud className="h-4 w-4" />}
+              {loading ? 'Baixando…' : 'Carregar'}
+            </Button>
+          ) : (
+            <Button
+              onClick={handleLoadSelected}
+              disabled={loading || !selectedName}
+              className="gap-2"
+            >
+              {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Cloud className="h-4 w-4" />}
+              {loading ? 'Baixando…' : selectedName ? `Carregar "${selectedName}"` : 'Selecione um arquivo'}
+            </Button>
+          )}
        </DialogFooter>
      </DialogContent>
    </Dialog>