fix: general improvements to the UI (#169)

Closes #167 Closes #166 - [x] styling fixes for **Settings, MOTD, Errors** - [x] cleaned up styles for `<Fieldset>` --------- Co-authored-by: Fernando Maclen <[email protected]>
fmaclen · Sep 15, 2024 · f993d75 · f993d75
1 parent 39268e5
commit f993d75
Show file tree

Hide file tree

Showing 28 changed files with 464 additions and 1,361 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -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",
@@ -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",

diff --git a/src/lib/components/ButtonNew.svelte b/src/lib/components/ButtonNew.svelte
@@ -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"

diff --git a/src/lib/components/ButtonSubmit.svelte b/src/lib/components/ButtonSubmit.svelte
@@ -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;
@@ -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">

diff --git a/src/lib/components/Field.svelte b/src/lib/components/Field.svelte
@@ -39,7 +39,7 @@
 		}
 
 		&--text-editor {
-			@apply h-full overflow-y-auto;
+			@apply overflow-scrollbar h-full;
 		}
 	}
 

diff --git a/src/lib/components/FieldSelect.svelte b/src/lib/components/FieldSelect.svelte
@@ -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>
 
@@ -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) {

diff --git a/src/lib/components/FieldTextEditor.svelte b/src/lib/components/FieldTextEditor.svelte
@@ -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;

diff --git a/src/lib/components/Fieldset.svelte b/src/lib/components/Fieldset.svelte
@@ -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>
diff --git a/src/lib/components/Markdown.svelte b/src/lib/components/Markdown.svelte
@@ -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;
 	}
 

diff --git a/src/lib/components/Section.svelte b/src/lib/components/Section.svelte
@@ -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 {

diff --git a/src/lib/components/SectionList.svelte b/src/lib/components/SectionList.svelte
@@ -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>
diff --git a/src/lib/components/SectionListItem.svelte b/src/lib/components/SectionListItem.svelte
@@ -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;

diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
@@ -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>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -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">
@@ -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;
 	}
 
@@ -164,6 +177,6 @@
 	}
 
 	.layout__main {
-		@apply flex h-full w-full overflow-auto;
+		@apply overflow-scrollbar flex h-full w-full;
 	}
 </style>
diff --git a/src/routes/knowledge/[id]/+page.svelte b/src/routes/knowledge/[id]/+page.svelte
@@ -62,7 +62,7 @@
 		</svelte:fragment>
 	</Header>
 
-	<Fieldset isFullscreen={true}>
+	<Fieldset context="editor">
 		<FieldInput name="name" label={$LL.name()} bind:value={name} />
 
 		{#key knowledge}

diff --git a/src/routes/motd/+page.svelte b/src/routes/motd/+page.svelte
@@ -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>
diff --git a/src/routes/motd/motd.md b/src/routes/motd/motd.md
@@ -1,4 +1,4 @@
-`2024-9-10`
+`2024-9-15`
 
 ### Message of the day
 
@@ -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

diff --git a/src/routes/sessions/[id]/+page.svelte b/src/routes/sessions/[id]/+page.svelte
@@ -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 />
@@ -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 {
@@ -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 {

diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
@@ -11,7 +11,7 @@
 <Head title={$LL.settings()} />
 
 <section class="settings">
-	<div class="settings__container">
+	<div class="settings-fieldsets">
 		<Version />
 		<Ollama />
 		<Interface />
@@ -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>
diff --git a/src/routes/settings/DangerZone.svelte b/src/routes/settings/DangerZone.svelte
@@ -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()}

diff --git a/src/routes/settings/Interface.svelte b/src/routes/settings/Interface.svelte
@@ -17,7 +17,7 @@
 	}
 </script>
 
-<Fieldset>
+<Fieldset context="settings">
 	<P><strong>{$LL.interface()}</strong></P>
 
 	<FieldSelect

diff --git a/src/routes/settings/Ollama.svelte b/src/routes/settings/Ollama.svelte
@@ -113,7 +113,7 @@
 	});
 </script>
 
-<Fieldset>
+<Fieldset context="settings">
 	<P><strong>Ollama</strong></P>
 	<FieldInput
 		name="server"