update readme, some minor UI improvement

Author: florianbgt

README.md

@@ -50,16 +50,16 @@ determinstic tool.
 `napi` aims to support all major programming languages. Here is the current
 status:
 
-| Language/Framework | Status         | Related Issues                                      |
-| ------------------ | -------------- | --------------------------------------------------- |
-| Python             | ✅ Supported   | [#28](https://github.com/nanoapi-io/napi/issues/28) |
-| C#                 | ✅ Supported   | [#31](https://github.com/nanoapi-io/napi/issues/31) |
-| PHP                | 🚧 In Progress | [#30](https://github.com/nanoapi-io/napi/issues/30) |
-| Java               | 🚧 In Progress | [#32](https://github.com/nanoapi-io/napi/issues/32) |
-| C                  | 🚧 In Progress | Not Tracked Yet                                     |
-| C++                | 🚧 In Progress | Not Tracked Yet                                     |
-| JavaScript         | 🚧 In Progress | Not Tracked Yet                                     |
-| TypeScript         | 🚧 In Progress | Not Tracked Yet                                     |
+| Language/Framework | Status         |
+| ------------------ | -------------- |
+| Python             | ✅ Supported   |
+| C#                 | ✅ Supported   |
+| C                  | ✅ In Progress |
+| Java               | 🚧 In Progress |
+| C++                | 🚧 In Progress |
+| PHP                | 🚧 In Progress |
+| JavaScript         | 🚧 In Progress |
+| TypeScript         | 🚧 In Progress |
 
 For the latest updates, visit our [project board](/projects).
 
@@ -104,17 +104,23 @@ Initialize the project. This step is required before running any other command.
 This will create a .napirc configuration file in the project root, storing paths
 and settings necessary for further commands.
 
-### `napi audit view`
+### `napi manifest generate`
 
-Scan and audit your codebase for potential improvements, vulnerabilities, and
-maintainability issues. This command opens the NanoAPI UI in your default
-browser, providing a clear overview of what areas of your code would benefit
-most from refactoring or cleanup.
+Generate a manifest of your codebase that captures its structure, dependencies,
+and relationships. This command analyzes your code and writes the manifest data
+to the configured `napi_out` directory in your project.
 
-> **Important**: Run napi audit view periodically, especially before major
-> refactoring efforts, to ensure your code is in good shape. It will soon also
-> be possible to integrate that command into CI/CD workflows to catch
-> architectural-level-quality issues early.
+### `napi manifest view`
+
+Open the NanoAPI UI in your default browser to visualize and explore the
+manifest generated by `napi manifest generate`. This provides an interactive
+view of your codebase's architecture, helping you identify areas for potential
+improvements and refactoring.
+
+> **Important**: Run `napi manifest generate` whenever you make significant
+> changes to your codebase to ensure your manifest stays up-to-date. The
+> manifest data can be integrated into CI/CD workflows to track architectural
+> changes over time.
 
 ## CI/CD Integration
 

deno.lock

@@ -21,12 +21,13 @@ export interface VisualizerContext {
 }
 
 export default function DependencyVisualizer(props: {
+  theme: string;
   dependencyManifest: DependencyManifest;
   auditManifest: AuditManifest;
 }) {
   const [searchParams] = useSearchParams();
 
-  const { theme, setTheme } = useTheme();
+  const { setTheme } = useTheme();
 
   const [highlightedCytoscapeRef, setHighlightedCytoscapeRef] = useState<
     {
@@ -109,10 +110,10 @@ export default function DependencyVisualizer(props: {
           <Button
             variant="ghost"
             size="icon"
-            onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+            onClick={() => setTheme(props.theme === "light" ? "dark" : "light")}
             className="mr-2"
           >
-            {theme === "light" ? <Moon /> : <Sun />}
+            {props.theme === "light" ? <Moon /> : <Sun />}
           </Button>
         </div>
         <div className="grow w-full border-t">

packages/app/src/components/DependencyVisualizer/DependencyVisualizer.tsx

@@ -20,6 +20,8 @@ import {
   ChevronRight,
   Code,
   File,
+  FolderClosed,
+  FolderOpen,
   ScanEye,
   SearchCode,
 } from "lucide-react";
@@ -254,7 +256,7 @@ function ExplorerNode(props: {
                 onClick={() => setShowChildren(!showChildren)}
                 className="w-full justify-start"
               >
-                {showChildren ? <ChevronDown /> : <ChevronRight />}
+                {showChildren ? <FolderOpen /> : <FolderClosed />}
                 <DisplayNameWithTooltip
                   name={props.node.displayName}
                   maxChar={Math.max(5, 30 - props.level * 2)}
@@ -263,22 +265,25 @@ function ExplorerNode(props: {
             );
           case "file":
             return (
-              <div className="flex justify-between items-center">
-                <div className="flex items-center space-x-1">
+              <div className="flex justify-between items-center gap-2">
+                <div className="grow flex items-center gap-2">
                   <Button
                     variant="ghost"
                     size="sm"
                     onClick={() => setShowChildren(!showChildren)}
                     className="w-full justify-start"
                   >
+                    {showChildren
+                      ? <ChevronDown size={16} />
+                      : <ChevronRight size={16} />}
                     <File />
                     <DisplayNameWithTooltip
                       name={props.node.displayName}
                       maxChar={Math.max(5, 30 - props.level * 2)}
                     />
                   </Button>
                 </div>
-                <div className="flex items-center space-x-1">
+                <div className="flex items-center gap-1">
                   <Tooltip delayDuration={500}>
                     <TooltipTrigger asChild>
                       <Button
@@ -310,15 +315,15 @@ function ExplorerNode(props: {
             );
           case "symbol":
             return (
-              <div className="flex justify-between items-center">
-                <div className="flex items-center space-x-1">
+              <div className="flex justify-between items-center gap-2">
+                <div className="grow flex items-center gap-2">
                   <Code size={12} />
                   <DisplayNameWithTooltip
                     name={props.node.displayName}
                     maxChar={Math.max(5, 30 - props.level * 2)}
                   />
                 </div>
-                <div className="flex items-center space-x-1">
+                <div className="flex items-center gap-1">
                   <Tooltip delayDuration={500}>
                     <TooltipTrigger asChild>
                       <Button

packages/app/src/components/DependencyVisualizer/components/FileExplorerSidebar.tsx

@@ -7,6 +7,7 @@ import type { AuditManifest, DependencyManifest } from "@napi/shared";
 import { toast } from "sonner";
 import DependencyVisualizer from "../components/DependencyVisualizer/DependencyVisualizer.tsx";
 import { Loader } from "lucide-react";
+import { useTheme } from "../contexts/ThemeProvider.tsx";
 
 export default function IndexPage() {
   const [auditManifest, setAuditManifest] = useState<AuditManifest | undefined>(
@@ -16,6 +17,8 @@ export default function IndexPage() {
     DependencyManifest | undefined
   >(undefined);
 
+  const { theme } = useTheme();
+
   useEffect(() => {
     async function handleOnLoad() {
       const dependencyManifestPromise = getDependencyManifest();
@@ -46,6 +49,7 @@ export default function IndexPage() {
       {auditManifest && dependencyManifest
         ? (
           <DependencyVisualizer
+            theme={theme}
             dependencyManifest={dependencyManifest}
             auditManifest={auditManifest}
           />