Cossale/kepler-chat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

betterb titles

Browse source
This commit is contained in:
Thomas G. Lopes 2025-06-17 01:01:32 +01:00
parent 872b4b3cba
commit 7535e54477
2 changed files with 51 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/app.css
View file

@ -32,13 +32,16 @@
--chart-3: oklch(0.379 0.0438 226.1538);
--chart-4: oklch(0.833 0.1185 88.3461);
--chart-5: oklch(0.7843 0.1256 58.9964);
--sidebar: oklch(0.936 0.0288 320.5788);
--sidebar-foreground: oklch(0.4948 0.1909 354.5435);
--sidebar-primary: oklch(0.3963 0.0251 285.1962);
--sidebar-primary-foreground: oklch(0.9668 0.0124 337.5228);
--sidebar-accent: oklch(0.9789 0.0013 106.4235);
--sidebar-accent-foreground: oklch(0.3963 0.0251 285.1962);
--sidebar-border: oklch(0.9383 0.0026 48.7178);
/* Subtle blue shift for sidebar colors in light mode */
--sidebar: oklch(0.936 0.0288 280); /* Original hue 320.5788 -> 280 (more blue) */
--sidebar-foreground: oklch(0.4948 0.1909 285); /* Original hue 354.5435 -> 285 */
--sidebar-primary: oklch(0.3963 0.0251 270); /* Original hue 285.1962 -> 270 */
--sidebar-primary-foreground: oklch(
0.9668 0.0124 337.5228
); /* No change, keep white/near white */
--sidebar-accent: oklch(0.9789 0.0013 280); /* Original hue 106.4235 -> 280 */
--sidebar-accent-foreground: oklch(0.3963 0.0251 270); /* Original hue 285.1962 -> 270 */
--sidebar-border: oklch(0.9383 0.0026 280); /* Original hue 48.7178 -> 280 */
--sidebar-ring: oklch(0.5916 0.218 0.5844);
--radius: 0.5rem;
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
@ -76,13 +79,14 @@
--chart-3: oklch(0.7227 0.1502 60.5799);
--chart-4: oklch(0.6193 0.2029 312.7422);
--chart-5: oklch(0.6118 0.2093 6.1387);
--sidebar: oklch(0.1893 0.0163 331.0475);
--sidebar-foreground: oklch(0.8607 0.0293 343.6612);
--sidebar-primary: oklch(0.4882 0.2172 264.3763);
--sidebar-primary-foreground: oklch(1 0 0);
--sidebar-accent: oklch(0.2337 0.0261 338.1961);
--sidebar-accent-foreground: oklch(0.9674 0.0013 286.3752);
--sidebar-border: oklch(0 0 0);
/* Subtle blue shift for sidebar colors in dark mode */
--sidebar: oklch(0.1693 0.0143 280); /* Original hue 331.0475 -> 260 */
--sidebar-foreground: oklch(0.8607 0.0293 265); /* Original hue 343.6612 -> 265 */
--sidebar-primary: oklch(0.4882 0.2172 250); /* Original hue 264.3763 -> 250 */
--sidebar-primary-foreground: oklch(1 0 0); /* No change, keep white */
--sidebar-accent: oklch(0.2337 0.0261 260); /* Original hue 338.1961 -> 260 */
--sidebar-accent-foreground: oklch(0.9674 0.0013 250); /* Original hue 286.3752 -> 250 */
--sidebar-border: oklch(0 0 0); /* No change, keep black */
--sidebar-ring: oklch(0.5797 0.1194 237.7893);
--radius: 0.5rem;
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
@ -449,3 +453,8 @@
opacity: var(--opacity, 1);
}
}
@utility abs-y-center {
top: 50%;
transform: translateY(-50%);
}

30
src/routes/chat/+layout.svelte
View file

@ -7,6 +7,8 @@
import { isString } from '$lib/utils/is.js';
import { Avatar } from 'melt/components';
import PanelLeftIcon from '~icons/lucide/panel-left';
import PinIcon from '~icons/lucide/pin';
import XIcon from '~icons/lucide/x';
import SendIcon from '~icons/lucide/send';
import { callGenerateMessage } from '../api/generate-message/call.js';
import ModelPicker from './model-picker.svelte';
@ -15,6 +17,7 @@
import { useCachedQuery } from '$lib/cache/cached-query.svelte.js';
import { api } from '$lib/backend/convex/_generated/api.js';
import { TextareaAutosize } from '$lib/spells/textarea-autosize.svelte.js';
import Tooltip from '$lib/components/ui/tooltip.svelte';
let { data, children } = $props();
@ -70,10 +73,33 @@
</div>
<div class="flex flex-1 flex-col overflow-y-auto py-2">
{#each conversationsQuery.data ?? [] as conversation (conversation._id)}
<a href={`/chat/${conversation._id}`} class="group py-0.5 pr-2.5 text-left text-sm">
<p class="group-hover:bg-muted rounded-md py-1.5 pl-3">
<a
href={`/chat/${conversation._id}`}
class="group relative overflow-clip py-0.5 pr-2.5 text-left text-sm"
>
<p class="group-hover:bg-sidebar-accent rounded-md py-1.5 pl-3">
{conversation.title}
</p>
<div
class=" to-sidebar-accent pointer-events-none absolute inset-y-0 right-0 flex translate-x-full items-center gap-2 rounded-r-lg bg-gradient-to-r from-transparent pr-2 transition group-hover:pointer-events-auto group-hover:translate-0"
>
<Tooltip>
{#snippet trigger(tooltip)}
<button {...tooltip.trigger} class="hover:bg-muted rounded-md p-1">
<PinIcon class="size-4" />
</button>
{/snippet}
Pin
</Tooltip>
<Tooltip>
{#snippet trigger(tooltip)}
<button {...tooltip.trigger} class="hover:bg-muted rounded-md p-1">
<XIcon class="size-4" />
</button>
{/snippet}
Delete
</Tooltip>
</div>
</a>
{/each}
</div>