From 9e6d370c80cc5ee995ae4e97ab6138b28734bc5b Mon Sep 17 00:00:00 2001
From: Philippe Martin <phmartin@redhat.com>
Date: Thu, 20 Jun 2024 09:29:49 +0200
Subject: [PATCH] refactor: use DetailsPage for Model details page (#1241)

Signed-off-by: Philippe Martin <phmartin@redhat.com>
---
 packages/frontend/src/pages/Model.svelte | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/frontend/src/pages/Model.svelte b/packages/frontend/src/pages/Model.svelte
index 2d7d7163a..0b0926902 100644
--- a/packages/frontend/src/pages/Model.svelte
+++ b/packages/frontend/src/pages/Model.svelte
@@ -1,23 +1,30 @@
 <script lang="ts">
-import NavPage from '/@/lib/NavPage.svelte';
 import MarkdownRenderer from '/@/lib/markdown/MarkdownRenderer.svelte';
 import { catalog } from '/@/stores/catalog';
+import { DetailsPage } from '@podman-desktop/ui-svelte';
+import { router } from 'tinro';
 
 export let modelId: string;
 
 $: model = $catalog.models.find(m => m.id === modelId);
+
+export function goToUpPage(): void {
+  router.goto('/models');
+}
 </script>
 
-<NavPage
-  lastPage="{{ name: 'Models', path: '/models' }}"
+<DetailsPage
   title="{model?.name || ''}"
-  searchEnabled="{false}"
-  loading="{model === undefined}">
+  breadcrumbLeftPart="Models"
+  breadcrumbRightPart="{model?.name || ''}"
+  breadcrumbTitle="Go back to Models"
+  on:close="{goToUpPage}"
+  on:breadcrumbClick="{goToUpPage}">
   <svelte:fragment slot="content">
-    <div class="flex flex-row w-full">
+    <div class="flex flex-row w-full h-full bg-[var(--pd-content-bg)] overflow-y-auto">
       <div class="flex-grow p-5">
         <MarkdownRenderer source="{model?.description}" />
       </div>
     </div>
   </svelte:fragment>
-</NavPage>
+</DetailsPage>