feat: implement useOpenPath hook for consistent external link handling

- Introduced useOpenPath hook to streamline the process of opening external
  links across various components.
- Replaced direct window.open calls with the new hook in multiple files,
  ensuring consistent behavior in both web and Tauri environments.

Author: itstauq

src-frontend/app/(desktop-only)/about/page.tsx

@@ -2,6 +2,7 @@
 
 import { Icon } from "@/components/logo/icon";
 import useHashParams from "@/hooks/use-hash-params";
+import { useOpenPath } from "@/hooks/use-open-path";
 import { timeAgo } from "@/lib/utils";
 import { useTheme } from "next-themes";
 import { useEffect } from "react";
@@ -16,10 +17,7 @@ export default function MacbookInfo() {
     daemon_hash,
     daemon_build,
   } = useHashParams();
-  const { openPath } =
-    typeof window !== "undefined" && typeof window.__TAURI__ !== "undefined"
-      ? window.__TAURI__.opener
-      : { openPath: (path: string) => window.open(path, "_blank") };
+  const { openPath } = useOpenPath();
 
   useEffect(() => {
     if (window.__TAURI__) {

src-frontend/app/(desktop-only)/updates/page.tsx

@@ -16,6 +16,7 @@ import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { BackgroundGradients } from "@/components/logo/background-gradients";
 import { IconGhost } from "@/components/logo/icon-ghost";
+import { useOpenPath } from "@/hooks/use-open-path";
 
 enum Type {
   checking = "checking",
@@ -47,11 +48,7 @@ const initialState: UpdateWindowState = {
 export default function UpdatePage() {
   const [state, setState] = useState<UpdateWindowState>(initialState);
   const [animatedProgress, setAnimatedProgress] = useState(0);
-
-  const { openPath } =
-    typeof window !== "undefined" && typeof window.__TAURI__ !== "undefined"
-      ? window.__TAURI__.opener
-      : { openPath: (path: string) => window.open(path, "_blank") };
+  const { openPath } = useOpenPath();
 
   useEffect(() => {
     let unlisten: (() => void) | undefined;

src-frontend/components/apps/app-detail.tsx

@@ -36,6 +36,7 @@ import {
 import { useConnectionStore, useBreadcrumbStore } from "@/stores";
 import { AppFiles, AppInterface, AppLogs, AppStats } from "@/components/apps";
 import { toast } from "@/hooks/use-toast";
+import { useOpenPath } from "@/hooks/use-open-path";
 import { AppBreadcrumb } from "./apps-breadcrumb";
 
 interface AppDetailProps {
@@ -58,11 +59,7 @@ export function AppDetail({ appId, onBack }: AppDetailProps) {
     settings: { url: daemonUrl },
   } = useConnectionStore();
   const { setBreadcrumb, clearBreadcrumb } = useBreadcrumbStore();
-
-  const { openPath } =
-    typeof window !== "undefined" && typeof window.__TAURI__ !== "undefined"
-      ? window.__TAURI__.opener
-      : { openPath: (path: string) => window.open(path, "_blank") };
+  const { openPath } = useOpenPath();
 
   const fetchApp = useCallback(async () => {
     setIsLoading(true);

src-frontend/components/diagnostic/ping-status-card.tsx

@@ -131,7 +131,7 @@ export function PingStatusCard({
 
       // Update ping history by adding a new value at the current position
       setPingHistory((prevHistory) => {
-        const newHistory = [...prevHistory];
+        const newHistory = prevHistory.map((item) => ({ ...item }));
 
         // If we haven't filled the array yet, add the new ping at the current position
         if (dataCount < MAX_DATA_POINTS) {

src-frontend/components/marketplace/app-detail.tsx

@@ -13,6 +13,7 @@ import { Toolbar } from "@/components/ui/toolbar";
 import { type MarketplaceApp, getMarketplaceApp } from "@/lib/api/marketplace";
 import { installApp, uninstallApp } from "@/lib/api/apps";
 import { toast } from "@/hooks/use-toast";
+import { useOpenPath } from "@/hooks/use-open-path";
 import { useBreadcrumbStore } from "@/stores";
 import { MarketplaceBreadcrumb } from "./marketplace-breadcrumb";
 
@@ -73,6 +74,7 @@ export function AppDetail({ appId, onBack }: AppDetailProps) {
   const [isInstalled, setIsInstalled] = useState(false);
   const [reviewDialogOpen, setReviewDialogOpen] = useState(false);
   const { setBreadcrumb, clearBreadcrumb } = useBreadcrumbStore();
+  const { openPath } = useOpenPath();
 
   const handleInstall = useCallback(async () => {
     if (!app || !app.repository) {
@@ -356,24 +358,20 @@ export function AppDetail({ appId, onBack }: AppDetailProps) {
                       <dt className="text-muted-foreground">Links</dt>
                       <dd className="flex flex-wrap gap-2">
                         {app.website && (
-                          <a
-                            href={app.website}
-                            target="_blank"
-                            rel="noopener noreferrer"
+                          <button
+                            onClick={() => openPath(app.website!)}
                             className="flex items-center text-blue-600 hover:underline"
                           >
                             Website <ExternalLink className="ml-1 h-3 w-3" />
-                          </a>
+                          </button>
                         )}
                         {app.repository && (
-                          <a
-                            href={app.repository}
-                            target="_blank"
-                            rel="noopener noreferrer"
+                          <button
+                            onClick={() => openPath(app.repository!)}
                             className="flex items-center text-blue-600 hover:underline"
                           >
                             Repository <ExternalLink className="ml-1 h-3 w-3" />
-                          </a>
+                          </button>
                         )}
                       </dd>
                     </>

src-frontend/components/marketplace/install-confirmation-dialog.tsx

@@ -21,6 +21,7 @@ import { Button } from "@/components/ui/button";
 import { MarketplaceApp } from "@/lib/api/marketplace";
 import { installApp } from "@/lib/api/apps";
 import { toast } from "@/hooks/use-toast";
+import { useOpenPath } from "@/hooks/use-open-path";
 
 interface InstallConfirmationDialogProps {
   isOpen: boolean;
@@ -38,6 +39,7 @@ export function InstallConfirmationDialog({
   onCancel,
 }: InstallConfirmationDialogProps) {
   const [isProcessing, setIsProcessing] = useState(false);
+  const { openPath } = useOpenPath();
   const handleInstall = async () => {
     if (!app.repository) {
       toast({
@@ -102,23 +104,27 @@ export function InstallConfirmationDialog({
           </div>
           <AlertDialogDescription className="space-y-3 text-left md:ml-8">
             The app{" "}
-            <a
-              href={app.repository}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="m-0 inline-flex text-blue-600 hover:underline"
-            >
-              {app.name} <ExternalLink className="h-2 w-2 align-super" />
-            </a>
+            {app.repository ? (
+              <button
+                onClick={() => openPath(app.repository!)}
+                className="m-0 inline-flex text-blue-600 hover:underline"
+              >
+                {app.name} <ExternalLink className="h-2 w-2 align-super" />
+              </button>
+            ) : (
+              <span className="font-medium">{app.name}</span>
+            )}
             is added by{" "}
-            <a
-              href={app.website}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="m-0 inline-flex text-blue-600 hover:underline"
-            >
-              {app.author} <ExternalLink className="h-2 w-2 align-super" />
-            </a>
+            {app.website ? (
+              <button
+                onClick={() => openPath(app.website!)}
+                className="m-0 inline-flex text-blue-600 hover:underline"
+              >
+                {app.author} <ExternalLink className="h-2 w-2 align-super" />
+              </button>
+            ) : (
+              <span className="font-medium">{app.author}</span>
+            )}
             .
             <span className="my-3 flex items-center gap-2 text-sm">
               <span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-slate-200 p-1 dark:bg-slate-700">
@@ -136,14 +142,14 @@ export function InstallConfirmationDialog({
         </AlertDialogHeader>
         <AlertDialogFooter>
           <div className="flex w-full flex-col-reverse gap-2 sm:flex-row sm:justify-between md:ml-8">
-            <Button
-              variant="outline"
-              onClick={() => {
-                window.open(app.repository, "_blank");
-              }}
-            >
-              View Source
-            </Button>
+            {app.repository && (
+              <Button
+                variant="outline"
+                onClick={() => openPath(app.repository!)}
+              >
+                View Source
+              </Button>
+            )}
             <div className="flex flex-col-reverse gap-2 sm:flex-row">
               <AlertDialogCancel onClick={onCancel}>Cancel</AlertDialogCancel>
               <Button

src-frontend/components/profile/profile.tsx

@@ -36,6 +36,7 @@ import { Separator } from "@/components/ui/separator";
 import { Textarea } from "@/components/ui/textarea";
 import { ActivityHeatmap } from "./activity-heatmap";
 import { SocialConnectionButton } from "./social-connection-button";
+import { useOpenPath } from "@/hooks/use-open-path";
 
 const profileFormSchema = z.object({
   displayName: z.string().min(2, {
@@ -92,6 +93,7 @@ const defaultValues: Partial<ProfileFormValues> = {
 
 export default function Profile() {
   const [isEditing, setIsEditing] = useState(false);
+  const { openPath } = useOpenPath();
 
   const form = useForm<ProfileFormValues>({
     resolver: zodResolver(profileFormSchema),
@@ -392,50 +394,44 @@ export default function Profile() {
                   <div className="flex items-center gap-2">
                     <ExternalLink className="text-muted-foreground h-4 w-4" />
                     <span className="text-sm font-medium">Website:</span>
-                    <a
-                      href={defaultValues.website}
-                      target="_blank"
-                      rel="noopener noreferrer"
+                    <button
+                      onClick={() => openPath(defaultValues.website!)}
                       className="text-primary text-sm hover:underline"
                     >
                       {defaultValues.website.replace(/^https?:\/\//, "")}
-                    </a>
+                    </button>
                   </div>
                 )}
 
                 {defaultValues.xLink && (
                   <div className="flex items-center gap-2">
                     <Twitter className="text-muted-foreground h-4 w-4" />
                     <span className="text-sm font-medium">X:</span>
-                    <a
-                      href={defaultValues.xLink}
-                      target="_blank"
-                      rel="noopener noreferrer"
+                    <button
+                      onClick={() => openPath(defaultValues.xLink!)}
                       className="text-primary text-sm hover:underline"
                     >
                       {defaultValues.xLink.replace(
                         /^https?:\/\/(www\.)?x\.com\//,
                         "@",
                       )}
-                    </a>
+                    </button>
                   </div>
                 )}
 
                 {defaultValues.linkedinLink && (
                   <div className="flex items-center gap-2">
                     <Linkedin className="text-muted-foreground h-4 w-4" />
                     <span className="text-sm font-medium">LinkedIn:</span>
-                    <a
-                      href={defaultValues.linkedinLink}
-                      target="_blank"
-                      rel="noopener noreferrer"
+                    <button
+                      onClick={() => openPath(defaultValues.linkedinLink!)}
                       className="text-primary text-sm hover:underline"
                     >
                       {defaultValues.linkedinLink.replace(
                         /^https?:\/\/(www\.)?linkedin\.com\/in\//,
                         "",
                       )}
-                    </a>
+                    </button>
                   </div>
                 )}
               </div>

src-frontend/components/workspace/file-explorer.tsx

@@ -12,6 +12,7 @@ import type { FileSystemItem, ClipboardItem } from "@/lib/types";
 import { FileIcon } from "@/components/workspace/file-icon";
 import { SyncStatus } from "@/components/workspace/sync-status";
 import { PermissionsDialog } from "@/components/workspace/permissions-dialog";
+import { useOpenPath } from "@/hooks/use-open-path";
 import {
   ContextMenu,
   ContextMenuContent,
@@ -390,6 +391,7 @@ const FileExplorerItem = React.memo(function FileExplorerItem({
   isMobile,
 }: FileExplorerItemProps) {
   const { addFavorite } = useSidebarStore();
+  const { openPath } = useOpenPath();
   const [platform, setPlatform] = useState<string>("macos");
   const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
 
@@ -407,7 +409,6 @@ const FileExplorerItem = React.memo(function FileExplorerItem({
 
     try {
       if (typeof window !== "undefined" && window.__TAURI__) {
-        const { openPath } = window.__TAURI__.opener;
         // Use platform-specific path separator
         const sep = platform === "windows" ? "\\" : "/";
 

src-frontend/hooks/use-open-path.tsx

@@ -0,0 +1,15 @@
+import { useMemo } from "react";
+
+export function useOpenPath() {
+  const openPath = useMemo(() => {
+    if (
+      typeof window !== "undefined" &&
+      typeof window.__TAURI__ !== "undefined"
+    ) {
+      return window.__TAURI__.opener.openPath;
+    }
+    return (path: string) => window.open(path, "_blank");
+  }, []);
+
+  return { openPath };
+}