fix: improve UX for empty repositories (#821)

packages/web/src/app/[domain]/browse/[...path]/components/treePreviewPanel.tsx

@@ -1,10 +1,10 @@
-
 import { Separator } from "@/components/ui/separator";
 import { getRepoInfoByName } from "@/actions";
 import { PathHeader } from "@/app/[domain]/components/pathHeader";
 import { getFolderContents } from "@/features/fileTree/api";
 import { isServiceError } from "@/lib/utils";
 import { PureTreePreviewPanel } from "./pureTreePreviewPanel";
+import { FolderOpen } from "lucide-react";
 
 interface TreePreviewPanelProps {
     path: string;
@@ -26,6 +26,33 @@ export const TreePreviewPanel = async ({ path, repoName, revisionName }: TreePre
         return <div>Error loading tree preview</div>
     }
 
+    if (folderContentsResponse.length === 0) {
+        return (
+            <>
+                <div className="flex flex-row py-1 px-2 items-center justify-between">
+                    <PathHeader
+                        path={path}
+                        repo={{
+                            name: repoName,
+                            codeHostType: repoInfoResponse.codeHostType,
+                            displayName: repoInfoResponse.displayName,
+                            externalWebUrl: repoInfoResponse.externalWebUrl,
+                        }}
+                        pathType="tree"
+                        isFileIconVisible={false}
+                        revisionName={revisionName}
+                    />
+                </div>
+                <Separator />
+                <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
+                    <FolderOpen className="w-16 h-16 mb-4" />
+                    <p className="text-sm font-medium">No commits yet</p>
+                    <p className="text-xs mt-1">This repository doesn&apos;t have any code yet</p>
+                </div>
+            </>
+        )
+    }
+
     return (
         <>
             <div className="flex flex-row py-1 px-2 items-center justify-between">

packages/web/src/features/fileTree/api.ts

@@ -39,6 +39,13 @@ export const getTree = async (params: { repoName: string, revisionName: string,
 
         const normalizedPaths = paths.map(path => normalizePath(path));
 
+        // Verify that the revision is not empty
+        try{
+            await git.raw(["rev-parse","--verify",revisionName])
+        }catch(_error){
+            return {tree:{}}
+        }
+
         let result: string = '';
         try {
 
@@ -106,6 +113,13 @@ export const getFolderContents = async (params: { repoName: string, revisionName
         }
         const normalizedPath = normalizePath(path);
 
+        // Verify that the revision is not empty
+        try{
+            await git.raw(["rev-parse","--verify",revisionName])
+        } catch(_error){
+            return [];
+        }
+
         let result: string;
         try {
             result = await git.raw([

packages/web/src/features/fileTree/components/fileTreePanel.tsx

@@ -13,6 +13,7 @@ import useCaptureEvent from "@/hooks/useCaptureEvent";
 import { measure, unwrapServiceError } from "@/lib/utils";
 import { useQuery } from "@tanstack/react-query";
 import { SearchIcon } from "lucide-react";
+import { FolderOpen } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import {
@@ -55,7 +56,7 @@ export const FileTreePanel = ({ order }: FileTreePanelProps) => {
                     paths: Array.from(openPaths),
                 })
             ), 'getTree');
-
+            
             captureEvent('wa_file_tree_loaded', {
                 durationMs: result.durationMs,
             });
@@ -189,6 +190,12 @@ export const FileTreePanel = ({ order }: FileTreePanelProps) => {
                             <div className="flex flex-col items-center justify-center h-full">
                                 <p>Error loading file tree</p>
                             </div>
+                        ) : !data.tree.children || data.tree.children.length === 0 ? (
+                            <div className="flex flex-col items-center justify-center h-full text-muted-foreground px-4">
+                                <FolderOpen className="w-12 h-12 mb-3" />
+                                <p className="text-sm font-medium">No files yet</p>
+                                <p className="text-xs mt-1 text-center">This repository doesn&apos;t have any code yet</p>
+                            </div>
                         ) : (
                             <PureFileTreePanel
                                 tree={data.tree}

packages/web/src/features/fileTree/components/pureFileTreePanel.tsx

@@ -31,6 +31,10 @@ export const PureFileTreePanel = ({ tree, openPaths, path, onTreeNodeClicked }:
     const domain = useDomain();
 
     const renderTree = useCallback((nodes: FileTreeNode, depth = 0): React.ReactNode => {
+        if (!nodes.children || nodes.children.length === 0) {
+            return null;
+        }
+
         return (
             <>
                 {nodes.children.map((node) => {