From 830611521729e017a49082379c6375f79eb616de Mon Sep 17 00:00:00 2001
From: axel7083 <42176370+axel7083@users.noreply.github.com>
Date: Thu, 11 Jan 2024 16:09:20 -0500
Subject: [PATCH] feat: adding icon to NavPage

---
 packages/backend/src/ai.json              |  1 +
 packages/backend/src/studio-api-impl.ts   |  7 +++++++
 packages/frontend/src/lib/NavPage.svelte  | 14 ++++++++++++--
 packages/frontend/src/pages/Recipe.svelte |  9 +++++++--
 packages/shared/StudioAPI.ts              |  1 +
 5 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/backend/src/ai.json b/packages/backend/src/ai.json
index 0d97a01ff..486d5c250 100644
--- a/packages/backend/src/ai.json
+++ b/packages/backend/src/ai.json
@@ -5,6 +5,7 @@
       "description" : "Chat bot application",
       "name" : "ChatBot",
       "repository": "https://github.com/axel7083/locallm",
+      "icon": "natural-language-processing",
       "categories": [
         "natural-language-processing"
       ],
diff --git a/packages/backend/src/studio-api-impl.ts b/packages/backend/src/studio-api-impl.ts
index 2c9c97e57..6d2e5b948 100644
--- a/packages/backend/src/studio-api-impl.ts
+++ b/packages/backend/src/studio-api-impl.ts
@@ -5,6 +5,7 @@ import content from './ai.json';
 import { ApplicationManager } from './managers/applicationManager';
 import { RecipeStatusRegistry } from './registries/RecipeStatusRegistry';
 import { RecipeStatus } from '@shared/models/IRecipeStatus';
+import {exec} from 'child_process';
 
 export const RECENT_CATEGORY_ID = 'recent-category';
 
@@ -14,6 +15,12 @@ export class StudioApiImpl implements StudioAPI {
     private recipeStatusRegistry: RecipeStatusRegistry,
   ) {}
 
+  async openURL(url: string): Promise<void> {
+    // TODO: probably not really secure, ask the user to validate opening
+    exec(`start "${url}"`);
+    return;
+  }
+
   async getPullingStatus(recipeId: string): Promise<RecipeStatus> {
       return this.recipeStatusRegistry.getStatus(recipeId);
   }
diff --git a/packages/frontend/src/lib/NavPage.svelte b/packages/frontend/src/lib/NavPage.svelte
index b5a95acd1..a799f104b 100644
--- a/packages/frontend/src/lib/NavPage.svelte
+++ b/packages/frontend/src/lib/NavPage.svelte
@@ -1,15 +1,25 @@
 <script lang="ts">
+import Fa from 'svelte-fa';
+import type { IconDefinition } from '@fortawesome/free-regular-svg-icons';
+
 export let title: string;
 export let searchTerm = '';
 export let searchEnabled = true;
+export let icon: IconDefinition | undefined = undefined;
 </script>
 
 <div class="flex flex-col w-full h-full shadow-pageheader">
   <div class="flex flex-col w-full h-full pt-4" role="region" aria-label="{title}">
     <div class="flex pb-2 px-5" role="region" aria-label="header">
-
         <div class="flex flex-col">
-          <h1 class="text-xl first-letter:uppercase">{title}</h1>
+          <div class="flex flex-row">
+            {#if icon}
+              <div class="bg-charcoal-800 rounded-full w-8 h-8 flex items-center justify-center mr-3">
+                <Fa size="20" class="text-purple-500" icon="{icon}" />
+              </div>
+            {/if}
+            <h1 class="text-xl first-letter:uppercase">{title}</h1>
+          </div>
           <slot name="subtitle" />
         </div>
 
diff --git a/packages/frontend/src/pages/Recipe.svelte b/packages/frontend/src/pages/Recipe.svelte
index db8a36b65..f0f2ce2ab 100644
--- a/packages/frontend/src/pages/Recipe.svelte
+++ b/packages/frontend/src/pages/Recipe.svelte
@@ -15,6 +15,7 @@ import TasksProgress from '/@/lib/progress/TasksProgress.svelte';
 import Button from '/@/lib/button/Button.svelte';
 import { getDisplayName } from '/@/utils/versionControlUtils';
 import type { RecipeStatus } from '@shared/models/IRecipeStatus';
+import { getIcon } from '/@/utils/categoriesUtils';
 
 export let recipeId: string;
 
@@ -53,9 +54,13 @@ onDestroy(() => {
     intervalId = undefined;
   }
 });
+
+const onClickRepository = () => {
+  studioClient.openURL(recipe?.repository);
+}
 </script>
 
-<NavPage title="{recipe?.name || ''}">
+<NavPage title="{recipe?.name || ''}" icon="{getIcon(recipe?.icon)}">
   <svelte:fragment slot="tabs">
     <Tab title="Summary" url="{recipeId}" />
     <Tab title="Models" url="{recipeId}/models" />
@@ -74,7 +79,7 @@ onDestroy(() => {
               <div class="cursor-pointer flex text-nowrap items-center">
                 <Fa size="20" icon="{faGithub}"/>
                 <div class="ml-2">
-                  <a href="{recipe?.repository}" target="_blank">{getDisplayName(recipe?.repository)}</a>
+                  <a on:click={onClickRepository}>{getDisplayName(recipe?.repository)}</a>
                 </div>
               </div>
             </div>
diff --git a/packages/shared/StudioAPI.ts b/packages/shared/StudioAPI.ts
index b4b1f97c6..306980075 100644
--- a/packages/shared/StudioAPI.ts
+++ b/packages/shared/StudioAPI.ts
@@ -11,5 +11,6 @@ export abstract class StudioAPI {
   abstract searchRecipes(query: string): Promise<Recipe[]>;
   abstract getPullingStatus(recipeId: string): Promise<RecipeStatus>
   abstract pullApplication(recipeId: string): Promise<void>;
+  abstract openURL(url: string): Promise<void>;
 }