feat: add root dir and trailing slash options to ASCII tree

Author: coder-ralph

src/app/generator/customization-options.tsx

@@ -31,7 +31,7 @@ const CustomizationOptions: React.FC<CustomizationOptionsProps> = ({ options, on
           </SelectContent>
         </Select>
       </div>
-
+      {/* Use Icons */}
       <div className="flex items-center justify-between">
         <Label htmlFor="use-icons">Use Icons</Label>
         <Switch
@@ -40,7 +40,7 @@ const CustomizationOptions: React.FC<CustomizationOptionsProps> = ({ options, on
           onCheckedChange={(checked: boolean) => onChange({ useIcons: checked })}
         />
       </div>
-
+      {/* Show Line Numbers */}
       <div className="flex items-center justify-between">
         <Label htmlFor="show-line-numbers">Show Line Numbers</Label>
         <Switch
@@ -49,6 +49,24 @@ const CustomizationOptions: React.FC<CustomizationOptionsProps> = ({ options, on
           onCheckedChange={(checked: boolean) => onChange({ showLineNumbers: checked })}
         />
       </div>
+      {/* Root Directory */}
+      <div className="flex items-center justify-between">
+        <Label htmlFor="show-root-directory">Root Directory</Label>
+        <Switch
+          id="show-root-directory"
+          checked={options.showRootDirectory}
+          onCheckedChange={(checked: boolean) => onChange({ showRootDirectory: checked })}
+        />
+      </div>
+      {/* Trailing Slash */}
+      <div className="flex items-center justify-between">
+        <Label htmlFor="show-trailing-slash">Trailing Slash</Label>
+        <Switch
+          id="show-trailing-slash"
+          checked={options.showTrailingSlash}
+          onCheckedChange={(checked: boolean) => onChange({ showTrailingSlash: checked })}
+        />
+      </div>
     </div>
   )
 }

src/app/generator/repo-tree-generator.tsx

@@ -60,6 +60,44 @@ interface LanguageData {
   percentage: number
 }
 
+// Default customization options
+const DEFAULT_CUSTOMIZATION_OPTIONS: TreeCustomizationOptions = {
+  asciiStyle: "basic",
+  useIcons: false,
+  showLineNumbers: false,
+  showRootDirectory: false,
+  showTrailingSlash: false,
+}
+
+// Load customization options from localStorage
+const loadCustomizationOptions = (): TreeCustomizationOptions => {
+  if (typeof window === "undefined") return DEFAULT_CUSTOMIZATION_OPTIONS
+  
+  try {
+    const saved = localStorage.getItem("treeCustomizationOptions")
+    if (saved) {
+      const parsed = JSON.parse(saved)
+      // Merge with defaults to ensure all properties exist
+      return { ...DEFAULT_CUSTOMIZATION_OPTIONS, ...parsed }
+    }
+  } catch (error) {
+    console.warn("Failed to load customization options from localStorage:", error)
+  }
+  
+  return DEFAULT_CUSTOMIZATION_OPTIONS
+}
+
+// Save customization options to localStorage
+const saveCustomizationOptions = (options: TreeCustomizationOptions): void => {
+  if (typeof window === "undefined") return
+  
+  try {
+    localStorage.setItem("treeCustomizationOptions", JSON.stringify(options))
+  } catch (error) {
+    console.warn("Failed to save customization options to localStorage:", error)
+  }
+}
+
 export default function RepoProjectStructure() {
   const [repoUrl, setRepoUrl] = useState("")
   const [repoType, setRepoType] = useState<RepoType>("github")
@@ -77,11 +115,7 @@ export default function RepoProjectStructure() {
   const inputRef = useRef<HTMLInputElement>(null)
   const treeRef = useRef<HTMLDivElement>(null)
 
-  const [customizationOptions, setCustomizationOptions] = useState<TreeCustomizationOptions>({
-    asciiStyle: "basic",
-    useIcons: false,
-    showLineNumbers: false,
-  })
+  const [customizationOptions, setCustomizationOptions] = useState<TreeCustomizationOptions>(loadCustomizationOptions())
 
   const [fileTypeData, setFileTypeData] = useState<FileTypeData[]>([])
   const [languageData, setLanguageData] = useState<LanguageData[]>([])
@@ -271,10 +305,15 @@ export default function RepoProjectStructure() {
   }, [downloadFormat, customizedStructure, filteredStructureMap])
 
   const handleCustomizationChange = (newOptions: Partial<TreeCustomizationOptions>) => {
-    setCustomizationOptions((prevOptions: TreeCustomizationOptions) => ({
-      ...prevOptions,
-      ...newOptions,
-    }))
+    setCustomizationOptions((prevOptions: TreeCustomizationOptions) => {
+      const updatedOptions = {
+        ...prevOptions,
+        ...newOptions,
+      }
+      // Save to localStorage whenever options change
+      saveCustomizationOptions(updatedOptions)
+      return updatedOptions
+    })
   }
 
   const noStructureMessage = `No structure generated yet. Enter a ${repoType === "github" ? "GitHub" : "GitLab"} URL and click Generate.`
@@ -292,7 +331,7 @@ export default function RepoProjectStructure() {
       >
         <CardHeader>
           <CardTitle className="text-2xl md:text-3xl lg:text-4xl font-semibold text-black dark:text-white flex items-center justify-center gap-2">
-            Generate <span className="text-blue-600">Structure</span>
+            Generate ASCII<span className="text-emerald-600">Tree</span>
           </CardTitle>
         </CardHeader>
         <CardContent>
@@ -306,7 +345,7 @@ export default function RepoProjectStructure() {
                   <SelectValue placeholder="Select repo type" />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="github">GitHub {hasPrivateToken && "(Private Access)"}</SelectItem>
+                  <SelectItem value="github">GitHub {hasPrivateToken && "(Private)"}</SelectItem>
                   <SelectItem value="gitlab">GitLab</SelectItem>
                 </SelectContent>
               </Select>

src/lib/repo-tree-utils.ts

@@ -157,6 +157,12 @@ export const generateStructure = (tree: TreeItem[]): DirectoryMap => {
 
 export const buildStructureString = (map: DirectoryMap, prefix = "", options: TreeCustomizationOptions): string => {
   let result = ""
+  
+  // Add root directory indicator if enabled
+  if (prefix === "" && options.showRootDirectory) {
+    result += "./\n"
+  }
+
   const entries = Array.from(map.entries())
   const lastIndex = entries.length - 1
 
@@ -165,8 +171,11 @@ export const buildStructureString = (map: DirectoryMap, prefix = "", options: Tr
     const connector = getConnector(isLast, options.asciiStyle)
     const childPrefix = getChildPrefix(isLast, options.asciiStyle)
     const icon = options.useIcons ? getIcon(value instanceof Map) : ""
+    
+    // Add trailing slash for directories if enabled
+    const displayName = (value instanceof Map && options.showTrailingSlash) ? `${key}/` : key
 
-    result += `${prefix}${connector}${icon}${key}\n`
+    result += `${prefix}${connector}${icon}${displayName}\n`
     if (value instanceof Map) {
       result += buildStructureString(value, `${prefix}${childPrefix}`, options)
     }

src/types/tree-customization.ts

@@ -2,4 +2,6 @@ export interface TreeCustomizationOptions {
   asciiStyle: 'basic' | 'detailed' | 'minimal';
   useIcons: boolean;
   showLineNumbers: boolean;
+  showRootDirectory: boolean;
+  showTrailingSlash: boolean;
 }