Fix overflow and breadcrumb, add doc link (#6)

* fix certificate overflow scroll

* fix breadcrumb and overlflow app

* fix react hook deps

* add tsc script

* fine tune charts width

* fix hook unmount

* add documentation link

* fix overflow chat

* add bold on selected prompt

.gitignore

@@ -12,6 +12,10 @@ dist
 dist-ssr
 *.local
 
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit -p ./tsconfig.app.json"
   },
   "dependencies": {
     "@radix-ui/react-avatar": "^1.1.1",
@@ -55,4 +56,4 @@
     "typescript-eslint": "^8.15.0",
     "vite": "^6.0.1"
   }
-}
+}

public/help/copilot-setup.md

@@ -37,6 +37,7 @@ settings (Ctrl+Shift+P) + "Preferences: Open User Settings (JSON)":
     "debug.testOverrideProxyUrl": "https://localhost:8990",
     "debug.overrideProxyUrl": "https://localhost:8990",
   }
+}
 ```
 
 > **_NOTE:_**  CoPilot may need a refresh after creating the proxy config. Restart VS-Code or open the command palate (Ctrl+Shift+P) and select "Developer: Reload Window".
@@ -54,4 +55,3 @@ If there is any sort of failure, you will see the following:
 
 If you experience a failure, click on the CoPilot avatar and select "Show Diagnostics"
 , copy the text and post it to the CoPilot [CodeGate Discussions](https://github.com/stacklok/codegate/discussions/categories/copilot)
-

src/App.tsx

@@ -2,45 +2,74 @@ import { Header } from "./components/Header";
 import { PromptList } from "./components/PromptList";
 import { useEffect } from "react";
 import { Dashboard } from "./components/Dashboard";
-import { Routes, Route } from "react-router-dom";
+import { Routes, Route, Link } from "react-router-dom";
 import { Chat } from "./components/Chat";
 import { usePromptsStore } from "./hooks/usePromptsStore";
 import { Sidebar } from "./components/Sidebar";
 import { useSse } from "./hooks/useSse";
 import { Help } from "./components/Help";
 import { Certificates } from "./components/Certificates";
 import { CertificateSecurity } from "./components/CertificateSecurity";
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbSeparator,
+  BreadcrumbPage,
+} from "./components/ui/breadcrumb";
+import { useBreadcrumb } from "./hooks/useBreadcrumb";
 
 function App() {
   const { prompts, loading, fetchPrompts } = usePromptsStore();
   useSse();
+  const breadcrumb = useBreadcrumb();
 
   useEffect(() => {
     fetchPrompts();
   }, [fetchPrompts]);
 
   return (
-    <>
-      <div className="w-full">
-        <div className="flex">
-          <Sidebar loading={loading}>
-            <PromptList prompts={prompts} />
-          </Sidebar>
-          <div className="w-screen h-screen">
-            <Header />
-            <div className="p-6">
-              <Routes>
-                <Route path="/" element={<Dashboard />} />
-                <Route path="/prompt/:id" element={<Chat />} />
-                <Route path="/help/:section" element={<Help />} />
-                <Route path="/certificates" element={<Certificates />} />
-                <Route path="/certificates/security" element={<CertificateSecurity />} />
-              </Routes>
-            </div>
-          </div>
+    <div className="flex w-screen h-screen">
+      <Sidebar loading={loading}>
+        <PromptList prompts={prompts} />
+      </Sidebar>
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <Header />
+
+        <div className="px-6 py-3">
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <Link to="/">Dashboard</Link>
+              </BreadcrumbItem>
+              {breadcrumb && (
+                <>
+                  <BreadcrumbSeparator />
+                  <BreadcrumbItem>
+                    <BreadcrumbPage className="w-96 truncate">
+                      {breadcrumb}
+                    </BreadcrumbPage>
+                  </BreadcrumbItem>
+                </>
+              )}
+            </BreadcrumbList>
+          </Breadcrumb>
+        </div>
+
+        <div className="flex-1 overflow-y-auto p-6">
+          <Routes>
+            <Route path="/" element={<Dashboard />} />
+            <Route path="/prompt/:id" element={<Chat />} />
+            <Route path="/help/:section" element={<Help />} />
+            <Route path="/certificates" element={<Certificates />} />
+            <Route
+              path="/certificates/security"
+              element={<CertificateSecurity />}
+            />
+          </Routes>
         </div>
       </div>
-    </>
+    </div>
   );
 }
 

src/components/CertificateSecurity.tsx

@@ -1,11 +1,3 @@
-import { Link } from "react-router-dom";
-import {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbSeparator,
-  BreadcrumbPage,
-} from "./ui/breadcrumb";
 import { Card } from "./ui/card";
 
 const SecurityShieldIcon = () => (
@@ -67,23 +59,8 @@ const OpenSourceIcon = () => (
 
 export function CertificateSecurity() {
   return (
-    <>
-      <div className="flex mb-3">
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <Link to="/">Dashboard</Link>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbPage className="w-96 truncate">
-                Certificate Security
-              </BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
-      </div>
-      <div className="max-w-4xl mx-auto h-[calc(100vh-4rem)] overflow-y-auto px-4 pr-6 pb-12">
+    <div className="flex flex-col h-full">
+      <div className="max-w-4xl mx-auto mb-4">
         <h1 className="text-3xl font-bold mb-8">Certificate Security</h1>
 
         <Card className="p-6 mb-8 bg-white shadow-lg border-2 border-gray-100">
@@ -209,6 +186,6 @@ export function CertificateSecurity() {
           </div>
         </Card>
       </div>
-    </>
+    </div>
   );
 }