Add files dialog to inspect build files (#114)

* allow viewing files

* introduce files dialog to inspect build files

* add file dialog to playwright tests

* format

playwright-tests/view-snippet.spec.ts

@@ -11,5 +11,16 @@ for (const [size, viewport] of Object.entries(viewports)) {
     await page.click(".run-button")
     await page.waitForTimeout(5000)
     await expect(page).toHaveScreenshot(`view-snippet-after-${size}.png`)
+
+    await page.click('span:has-text("Files")')
   })
 }
+
+test("files dialog", async ({ page }) => {
+  await page.goto("http://127.0.0.1:5177/testuser/my-test-board")
+
+  await page.waitForSelector(".run-button")
+
+  await page.click('span:has-text("Files")')
+  await expect(page).toHaveScreenshot(`view-snippet-files.png`)
+})

src/components/EditorNav.tsx

@@ -18,6 +18,7 @@ import {
   Pencil,
   Trash2,
   MoreVertical,
+  File,
 } from "lucide-react"
 import { Link, useLocation } from "wouter"
 import { Button } from "@/components/ui/button"
@@ -41,6 +42,7 @@ import { useRenameSnippetDialog } from "./dialogs/rename-snippet-dialog"
 import { useConfirmDeleteSnippetDialog } from "./dialogs/confirm-delete-snippet-dialog"
 import { useCreateOrderDialog } from "./dialogs/create-order-dialog"
 import { AnyCircuitElement } from "circuit-json"
+import { useFilesDialog } from "./dialogs/files-dialog"
 
 export default function EditorNav({
   circuitJson,
@@ -71,6 +73,7 @@ export default function EditorNav({
     useConfirmDeleteSnippetDialog()
   const { Dialog: CreateOrderDialog, openDialog: openCreateOrderDialog } =
     useCreateOrderDialog()
+  const { Dialog: FilesDialog, openDialog: openFilesDialog } = useFilesDialog()
 
   return (
     <nav className="flex items-center justify-between px-2 py-3 border-b border-gray-200 bg-white text-sm border-t">
@@ -190,6 +193,13 @@ export default function EditorNav({
               <Package className="mr-2 h-3 w-3" />
               Submit Order
             </DropdownMenuItem>
+            <DropdownMenuItem
+              className="text-xs"
+              onClick={() => openFilesDialog()}
+            >
+              <File className="mr-2 h-3 w-3" />
+              View Files
+            </DropdownMenuItem>
             <DropdownMenuItem
               className="text-xs text-red-600"
               onClick={() => openDeleteDialog()}
@@ -265,6 +275,7 @@ export default function EditorNav({
         snippetName={snippet?.unscoped_name ?? ""}
       />
       <CreateOrderDialog />
+      <FilesDialog snippetId={snippet?.snippet_id ?? ""} />
     </nav>
   )
 }

src/components/Header.tsx

@@ -2,7 +2,7 @@ import { HeaderLogin } from "@/components/HeaderLogin"
 import { Button } from "@/components/ui/button"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { cn } from "@/lib/utils"
-import { GitHubLogoIcon } from "@radix-ui/react-icons"
+import { GitHubLogoIcon, OpenInNewWindowIcon } from "@radix-ui/react-icons"
 import { Menu, X } from "lucide-react"
 import React, { useState } from "react"
 import { Link, useLocation } from "wouter"

src/components/ViewSnippetSidebar.tsx

@@ -13,17 +13,20 @@ import {
   Copy,
   Hash,
   Clock,
+  File,
 } from "lucide-react"
 import { GitHubLogoIcon } from "@radix-ui/react-icons"
 import { cn } from "@/lib/utils"
 import { useCurrentSnippet } from "@/hooks/use-current-snippet"
 import { useToast } from "@/hooks/use-toast"
+import { useFilesDialog } from "./dialogs/files-dialog"
 
 export default function ViewSnippetSidebar({
   className,
 }: { className?: string }) {
   const { snippet } = useCurrentSnippet()
   const { toast } = useToast()
+  const { Dialog: FilesDialog, openDialog: openFilesDialog } = useFilesDialog()
 
   return (
     <div
@@ -70,6 +73,15 @@ export default function ViewSnippetSidebar({
               label: "Versions",
               notImplemented: true,
             },
+            {
+              icon: <File className="w-5 h-5" />,
+              label: "Files",
+              onClick: () => {
+                if (snippet) {
+                  openFilesDialog()
+                }
+              },
+            },
             // { icon: <Settings className="w-5 h-5" />, label: "Settings" },
           ].map((item, index) => (
             <li key={index}>
@@ -94,7 +106,7 @@ export default function ViewSnippetSidebar({
                           ),
                         })
                       }
-                    : undefined
+                    : item.onClick
                 }
                 className="flex items-center gap-3 px-2 py-1.5 hover:bg-gray-200 rounded-md"
               >
@@ -131,6 +143,7 @@ export default function ViewSnippetSidebar({
           </div>
         </div>
       </div>
+      {snippet && <FilesDialog snippetId={snippet.snippet_id} />}
     </div>
   )
 }

src/components/dialogs/files-dialog.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from "react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
+import { ScrollArea } from "../ui/scroll-area"
+import { cn } from "@/lib/utils"
+import { createUseDialog } from "./create-use-dialog"
+import { useSnippet } from "@/hooks/use-snippet"
+
+interface FilesDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  snippetId: string
+}
+
+export const FilesDialog: React.FC<FilesDialogProps> = ({
+  open,
+  onOpenChange,
+  snippetId,
+}) => {
+  const { data: snippet } = useSnippet(snippetId)
+
+  const files = Object.entries({
+    "dist/index.d.ts": snippet?.dts || "",
+    "index.ts": snippet?.code || "",
+    "dist/index.js": snippet?.compiled_js || "",
+  })
+    .sort(([a], [b]) => a.localeCompare(b))
+    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
+
+  const [selectedFile, setSelectedFile] = useState<string | null>("index.ts")
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl w-full h-[80vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>Files</DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-grow overflow-hidden">
+          <div className="w-1/4 border-r">
+            <ScrollArea className="h-full">
+              {Object.keys(files).map((filePath) => (
+                <div
+                  key={filePath}
+                  className={cn(
+                    "px-4 py-2 cursor-pointer hover:bg-gray-100 text-xs",
+                    selectedFile === filePath && "bg-gray-200",
+                  )}
+                  onClick={() => setSelectedFile(filePath)}
+                >
+                  {filePath}
+                </div>
+              ))}
+            </ScrollArea>
+          </div>
+          <div className="w-3/4 overflow-hidden">
+            <ScrollArea className="h-full">
+              <pre className="p-4 text-xs whitespace-pre-wrap">
+                {selectedFile
+                  ? files[selectedFile as keyof typeof files]
+                  : "Select a file"}
+              </pre>
+            </ScrollArea>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export const useFilesDialog = createUseDialog(FilesDialog)

src/components/ui/dialog.tsx

@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-slate-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-slate-800 dark:bg-slate-950",
+        "fixed left-[50%] top-[50%] z-[100] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-slate-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-slate-800 dark:bg-slate-950",
         className,
       )}
       {...props}