From b3d9cf9e7ae5ff529ba5220e7e299f387a8c6eaa Mon Sep 17 00:00:00 2001
From: axel7083 <42176370+axel7083@users.noreply.github.com>
Date: Thu, 6 Jun 2024 15:51:08 +0200
Subject: [PATCH] chore: adopt tab component

Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com>
---
 packages/frontend/src/lib/Tab.svelte      | 22 ----------------------
 packages/frontend/src/pages/Model.svelte  |  1 -
 packages/frontend/src/pages/Models.svelte | 10 +++++-----
 packages/frontend/src/pages/Recipe.svelte |  7 ++++---
 4 files changed, 9 insertions(+), 31 deletions(-)
 delete mode 100644 packages/frontend/src/lib/Tab.svelte

diff --git a/packages/frontend/src/lib/Tab.svelte b/packages/frontend/src/lib/Tab.svelte
deleted file mode 100644
index bd795d1f5..000000000
--- a/packages/frontend/src/lib/Tab.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script lang="ts">
-import { router } from 'tinro';
-
-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] border-charcoal-700 whitespace-nowrap hover:cursor-pointer"
-  class:border-purple-500="{$router.path === baseURL + '/' + url}"
-  class:hover:border-charcoal-100="{$router.path !== baseURL + '/' + url}">
-  <a
-    href="{baseURL}/{url}"
-    class="px-4 py-2 text-gray-600 no-underline"
-    class:text-white="{$router.path === baseURL + '/' + url}"
-    aria-controls="open-tabs-list-{url}-panel"
-    id="open-tabs-list-{url}-link">
-    {title}
-  </a>
-</div>
diff --git a/packages/frontend/src/pages/Model.svelte b/packages/frontend/src/pages/Model.svelte
index aa202421c..2d7d7163a 100644
--- a/packages/frontend/src/pages/Model.svelte
+++ b/packages/frontend/src/pages/Model.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 import NavPage from '/@/lib/NavPage.svelte';
-import Tab from '/@/lib/Tab.svelte';
 import MarkdownRenderer from '/@/lib/markdown/MarkdownRenderer.svelte';
 import { catalog } from '/@/stores/catalog';
 
diff --git a/packages/frontend/src/pages/Models.svelte b/packages/frontend/src/pages/Models.svelte
index 256c50757..3b416df74 100644
--- a/packages/frontend/src/pages/Models.svelte
+++ b/packages/frontend/src/pages/Models.svelte
@@ -13,7 +13,7 @@ import { onMount } from 'svelte';
 import ModelColumnSize from '../lib/table/model/ModelColumnSize.svelte';
 import ModelColumnAge from '../lib/table/model/ModelColumnAge.svelte';
 import ModelColumnActions from '../lib/table/model/ModelColumnActions.svelte';
-import Tab from '/@/lib/Tab.svelte';
+import { Tab } from '@podman-desktop/ui-svelte';
 import Route from '/@/Route.svelte';
 import { tasks } from '/@/stores/tasks';
 import ModelColumnIcon from '../lib/table/model/ModelColumnIcon.svelte';
@@ -106,10 +106,10 @@ async function importModel() {
 
 <NavPage title="Models" searchEnabled="{false}" loading="{loading}">
   <svelte:fragment slot="tabs">
-    <Tab title="All" url="models" />
-    <Tab title="Downloaded" url="models/downloaded" />
-    <Tab title="Imported" url="models/imported" />
-    <Tab title="Available" url="models/available" />
+    <Tab title="All" url="/models" selected="{$router.path === '/models'}" />
+    <Tab title="Downloaded" url="/models/downloaded" selected="{$router.path === '/models/downloaded'}" />
+    <Tab title="Imported" url="/models/imported" selected="{$router.path === '/models/imported'}" />
+    <Tab title="Available" url="/models/available" selected="{$router.path === '/models/available'}" />
   </svelte:fragment>
   <svelte:fragment slot="additional-actions">
     <Button on:click="{importModel}" aria-label="Import Models">Import</Button>
diff --git a/packages/frontend/src/pages/Recipe.svelte b/packages/frontend/src/pages/Recipe.svelte
index 4517d644d..bd2b402c5 100644
--- a/packages/frontend/src/pages/Recipe.svelte
+++ b/packages/frontend/src/pages/Recipe.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import NavPage from '/@/lib/NavPage.svelte';
 import { studioClient } from '/@/utils/client';
-import Tab from '/@/lib/Tab.svelte';
+import { Tab } from '@podman-desktop/ui-svelte';
 import Route from '/@/Route.svelte';
 import Card from '/@/lib/Card.svelte';
 import MarkdownRenderer from '/@/lib/markdown/MarkdownRenderer.svelte';
@@ -14,6 +14,7 @@ import type { ContainerConnectionInfo } from '@shared/src/models/IContainerConne
 import ContainerConnectionStatusInfo from '../lib/notification/ContainerConnectionStatusInfo.svelte';
 import { modelsInfo } from '../stores/modelsInfo';
 import { checkContainerConnectionStatus } from '../utils/connectionUtils';
+import { router } from 'tinro';
 
 export let recipeId: string;
 
@@ -49,8 +50,8 @@ function setSelectedModel(modelId: string) {
   searchEnabled="{false}"
   contentBackground="bg-charcoal-500">
   <svelte:fragment slot="tabs">
-    <Tab title="Summary" url="{recipeId}" />
-    <Tab title="Models" url="{recipeId}/models" />
+    <Tab title="Summary" url="/recipe/{recipeId}" selected="{$router.path === `/recipe/${recipeId}`}" />
+    <Tab title="Models" url="/recipe/{recipeId}/models" selected="{$router.path === `/recipe/${recipeId}/models`}" />
   </svelte:fragment>
   <svelte:fragment slot="content">
     <ContentDetailsLayout detailsTitle="AI App Details" detailsLabel="application details">