refac: styling

This commit is contained in:
Timothy Jaeryang Baek
2025-01-13 19:18:32 -08:00
parent 147eb0d2d1
commit f299e19002
10 changed files with 113 additions and 19 deletions

View File

@@ -233,7 +233,7 @@
<div class="app relative">
<div
class=" text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-900 h-screen max-h-[100dvh] overflow-auto flex flex-row"
class=" text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-900 h-screen max-h-[100dvh] overflow-auto flex flex-row justify-end"
>
{#if loaded}
{#if !['user', 'admin'].includes($user.role)}

View File

@@ -26,13 +26,13 @@
{#if loaded}
<div
class=" flex flex-col w-full min-h-screen max-h-screen {$showSidebar
class=" flex flex-col w-full min-h-screen max-h-screen transition-width duration-300 ease-in-out {$showSidebar
? 'md:max-w-[calc(100%-260px)]'
: ''}"
: ''} max-w-full"
>
<nav class=" px-2.5 pt-1 backdrop-blur-xl drag-region">
<div class=" flex items-center gap-1">
<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center">
<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center self-end">
<button
id="sidebar-toggle-button"
class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"

View File

@@ -16,13 +16,13 @@
</svelte:head>
<div
class=" flex flex-col w-full h-screen max-h-[100dvh] {$showSidebar
class=" flex flex-col w-full h-screen max-h-[100dvh] transition-width duration-300 ease-in-out {$showSidebar
? 'md:max-w-[calc(100%-260px)]'
: ''}"
: ''} max-w-full"
>
<nav class=" px-2.5 pt-1 backdrop-blur-xl w-full drag-region">
<div class=" flex items-center">
<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center">
<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center self-end">
<button
id="sidebar-toggle-button"
class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"

View File

@@ -51,13 +51,13 @@
{#if loaded}
<div
class=" relative flex flex-col w-full h-screen max-h-[100dvh] {$showSidebar
class=" relative flex flex-col w-full h-screen max-h-[100dvh] transition-width duration-300 ease-in-out {$showSidebar
? 'md:max-w-[calc(100%-260px)]'
: ''}"
: ''} max-w-full"
>
<nav class=" px-2.5 pt-1 backdrop-blur-xl drag-region">
<div class=" flex items-center gap-1">
<div class="{$showSidebar ? 'md:hidden' : ''} self-center flex flex-none items-center">
<div class="{$showSidebar ? 'md:hidden' : ''} self-end flex flex-none items-center">
<button
id="sidebar-toggle-button"
class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"

View File

@@ -22,7 +22,9 @@
currentChatPage,
tags,
temporaryChatEnabled,
isLastActiveTab
isLastActiveTab,
isApp,
appVersion
} from '$lib/stores';
import { goto } from '$app/navigation';
import { page } from '$app/stores';
@@ -41,6 +43,7 @@
import { bestMatchingLanguage } from '$lib/utils';
import { getAllTags, getChatList } from '$lib/apis/chats';
import NotificationToast from '$lib/components/NotificationToast.svelte';
import AppControls from '$lib/components/app/AppControls.svelte';
setContext('i18n', i18n);
@@ -177,6 +180,17 @@
};
onMount(async () => {
if (window?.electronAPI) {
const res = await window.electronAPI.send({
type: 'version'
});
if (res) {
isApp.set(true);
appVersion.set(res.version);
}
}
// Listen for messages on the BroadcastChannel
bc.onmessage = (event) => {
if (event.data === 'active') {
@@ -324,7 +338,17 @@
</svelte:head>
{#if loaded}
<slot />
{#if $isApp}
<div class="flex flex-row h-screen">
<AppControls />
<div class="w-full flex-1">
<slot />
</div>
</div>
{:else}
<slot />
{/if}
{/if}
<Toaster