refactor: use DetailsPage for Recipe details page (#1245)

Signed-off-by: Philippe Martin <[email protected]>
containers · Jun 20, 2024 · e9d6096 · e9d6096
1 parent 121238b
commit e9d6096
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 33 deletions.
diff --git a/packages/frontend/src/pages/Recipe.svelte b/packages/frontend/src/pages/Recipe.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-import NavPage from '/@/lib/NavPage.svelte';
 import { studioClient } from '/@/utils/client';
-import { Tab } from '@podman-desktop/ui-svelte';
+import { Tab, DetailsPage } from '@podman-desktop/ui-svelte';
 import Route from '/@/Route.svelte';
 import Card from '/@/lib/Card.svelte';
 import MarkdownRenderer from '/@/lib/markdown/MarkdownRenderer.svelte';
@@ -17,6 +16,7 @@ import { checkContainerConnectionStatus } from '../utils/connectionUtils';
 import { router } from 'tinro';
 import { InferenceType } from '@shared/src/models/IInference';
 import type { ModelInfo } from '@shared/src/models/IModelInfo';
+import Fa from 'svelte-fa';
 
 export let recipeId: string;
 
@@ -51,43 +51,55 @@ function setSelectedModel(modelId: string) {
   selectedModelId = modelId;
   studioClient.telemetryLogUsage('recipe.select-model', { 'recipe.id': recipe?.id, 'model.id': modelId });
 }
+
+export function goToUpPage(): void {
+  router.goto('/recipes');
+}
 </script>
 
-<NavPage
-  lastPage="{{ name: 'Recipes', path: '/recipes' }}"
+<DetailsPage
   title="{recipe?.name || ''}"
-  icon="{getIcon(recipe?.icon)}"
-  searchEnabled="{false}"
-  contentBackground="bg-charcoal-700">
+  breadcrumbLeftPart="Recipes"
+  breadcrumbRightPart="{recipe?.name || ''}"
+  breadcrumbTitle="Go back to Recipes"
+  on:close="{goToUpPage}"
+  on:breadcrumbClick="{goToUpPage}">
+  <svelte:fragment slot="icon">
+    <div class="rounded-full w-8 h-8 flex items-center justify-center">
+      <Fa size="1.125x" class="text-[var(--pd-content-header-icon)]" icon="{getIcon(recipe?.icon)}" />
+    </div>
+  </svelte:fragment>
   <svelte:fragment slot="tabs">
     <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">
-      <svelte:fragment slot="header">
-        {#if connectionInfo}
-          <div class="px-4">
-            <ContainerConnectionStatusInfo connectionInfo="{connectionInfo}" background="dark" />
-          </div>
-        {/if}
-      </svelte:fragment>
-      <svelte:fragment slot="content">
-        <Route path="/">
-          <MarkdownRenderer source="{recipe?.readme}" />
-        </Route>
-        <Route path="/models">
-          <RecipeModels
-            models="{models}"
-            selected="{selectedModelId}"
-            recommended="{recipe?.recommended ?? []}"
-            setSelectedModel="{setSelectedModel}" />
-        </Route>
-      </svelte:fragment>
-      <svelte:fragment slot="details">
-        <RecipeDetails recipeId="{recipeId}" modelId="{selectedModelId}" />
-      </svelte:fragment>
-    </ContentDetailsLayout>
+    <div class="bg-[var(--pd-content-bg)] h-full overflow-y-auto">
+      <ContentDetailsLayout detailsTitle="AI App Details" detailsLabel="application details">
+        <svelte:fragment slot="header">
+          {#if connectionInfo}
+            <div class="px-4">
+              <ContainerConnectionStatusInfo connectionInfo="{connectionInfo}" background="dark" />
+            </div>
+          {/if}
+        </svelte:fragment>
+        <svelte:fragment slot="content">
+          <Route path="/">
+            <MarkdownRenderer source="{recipe?.readme}" />
+          </Route>
+          <Route path="/models">
+            <RecipeModels
+              models="{models}"
+              selected="{selectedModelId}"
+              recommended="{recipe?.recommended ?? []}"
+              setSelectedModel="{setSelectedModel}" />
+          </Route>
+        </svelte:fragment>
+        <svelte:fragment slot="details">
+          <RecipeDetails recipeId="{recipeId}" modelId="{selectedModelId}" />
+        </svelte:fragment>
+      </ContentDetailsLayout>
+    </div>
   </svelte:fragment>
   <svelte:fragment slot="subtitle">
     <div class="mt-2">
@@ -98,4 +110,4 @@ function setSelectedModel(modelId: string) {
       {/each}
     </div>
   </svelte:fragment>
-</NavPage>
+</DetailsPage>
diff --git a/packages/frontend/src/utils/categoriesUtils.ts b/packages/frontend/src/utils/categoriesUtils.ts
@@ -19,7 +19,7 @@
 import type { IconDefinition } from '@fortawesome/free-regular-svg-icons';
 
 import { faAlignLeft, faEdit, faImages, faQuestion } from '@fortawesome/free-solid-svg-icons';
-export const getIcon = (scope: string | undefined): IconDefinition | undefined => {
+export const getIcon = (scope: string | undefined): IconDefinition => {
   switch (scope) {
     case 'natural-language-processing':
       return faAlignLeft;