Moved the app to more appropriate folder and optimised the code

.github/workflows/app_release.yaml

@@ -1,4 +1,4 @@
-name: 'publish'
+name: "publish"
 
 on:
   push:
@@ -13,14 +13,14 @@ jobs:
       fail-fast: false
       matrix:
         include:
-          - platform: 'macos-latest' # for Arm based macs (M1 and above).
-            args: '--target aarch64-apple-darwin'
-          - platform: 'macos-latest' # for Intel based macs.
-            args: '--target x86_64-apple-darwin'
-          - platform: 'ubuntu-22.04' # for Tauri v1 you could replace this with ubuntu-20.04.
-            args: ''
-          - platform: 'windows-latest'
-            args: ''
+          - platform: "macos-latest" # for Arm based macs (M1 and above).
+            args: "--target aarch64-apple-darwin"
+          - platform: "macos-latest" # for Intel based macs.
+            args: "--target x86_64-apple-darwin"
+          - platform: "ubuntu-22.04" # for Tauri v1 you could replace this with ubuntu-20.04.
+            args: ""
+          - platform: "windows-latest"
+            args: ""
 
     runs-on: ${{ matrix.platform }}
     steps:
@@ -43,16 +43,23 @@ jobs:
           sudo apt-get install -y libwebkit2gtk-4.0-dev libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf
 
       - name: install frontend dependencies
-        run: npm install
+        run: npm install --force # change this to npm, pnpm or bun depending on which one you use.
+        working-directory: ./crates/app/
 
       - uses: tauri-apps/tauri-action@v0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           tagName: app-v__VERSION__
-          releaseName: 'App v__VERSION__'
-          releaseBody: 'See the assets to download this version and install.'
+          releaseName: "App v__VERSION__"
+          releaseBody: "See the assets to download this version and install."
           releaseDraft: true
           prerelease: false
           args: ${{ matrix.args }}
-          projectPath: "./crates/webapp/"
+          projectPath: "./crates/app/"
+
+      - name: upload artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: built-app-${{ matrix.platform }}
+          path: ./target/release/

crates/app/src/App.tsx

@@ -0,0 +1,146 @@
+import {BrowserRouter as Router, Route, Routes} from "react-router-dom";
+import Components from "@/pages/components";
+import CreateComponent from "@/pages/components/create";
+import {APIs} from "@/pages/api";
+import CreateAPI from "@/pages/api/create";
+import APIDetails from "@/pages/api/details";
+import APISettings from "@/pages/api/details/settings";
+import CreateRoute from "@/pages/api/details/createRoute.tsx";
+import Deployments from "@/pages/deployment";
+import {ComponentDetails} from "@/pages/components/details";
+import {PluginList} from "@/pages/plugin";
+import ComponentSettings from "@/pages/components/details/settings";
+import ComponentInfo from "@/pages/components/details/info";
+import Exports from "@/pages/components/details/export";
+import ComponentUpdate from "@/pages/components/details/update";
+import WorkerList from "@/pages/workers";
+import {ThemeProvider} from "@/components/theme-provider.tsx";
+import Navbar from "@/components/navbar.tsx";
+import APINewVersion from "./pages/api/details/newVersion";
+import {Dashboard} from "@/pages/dashboard";
+import CreateWorker from "@/pages/workers/create";
+import WorkerDetails from "@/pages/workers/details";
+import ErrorBoundary from "@/components/errorBoundary";
+import WorkerEnvironments from "@/pages/workers/details/environments";
+import WorkerManage from "@/pages/workers/details/manage";
+import WorkerInvoke from "@/pages/workers/details/invoke";
+import WorkerLive from "@/pages/workers/details/live";
+import CreatePlugin from "@/pages/plugin/create.tsx";
+import {PluginView} from "@/pages/plugin/view.tsx";
+import {ApiRoute} from "@/pages/api/details/viewRoute";
+import CreateDeployment from "@/pages/deployment/create";
+import {ApiLayout} from "./pages/api/details/api-layout";
+
+function App() {
+    return (
+        <ThemeProvider defaultTheme="system" storageKey="golem-theme">
+            <Router>
+                <div className="min-h-screen">
+                    <ErrorBoundary>
+                        <Navbar/>
+                    </ErrorBoundary>
+                    <Routes>
+                        <Route path="/" element={<Dashboard/>}/>
+                        <Route path="/components" element={<Components/>}/>
+                        <Route path="/components/create" element={<CreateComponent/>}/>
+                        <Route
+                            path="/components/:componentId"
+                            element={<ComponentDetails/>}
+                        />
+                        <Route
+                            path="/components/:componentId/settings"
+                            element={<ComponentSettings/>}
+                        />
+                        <Route
+                            path="/components/:componentId/update"
+                            element={<ComponentUpdate/>}
+                        />
+                        <Route
+                            path="/components/:componentId/info"
+                            element={<ComponentInfo/>}
+                        />
+                        <Route
+                            path="/components/:componentId/exports"
+                            element={<Exports/>}
+                        />
+                        <Route
+                            path="/components/:componentId/workers"
+                            element={<WorkerList/>}
+                        />
+                        <Route
+                            path="/components/:componentId/workers/create"
+                            element={<CreateWorker/>}
+                        />
+                        <Route
+                            path="/components/:componentId/workers/:workerName"
+                            element={<WorkerDetails/>}
+                        />
+                        <Route
+                            path="/components/:componentId/workers/:workerName/environments"
+                            element={<WorkerEnvironments/>}
+                        />
+                        <Route
+                            path="/components/:componentId/workers/:workerName/manage"
+                            element={<WorkerManage/>}
+                        />
+                        <Route
+                            path="/components/:componentId/workers/:workerName/invoke"
+                            element={<WorkerInvoke/>}
+                        />
+                        <Route
+                            path="/components/:componentId/workers/:workerName/live"
+                            element={<WorkerLive/>}
+                        />
+                        <Route path="/apis" element={<APIs/>}/>
+                        <Route path="/apis/create" element={<CreateAPI/>}/>
+                        <Route
+                            path="/apis/:apiName/version/:version"
+                            element={<ApiLayout/>}
+                        >
+                            <Route path="" element={<APIDetails/>}/>
+                            <Route path="settings" element={<APISettings/>}/>
+                            <Route path="routes/edit" element={<CreateRoute/>}/>
+                            <Route path="newversion" element={<APINewVersion/>}/>
+                            <Route path="routes" element={<ApiRoute/>}/>
+                        </Route>
+                        {/* <Route
+              path="/apis/:apiName/version/:version/"
+              element={<APIDetails />}
+            />
+            <Route
+              path="/apis/:apiName/version/:version/settings"
+              element={<APISettings />}
+            />
+            <Route
+              path="/apis/:apiName/version/:version/route/:routeId"
+              element={<ApiRoute />}
+            />
+            <Route
+              path="/apis/:apiName/version/:version/newversion"
+              element={<APINewVersion />}
+            />
+            <Route
+              path="/apis/:apiName/version/:version/routes/new"
+              element={<CreateRoute />}
+            /> */}
+                        <Route path="/deployments" element={<Deployments/>}/>
+                        <Route path="/plugins" element={<PluginList/>}/>
+                        <Route path="/plugins/create" element={<CreatePlugin/>}/>
+                        <Route path="/apis/:apiName/routes/new" element={<CreateRoute/>}/>
+                        <Route path="/deployments" element={<Deployments/>}/>
+                        <Route path="/deployments/create" element={<CreateDeployment/>}/>
+                        <Route path="/plugins" element={<PluginList/>}/>
+                        <Route path="/plugins/create" element={<CreatePlugin/>}/>
+                        <Route path="/plugins/:pluginId" element={<PluginView/>}/>
+                        <Route
+                            path="/plugins/:pluginId/:version"
+                            element={<PluginView/>}
+                        />
+                    </Routes>
+                </div>
+            </Router>
+        </ThemeProvider>
+    );
+}
+
+export default App;

crates/webapp/src/components/ui/badge.tsx → crates/app/src/components/ui/badge.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
@@ -14,14 +14,14 @@ const badgeVariants = cva(
           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:
           "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-        outline: "text-foreground",
+        outline: "text-foreground rounded-lg",
       },
     },
     defaultVariants: {
       variant: "default",
     },
   }
-)
+);
 
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -30,7 +30,7 @@ export interface BadgeProps
 function Badge({ className, variant, ...props }: BadgeProps) {
   return (
     <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };

crates/app/src/lib/utils.ts

@@ -0,0 +1,104 @@
+import { Api } from "@/types/api";
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function formatRelativeTime(dateString: string | number | Date) {
+  const date = new Date(dateString).getTime();
+  const now = new Date().getTime();
+  const diffInSeconds = Math.floor((now - date) / 1000);
+
+  const units = [
+    { name: "year", seconds: 60 * 60 * 24 * 365 },
+    { name: "month", seconds: 60 * 60 * 24 * 30 },
+    { name: "week", seconds: 60 * 60 * 24 * 7 },
+    { name: "day", seconds: 60 * 60 * 24 },
+    { name: "hour", seconds: 60 * 60 },
+    { name: "minute", seconds: 60 },
+    { name: "second", seconds: 1 },
+  ];
+
+  for (const unit of units) {
+    if (diffInSeconds >= unit.seconds) {
+      const value = Math.floor(diffInSeconds / unit.seconds);
+      return `${value} ${unit.name}${value > 1 ? "s" : ""} ago`;
+    }
+  }
+
+  return "just now";
+}
+
+export const sanitizeInput = (input: string): string => {
+  return input.replace(/\u201c|\u201d/g, '"').replace(/'/g, '"');
+};
+
+export function formatTimestampInDateTimeFormat(timestamp: string) {
+  const date = new Date(timestamp);
+
+  // Get date components
+  const month = String(date.getMonth() + 1).padStart(2, "0"); // Months are zero-indexed
+  const day = String(date.getDate()).padStart(2, "0");
+
+  // Get time components
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  const seconds = String(date.getSeconds()).padStart(2, "0");
+  const milliseconds = String(date.getMilliseconds()).padStart(3, "0");
+
+  // Combine into the desired format
+  return `${month}-${day} ${hours}:${minutes}:${seconds}.${milliseconds}`;
+}
+
+/// compare semver version
+export const compareSemver = (version1: string, version2: string) => {
+  const semverRegex =
+    /^(\d+)\.(\d+)\.(\d+)(?:-([0-9A-Za-z-]+(?:\.[0-9A-Za-z-]+)*))?(?:\+([0-9A-Za-z-]+(?:\.[0-9A-Za-z-]+)*))?$/;
+
+  if (!semverRegex.test(version1) || !semverRegex.test(version2)) {
+    throw new Error("Invalid semver version format");
+  }
+
+  const v1Parts = version1.split(".");
+  const v2Parts = version2.split(".");
+
+  // Compare major version
+  const major1 = parseInt(v1Parts[0]);
+  const major2 = parseInt(v2Parts[0]);
+  if (major1 !== major2) return major1 > major2;
+
+  const minor1 = parseInt(v1Parts[1]);
+  const minor2 = parseInt(v2Parts[1]);
+  if (minor1 !== minor2) return minor1 > minor2;
+
+  // Compare patch version
+  const patch1 = parseInt(v1Parts[2]);
+  const patch2 = parseInt(v2Parts[2]);
+  return patch1 > patch2;
+
+  return false;
+};
+
+/// Remove the duplicate api and keep the latest one by comparing the semver version
+export const removeDuplicateApis = (data: Api[]) => {
+  const uniqueEntries = {} as Record<string, Api>;
+
+  data.forEach((item) => {
+    if (!uniqueEntries[item.id]) {
+      uniqueEntries[item.id] = item;
+    } else {
+      // check semver for latest version
+      const uniqueEntriesVersion = uniqueEntries[item.id].version;
+      const count = (uniqueEntries[item.id].count || 1) + 1;
+      const itemVersion = item.version;
+      if (compareSemver(itemVersion, uniqueEntriesVersion)) {
+        uniqueEntries[item.id] = { ...item, count: count + 1 };
+      } else {
+        uniqueEntries[item.id].count = count;
+      }
+    }
+  });
+  return Object.values(uniqueEntries);
+};