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

noisy bg

Browse source
This commit is contained in:
Thomas G. Lopes 2025-06-19 00:04:40 +01:00
parent afef01f0cf
commit 3df022e16a
7 changed files with 12 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/app.css
View file

@ -68,7 +68,7 @@
--secondary-foreground: oklch(0.8483 0.0382 307.9613);
--muted: oklch(0.3234 0.0419 257.4748);
--muted-foreground: oklch(0.794 0.0372 307.1032);
--accent: oklch(0.3649 0.0508 308.4911);
--accent: oklch(0.3649 0.0408 290.4911);
--accent-foreground: oklch(0.9647 0.0091 341.8035);
--destructive: oklch(0.5248 0.1368 20.8317);
--destructive-foreground: oklch(1 0 0);
@ -218,7 +218,7 @@
}
body {
@apply bg-background text-foreground;
@apply bg-background text-foreground bg-noise;
}
}
@ -476,6 +476,13 @@
transform: translateX(-50%);
}
@utility bg-noise {
background-image: url(/images/noise.png);
background-size: auto;
background-repeat: repeat;
background-size: 96px 96px;
}
/* Copy button */
pre:has(code) {
position: relative;

10
src/app.html
View file

@ -8,16 +8,6 @@
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<script>
// check mode-watcher-mode variable, set body bg accordingly
// TODO: make this smarter pls
const mode = localStorage.getItem('mode-watcher-mode');
if (mode === 'dark') {
document.body.style.backgroundColor = 'oklch(0.2409 0.0201 307.5346)';
} else {
// document.body.style.backgroundColor = 'oklch(0.99 0.005 280)';
}
</script>
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

44
src/lib/components/ui/code-block/code-block.svelte
View file

@ -1,44 +0,0 @@
<script lang="ts">
import { Button } from '$lib/components/ui/button';
import { UseClipboard } from '$lib/hooks/use-clipboard.svelte';
import { cn } from '$lib/utils/utils';
import CheckIcon from '~icons/lucide/check';
import CopyIcon from '~icons/lucide/copy';
import { scale } from 'svelte/transition';
interface Props {
code: string;
language?: string;
class?: string;
}
let { code, language, class: className }: Props = $props();
const clipboard = new UseClipboard();
function copyCode() {
clipboard.copy(code);
}
</script>
<div class={cn('group relative', className)}>
<div class="absolute top-2 right-2 z-10">
<Button
variant="ghost"
size="sm"
class="size-8 p-0 opacity-0 transition-opacity group-hover:opacity-100"
onclick={copyCode}
>
{#if clipboard.status === 'success'}
<div in:scale={{ duration: 200, start: 0.8 }}>
<CheckIcon class="size-3.5" />
</div>
{:else}
<CopyIcon class="size-3.5" />
{/if}
<span class="sr-only">Copy code</span>
</Button>
</div>
<slot />
</div>

1
src/lib/components/ui/code-block/index.ts
View file

@ -1 +0,0 @@
export { default as CodeBlock } from './code-block.svelte';

2
src/lib/components/ui/sidebar/sidebar-inset.svelte
View file

@ -5,6 +5,6 @@
let { class: className, children, ...rest }: HTMLAttributes<HTMLDivElement> = $props();
</script>
<div {...rest} class={cn('bg-background col-start-2 h-screen', className)}>
<div {...rest} class={cn('bg-background bg-noise col-start-2 h-screen', className)}>
{@render children?.()}
</div>

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

@ -537,7 +537,6 @@
{/snippet}
Search ({cmdOrCtrl} + K)
</Tooltip>
<SearchModal bind:open={searchModalOpen} />
<Tooltip>
{#snippet trigger(tooltip)}
<Button variant="ghost" size="icon" class="size-8" href="/account" {...tooltip.trigger}>
@ -808,3 +807,5 @@
fileName={imageModal.fileName}
/>
</Sidebar.Root>
<SearchModal bind:open={searchModalOpen} />

BIN
static/images/noise.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 16 KiB