merged with main

components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "gray",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

package.json

@@ -8,40 +8,61 @@
         "start": "next start",
         "lint": "next lint"
     },
+    "overrides": {
+        "@radix-ui/react-dismissable-layer": "1.0.4"
+    },
     "dependencies": {
         "@dagrejs/dagre": "^1.1.1",
         "@headlessui/react": "^1.7.17",
         "@heroicons/react": "^2.0.18",
+        "@hookform/resolvers": "^3.6.0",
         "@mdxeditor/editor": "^1.14.3",
         "@nivo/core": "^0.84.0",
         "@nivo/pie": "^0.84.0",
         "@nivo/radar": "^0.84.0",
         "@ory/client": "^1.4.0",
-        "@ory/integrations": "^1.1.5",
+        "@ory/integrations": "^1.2.1",
+        "@radix-ui/react-dialog": "^1.1.1",
+        "@radix-ui/react-dropdown-menu": "^2.1.1",
+        "@radix-ui/react-icons": "^1.3.0",
+        "@radix-ui/react-label": "^2.1.0",
+        "@radix-ui/react-popover": "^1.1.1",
+        "@radix-ui/react-select": "^2.1.1",
+        "@radix-ui/react-slot": "^1.1.0",
+        "@radix-ui/react-switch": "^1.1.0",
         "@tailwindcss/forms": "^0.5.7",
         "@tanstack/react-table": "^8.11.2",
         "@types/node": "20.9.1",
         "@types/react": "18.2.37",
         "@types/react-dom": "18.2.15",
         "autoprefixer": "10.4.16",
         "axios": "^1.6.2",
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.1.1",
         "eslint": "8.53.0",
         "eslint-config-next": "14.0.3",
         "focus-visible": "^5.2.0",
+        "funnel-graph-js": "^1.4.2",
         "lodash": "^4.17.21",
+        "lucide-react": "^0.396.0",
         "next": "14.0.3",
+        "next-themes": "^0.3.0",
         "postcss": "8.4.31",
         "react": "18.2.0",
         "react-dom": "18.2.0",
-        "react-hook-form": "^7.48.2",
+        "react-hook-form": "^7.52.0",
         "react-markdown": "^9.0.1",
         "react-syntax-highlighter": "^15.5.0",
         "reactflow": "^11.11.0",
         "sass": "^1.69.5",
         "sharp": "^0.33.2",
+        "sonner": "^1.5.0",
+        "tailwind-merge": "^2.3.0",
         "tailwindcss": "3.3.5",
+        "tailwindcss-animate": "^1.0.7",
         "tinycolor2": "^1.6.0",
         "typescript": "5.2.2",
+        "zod": "^3.23.8",
         "zustand": "^4.4.6"
     },
     "devDependencies": {
@@ -53,4 +74,4 @@
         "prettier": "^3.2.5",
         "prettier-plugin-tailwindcss": "^0.5.13"
     }
-}
+}

src/components/CVECard.tsx

@@ -1,11 +1,9 @@
 import { FlawWithCVE } from "@/types/api/api";
 import { classNames } from "@/utils/common";
 import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
-import Image from "next/image";
 import { FunctionComponent, useState } from "react";
 import CVEChart from "./common/CVEChart";
 import DateString from "./common/DateString";
-import P from "./common/P";
 
 interface Props {
   cve: FlawWithCVE["cve"];
@@ -41,7 +39,7 @@ const CVECard: FunctionComponent<Props> = ({ cve }) => {
         </div>
       )}
       <b>Description:</b>
-      <P value={cve.description} />
+      <p>{cve.description}</p>
 
       <div className="mt-4 flex flex-row justify-end">
         <button

src/components/DependencyGraph.tsx

@@ -203,7 +203,6 @@ const DependencyGraph: FunctionComponent<{
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
-        onNodeClick={console.log}
         defaultViewport={{
           zoom: 1,
           x: rootNode.position.x - width / 2,

src/components/Main.tsx

@@ -43,7 +43,7 @@ const Main: FunctionComponent<Props> = ({
     <main>
       <header
         className={classNames(
-          "relative flex items-center justify-between border-b border-b-gray-200 bg-blue-950 px-4 pt-5 dark:border-b-gray-700 dark:bg-black sm:px-6 lg:px-8",
+          "relative flex items-center justify-between border-b bg-blue-950 px-4 pt-5 dark:bg-[#02040a] sm:px-6 lg:px-8",
           Boolean(Menu) ? "pb-3" : "pb-5",
         )}
       >
@@ -70,7 +70,7 @@ const Main: FunctionComponent<Props> = ({
                   key={item.title}
                   href={item.href}
                 >
-                  {router.asPath === item.href && (
+                  {router.asPath.startsWith(item.href) && (
                     <div className="absolute -bottom-3 -left-2 -right-2 h-0.5 bg-amber-400" />
                   )}
                   <div className="mt-4 flex flex-row items-center gap-1">
@@ -86,29 +86,28 @@ const Main: FunctionComponent<Props> = ({
       <div
         className={classNames(
           fullscreen ? "" : "mt-6 px-8 py-2 pb-8 sm:px-6 lg:px-8",
-          "text-black",
         )}
       >
         {children}
       </div>
-      <footer className="px-8 pb-8 text-sm text-black/50 dark:text-white">
+      <footer className="px-8 pb-8 text-sm text-muted-foreground">
         <div className="mb-2 flex flex-row gap-5">
           <Link
-            className="text-black/50 dark:text-white"
+            className="!text-muted-foreground"
             target="_blank"
             href="https://github.com/l3montree-dev/flawfix"
           >
             GitHub
           </Link>
           <Link
-            className="text-black/50 dark:text-white"
+            className="!text-muted-foreground"
             target="_blank"
             href="https://flawfix.dev/impressum"
           >
             Imprint
           </Link>
           <Link
-            className="text-black/50 dark:text-white"
+            className="!text-muted-foreground"
             href="https://flawfix.dev/datenschutzerklaerung/"
           >
             Privacy