feat: complete re-design, responsive UI & dark mode #70
Conversation
fmaclen
changed the title
|
Nice work, @fmaclen! 👍 🥳 I really like that you're adding in a toggle for "Auto Scroll"! The current version of Hollama's auto scroll is problematic if you try scrolling up while the LLM is still generating text. It also looks like you've added support for multiple knowledges/contexts (based on the screenshots above), so maybe #73 is unnecessary? On another note, it'd be great to add in a "Moon" icon button to the menu that will toggle dark/light mode. From the screenshots, I'm guessing you've added this into the "Settings" page. Here are a couple of examples: Moon icon in light mode: Sun icon in dark mode: |
Deploying hollama with
|
| Latest commit: |
a938cc2
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://5552bff3.hollama.pages.dev |
| Branch Preview URL: | https://ui-redesign.hollama.pages.dev |
|
@raychz thanks! The screenshots I included include a bunch of long-term plans, I'm not planning on this PR implementing a big chunk of it. Here's a demo of the PR so far if you want to test-drive it: https://ui-redesign.hollama.pages.dev/settings
Yeah, it's a bit broken. I essentially want it to be the behavior to be more predictable, more or less like Claude/ChatGPT #13
No, it is necessary! 💯
Yup, you can see that in the demo linked above. I added it on the sidebar for now but I think it should look different than the other buttons. I'll likely add a separate issue for that. |
| function toggleTheme() { | ||
| theme = theme === 'light' ? 'dark' : 'light'; | ||
| document.documentElement.setAttribute('data-color-theme', theme); | ||
| } | ||
|
|
||
| onMount(() => { | ||
| // Set initial theme based on user's browser preference | ||
| const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; | ||
| theme = prefersDark ? 'dark' : 'light'; | ||
| document.documentElement.setAttribute('data-color-theme', theme); | ||
| }); |
| // FIXME: This behavior may belong in hooks.client.ts | ||
| beforeUpdate(() => { | ||
| if (!$settingsStore?.ollamaServer) { | ||
| // FIXME: | ||
| // This should only rediect to /settings if the server is not connected | ||
| goto('/settings'); | ||
| } else { | ||
| goto('/sessions'); |
|
🎉 This PR is included in version 0.3.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
Closes #12
Closes #14
These designs are still a moving target but I've more or less settled with this layout: