chore: adopt tab component (#1173)

Signed-off-by: axel7083 <[email protected]>
containers · Jun 6, 2024 · 2fb66df · 2fb66df
1 parent 02a5039
commit 2fb66df
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 31 deletions.
diff --git a/packages/frontend/src/lib/Tab.svelte b/packages/frontend/src/lib/Tab.svelte
diff --git 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
@@ -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
@@ -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">