Implementasjon av dynamisk tilbake-navigasjon mellom Detailed pages

frontend/src/components/navigation/BackButton.css

@@ -0,0 +1,27 @@
+
+.back-navigation {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    width: fit-content;
+
+    padding: 0;
+    border: none;
+    background: none;
+
+    color: var(--accent);
+    font: inherit;
+    font-size: 14px;
+    font-weight: 600;
+
+    cursor: pointer;
+}
+
+.back-navigation:hover {
+    text-decoration: underline;
+}
+
+.back-navigation:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 4px;
+}

frontend/src/components/navigation/BackButton.tsx

@@ -0,0 +1,43 @@
+
+import { ArrowLeft } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import "./BackButton.css";
+
+type BackButtonProps = {
+    fallbackTo: string;
+};
+
+/**
+ * Gjenbrukbar tilbakeknapp for detaljsider.
+ * Navigerer til forrige side, eller til fallbackTo dersom
+ * det ikke finnes en tidligere side i React Routers historikk.
+ *
+ * @param fallbackTo - Standardsiden brukeren sendes til.
+ */
+function BackButton({ fallbackTo }: BackButtonProps) {
+    /** Innebygd React-Hook som lar oss navigere mellom sider
+     * Den "husker" den browse-historikken og dermed
+     * kan man bruke navigate(-1) for å gå tilbake.
+     */
+    const navigate = useNavigate();
+
+    /** Håndterer trykking av tilbake knappen */
+    const handleBack = () => {
+        /** Hvis de er noe å gå tilbake til */
+        if (window.history.state?.idx > 0) {
+            /** Gå tilbkae */
+            navigate(-1);
+            return;
+        }
+        /** Hvis de er ikk noe å gå tilbake til: gå til startpage */
+        navigate(fallbackTo, { replace: true });
+    };
+
+    return (
+        <button type="button" className="back-navigation" onClick={handleBack}>
+            <ArrowLeft size={16} aria-hidden="true" />Back
+        </button>
+    );
+}
+
+export default BackButton;

frontend/src/components/tactic/TacticDetailed/TacticDetailedHeader/TacticDetailedHeader.tsx

@@ -2,6 +2,7 @@ import { ArrowLeft, Star } from "lucide-react";
 import { Link } from "react-router-dom";
 
 import "./TacticDetailedHeader.css";
+import BackButton from "../../../navigation/BackButton";
 
 type TacticDetailedHeaderProps = {
   mitreId: string;
@@ -14,13 +15,7 @@ function TacticDetailedHeader({
 }: TacticDetailedHeaderProps) {
   return (
     <header className="tactic-detailed-header">
-      <Link
-        to="/tactics"
-        className="tactic-detailed-back-link"
-      >
-        <ArrowLeft />
-        Back to Tactics
-      </Link>
+      <BackButton fallbackTo="/tactics" />
 
       <span className="tactic-detailed-type">
         TACTIC

frontend/src/components/techniques/specificTechnique/TechniqueDetailedHeader/TechniqueDetailedHeader.tsx

@@ -2,6 +2,7 @@ import { ArrowLeft, Star } from "lucide-react";
 import { Link } from "react-router-dom";
 
 import "./TechniqueDetailedHeader.css";
+import BackButton from "../../../navigation/BackButton";
 
 type TechniqueDetailedHeaderProps = {
   mitreId: string;
@@ -18,14 +19,8 @@ function TechniqueDetailedHeader({
 }: TechniqueDetailedHeaderProps) {
   return (
     <header className="technique-detailed-header">
-      <Link
-        to="/techniques"
-        className="technique-detailed-back-link"
-      >
-        <ArrowLeft />
-        Back to Techniques
-      </Link>
-
+      <BackButton fallbackTo="/techniques" />
+
       <span className="technique-detailed-type">
         TECHNIQUE
       </span>

frontend/src/components/threatactor/ThreatActorDetailed/ThreatActorAssociated/ThreatActorAssociatedList.css

@@ -275,3 +275,18 @@
     gap: 12px;
   }
 }
+.associated-row,
+.associated-row:visited {
+    text-decoration: none;
+    color: inherit;
+}
+
+.associated-row:hover {
+    border-color: var(--accent);
+    cursor: pointer;
+}
+
+.associated-row:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+}

frontend/src/components/threatactor/ThreatActorDetailed/ThreatActorAssociated/ThreatActorAssociatedList.tsx

@@ -6,7 +6,11 @@ import {
 } from "lucide-react";
 import type { AssociatedItem } from "../../../../types/ThreatActorTypes";
 import "./ThreatActorAssociatedList.css";
+<<<<<<< HEAD
 import FeedbackCard from "../../../feedback/FeedbackCard";
+=======
+import { Link } from "react-router-dom";
+>>>>>>> e54f807 (feat: add dynamic back navigation across detail pages)
 
 type ThreatActorAssociatedListProps = {
   type: "techniques" | "software";
@@ -44,28 +48,30 @@ function ThreatActorAssociatedList({type,items,totalCount,page,pageSize,onPageCh
           />
         )}
 
-      <div className="associated-list">
-        {items.map((item) => (
-          <div
-            className={`associated-row ${
-              isTechnique
-                ? "associated-row-technique"
-                : "associated-row-software"
-            }`}
-            key={item.mitreId}
+      {items.map((item) => (
+          <Link
+              key={item.mitreId}
+              to={
+                  isTechnique
+                      ? `/techniques/details/${item.mitreId}`
+                      : `/software/${item.mitreId}`
+              }
+              className={`associated-row ${
+                  isTechnique
+                      ? "associated-row-technique"
+                      : "associated-row-software"
+              }`}
           >
-            <span className="associated-row-icon">
-              {isTechnique ? <FileText size={16} /> : <Settings size={16} />}
-            </span>
-
-            <span className="associated-item-id">{item.mitreId}</span>
+              <span className="associated-row-icon">
+                  {isTechnique ? <FileText size={16} /> : <Settings size={16} />}
+              </span>
 
-            <span className="associated-item-name">{item.name}</span>
+              <span className="associated-item-id">{item.mitreId}</span>
+              <span className="associated-item-name">{item.name}</span>
 
-            <ChevronRight className="associated-row-arrow" />
-          </div>
-        ))}
-      </div>
+              <ChevronRight className="associated-row-arrow" />
+          </Link>
+      ))}
 
       {totalPages > 1 && (
         <div className="associated-pagination">

frontend/src/components/threatactor/ThreatActorDetailed/ThreatActorDetailedHeader/ThreatActorDetailedHeader.tsx

@@ -1,6 +1,7 @@
 import { Star } from "lucide-react";
 import { Link } from "react-router-dom";
 import "./ThreatActorDetailedHeader.css";
+import BackButton from "../../../navigation/BackButton";
 
 type ThreatActorDetailsHeaderProps = {
   name: string;
@@ -17,9 +18,7 @@ function ThreatActorDetailedHeader({
     }: ThreatActorDetailsHeaderProps){
     return (
         <header className="threat-actor-detailed-header">
-            <Link to="/threat-actors" className="back-button">
-                ← Back to Threat Actors
-            </Link>
+            <BackButton fallbackTo="/threat-actors" />
 
             <div className="detailed-title-row">
                 <h1>{name}</h1>

frontend/src/pages/Software/SoftwareDetail.tsx

@@ -4,6 +4,7 @@ import { Link, useParams } from "react-router-dom";
 import { getSoftwareByMitreId } from "../../data/softwareData";
 import type { SoftwareEntry } from "../../data/softwareData";
 import "./SoftwareDetail.css";
+import BackButton from "../../components/navigation/BackButton";
 
 function cleanDescription(description: string): string {
   return description
@@ -84,9 +85,7 @@ function SoftwareDetail() {
 
   return (
     <main className="software-detail-page">
-      <Link to="/software" className="software-back-link">
-        <ArrowLeft aria-hidden="true" /> Back to Software
-      </Link>
+      <BackButton fallbackTo="/software" />
 
       <div className="software-detail-layout">
         <div className="software-detail-main">