From 6b615e4cf1941451834b531a126a0640231e0bd8 Mon Sep 17 00:00:00 2001
From: Luca Stocchi <49404737+lstocchi@users.noreply.github.com>
Date: Thu, 23 May 2024 17:52:16 +0200
Subject: [PATCH] fix: remove tinro from Tab and ui (#7288)

* fix: remove tinro from Tab and ui

Signed-off-by: lstocchi <lstocchi@redhat.com>

* fix: use selected prop in tab component

Signed-off-by: lstocchi <lstocchi@redhat.com>

* fix: fix wrong tab url

Signed-off-by: lstocchi <lstocchi@redhat.com>

---------

Signed-off-by: lstocchi <lstocchi@redhat.com>
---
 .../src/lib/compose/ComposeDetails.svelte     | 16 ++++++++++----
 .../src/lib/container/ContainerDetails.svelte | 22 ++++++++++++++-----
 .../lib/deployments/DeploymentDetails.svelte  | 14 +++++++++---
 .../src/lib/image/ImageDetails.svelte         | 19 ++++++++++++----
 .../renderer/src/lib/image/RunImage.svelte    | 21 ++++++++++++++----
 .../ingresses-routes/IngressDetails.svelte    | 14 +++++++++---
 .../lib/ingresses-routes/RouteDetails.svelte  | 14 +++++++++---
 .../renderer/src/lib/pod/PodDetails.svelte    | 20 ++++++++++++-----
 ...erencesContainerConnectionRendering.svelte |  9 ++++++--
 ...rencesKubernetesConnectionRendering.svelte |  9 ++++++--
 .../src/lib/service/ServiceDetails.svelte     | 14 +++++++++---
 .../TroubleshootingPage.svelte                | 16 ++++++++++----
 .../renderer/src/lib/ui/FormPageSpec.svelte   |  8 ++++---
 packages/renderer/src/lib/ui/Util.ts          |  9 ++++++++
 .../src/lib/volume/VolumeDetails.svelte       | 12 ++++++++--
 packages/ui/package.json                      |  3 +--
 packages/ui/src/lib/tab/Tab.spec.ts           | 17 ++++++++++----
 packages/ui/src/lib/tab/Tab.svelte            | 19 +++++++---------
 18 files changed, 191 insertions(+), 65 deletions(-)

diff --git a/packages/renderer/src/lib/compose/ComposeDetails.svelte b/packages/renderer/src/lib/compose/ComposeDetails.svelte
index 216cd0b324158..c35f5fee3055f 100644
--- a/packages/renderer/src/lib/compose/ComposeDetails.svelte
+++ b/packages/renderer/src/lib/compose/ComposeDetails.svelte
@@ -2,6 +2,7 @@
 import { Tab } from '@podman-desktop/ui-svelte';
 import { onDestroy, onMount } from 'svelte';
 import type { Unsubscriber } from 'svelte/store';
+import { router } from 'tinro';
 
 import { containersInfos } from '/@/stores/containers';
 
@@ -11,6 +12,7 @@ import type { ContainerInfoUI } from '../container/ContainerInfoUI';
 import ComposeIcon from '../images/PodIcon.svelte';
 import StatusIcon from '../images/StatusIcon.svelte';
 import DetailsPage from '../ui/DetailsPage.svelte';
+import { getTabUrl, isTabSelected } from '../ui/Util';
 import ComposeActions from './ComposeActions.svelte';
 import ComposeDetailsInspect from './ComposeDetailsInspect.svelte';
 import ComposeDetailsKube from './ComposeDetailsKube.svelte';
@@ -96,10 +98,16 @@ onDestroy(() => {
       <ComposeActions compose="{compose}" detailed="{true}" on:update="{() => (compose = compose)}" />
     </svelte:fragment>
     <svelte:fragment slot="tabs">
-      <Tab title="Summary" url="summary" />
-      <Tab title="Logs" url="logs" />
-      <Tab title="Inspect" url="inspect" />
-      <Tab title="Kube" url="kube" />
+      <Tab
+        title="Summary"
+        selected="{isTabSelected($router.path, 'summary')}"
+        url="{getTabUrl($router.path, 'summary')}" />
+      <Tab title="Logs" selected="{isTabSelected($router.path, 'logs')}" url="{getTabUrl($router.path, 'logs')}" />
+      <Tab
+        title="Inspect"
+        selected="{isTabSelected($router.path, 'inspect')}"
+        url="{getTabUrl($router.path, 'inspect')}" />
+      <Tab title="Kube" selected="{isTabSelected($router.path, 'kube')}" url="{getTabUrl($router.path, 'kube')}" />
     </svelte:fragment>
     <svelte:fragment slot="content">
       <Route path="/summary" breadcrumb="Summary" navigationHint="tab">
diff --git a/packages/renderer/src/lib/container/ContainerDetails.svelte b/packages/renderer/src/lib/container/ContainerDetails.svelte
index 4689a0a4e521a..deb0cd7be68e2 100644
--- a/packages/renderer/src/lib/container/ContainerDetails.svelte
+++ b/packages/renderer/src/lib/container/ContainerDetails.svelte
@@ -11,6 +11,7 @@ import { containersInfos } from '../../stores/containers';
 import StatusIcon from '../images/StatusIcon.svelte';
 import DetailsPage from '../ui/DetailsPage.svelte';
 import StateChange from '../ui/StateChange.svelte';
+import { getTabUrl, isTabSelected } from '../ui/Util';
 import { ContainerUtils } from './container-utils';
 import ContainerActions from './ContainerActions.svelte';
 import ContainerDetailsInspect from './ContainerDetailsInspect.svelte';
@@ -90,16 +91,25 @@ onMount(() => {
       <ContainerStatistics container="{container}" />
     </div>
     <svelte:fragment slot="tabs">
-      <Tab title="Summary" url="summary" />
-      <Tab title="Logs" url="logs" />
-      <Tab title="Inspect" url="inspect" />
+      <Tab
+        title="Summary"
+        selected="{isTabSelected($router.path, 'summary')}"
+        url="{getTabUrl($router.path, 'summary')}" />
+      <Tab title="Logs" selected="{isTabSelected($router.path, 'logs')}" url="{getTabUrl($router.path, 'logs')}" />
+      <Tab
+        title="Inspect"
+        selected="{isTabSelected($router.path, 'inspect')}"
+        url="{getTabUrl($router.path, 'inspect')}" />
 
       {#if container.engineType === 'podman' && container.groupInfo.type === ContainerGroupInfoTypeUI.STANDALONE}
-        <Tab title="Kube" url="kube" />
+        <Tab title="Kube" selected="{isTabSelected($router.path, 'kube')}" url="{getTabUrl($router.path, 'kube')}" />
       {/if}
-      <Tab title="Terminal" url="terminal" />
+      <Tab
+        title="Terminal"
+        selected="{isTabSelected($router.path, 'terminal')}"
+        url="{getTabUrl($router.path, 'terminal')}" />
       {#if displayTty}
-        <Tab title="Tty" url="tty" />
+        <Tab title="Tty" selected="{isTabSelected($router.path, 'tty')}" url="{getTabUrl($router.path, 'tty')}" />
       {/if}
     </svelte:fragment>
     <svelte:fragment slot="content">
diff --git a/packages/renderer/src/lib/deployments/DeploymentDetails.svelte b/packages/renderer/src/lib/deployments/DeploymentDetails.svelte
index 65735ddb3a737..518c6efae28ab 100644
--- a/packages/renderer/src/lib/deployments/DeploymentDetails.svelte
+++ b/packages/renderer/src/lib/deployments/DeploymentDetails.svelte
@@ -2,6 +2,7 @@
 import type { V1Deployment } from '@kubernetes/client-node';
 import { Tab } from '@podman-desktop/ui-svelte';
 import { onMount } from 'svelte';
+import { router } from 'tinro';
 import { stringify } from 'yaml';
 
 import { kubernetesCurrentContextDeployments } from '/@/stores/kubernetes-contexts-state';
@@ -12,6 +13,7 @@ import DeploymentIcon from '../images/DeploymentIcon.svelte';
 import StatusIcon from '../images/StatusIcon.svelte';
 import KubeEditYAML from '../kube/KubeEditYAML.svelte';
 import DetailsPage from '../ui/DetailsPage.svelte';
+import { getTabUrl, isTabSelected } from '../ui/Util';
 import { DeploymentUtils } from './deployment-utils';
 import DeploymentActions from './DeploymentActions.svelte';
 import DeploymentDetailsSummary from './DeploymentDetailsSummary.svelte';
@@ -63,9 +65,15 @@ async function loadDetails() {
       <DeploymentActions deployment="{deployment}" detailed="{true}" on:update="{() => (deployment = deployment)}" />
     </svelte:fragment>
     <svelte:fragment slot="tabs">
-      <Tab title="Summary" url="summary" />
-      <Tab title="Inspect" url="inspect" />
-      <Tab title="Kube" url="kube" />
+      <Tab
+        title="Summary"
+        selected="{isTabSelected($router.path, 'summary')}"
+        url="{getTabUrl($router.path, 'summary')}" />
+      <Tab
+        title="Inspect"
+        selected="{isTabSelected($router.path, 'inspect')}"
+        url="{getTabUrl($router.path, 'inspect')}" />
+      <Tab title="Kube" selected="{isTabSelected($router.path, 'kube')}" url="{getTabUrl($router.path, 'kube')}" />
     </svelte:fragment>
     <svelte:fragment slot="content">
       <Route path="/summary" breadcrumb="Summary" navigationHint="tab">
diff --git a/packages/renderer/src/lib/image/ImageDetails.svelte b/packages/renderer/src/lib/image/ImageDetails.svelte
index c390798de08c5..1343d548ac91e 100644
--- a/packages/renderer/src/lib/image/ImageDetails.svelte
+++ b/packages/renderer/src/lib/image/ImageDetails.svelte
@@ -3,6 +3,7 @@ import type { ImageInfo } from '@podman-desktop/api';
 import { Tab } from '@podman-desktop/ui-svelte';
 import { onDestroy, onMount } from 'svelte';
 import type { Unsubscriber } from 'svelte/motion';
+import { router } from 'tinro';
 
 import { containersInfos } from '/@/stores/containers';
 import { context } from '/@/stores/context';
@@ -16,6 +17,7 @@ import type { ContextUI } from '../context/context';
 import StatusIcon from '../images/StatusIcon.svelte';
 import Badge from '../ui/Badge.svelte';
 import DetailsPage from '../ui/DetailsPage.svelte';
+import { getTabUrl, isTabSelected } from '../ui/Util';
 import {
   IMAGE_DETAILS_VIEW_BADGES,
   IMAGE_DETAILS_VIEW_ICONS,
@@ -142,11 +144,20 @@ onDestroy(() => {
       groupContributions="{true}"
       on:update="{() => (image = image)}" />
     <svelte:fragment slot="tabs">
-      <Tab title="Summary" url="summary" />
-      <Tab title="History" url="history" />
-      <Tab title="Inspect" url="inspect" />
+      <Tab
+        title="Summary"
+        selected="{isTabSelected($router.path, 'summary')}"
+        url="{getTabUrl($router.path, 'summary')}" />
+      <Tab
+        title="History"
+        selected="{isTabSelected($router.path, 'history')}"
+        url="{getTabUrl($router.path, 'history')}" />
+      <Tab
+        title="Inspect"
+        selected="{isTabSelected($router.path, 'inspect')}"
+        url="{getTabUrl($router.path, 'inspect')}" />
       {#if showCheckTab}
-        <Tab title="Check" url="check" />
+        <Tab title="Check" selected="{isTabSelected($router.path, 'check')}" url="{getTabUrl($router.path, 'check')}" />
       {/if}
     </svelte:fragment>
     <svelte:fragment slot="content">
diff --git a/packages/renderer/src/lib/image/RunImage.svelte b/packages/renderer/src/lib/image/RunImage.svelte
index ad09e2b6829bc..8510ac0f6b482 100644
--- a/packages/renderer/src/lib/image/RunImage.svelte
+++ b/packages/renderer/src/lib/image/RunImage.svelte
@@ -17,6 +17,7 @@ import type { ContainerInfoUI } from '../container/ContainerInfoUI';
 import { splitSpacesHandlingDoubleQuotes } from '../string/string';
 import FormPage from '../ui/FormPage.svelte';
 import NumberInput from '../ui/NumberInput.svelte';
+import { getTabUrl, isTabSelected } from '../ui/Util';
 import type { ImageInfoUI } from './ImageInfoUI';
 
 interface PortInfo {
@@ -629,10 +630,22 @@ async function assertAllPortAreValid(): Promise<void> {
       <div slot="content" class="px-5 pb-5 min-w-full h-fit">
         <div class="bg-charcoal-600 px-6 py-4 space-y-2 lg:px-8 sm:pb-6 xl:pb-8">
           <div class="flex flex-row px-2 border-b border-charcoal-400">
-            <Tab title="Basic" url="basic" />
-            <Tab title="Advanced" url="advanced" />
-            <Tab title="Networking" url="networking" />
-            <Tab title="Security" url="security" />
+            <Tab
+              title="Basic"
+              selected="{isTabSelected($router.path, 'basic')}"
+              url="{getTabUrl($router.path, 'basic')}" />
+            <Tab
+              title="Advanced"
+              selected="{isTabSelected($router.path, 'advanced')}"
+              url="{getTabUrl($router.path, 'advanced')}" />
+            <Tab
+              title="Networking"
+              selected="{isTabSelected($router.path, 'networking')}"
+              url="{getTabUrl($router.path, 'networking')}" />
+            <Tab
+              title="Security"
+              selected="{isTabSelected($router.path, 'security')}"
+              url="{getTabUrl($router.path, 'security')}" />
           </div>
           <div>
             <Route path="/basic" breadcrumb="Basic" navigationHint="tab">
diff --git a/packages/renderer/src/lib/ingresses-routes/IngressDetails.svelte b/packages/renderer/src/lib/ingresses-routes/IngressDetails.svelte
index b710bb98c04cd..9319e3fa7b28e 100644
--- a/packages/renderer/src/lib/ingresses-routes/IngressDetails.svelte
+++ b/packages/renderer/src/lib/ingresses-routes/IngressDetails.svelte
@@ -2,6 +2,7 @@
 import type { V1Ingress } from '@kubernetes/client-node';
 import { Tab } from '@podman-desktop/ui-svelte';
 import { onMount } from 'svelte';
+import { router } from 'tinro';
 import { stringify } from 'yaml';
 
 import { kubernetesCurrentContextIngresses } from '/@/stores/kubernetes-contexts-state';
@@ -13,6 +14,7 @@ import StatusIcon from '../images/StatusIcon.svelte';
 import KubeEditYAML from '../kube/KubeEditYAML.svelte';
 import DetailsPage from '../ui/DetailsPage.svelte';
 import StateChange from '../ui/StateChange.svelte';
+import { getTabUrl, isTabSelected } from '../ui/Util';
 import { IngressRouteUtils } from './ingress-route-utils';
 import IngressRouteActions from './IngressRouteActions.svelte';
 import ServiceDetailsSummary from './IngressRouteDetailsSummary.svelte';
@@ -65,9 +67,15 @@ async function loadIngressDetails() {
       <StateChange state="{ingressUI.status}" />
     </div>
     <svelte:fragment slot="tabs">
-      <Tab title="Summary" url="summary" />
-      <Tab title="Inspect" url="inspect" />
-      <Tab title="Kube" url="kube" />
+      <Tab
+        title="Summary"
+        selected="{isTabSelected($router.path, 'summary')}"
+        url="{getTabUrl($router.path, 'summary')}" />
+      <Tab
+        title="Inspect"
+        selected="{isTabSelected($router.path, 'inspect')}"
+        url="{getTabUrl($router.path, 'inspect')}" />
+      <Tab title="Kube" selected="{isTabSelected($router.path, 'kube')}" url="{getTabUrl($router.path, 'kube')}" />
     </svelte:fragment>
     <svelte:fragment slot="content">
       <Route path="/summary" breadcrumb="Summary" navigationHint="tab">
diff --git a/packages/renderer/src/lib/ingresses-routes/RouteDetails.svelte b/packages/renderer/src/lib/ingresses-routes/RouteDetails.svelte
index f3a3e00b5070c..76d0778126c1f 100644
--- a/packages/renderer/src/lib/ingresses-routes/RouteDetails.svelte
+++ b/packages/renderer/src/lib/ingresses-routes/RouteDetails.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { Tab } from '@podman-desktop/ui-svelte';
 import { onMount } from 'svelte';
+import { router } from 'tinro';
 import { stringify } from 'yaml';
 
 import { kubernetesCurrentContextRoutes } from '/@/stores/kubernetes-contexts-state';
@@ -13,6 +14,7 @@ import StatusIcon from '../images/StatusIcon.svelte';
 import KubeEditYAML from '../kube/KubeEditYAML.svelte';
 import DetailsPage from '../ui/DetailsPage.svelte';
 import StateChange from '../ui/StateChange.svelte';
+import { getTabUrl, isTabSelected } from '../ui/Util';
 import { IngressRouteUtils } from './ingress-route-utils';
 import IngressRouteActions from './IngressRouteActions.svelte';
 import ServiceDetailsSummary from './IngressRouteDetailsSummary.svelte';
@@ -65,9 +67,15 @@ async function loadRouteDetails() {
       <StateChange state="{routeUI.status}" />
     </div>
     <svelte:fragment slot="tabs">
-      <Tab title="Summary" url="summary" />
-      <Tab title="Inspect" url="inspect" />
-      <Tab title="Kube" url="kube" />
+      <Tab
+        title="Summary"
+        selected="{isTabSelected($router.path, 'summary')}"
+        url="{getTabUrl($router.path, 'summary')}" />
+      <Tab
+        title="Inspect"
+        selected="{isTabSelected($router.path, 'inspect')}"
+        url="{getTabUrl($router.path, 'inspect')}" />
+      <Tab title="Kube" selected="{isTabSelected($router.path, 'kube')}" url="{getTabUrl($router.path, 'kube')}" />
     </svelte:fragment>
     <svelte:fragment slot="content">
       <Route path="/summary" breadcrumb="Summary" navigationHint="tab">
diff --git a/packages/renderer/src/lib/pod/PodDetails.svelte b/packages/renderer/src/lib/pod/PodDetails.svelte
index 36fb7357741dd..54627d52ef1da 100644
--- a/packages/renderer/src/lib/pod/PodDetails.svelte
+++ b/packages/renderer/src/lib/pod/PodDetails.svelte
@@ -9,6 +9,7 @@ import PodIcon from '../images/PodIcon.svelte';
 import StatusIcon from '../images/StatusIcon.svelte';
 import DetailsPage from '../ui/DetailsPage.svelte';
 import StateChange from '../ui/StateChange.svelte';
+import { getTabUrl, isTabSelected } from '../ui/Util';
 import KubernetesTerminalBrowser from './KubernetesTerminalBrowser.svelte';
 import { PodUtils } from './pod-utils';
 import PodActions from './PodActions.svelte';
@@ -75,12 +76,21 @@ onMount(() => {
       <StateChange state="{pod.status}" />
     </div>
     <svelte:fragment slot="tabs">
-      <Tab title="Summary" url="summary" />
-      <Tab title="Logs" url="logs" />
-      <Tab title="Inspect" url="inspect" />
-      <Tab title="Kube" url="kube" />
+      <Tab
+        title="Summary"
+        selected="{isTabSelected($router.path, 'summary')}"
+        url="{getTabUrl($router.path, 'summary')}" />
+      <Tab title="Logs" selected="{isTabSelected($router.path, 'logs')}" url="{getTabUrl($router.path, 'logs')}" />
+      <Tab
+        title="Inspect"
+        selected="{isTabSelected($router.path, 'inspect')}"
+        url="{getTabUrl($router.path, 'inspect')}" />
+      <Tab title="Kube" selected="{isTabSelected($router.path, 'kube')}" url="{getTabUrl($router.path, 'kube')}" />
       {#if pod.kind === 'kubernetes'}
-        <Tab title="Terminal" url="k8s-terminal" />
+        <Tab
+          title="Terminal"
+          selected="{isTabSelected($router.path, 'k8s-terminal')}"
+          url="{getTabUrl($router.path, 'k8s-terminal')}" />
       {/if}
     </svelte:fragment>
     <svelte:fragment slot="content">
diff --git a/packages/renderer/src/lib/preferences/PreferencesContainerConnectionRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesContainerConnectionRendering.svelte
index 439bff19b26c8..9b62390a1b7d9 100644
--- a/packages/renderer/src/lib/preferences/PreferencesContainerConnectionRendering.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesContainerConnectionRendering.svelte
@@ -3,6 +3,7 @@ import { Tab } from '@podman-desktop/ui-svelte';
 import { Buffer } from 'buffer';
 import { onDestroy, onMount } from 'svelte';
 import type { Unsubscriber } from 'svelte/store';
+import { router } from 'tinro';
 
 import type {
   ProviderContainerConnectionInfo,
@@ -17,6 +18,7 @@ import IconImage from '../appearance/IconImage.svelte';
 import ConnectionErrorInfoButton from '../ui/ConnectionErrorInfoButton.svelte';
 import ConnectionStatus from '../ui/ConnectionStatus.svelte';
 import DetailsPage from '../ui/DetailsPage.svelte';
+import { getTabUrl, isTabSelected } from '../ui/Util';
 import { eventCollect } from './preferences-connection-rendering-task';
 import PreferencesConnectionActions from './PreferencesConnectionActions.svelte';
 import PreferencesConnectionDetailsLogs from './PreferencesConnectionDetailsLogs.svelte';
@@ -156,9 +158,12 @@ function setNoLogs() {
       </svelte:fragment>
       <IconImage slot="icon" image="{providerInfo?.images?.icon}" alt="{providerInfo?.name}" class="max-h-10" />
       <svelte:fragment slot="tabs">
-        <Tab title="Summary" url="summary" />
+        <Tab
+          title="Summary"
+          selected="{isTabSelected($router.path, 'summary')}"
+          url="{getTabUrl($router.path, 'summary')}" />
         {#if connectionInfo.lifecycleMethods && connectionInfo.lifecycleMethods.length > 0}
-          <Tab title="Logs" url="logs" />
+          <Tab title="Logs" selected="{isTabSelected($router.path, 'logs')}" url="{getTabUrl($router.path, 'logs')}" />
         {/if}
       </svelte:fragment>
       <svelte:fragment slot="content">
diff --git a/packages/renderer/src/lib/preferences/PreferencesKubernetesConnectionRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesKubernetesConnectionRendering.svelte
index a9df5fc23a358..ea7b32a6ece44 100644
--- a/packages/renderer/src/lib/preferences/PreferencesKubernetesConnectionRendering.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesKubernetesConnectionRendering.svelte
@@ -3,6 +3,7 @@ import { Tab } from '@podman-desktop/ui-svelte';
 import { Buffer } from 'buffer';
 import { onDestroy, onMount } from 'svelte';
 import type { Unsubscriber } from 'svelte/store';
+import { router } from 'tinro';
 
 import type {
   ProviderContainerConnectionInfo,
@@ -17,6 +18,7 @@ import IconImage from '../appearance/IconImage.svelte';
 import ConnectionErrorInfoButton from '../ui/ConnectionErrorInfoButton.svelte';
 import ConnectionStatus from '../ui/ConnectionStatus.svelte';
 import DetailsPage from '../ui/DetailsPage.svelte';
+import { getTabUrl, isTabSelected } from '../ui/Util';
 import { eventCollect } from './preferences-connection-rendering-task';
 import PreferencesConnectionActions from './PreferencesConnectionActions.svelte';
 import PreferencesConnectionDetailsLogs from './PreferencesConnectionDetailsLogs.svelte';
@@ -154,9 +156,12 @@ function setNoLogs() {
         <IconImage image="{providerInfo?.images?.icon}" alt="{providerInfo?.name}" class="max-h-10" />
       </svelte:fragment>
       <svelte:fragment slot="tabs">
-        <Tab title="Summary" url="summary" />
+        <Tab
+          title="Summary"
+          selected="{isTabSelected($router.path, 'summary')}"
+          url="{getTabUrl($router.path, 'summary')}" />
         {#if connectionInfo.lifecycleMethods && connectionInfo.lifecycleMethods.length > 0}
-          <Tab title="Logs" url="logs" />
+          <Tab title="Logs" selected="{isTabSelected($router.path, 'logs')}" url="{getTabUrl($router.path, 'logs')}" />
         {/if}
       </svelte:fragment>
       <svelte:fragment slot="content">
diff --git a/packages/renderer/src/lib/service/ServiceDetails.svelte b/packages/renderer/src/lib/service/ServiceDetails.svelte
index 495c879e743f0..cb10991d273e3 100644
--- a/packages/renderer/src/lib/service/ServiceDetails.svelte
+++ b/packages/renderer/src/lib/service/ServiceDetails.svelte
@@ -2,6 +2,7 @@
 import type { V1Service } from '@kubernetes/client-node';
 import { Tab } from '@podman-desktop/ui-svelte';
 import { onMount } from 'svelte';
+import { router } from 'tinro';
 import { stringify } from 'yaml';
 
 import { kubernetesCurrentContextServices } from '/@/stores/kubernetes-contexts-state';
@@ -13,6 +14,7 @@ import StatusIcon from '../images/StatusIcon.svelte';
 import KubeEditYAML from '../kube/KubeEditYAML.svelte';
 import DetailsPage from '../ui/DetailsPage.svelte';
 import StateChange from '../ui/StateChange.svelte';
+import { getTabUrl, isTabSelected } from '../ui/Util';
 import { ServiceUtils } from './service-utils';
 import ServiceActions from './ServiceActions.svelte';
 import ServiceDetailsSummary from './ServiceDetailsSummary.svelte';
@@ -65,9 +67,15 @@ async function loadDetails() {
       <StateChange state="{service.status}" />
     </div>
     <svelte:fragment slot="tabs">
-      <Tab title="Summary" url="summary" />
-      <Tab title="Inspect" url="inspect" />
-      <Tab title="Kube" url="kube" />
+      <Tab
+        title="Summary"
+        selected="{isTabSelected($router.path, 'summary')}"
+        url="{getTabUrl($router.path, 'summary')}" />
+      <Tab
+        title="Inspect"
+        selected="{isTabSelected($router.path, 'inspect')}"
+        url="{getTabUrl($router.path, 'inspect')}" />
+      <Tab title="Kube" selected="{isTabSelected($router.path, 'kube')}" url="{getTabUrl($router.path, 'kube')}" />
     </svelte:fragment>
     <svelte:fragment slot="content">
       <Route path="/summary" breadcrumb="Summary" navigationHint="tab">
diff --git a/packages/renderer/src/lib/troubleshooting/TroubleshootingPage.svelte b/packages/renderer/src/lib/troubleshooting/TroubleshootingPage.svelte
index d0246715efd0b..4c65a91435c59 100644
--- a/packages/renderer/src/lib/troubleshooting/TroubleshootingPage.svelte
+++ b/packages/renderer/src/lib/troubleshooting/TroubleshootingPage.svelte
@@ -1,9 +1,11 @@
 <script>
 import { Tab } from '@podman-desktop/ui-svelte';
+import { router } from 'tinro';
 
 import Route from '/@/Route.svelte';
 
 import FormPage from '../ui/FormPage.svelte';
+import { getTabUrl, isTabSelected } from '../ui/Util';
 import TroubleshootingDevToolsConsoleLogs from './TroubleshootingDevToolsConsoleLogs.svelte';
 import TroubleshootingGatherLogs from './TroubleshootingGatherLogs.svelte';
 import TroubleshootingPageProviders from './TroubleshootingPageProviders.svelte';
@@ -14,10 +16,16 @@ import TroubleshootingPageStores from './TroubleshootingPageStores.svelte';
   <i slot="icon" class="fas fa-lightbulb fa-2x" aria-hidden="true"></i>
 
   <svelte:fragment slot="tabs">
-    <Tab title="Repair & Connections" url="repair-connections" />
-    <Tab title="Logs" url="logs" />
-    <Tab title="Gather Logs" url="gatherlogs" />
-    <Tab title="Stores" url="stores" />
+    <Tab
+      title="Repair & Connections"
+      selected="{isTabSelected($router.path, 'repair-connections')}"
+      url="{getTabUrl($router.path, 'repair-connections')}" />
+    <Tab title="Logs" selected="{isTabSelected($router.path, 'logs')}" url="{getTabUrl($router.path, 'logs')}" />
+    <Tab
+      title="Gather Logs"
+      selected="{isTabSelected($router.path, 'gatherlogs')}"
+      url="{getTabUrl($router.path, 'gatherlogs')}" />
+    <Tab title="Stores" selected="{isTabSelected($router.path, 'stores')}" url="{getTabUrl($router.path, 'stores')}" />
   </svelte:fragment>
   <svelte:fragment slot="content">
     <Route path="/repair-connections" breadcrumb="Repair & Connections" navigationHint="tab">
diff --git a/packages/renderer/src/lib/ui/FormPageSpec.svelte b/packages/renderer/src/lib/ui/FormPageSpec.svelte
index 3482ac5cce918..3a5e6a4768365 100644
--- a/packages/renderer/src/lib/ui/FormPageSpec.svelte
+++ b/packages/renderer/src/lib/ui/FormPageSpec.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
 import { Tab } from '@podman-desktop/ui-svelte';
+import { router } from 'tinro';
 
 import FormPage from './FormPage.svelte';
+import { getTabUrl, isTabSelected } from './Util';
 </script>
 
 <FormPage title="Test component" showBreadcrumb="{false}">
@@ -10,9 +12,9 @@ import FormPage from './FormPage.svelte';
   <i slot="actions" class="fas fa-lightbulb fa-2x" aria-label="actions"></i>
 
   <svelte:fragment slot="tabs">
-    <Tab title="Foo" url="foo" />
-    <Tab title="Bar" url="bar" />
-    <Tab title="Baz" url="baz" />
+    <Tab title="Foo" selected="{isTabSelected($router.path, 'foo')}" url="{getTabUrl($router.path, 'foo')}" />
+    <Tab title="Bar" selected="{isTabSelected($router.path, 'bar')}" url="{getTabUrl($router.path, 'bar')}" />
+    <Tab title="Baz" selected="{isTabSelected($router.path, 'baz')}" url="{getTabUrl($router.path, 'baz')}" />
   </svelte:fragment>
 
   <div slot="content" class="flex flex-col">
diff --git a/packages/renderer/src/lib/ui/Util.ts b/packages/renderer/src/lib/ui/Util.ts
index fddac50be6d00..9bbe98a394a69 100644
--- a/packages/renderer/src/lib/ui/Util.ts
+++ b/packages/renderer/src/lib/ui/Util.ts
@@ -19,3 +19,12 @@
 export function capitalize(text: string): string {
   return text.charAt(0).toUpperCase() + text.slice(1);
 }
+
+export function getTabUrl(routerPath: string, tabUrl: string): string {
+  const baseURL = routerPath.substring(0, routerPath.lastIndexOf('/'));
+  return `${baseURL}/${tabUrl}`;
+}
+
+export function isTabSelected(routerPath: string, tabUrl: string): boolean {
+  return routerPath === getTabUrl(routerPath, tabUrl);
+}
diff --git a/packages/renderer/src/lib/volume/VolumeDetails.svelte b/packages/renderer/src/lib/volume/VolumeDetails.svelte
index 65322950a9d7f..2a1009015f27c 100644
--- a/packages/renderer/src/lib/volume/VolumeDetails.svelte
+++ b/packages/renderer/src/lib/volume/VolumeDetails.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
 import { Tab } from '@podman-desktop/ui-svelte';
 import { onMount } from 'svelte';
+import { router } from 'tinro';
 
 import Route from '../../Route.svelte';
 import { volumeListInfos } from '../../stores/volumes';
 import StatusIcon from '../images/StatusIcon.svelte';
 import VolumeIcon from '../images/VolumeIcon.svelte';
 import DetailsPage from '../ui/DetailsPage.svelte';
+import { getTabUrl, isTabSelected } from '../ui/Util';
 import VolumeDetailsSummary from '././VolumeDetailsSummary.svelte';
 import { VolumeUtils } from './volume-utils';
 import VolumeActions from './VolumeActions.svelte';
@@ -44,8 +46,14 @@ onMount(() => {
     <StatusIcon slot="icon" icon="{VolumeIcon}" size="{24}" status="{volume.status}" />
     <VolumeActions slot="actions" volume="{volume}" detailed="{true}" on:update="{() => (volume = volume)}" />
     <svelte:fragment slot="tabs">
-      <Tab title="Summary" url="summary" />
-      <Tab title="Inspect" url="inspect" />
+      <Tab
+        title="Summary"
+        selected="{isTabSelected($router.path, 'summary')}"
+        url="{getTabUrl($router.path, 'summary')}" />
+      <Tab
+        title="Inspect"
+        selected="{isTabSelected($router.path, 'inspect')}"
+        url="{getTabUrl($router.path, 'inspect')}" />
     </svelte:fragment>
     <svelte:fragment slot="content">
       <Route path="/summary" breadcrumb="Summary" navigationHint="tab">
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 366f910762855..c6d7ba06f2f9e 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -96,8 +96,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "moment": "^2.30.1",
     "humanize-duration": "^3.32.0",
-    "svelte-fa": "^4.0.2",
-    "tinro": "^0.6.12"
+    "svelte-fa": "^4.0.2"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.3.1",
diff --git a/packages/ui/src/lib/tab/Tab.spec.ts b/packages/ui/src/lib/tab/Tab.spec.ts
index d722892bbe297..a8c50616eed39 100644
--- a/packages/ui/src/lib/tab/Tab.spec.ts
+++ b/packages/ui/src/lib/tab/Tab.spec.ts
@@ -19,17 +19,26 @@
 import '@testing-library/jest-dom/vitest';
 
 import { render, screen } from '@testing-library/svelte';
-import { router } from 'tinro';
 import { expect, test } from 'vitest';
 
 import Tab from './Tab.svelte';
 
-test('check link element is created by using url and title', async () => {
-  router.goto('/');
-  render(Tab, { url: 'url', title: 'title' });
+test('check link element is created by using url and title and correct class when selected', async () => {
+  render(Tab, { selected: true, url: '/url', title: 'title' });
 
   const item = screen.getByText('title');
   expect(item).toBeDefined();
   expect((item as HTMLAnchorElement).href.endsWith('/url')).toBeTruthy();
   expect(item.textContent).equals('title');
+  expect(item.parentElement).not.toHaveClass('border-transparent');
+});
+
+test('check link element is created by using url and title and correct class when not selected', async () => {
+  render(Tab, { selected: false, url: '/url', title: 'title' });
+
+  const item = screen.getByText('title');
+  expect(item).toBeDefined();
+  expect((item as HTMLAnchorElement).href.endsWith('/url')).toBeTruthy();
+  expect(item.textContent).equals('title');
+  expect(item.parentElement).toHaveClass('border-transparent');
 });
diff --git a/packages/ui/src/lib/tab/Tab.svelte b/packages/ui/src/lib/tab/Tab.svelte
index 8c06386e19032..3ec07a12421d5 100644
--- a/packages/ui/src/lib/tab/Tab.svelte
+++ b/packages/ui/src/lib/tab/Tab.svelte
@@ -1,23 +1,20 @@
 <script lang="ts">
-import { router } from 'tinro';
-
+export let selected: boolean;
 export let url: string;
 export let title: string;
-
-let baseURL = $router.path.substring(0, $router.path.lastIndexOf('/'));
 </script>
 
 <div
   class="pb-1 border-b-[3px] whitespace-nowrap hover:cursor-pointer"
-  class:border-[var(--pd-tab-highlight)]="{$router.path === baseURL + '/' + url}"
-  class:border-transparent="{$router.path !== baseURL + '/' + url}"
-  class:hover:border-[var(--pd-tab-hover)]="{$router.path !== baseURL + '/' + url}">
+  class:border-[var(--pd-tab-highlight)]="{selected}"
+  class:border-transparent="{!selected}"
+  class:hover:border-[var(--pd-tab-hover)]="{!selected}">
   <a
-    href="{baseURL}/{url}"
+    href="{url}"
     class="px-4 py-2 text-[var(--pd-tab-text)] no-underline"
-    class:text-[var(--pd-tab-text-highlight)]="{$router.path === baseURL + '/' + url}"
-    aria-controls="open-tabs-list-{url}-panel"
-    id="open-tabs-list-{url}-link">
+    class:text-[var(--pd-tab-text-highlight)]="{selected}"
+    aria-controls="open-tabs-list-{title.toLowerCase()}-panel"
+    id="open-tabs-list-{title.toLowerCase()}-link">
     {title}
   </a>
 </div>