improved private resource modal

src/components/ClientResourcesTable.tsx

@@ -329,8 +329,11 @@ export default function ClientResourcesTable({
                     orgId={orgId}
                     sites={sites}
                     onSuccess={() => {
-                        router.refresh();
-                        setEditingResource(null);
+                        // Delay refresh to allow modal to close smoothly
+                        setTimeout(() => {
+                            router.refresh();
+                            setEditingResource(null);
+                        }, 150);
                     }}
                 />
             )}
@@ -341,7 +344,10 @@ export default function ClientResourcesTable({
                 orgId={orgId}
                 sites={sites}
                 onSuccess={() => {
-                    router.refresh();
+                    // Delay refresh to allow modal to close smoothly
+                    setTimeout(() => {
+                        router.refresh();
+                    }, 150);
                 }}
             />
         </>

src/components/HorizontalTabs.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useState } from "react";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
 import { cn } from "@app/lib/cn";
@@ -20,17 +20,22 @@ interface HorizontalTabsProps {
     children: React.ReactNode;
     items: TabItem[];
     disabled?: boolean;
+    clientSide?: boolean;
+    defaultTab?: number;
 }
 
 export function HorizontalTabs({
     children,
     items,
-    disabled = false
+    disabled = false,
+    clientSide = false,
+    defaultTab = 0
 }: HorizontalTabsProps) {
     const pathname = usePathname();
     const params = useParams();
     const { licenseStatus, isUnlocked } = useLicenseStatusContext();
     const t = useTranslations();
+    const [activeClientTab, setActiveClientTab] = useState(defaultTab);
 
     function hydrateHref(href: string) {
         return href
@@ -43,6 +48,73 @@ export function HorizontalTabs({
             .replace("{remoteExitNodeId}", params.remoteExitNodeId as string);
     }
 
+    // Client-side mode: render tabs as buttons with state management
+    if (clientSide) {
+        const childrenArray = React.Children.toArray(children);
+        const activeChild = childrenArray[activeClientTab] || null;
+
+        return (
+            <div className="space-y-3">
+                <div className="relative">
+                    <div className="overflow-x-auto scrollbar-hide">
+                        <div className="flex space-x-4 border-b min-w-max">
+                            {items.map((item, index) => {
+                                const isActive = activeClientTab === index;
+                                const isProfessional =
+                                    item.showProfessional && !isUnlocked();
+                                const isDisabled =
+                                    disabled ||
+                                    (isProfessional && !isUnlocked());
+
+                                return (
+                                    <button
+                                        key={index}
+                                        type="button"
+                                        onClick={() => {
+                                            if (!isDisabled) {
+                                                setActiveClientTab(index);
+                                            }
+                                        }}
+                                        className={cn(
+                                            "px-4 py-2 text-sm font-medium transition-colors whitespace-nowrap relative",
+                                            isActive
+                                                ? "text-primary after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.75 after:bg-primary after:rounded-full"
+                                                : "text-muted-foreground hover:text-foreground",
+                                            isDisabled && "cursor-not-allowed"
+                                        )}
+                                        disabled={isDisabled}
+                                        tabIndex={isDisabled ? -1 : undefined}
+                                        aria-disabled={isDisabled}
+                                    >
+                                        <div
+                                            className={cn(
+                                                "flex items-center space-x-2",
+                                                isDisabled && "opacity-60"
+                                            )}
+                                        >
+                                            {item.icon && item.icon}
+                                            <span>{item.title}</span>
+                                            {isProfessional && (
+                                                <Badge
+                                                    variant="outlinePrimary"
+                                                    className="ml-2"
+                                                >
+                                                    {t("licenseBadge")}
+                                                </Badge>
+                                            )}
+                                        </div>
+                                    </button>
+                                );
+                            })}
+                        </div>
+                    </div>
+                </div>
+                <div className="space-y-6">{activeChild}</div>
+            </div>
+        );
+    }
+
+    // Server-side mode: original behavior with routing
     return (
         <div className="space-y-3">
             <div className="relative">

src/components/ui/button.tsx

@@ -15,7 +15,7 @@ const buttonVariants = cva(
                 destructive:
                     "bg-destructive text-white dark:text-destructive-foreground hover:bg-destructive/90 ",
                 outline:
-                    "border border-input bg-card hover:bg-accent hover:text-accent-foreground ",
+                    "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground ",
                 outlinePrimary:
                     "border border-primary bg-card hover:bg-primary/10 text-primary ",
                 secondary: