Merge pull request #674 from l3montree-dev/fix-delete-assetversion-redirection-bug

Author: timbastin

src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/refs/page.tsx

@@ -37,6 +37,7 @@ import { browserApiClient } from "../../../../../../../../services/devGuardApi";
 import { AssetVersionDTO } from "../../../../../../../../types/api/api";
 import CreateRefDialog from "../../../../../../../../components/CreateBranchDialog";
 import { classNames } from "../../../../../../../../utils/common";
+import { eventBus } from "@/events";
 
 const RefsPage = () => {
   const assetMenu = useAssetMenu();
@@ -72,6 +73,17 @@ const RefsPage = () => {
           refs: prev.refs.filter((ref) => ref.slug !== open.slug),
         };
       });
+      // If the deleted ref is the last viewed ref, remove it from localStorage
+      const stored = localStorage.getItem(
+        "lastViewedAssetVersionSlug" + params.assetSlug,
+      );
+      if (stored === open.slug) {
+        localStorage.removeItem(
+          "lastViewedAssetVersionSlug" + params.assetSlug,
+        );
+        eventBus.dispatch({ type: "assetVersionDeleted", payload: {} });
+      }
+
       setOpen(null);
     } else {
       toast.error("Failed to delete ref");

src/components/common/AssetTitle.tsx

@@ -1,43 +1,66 @@
+"use client";
+
 import { useActiveAsset } from "@/hooks/useActiveAsset";
 import { useActiveOrg } from "@/hooks/useActiveOrg";
 import { useActiveProject } from "@/hooks/useActiveProject";
-import { useActiveAssetVersion } from "@/hooks/useActiveAssetVersion";
+import useDecodedParams from "@/hooks/useDecodedParams";
 import Link from "next/link";
-import React, { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Badge } from "../ui/badge";
 import ProjectTitle from "./ProjectTitle";
-import useDecodedParams from "@/hooks/useDecodedParams";
+import { eventBus } from "@/events";
 
 const AssetTitle = () => {
   const activeOrg = useActiveOrg();
   const project = useActiveProject()!;
   const asset = useActiveAsset();
-  const assetVersion = useActiveAssetVersion();
 
   const params = useDecodedParams() as { assetVersionSlug?: string };
 
-  const [assetVersionSlug, setAssetVersionSlug] = useState<string | undefined>(
-    undefined,
-  );
+  const [assetVersionSlug, setAssetVersionSlug] = useState<string>();
 
   useEffect(() => {
-    const currentSlug = assetVersion?.slug ?? params?.assetVersionSlug;
+    const currentSlug = params?.assetVersionSlug;
 
     if (currentSlug) {
-      localStorage.setItem("lastViewedAssetVersionSlug", currentSlug);
+      localStorage.setItem(
+        "lastViewedAssetVersionSlug" + asset?.slug,
+        currentSlug,
+      );
       setAssetVersionSlug(currentSlug);
     } else {
-      const stored = localStorage.getItem("lastViewedAssetVersionSlug");
-      setAssetVersionSlug(stored ?? undefined);
+      const stored = localStorage.getItem(
+        "lastViewedAssetVersionSlug" + asset?.slug,
+      );
+      setAssetVersionSlug(stored && stored !== "undefined" ? stored : "");
     }
-  }, [assetVersion?.slug, params?.assetVersionSlug]);
+  }, [params?.assetVersionSlug, asset?.slug]);
+
+  useEffect(() => {
+    eventBus.subscribe("assetTitleListener", "assetVersionDeleted", () => {
+      const stored = localStorage.getItem(
+        "lastViewedAssetVersionSlug" + asset?.slug,
+      );
+      setAssetVersionSlug(stored && stored !== "undefined" ? stored : "");
+    });
+
+    return () => {
+      eventBus.unsubscribe("assetTitleListener");
+    };
+  }, [asset?.slug]);
+
   return (
     <span className="flex flex-row gap-2 min-w-0 overflow-hidden">
       <ProjectTitle />
       <span className="opacity-75 flex-shrink-0">/</span>
       <Link
         className="flex !text-header-foreground items-center gap-1 hover:no-underline min-w-0"
-        href={`/${activeOrg?.slug}/projects/${project?.slug}/assets/${asset?.slug}/refs/${assetVersionSlug}`}
+        href={
+          `/${activeOrg?.slug}/projects/${project?.slug}/assets/${asset?.slug}` +
+          (assetVersionSlug && assetVersionSlug !== "undefined"
+            ? `/refs/${assetVersionSlug}`
+            : "")
+        }
         title={asset?.name}
       >
         <span className="truncate">{asset?.name}</span>

src/events.ts

@@ -0,0 +1,55 @@
+// Copyright 2026 L3montree GmbH and the DevGuard Contributors.
+// SPDX-License-Identifier: 	AGPL-3.0-or-later
+
+interface AssetVersionDeletedEvent {}
+
+type Events = {
+  assetVersionDeleted: AssetVersionDeletedEvent;
+};
+
+type Listener<T extends keyof Events> = {
+  id: string;
+  callback: (payload: Events[T]) => void;
+};
+class EventBus {
+  private listeners: {
+    [K in keyof Events]: Listener<K>[];
+  } = {
+    assetVersionDeleted: [],
+  };
+  public dispatch<E extends keyof Events>(event: {
+    type: E;
+    payload: Events[E];
+  }) {
+    const listeners = this.listeners[event.type] || [];
+
+    for (const listener of listeners) {
+      listener.callback(event.payload);
+    }
+  }
+
+  public subscribe<T extends keyof Events>(
+    id: string,
+    eventType: T,
+    callback: (payload: Events[T]) => void,
+  ) {
+    if (!this.listeners[eventType]) {
+      this.listeners[eventType] = [];
+    }
+    (this.listeners[eventType] as Listener<T>[]) = this.listeners[
+      eventType
+    ].filter((l) => l.id !== id);
+    this.listeners[eventType].push({ id, callback });
+  }
+
+  public unsubscribe(id: string) {
+    for (const eventType in this.listeners) {
+      this.listeners[eventType as keyof Events] = this.listeners[
+        eventType as keyof Events
+      ].filter((listener) => listener.id !== id);
+    }
+  }
+}
+
+// THIS WILL ALWAYS BE A SINGLETON THANKS JAVASCRIPT
+export const eventBus = new EventBus();