Skip to content

Commit

Permalink
fix: general improvements to the UI (#169)
Browse files Browse the repository at this point in the history
Closes #167
Closes #166

- [x] styling fixes for **Settings, MOTD, Errors**
- [x] cleaned up styles for `<Fieldset>`

---------

Co-authored-by: Fernando Maclen <[email protected]>
  • Loading branch information
BukuBuku11 and fmaclen authored Sep 15, 2024
1 parent 39268e5 commit f993d75
Show file tree
Hide file tree
Showing 28 changed files with 464 additions and 1,361 deletions.
1,579 changes: 314 additions & 1,265 deletions package-lock.json

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@
"svelte": "^4.2.7",
"svelte-check": "^3.6.0",
"svelte-sonner": "^0.3.27",
"tailwind-scrollbar": "^3.1.0",
"tailwindcss": "^3.3.6",
"thememirror": "^2.0.1",
"tslib": "^2.4.1",
Expand All @@ -65,6 +66,8 @@
"vite-node": "^2.0.5"
},
"optionalDependencies": {
"@cloudflare/workerd-linux-64": "^1.20240909.0",
"@rollup/rollup-linux-x64-gnu": "^4.21.3",
"@sveltejs/adapter-cloudflare": "^4.2.1"
},
"type": "module",
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/ButtonNew.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
onMount(setId);
</script>

<div class="flex gap-x-2 p-6">
<div class="flex gap-x-2 border-b p-6">
<Button
data-testid={sitemap === Sitemap.SESSIONS ? 'new-session' : 'new-knowledge'}
class="w-full"
Expand Down
11 changes: 7 additions & 4 deletions src/lib/components/ButtonSubmit.svelte
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script lang="ts">
import Button from './Button.svelte';
import { browser } from '$app/environment';
import Button from '$lib/components/Button.svelte';
export let handleSubmit;
export let disabled: boolean | undefined = false;
Expand All @@ -9,9 +10,11 @@
<Button class="w-full text-left" on:click={handleSubmit} {disabled}>
<slot />

<span class="tag" class:tag--active={!disabled}>
{hasMetaKey ? (navigator.userAgent.indexOf('Mac') !== -1 ? '' : 'Ctrl') : ''} ↵
</span>
{#if browser}
<span class="tag" class:tag--active={!disabled}>
{hasMetaKey ? (navigator.userAgent.indexOf('Mac') !== -1 ? '' : 'Ctrl') : ''} ↵
</span>
{/if}
</Button>

<style lang="postcss">
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/Field.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
}
&--text-editor {
@apply h-full overflow-y-auto;
@apply overflow-scrollbar h-full;
}
}
Expand Down
8 changes: 4 additions & 4 deletions src/lib/components/FieldSelect.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -90,9 +90,9 @@
</Button>
{/if}

<span class="pointer-events-none py-2 pr-1">
<ChevronsUpDown class="base-icon" />
</span>
<button class="pointer-events-none py-2 pr-1">
<ChevronsUpDown class="base-icon text-muted" />
</button>
</nav>
</div>

Expand Down Expand Up @@ -137,7 +137,7 @@
}
:global(.field-combobox-content) {
@apply relative z-10 max-h-64 max-w-full overflow-y-auto rounded-md bg-shade-0 py-1 shadow-md;
@apply overflow-scrollbar relative z-10 max-h-64 max-w-full rounded-md bg-shade-0 py-1 shadow-md;
}
:global(.field-combobox-item) {
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/FieldTextEditor.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@
<style lang="postcss">
.text-editor {
@apply base-input;
@apply h-full max-h-full min-h-[88px] overflow-y-auto rounded-b-md p-0;
@apply overflow-scrollbar h-full max-h-full min-h-[88px] rounded-b-md p-0;
:global(.cm-editor) {
@apply h-full w-full text-sm;
Expand Down
13 changes: 8 additions & 5 deletions src/lib/components/Fieldset.svelte
Original file line number Diff line number Diff line change
@@ -1,18 +1,21 @@
<script lang="ts">
export let isFullscreen: boolean | undefined = false;
export let context: 'editor' | 'settings' | undefined = undefined;
</script>

<fieldset class="fieldset {isFullscreen ? 'fieldset--fullscreen' : ''}">
<fieldset class="fieldset {context ? `fieldset--${context}` : ''}">
<slot />
</fieldset>

<style lang="postcss">
.fieldset {
@apply container mx-auto flex max-w-[80ch] flex-col gap-y-3 p-4;
@apply lg:p-6;
@apply container mx-auto flex max-w-[80ch] flex-col gap-y-3 p-6;
&--fullscreen {
&--editor {
@apply h-full overflow-hidden;
}
&--settings {
@apply p-0;
}
}
</style>
2 changes: 1 addition & 1 deletion src/lib/components/Markdown.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@
/* Code */
.markdown :global(pre) {
@apply relative my-6 overflow-auto rounded-md border border-shade-2;
@apply overflow-scrollbar relative my-6 rounded-md border border-shade-2;
@apply first:mt-0;
}
Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/Section.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,11 @@
}
.section__aside {
@apply flex h-full min-w-80 flex-col overflow-y-auto border-r;
@apply overflow-scrollbar flex h-full min-w-80 flex-col border-r;
}
.section__content {
@apply flex h-full flex-col overflow-y-auto bg-shade-1;
@apply overflow-scrollbar flex h-full flex-col bg-shade-1;
}
.section--index {
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/SectionList.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@

<style lang="postcss">
.section-list {
@apply flex h-full flex-col overflow-y-auto;
@apply overflow-scrollbar flex h-full flex-col;
}
</style>
2 changes: 1 addition & 1 deletion src/lib/components/SectionListItem.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
<style lang="postcss">
.section-list-item {
@apply flex flex-row items-center justify-between border-b pr-3;
@apply first:border-t;
@apply last:border-b-0;
&--confirm-deletion {
@apply confirm-deletion;
Expand Down
44 changes: 33 additions & 11 deletions src/routes/+error.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,36 @@
import EmptyMessage from '$lib/components/EmptyMessage.svelte';
</script>

{#if $page.status === 404}
<EmptyMessage>
<strong>{$LL.error()} {$page.status}</strong>
— {$LL.notFound()}
</EmptyMessage>
{:else if $page.status !== 200}
<EmptyMessage>
<strong>{$LL.error()} {$page.status}</strong>
— {$LL.internalServerError()}
</EmptyMessage>
{/if}
<section class="error">
<div class="error-message">
{#if $page.status === 404}
<EmptyMessage>
<strong>{$LL.error()} {$page.status}</strong>
<span>{$LL.notFound()}</span>
</EmptyMessage>
{:else if $page.status !== 200}
<EmptyMessage>
<strong>{$LL.error()} {$page.status}</strong>
<span>{$LL.internalServerError()}</span>
</EmptyMessage>
{/if}
</div>
</section>

<style lang="postcss">
.error {
@apply base-section base-section-fullscreen flex gap-x-8 px-6;
strong {
@apply mr-4 text-nowrap;
}
span {
@apply border-l pl-4;
}
}
.error-message {
@apply my-auto flex flex-col gap-y-12;
}
</style>
19 changes: 16 additions & 3 deletions src/routes/+layout.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,20 @@
{/if}
</svelte:head>

<Toaster richColors={true} position="top-center" />
<Toaster
toastOptions={{
unstyled: true,
classes: {
toast:
'shadow-xl px-4 py-3 flex items-center gap-x-3 max-w-full w-full rounded mx-auto text-xs mx-0',
error: 'text-red-50 bg-red-700',
success: 'text-emerald-50 bg-emerald-700',
warning: 'text-yellow-50 bg-yellow-700',
info: 'bg-shade-4 text-indigo-50'
}
}}
position="top-center"
/>

<div class="layout">
<aside class="layout__aside">
Expand Down Expand Up @@ -113,7 +126,7 @@
}
.layout {
@apply flex h-dvh max-h-dvh w-screen flex-col overflow-auto;
@apply overflow-scrollbar flex h-dvh max-h-dvh w-screen flex-col;
@apply lg:flex-row lg:gap-4 lg:p-4;
}
Expand Down Expand Up @@ -164,6 +177,6 @@
}
.layout__main {
@apply flex h-full w-full overflow-auto;
@apply overflow-scrollbar flex h-full w-full;
}
</style>
2 changes: 1 addition & 1 deletion src/routes/knowledge/[id]/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
</svelte:fragment>
</Header>

<Fieldset isFullscreen={true}>
<Fieldset context="editor">
<FieldInput name="name" label={$LL.name()} bind:value={name} />

{#key knowledge}
Expand Down
8 changes: 4 additions & 4 deletions src/routes/motd/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,17 @@
<Head title={$LL.messageOfTheDay()} />

<section class="motd">
<div class="motd__container">
<div class="motd-markdown">
<Markdown markdown={data.motd} />
</div>
</section>

<style lang="postcss">
.motd {
@apply base-section flex border-spacing-1 flex-col bg-shade-1 p-8;
@apply base-section base-section-fullscreen px-8;
}
.motd__container {
@apply mx-auto my-auto;
.motd-markdown {
@apply my-auto;
}
</style>
6 changes: 3 additions & 3 deletions src/routes/motd/motd.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
`2024-9-10`
`2024-9-15`

### Message of the day

Expand All @@ -7,11 +7,11 @@
#### What's new?

- **Desktop app** is now available for [Windows, macOS & Linux](https://github.com/fmaclen/hollama/releases)
- **Download** [Ollama models](https://ollama.ai/models) directly from the [Settings](/settings) page
- **Hola mundo!** UI is now available [in Spanish](/settings)
- **Hola mundo!** UI is now available in [Spanish](/settings)

#### Previously, in Hollama

- **Download** [Ollama models](https://ollama.ai/models) from [Settings](/settings)
- **Editable messages** in [Sessions](/sessions)
- Customizable **system prompts**
- **Code-editor** for prompting
Expand Down
8 changes: 4 additions & 4 deletions src/routes/sessions/[id]/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -276,7 +276,7 @@
</button>

<div class="prompt-editor__form">
<Fieldset isFullscreen={isPromptFullscreen}>
<Fieldset context={isPromptFullscreen ? 'editor' : undefined}>
{#if isNewSession}
<div class="prompt-editor__project">
<FieldSelectModel />
Expand Down Expand Up @@ -368,11 +368,11 @@

<style lang="postcss">
.session {
@apply flex h-full w-full flex-col overflow-y-auto;
@apply overflow-scrollbar flex h-full w-full flex-col;
}
.session__history {
@apply flex h-full flex-grow flex-col overflow-y-auto;
@apply overflow-scrollbar flex h-full flex-grow flex-col;
}
.session__articles {
Expand All @@ -398,7 +398,7 @@
}
.prompt-editor__form {
@apply h-full overflow-y-auto bg-shade-1;
@apply overflow-scrollbar h-full bg-shade-1;
}
.prompt-editor__toggle {
Expand Down
9 changes: 4 additions & 5 deletions src/routes/settings/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<Head title={$LL.settings()} />

<section class="settings">
<div class="settings__container">
<div class="settings-fieldsets">
<Version />
<Ollama />
<Interface />
Expand All @@ -21,11 +21,10 @@

<style lang="postcss">
.settings {
@apply base-section;
@apply flex border-spacing-1 flex-col bg-shade-1;
@apply base-section base-section-fullscreen gap-y-8 px-6;
}
.settings__container {
@apply my-auto flex flex-col gap-y-4;
.settings-fieldsets {
@apply my-auto flex w-full flex-col gap-y-12;
}
</style>
2 changes: 1 addition & 1 deletion src/routes/settings/DangerZone.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
}
</script>

<Fieldset>
<Fieldset context="settings">
<P><strong>{$LL.dangerZone()}</strong></P>
<Button variant="outline" on:click={() => deleteStorage(StorageKey.HollamaSessions)}>
{$LL.deleteAllSessions()}
Expand Down
2 changes: 1 addition & 1 deletion src/routes/settings/Interface.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
}
</script>

<Fieldset>
<Fieldset context="settings">
<P><strong>{$LL.interface()}</strong></P>

<FieldSelect
Expand Down
2 changes: 1 addition & 1 deletion src/routes/settings/Ollama.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@
});
</script>

<Fieldset>
<Fieldset context="settings">
<P><strong>Ollama</strong></P>
<FieldInput
name="server"
Expand Down
Loading

0 comments on commit f993d75

Please sign in to comment.