diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte index 4d88dc0c..af8d7779 100644 --- a/src/lib/components/Button.svelte +++ b/src/lib/components/Button.svelte @@ -2,7 +2,6 @@ let className: string | undefined = undefined; export { className as class }; export let variant: 'default' | 'outline' | 'link' | 'icon' | undefined = 'default'; - export let size: 'default' | 'icon' | 'link' | undefined = 'default'; export let href: string | undefined = undefined; @@ -12,7 +11,6 @@ {href} class=" button button--{variant} - button--size-{size} {className} " on:click @@ -20,12 +18,7 @@ {:else} - {/if} @@ -36,12 +29,12 @@ &--default, &--outline { - @apply border text-sm font-medium; - @apply disabled:text-muted disabled:bg-shade-2 disabled:border-shade-2 disabled:pointer-events-none; + @apply border px-3 py-2 text-sm font-medium h-10; + @apply disabled:pointer-events-none disabled:border-shade-2 disabled:bg-shade-2 disabled:text-muted; } &--default { - @apply bg-accent border-accent text-shade-0; + @apply border-accent bg-accent text-shade-0; } &--outline { @@ -49,17 +42,14 @@ } &--link { - @apply rounded-none underline underline-offset-4 hover:text-active; + @apply rounded-none underline underline-offset-4; + @apply hover:text-active; } - &--size { - &-default { - @apply h-10 px-4 py-2; - } - - &-icon { - @apply h-10 w-10; - } + &--icon { + @apply opacity-40 px-2 py-2 text-active; + @apply hover:opacity-60; + @apply active:opacity-100; } } diff --git a/src/lib/components/ButtonCopy.svelte b/src/lib/components/ButtonCopy.svelte new file mode 100644 index 00000000..cad3349f --- /dev/null +++ b/src/lib/components/ButtonCopy.svelte @@ -0,0 +1,28 @@ + + +
+ +
+ + diff --git a/src/lib/components/ButtonDelete.svelte b/src/lib/components/ButtonDelete.svelte index d5216102..66daae80 100644 --- a/src/lib/components/ButtonDelete.svelte +++ b/src/lib/components/ButtonDelete.svelte @@ -4,6 +4,7 @@ import type { Writable } from 'svelte/store'; import { knowledgeStore, sessionsStore, deleteStoreItem } from '$lib/store'; import { goto } from '$app/navigation'; + import Button from './Button.svelte'; export let sitemap: Sitemap; export let id: string; @@ -31,42 +32,38 @@ } -
+
{#if $shouldConfirmDeletion} - - + + + {:else} - + {/if}
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte index a779a82a..d120d747 100644 --- a/src/lib/components/Header.svelte +++ b/src/lib/components/Header.svelte @@ -26,7 +26,7 @@ } .header__nav { - @apply flex flex-row items-center gap-x-2 pr-4 pb-4; + @apply flex flex-row items-center pr-4 pb-4; @apply lg:pr-6 lg:pb-6; } diff --git a/src/routes/knowledge/[id]/+page.svelte b/src/routes/knowledge/[id]/+page.svelte index 642720f1..2592dd92 100644 --- a/src/routes/knowledge/[id]/+page.svelte +++ b/src/routes/knowledge/[id]/+page.svelte @@ -41,7 +41,7 @@

Knowledge -

diff --git a/src/routes/sessions/[id]/+page.svelte b/src/routes/sessions/[id]/+page.svelte index beba47ba..54e0409a 100644 --- a/src/routes/sessions/[id]/+page.svelte +++ b/src/routes/sessions/[id]/+page.svelte @@ -3,13 +3,6 @@ import { writable } from 'svelte/store'; import { Brain, StopCircle, UnfoldVertical } from 'lucide-svelte'; - import Button from '$lib/components/Button.svelte'; - import Article from './Article.svelte'; - import FieldSelectModel from '$lib/components/FieldSelectModel.svelte'; - import EmptyMessage from '$lib/components/EmptyMessage.svelte'; - import FieldSelect from '$lib/components/FieldSelect.svelte'; - import Header from '$lib/components/Header.svelte'; - import { loadKnowledge, type Knowledge } from '$lib/knowledge'; import { settingsStore, knowledgeStore } from '$lib/store'; import { ollamaGenerate, type OllamaCompletionResponse } from '$lib/ollama'; @@ -22,13 +15,19 @@ } from '$lib/sessions'; import { generateNewUrl } from '$lib/components/ButtonNew'; import { Sitemap } from '$lib/sitemap'; - import type { PageData } from './$types'; + + import Button from '$lib/components/Button.svelte'; + import Article from './Article.svelte'; + import FieldSelectModel from '$lib/components/FieldSelectModel.svelte'; + import EmptyMessage from '$lib/components/EmptyMessage.svelte'; + import FieldSelect from '$lib/components/FieldSelect.svelte'; + import Header from '$lib/components/Header.svelte'; import FieldTextEditor from '$lib/components/FieldTextEditor.svelte'; import ButtonSubmit from '$lib/components/ButtonSubmit.svelte'; import Fieldset from '$lib/components/Fieldset.svelte'; import Field from '$lib/components/Field.svelte'; - import CopyButton from './CopyButton.svelte'; + import ButtonCopy from '$lib/components/ButtonCopy.svelte'; import ButtonDelete from '$lib/components/ButtonDelete.svelte'; import Metadata from '$lib/components/Metadata.svelte'; @@ -177,9 +176,7 @@

- Session + Session

{isNewSession ? 'New session' : formatSessionMetadata(session)} @@ -187,7 +184,9 @@ {#if !isNewSession} - + {#if !$shouldConfirmDeletion} + + {/if} {/if} @@ -235,7 +234,6 @@
- +
@@ -83,13 +83,12 @@ diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte index 518d85e3..8c3cea2d 100644 --- a/src/routes/settings/+page.svelte +++ b/src/routes/settings/+page.svelte @@ -89,7 +89,6 @@ OLLAMA_ORIGINS,

diff --git a/tests/docs.test.ts-snapshots/session.png b/tests/docs.test.ts-snapshots/session.png index 3d561a5c..00e50339 100644 Binary files a/tests/docs.test.ts-snapshots/session.png and b/tests/docs.test.ts-snapshots/session.png differ diff --git a/tests/session.test.ts b/tests/session.test.ts index ab546261..66e81028 100644 --- a/tests/session.test.ts +++ b/tests/session.test.ts @@ -159,6 +159,18 @@ test.describe('Session', () => { await expect(page.getByText(MOCK_SESSION_1_RESPONSE_1.response)).toBeVisible(); await expect(page.getByText('No sessions')).not.toBeVisible(); expect(await page.getByTestId('session-item').count()).toBe(1); + await expect(page.locator('header').getByTitle('Copy')).toBeVisible(); + await expect(page.getByTitle('Dismiss')).not.toBeVisible(); + + // Check the navigation changes when session deletion needs confirmation + await page.locator('header').getByTitle('Delete session').click(); + await expect(page.locator('header').getByTitle('Copy')).not.toBeVisible(); + await expect(page.getByTitle('Confirm deletion')).toBeVisible(); + + await page.getByTitle('Dismiss').click(); + await expect(page.locator('header').getByTitle('Copy')).toBeVisible(); + await expect(page.getByTitle('Confirm deletion')).not.toBeVisible(); + await expect(page.getByTitle('Dismiss')).not.toBeVisible(); // Delete the session from the header await page.locator('header').getByTitle('Delete session').click();