From 22507a6ec3760d35a8fedb481d5518cd307b974c Mon Sep 17 00:00:00 2001
From: dusk <y.bera003.06@protonmail.com>
Date: Wed, 2 Apr 2025 05:24:31 +0300
Subject: [PATCH] refactor: smol changes
---
src/components/_window_layout.svelte | 31 ++++++--------
src/components/window.svelte | 64 +++++++++++++++++-----------
2 files changed, 52 insertions(+), 43 deletions(-)
diff --git a/src/components/_window_layout.svelte b/src/components/_window_layout.svelte
index 1da5a2a..c630207 100644
--- a/src/components/_window_layout.svelte
+++ b/src/components/_window_layout.svelte
@@ -1,24 +1,19 @@
<script lang="ts">
- import Window from './window.svelte'
- import '../styles/app.css'
+ import Window from './window.svelte';
+ import '../styles/app.css';
- interface Props {
- title: any;
- sticky: any;
- prose?: boolean;
- children?: import('svelte').Snippet;
- }
+ interface Props {
+ title: string;
+ sticky: boolean;
+ prose?: boolean;
+ children?: import('svelte').Snippet;
+ }
- let {
- title,
- sticky,
- prose = true,
- children
- }: Props = $props();
+ let { title, sticky, prose = true, children }: Props = $props();
</script>
<Window {title} {sticky}>
- <div class="{prose ? "prose prose-ralsei leading-6 prose-ul:leading-5" : ""}">
- {@render children?.()}
- </div>
-</Window>
\ No newline at end of file
+ <div class={prose ? 'prose prose-ralsei leading-6 prose-ul:leading-5' : ''}>
+ {@render children?.()}
+ </div>
+</Window>
diff --git a/src/components/window.svelte b/src/components/window.svelte
index 13791a9..1737fd0 100644
--- a/src/components/window.svelte
+++ b/src/components/window.svelte
@@ -3,7 +3,7 @@
import { draggable } from '@neodrag/svelte';
interface Props {
- title?: string | undefined;
+ title?: string;
iconUri?: string;
id?: string;
sticky?: boolean;
@@ -25,31 +25,33 @@
removePadding = false,
center = false,
layered = false,
- style = "",
+ style = '',
tooltip = false,
children
}: Props = $props();
const scaleKeyframes = [
- "window-open",
- "window-open-vertical",
- "window-open-vertical",
- "window-open-horizontal",
- "window-open-horizontal",
- "window-open-move-up",
- "window-open-move-down",
- "window-open-move-left",
- "window-open-move-right",
+ 'window-open',
+ 'window-open-vertical',
+ 'window-open-vertical',
+ 'window-open-horizontal',
+ 'window-open-horizontal',
+ 'window-open-move-up',
+ 'window-open-move-down',
+ 'window-open-move-left',
+ 'window-open-move-right'
];
- let chosenKeyframe = $derived(scaleKeyframes.at(Math.floor(Math.random() * scaleKeyframes.length)))
+ let chosenKeyframe = $derived(
+ scaleKeyframes.at(Math.floor(Math.random() * scaleKeyframes.length))
+ );
- const isOnMobile = isMobile()
+ const isOnMobile = isMobile();
const _draggable = isOnMobile ? () => {} : draggable;
const focusWindow = (node: HTMLElement) => {
- $highestZIndex += 1
- node.style.zIndex = $highestZIndex.toString()
- }
+ $highestZIndex += 1;
+ node.style.zIndex = $highestZIndex.toString();
+ };
</script>
<!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -59,13 +61,23 @@
disabled: isOnMobile,
applyUserSelectHack: true,
handle: '.window-titlebar',
- onDragStart: (data) => {focusWindow(data.currentNode)},
+ onDragStart: (data) => {
+ focusWindow(data.currentNode);
+ }
+ }}
+ onclick={(data) => {
+ focusWindow(data.currentTarget);
}}
- onclick={(data) => {focusWindow(data.currentTarget)}}
class="
- relative {layered ? "col-[1] row-[1]" : ""} flex flex-col {sticky ? 'md:sticky md:-top-9' : ''} {center ? "mx-auto" : ""}
- max-w-screen-md xl:max-w-screen-lg 2xl:max-w-screen-xl {tooltip ? "min-w-fit" : "min-w-[30ch] lg:min-w-[40ch]"} w-full md:w-fit [height:fit-content]
- bg-ralsei-black border-ralsei-white border-ridge {tooltip ? "border-[6px] border-t-[9px]" : "border-8 border-t-[12px]"}
+ relative {layered ? 'col-[1] row-[1]' : ''} flex flex-col {sticky
+ ? 'md:sticky md:-top-9'
+ : ''} {center ? 'mx-auto' : ''}
+ max-w-screen-md xl:max-w-screen-lg 2xl:max-w-screen-xl {tooltip
+ ? 'min-w-fit'
+ : 'min-w-[30ch] lg:min-w-[40ch]'} w-full md:w-fit [height:fit-content]
+ bg-ralsei-black border-ralsei-white border-ridge {tooltip
+ ? 'border-[6px] border-t-[9px]'
+ : 'border-8 border-t-[12px]'}
animate-{chosenKeyframe} drop-shadow-[24px_24px_24px_rgba(1,1,1,0.8)]
{style}
"
@@ -76,7 +88,7 @@
class="
window-titlebar p-1 border-ralsei-white border-8
bg-gradient-to-l from-ralsei-pink-neon to-ralsei-black to-75%
- {!isOnMobile ? "cursor-move" : ""}
+ {!isOnMobile ? 'cursor-move' : ''}
"
style="border-style: hidden hidden ridge hidden;"
>
@@ -100,10 +112,12 @@
</div>
</div>
{/if}
- <div class="
- {removePadding ? "" : tooltip ? "p-1" : "p-2"} bg-gradient-to-tl
+ <div
+ class="
+ {removePadding ? '' : tooltip ? 'p-1' : 'p-2'} bg-gradient-to-tl
to-ralsei-pink-neon/15 from-ralsei-pink-regular/20
- ">
+ "
+ >
{@render children?.()}
</div>
</div>