feat(gitlab): implement support for GitLab PrivateToken

Author: coder-ralph

src/app/about/page.tsx

@@ -24,25 +24,20 @@ const AboutPage = () => {
 
         <div className="p-6 space-y-4 transition-colors duration-300">
           <p>
-            RepoTree is a simple tool to visualize GitHub repositories. It helps
+            RepoTree is a simple tool to visualize GitHub & GitLab repositories. It helps
             developers and teams easily explore and understand their project
             structures.
           </p>
 
-          <h2 className="text-xl font-semibold">Our Vision</h2>
-          <p>
-            We want every developer to quickly see the structure of any project,
-            making it easier to collaborate and build efficiently.
-          </p>
-
           <h2 className="text-xl font-semibold">Features</h2>
           <ul className="list-disc pl-6 space-y-2">
-            <li>Clean ASCII view of GitHub repository structure</li>
+            <li>Clean ASCII view of GitHub & GitLab repository structure</li>
             <li>Interactive tree view for easy navigation</li>
             <li>Download options in various formats</li>
             <li>Real-time search to find files or folders quickly</li>
+            <li>Easy to use and no installation required</li>
           </ul>
-
+          
           <p>
             Whether documenting a project or getting a quick overview, RepoTree
             makes it simple to understand your codebase.

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

@@ -4,7 +4,7 @@ import type React from "react"
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 
-import AIFeedback from "@/components/ai-feedback"
+// import AIFeedback from "@/components/ai-feedback"
 import InteractiveTreeView from "@/components/interactive-tree-view"
 import PrivateReposDialog from "@/components/private-repos-dialog"
 import { RepoGraphs } from "@/components/repo-graphs"
@@ -119,7 +119,8 @@ export default function RepoProjectStructure() {
 
   const [fileTypeData, setFileTypeData] = useState<FileTypeData[]>([])
   const [languageData, setLanguageData] = useState<LanguageData[]>([])
-  const [hasPrivateToken, setHasPrivateToken] = useState(false)
+  const [hasGitHubToken, setHasGitHubToken] = useState(false)
+  const [hasGitLabToken, setHasGitLabToken] = useState(false)
 
   const handleUrlChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -194,20 +195,24 @@ export default function RepoProjectStructure() {
   }, [])
 
   useEffect(() => {
-    const checkToken = () => {
-      const token = localStorage.getItem("github_personal_token")
-      setHasPrivateToken(!!token)
+    const checkTokens = () => {
+      const githubToken = localStorage.getItem("github_personal_token")
+      const gitlabToken = localStorage.getItem("gitlab_personal_token")
+      setHasGitHubToken(!!githubToken)
+      setHasGitLabToken(!!gitlabToken)
     }
 
-    checkToken()
+    checkTokens()
 
     const handleTokenUpdate = () => {
-      checkToken()
+      checkTokens()
     }
 
     window.addEventListener("github-token-updated", handleTokenUpdate)
+    window.addEventListener("gitlab-token-updated", handleTokenUpdate)
     return () => {
       window.removeEventListener("github-token-updated", handleTokenUpdate)
+      window.removeEventListener("gitlab-token-updated", handleTokenUpdate)
     }
   }, [])
 
@@ -345,15 +350,13 @@ export default function RepoProjectStructure() {
                   <SelectValue placeholder="Select repo type" />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="github">GitHub {hasPrivateToken && "(Private)"}</SelectItem>
-                  <SelectItem value="gitlab">GitLab</SelectItem>
+                  <SelectItem value="github">GitHub {hasGitHubToken && "(Private)"}</SelectItem>
+                  <SelectItem value="gitlab">GitLab {hasGitLabToken && "(Private)"}</SelectItem>
                 </SelectContent>
               </Select>
-              {repoType === "github" && (
-                <div className="flex items-center gap-2">
-                  <PrivateReposDialog />
-                </div>
-              )}
+              <div className="flex items-center gap-2">
+                <PrivateReposDialog repoType={repoType} />
+              </div>
               <div className="relative flex-grow">
                 <Input
                   placeholder={`Enter ${repoType === "github" ? "GitHub" : "GitLab"} repository URL`}
@@ -518,7 +521,7 @@ export default function RepoProjectStructure() {
                   <RepoGraphs fileTypeData={fileTypeData} languageData={languageData} />
                 </div>
               )}
-              <AIFeedback structureMap={structureMap} />
+              {/* <AIFeedback structureMap={structureMap} /> */}
             </div>
           </div>
         </CardContent>

src/components/about.tsx

@@ -43,12 +43,12 @@ const About = () => {
     {
       icon: FolderTreeIcon,
       title: 'Preview Structure',
-      description: 'Enter GitHub repo URL to preview structure instantly.',
+      description: 'Enter a GitHub or GitLab repo URL to instantly preview its structure.',
     },
     {
       icon: DownloadIcon,
       title: 'Quick Download',
-      description: 'Download as README.md with just one click.',
+      description: 'Download in your chosen format with one click.',
     },
     {
       icon: BookOpenIcon,

src/components/faq.tsx

@@ -59,17 +59,17 @@ const FAQ = () => {
     {
       question: 'How does RepoTree work?',
       answer:
-        'RepoTree fetches the structure of your GitHub repository and generates it into a clean ASCII tree format, making it easy to visualize and share.',
+        'RepoTree fetches the structure of your GitHub & GitLab repository and generates it into a clean ASCII tree format, making it easy to visualize and share.',
     },
     {
       question: 'Is RepoTree free to use?',
       answer:
-        'Yes, RepoTree is completely free to use for public GitHub repositories.',
+        'Yes, RepoTree is completely free to use for public GitHub & GitLab repositories.',
     },
     {
       question: 'Can I use RepoTree for private repositories?',
       answer:
-        "Yes, RepoTree now supports private GitHub repositories! You can access them by providing a GitHub Personal Access Token (PAT). Your token is securely stored locally in your browser and never sent to any server.",
+        "Yes, RepoTree now supports private GitHub & GitLab repositories! You can access them by providing a GitHub Personal Access Token (PAT). Your token is securely stored locally in your browser and never sent to any server.",
     },
   ];
 

src/components/hero.tsx

@@ -23,19 +23,20 @@ const Hero = () => {
             variants={fadeIn}
             className="text-center"
           >
-            <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl text-gray-900 dark:text-white font-bold mb-6">
-              Visualize Your <Highlight>GitHub Repos</Highlight>
+            <h1 className="text-3xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-7xl text-gray-900 dark:text-white font-bold mb-6 leading-tight">
+              Visualize Your<br />
+              <Highlight>GitHub & GitLab Repos</Highlight>
             </h1>
-            <p className="text-xl sm:text-2xl md:text-3xl text-gray-700 dark:text-gray-300 mb-8 sm:mb-10 max-w-3xl mx-auto">
-              Generate a clean ASCII tree format of any GitHub repository in
+            <p className="text-base sm:text-lg md:text-xl lg:text-2xl text-gray-700 dark:text-gray-300 mb-8 sm:mb-10 max-w-3xl mx-auto">
+              Generate a clean ASCII tree format of any GitHub & GitLab repository in
               seconds.
             </p>
             <Link href="/generator">
               <Button
                 size="lg"
                 className="bg-blue-600 hover:bg-blue-700 text-white text-xl py-5 sm:py-6 px-8 sm:px-10 rounded-full transition-colors duration-300"
               >
-                Get Started
+                Generate Now
               </Button>
             </Link>
           </motion.div>

src/components/layout/footer.tsx

@@ -18,7 +18,7 @@ const Footer = () => {
               </Link>
             </div>
             <p className="text-sm sm:text-base md:text-lg text-gray-600 dark:text-gray-300">
-              Simplify your GitHub repository visualization.
+              Simplify visualization of your GitHub or GitLab repos.
             </p>
           </div>
           <div>

src/components/layout/header.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link';
 
 import { FolderTreeIcon, Github } from 'lucide-react';
 
-import GitHubHelp from "@/components/github-help"
+import RepoHelp from "@/components/repo-help"
 import ThemeToggle from '../theme-toggle';
 
 const Header = () => {
@@ -17,7 +17,7 @@ const Header = () => {
             </h1>
           </Link>
           <nav className="flex items-center space-x-4">
-            <GitHubHelp />
+            <RepoHelp />
             <ThemeToggle />
             <a
               href="https://github.com/coder-ralph/RepoTree"