chore: adopt Button UI component (#1174)

Fixes #962

Signed-off-by: Jeff MAURY <[email protected]>

packages/frontend/src/lib/RecipeDetails.svelte

@@ -10,7 +10,6 @@ import { router } from 'tinro';
 import { applicationStates } from '../stores/application-states';
 import type { ApplicationState } from '@shared/src/models/IApplicationState';
 import ApplicationActions from './ApplicationActions.svelte';
-import Button from './button/Button.svelte';
 import VSCodeIcon from '/@/lib/images/VSCodeIcon.svelte';
 import { localRepositories } from '../stores/localRepositories';
 import { findLocalRepositoryByRecipeId } from '/@/utils/localRepositoriesUtils';
@@ -21,6 +20,7 @@ import StatusIcon from '/@/lib/StatusIcon.svelte';
 import type { ModelInfo } from '@shared/src/models/IModelInfo';
 import { getApplicationStatus, getApplicationStatusText } from '../pages/applications';
 import Spinner from './button/Spinner.svelte';
+import { Button } from '@podman-desktop/ui-svelte';
 
 export let recipeId: string;
 export let modelId: string;

packages/frontend/src/lib/notification/ContainerConnectionStatusInfo.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 import Fa from 'svelte-fa';
 import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
-import Button from '../button/Button.svelte';
 import { filesize } from 'filesize';
 import { studioClient } from '/@/utils/client';
 import type { ContainerConnectionInfo } from '@shared/src/models/IContainerConnectionInfo';
+import { Button } from '@podman-desktop/ui-svelte';
 
 export let connectionInfo: ContainerConnectionInfo;
 type BannerBackgroundColor = 'light' | 'dark';

packages/frontend/src/pages/CreateService.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 import NavPage from '/@/lib/NavPage.svelte';
-import Button from '/@/lib/button/Button.svelte';
 import { faExclamationCircle, faLocationArrow, faPlus, faPlusCircle } from '@fortawesome/free-solid-svg-icons';
 import { modelsInfo } from '/@/stores/modelsInfo';
 import type { ModelInfo } from '@shared/src/models/IModelInfo';
@@ -17,6 +16,7 @@ import { inferenceServers } from '/@/stores/inferenceServers';
 import ContainerConnectionStatusInfo from '../lib/notification/ContainerConnectionStatusInfo.svelte';
 import type { ContainerConnectionInfo } from '@shared/src/models/IContainerConnectionInfo';
 import { checkContainerConnectionStatus } from '../utils/connectionUtils';
+import { Button } from '@podman-desktop/ui-svelte';
 
 // List of the models available locally
 let localModels: ModelInfo[];

packages/frontend/src/pages/Dashboard.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 import NavPage from '/@/lib/NavPage.svelte';
 import { router } from 'tinro';
-import Button from '/@/lib/button/Button.svelte';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import { studioClient } from '/@/utils/client';
 import DashboardBanner from '/@/lib/images/DashboardBanner.svelte';
+import { Button } from '@podman-desktop/ui-svelte';
 
 const openRecipesCatalog = () => {
   router.goto('/recipes');

packages/frontend/src/pages/ImportModels.svelte

@@ -3,10 +3,10 @@ import { faMinusCircle, faPlusCircle, faUpload } from '@fortawesome/free-solid-s
 import { router } from 'tinro';
 import { studioClient } from '../utils/client';
 import { Uri } from '@shared/src/uri/Uri';
-import Button from '../lib/button/Button.svelte';
 import ErrorMessage from '../lib/ErrorMessage.svelte';
 import NavPage from '../lib/NavPage.svelte';
 import type { LocalModelImportInfo } from '@shared/src/models/ILocalModelInfo';
+import { Button } from '@podman-desktop/ui-svelte';
 
 let modelsToImport: LocalModelImportInfo[] = [];
 let importError: string = '';

packages/frontend/src/pages/InferenceServerDetails.svelte

@@ -11,8 +11,8 @@ import type { LanguageVariant } from 'postman-code-generators';
 import { studioClient } from '/@/utils/client';
 import { onMount } from 'svelte';
 import { router } from 'tinro';
-import Button from '/@/lib/button/Button.svelte';
 import Badge from '/@/lib/Badge.svelte';
+import { Button } from '@podman-desktop/ui-svelte';
 
 export let containerId: string | undefined = undefined;
 

packages/frontend/src/pages/InferenceServers.svelte

@@ -8,11 +8,11 @@ import { inferenceServers } from '/@/stores/inferenceServers';
 import ServiceStatus from '/@/lib/table/service/ServiceStatus.svelte';
 import ServiceAction from '/@/lib/table/service/ServiceAction.svelte';
 import ServiceColumnModelName from '/@/lib/table/service/ServiceColumnModelName.svelte';
-import Button from '/@/lib/button/Button.svelte';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { studioClient } from '/@/utils/client';
 import { router } from 'tinro';
 import { onMount } from 'svelte';
+import { Button } from '@podman-desktop/ui-svelte';
 
 const columns: Column<InferenceServer>[] = [
   new Column<InferenceServer>('Status', { width: '70px', renderer: ServiceStatus, align: 'center' }),

packages/frontend/src/pages/Models.svelte

@@ -17,8 +17,8 @@ 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';
-import Button from '../lib/button/Button.svelte';
 import { router } from 'tinro';
+import { Button } from '@podman-desktop/ui-svelte';
 
 const columns: Column<ModelInfo>[] = [
   new Column<ModelInfo>('', { width: '40px', renderer: ModelColumnIcon }),

packages/frontend/src/pages/Playground.svelte

@@ -4,7 +4,6 @@ import { studioClient } from '/@/utils/client';
 import { isAssistantChat, isPendingChat, isUserChat, isSystemPrompt } from '@shared/src/models/IPlaygroundMessage';
 import NavPage from '../lib/NavPage.svelte';
 import { catalog } from '../stores/catalog';
-import Button from '../lib/button/Button.svelte';
 import { afterUpdate } from 'svelte';
 import ContentDetailsLayout from '../lib/ContentDetailsLayout.svelte';
 import ContainerIcon from '/@/lib/images/ContainerIcon.svelte';
@@ -15,7 +14,7 @@ import ChatMessage from '../lib/conversation/ChatMessage.svelte';
 import SystemPromptBanner from '/@/lib/conversation/SystemPromptBanner.svelte';
 import { inferenceServers } from '/@/stores/inferenceServers';
 import { faCircleInfo, faMicrochip, faPaperPlane } from '@fortawesome/free-solid-svg-icons';
-import { Tooltip } from '@podman-desktop/ui-svelte';
+import { Button, Tooltip } from '@podman-desktop/ui-svelte';
 import StatusIcon from '../lib/StatusIcon.svelte';
 import Badge from '../lib/Badge.svelte';
 import { router } from 'tinro';

packages/frontend/src/pages/PlaygroundCreate.svelte

@@ -4,7 +4,6 @@ import NavPage from '../lib/NavPage.svelte';
 import type { ModelInfo } from '@shared/src/models/IModelInfo';
 import { modelsInfo } from '/@/stores/modelsInfo';
 import Fa from 'svelte-fa';
-import Button from '../lib/button/Button.svelte';
 import { studioClient } from '../utils/client';
 import { router } from 'tinro';
 import { onDestroy, onMount } from 'svelte';
@@ -14,6 +13,7 @@ import { tasks } from '../stores/tasks';
 import { filterByLabel } from '../utils/taskUtils';
 import type { Unsubscriber } from 'svelte/store';
 import ErrorMessage from '../lib/ErrorMessage.svelte';
+import { Button } from '@podman-desktop/ui-svelte';
 
 let localModels: ModelInfo[];
 $: localModels = $modelsInfo.filter(model => model.file);

packages/frontend/src/pages/Playgrounds.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 import { router } from 'tinro';
 import NavPage from '../lib/NavPage.svelte';
-import Button from '../lib/button/Button.svelte';
 import Table from '../lib/table/Table.svelte';
 import PlaygroundColumnModel from '../lib/table/playground/PlaygroundColumnModel.svelte';
 import PlaygroundColumnName from '../lib/table/playground/PlaygroundColumnName.svelte';
@@ -10,6 +9,7 @@ import type { PlaygroundV2 } from '@shared/src/models/IPlaygroundV2';
 import ConversationColumnAction from '/@/lib/table/playground/ConversationColumnAction.svelte';
 import { conversations } from '/@/stores/conversations';
 import PlaygroundColumnIcon from '/@/lib/table/playground/PlaygroundColumnIcon.svelte';
+import { Button } from '@podman-desktop/ui-svelte';
 
 const columns: Column<PlaygroundV2>[] = [
   new Column<PlaygroundV2>('', { width: '40px', renderer: PlaygroundColumnIcon }),