Merge pull request #764 from l3montree-dev/star-banner

Author: timbastin

src/components/common/DynamicHeader.tsx

@@ -70,6 +70,7 @@ export default function DynamicHeader({ Title, menu, z }: Props) {
             <h1 className="font-display whitespace-nowrap text-lg font-semibold leading-7 text-header-foreground">
               {Title}
             </h1>
+
             <UserNav />
           </div>
         </div>

src/components/navigation/StarRepo.tsx

@@ -0,0 +1,34 @@
+// Copyright (C) 2026 Lars Hermges, l3montree GmbH
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import { Star } from "lucide-react";
+
+export default function StarRepo() {
+  return (
+    <div className="flex h-7 overflow-hidden rounded-md border border-[#d0d7de] bg-[#f1f3f5] text-[#59636e] shadow-sm dark:border-[#3d444d] dark:bg-[#212830] dark:text-[#f0f6fc]">
+      <a
+        href={`https://github.com/l3montree-dev/devguard`}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="flex items-center gap-2 px-3 text-sm font-semibold !text-[#59636e] hover:bg-[#e9ecef] hover:no-underline dark:!text-[#f0f6fc] dark:hover:bg-[#2a313c]"
+        aria-label="Star DevGuard on GitHub"
+        data-umami-event="Github Star Button Clicked"
+      >
+        <Star className="h-4 w-4 text-[#535c66] dark:text-[#9198a1]" />
+        <span>Star</span>
+      </a>
+    </div>
+  );
+}

src/components/navigation/UserNav.tsx

@@ -41,6 +41,7 @@ import {
 import { useConfig } from "../../context/ConfigContext";
 import { getUserFullName } from "../../types/auth";
 import HelpDropdown from "./HelpDropdown";
+import StarRepo from "./StarRepo";
 
 export default function UserNav() {
   const { setTheme } = useTheme();
@@ -55,7 +56,8 @@ export default function UserNav() {
   };
 
   return (
-    <div className="flex text-header-foreground user-nav flex-row justify-between gap-1">
+    <div className="flex items-center text-header-foreground user-nav flex-row justify-between gap-1">
+      <StarRepo />
       <HelpDropdown />
       <DropdownMenu>
         <DropdownMenuTrigger aria-label="Open tools menu">

src/components/ui/tabs.tsx

@@ -27,7 +27,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex cursor-pointer border border-transparent data-[state=active]:border-border dark:data-[state=active]:border-transparent items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      "inline-flex cursor-pointer border border-transparent data-[state=active]:border-border dark:data-[state=active]:border-transparent items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-secondary data-[state=active]:text-foreground data-[state=active]:shadow-sm",
       className,
     )}
     {...props}