commit 22507a6ec3760d35a8fedb481d5518cd307b974c · ptr.pet/endpoint

+13 -18

src/components/_window_layout.svelte

···

       1
       1
        
       <script lang="ts">

     

       2
       2
       -
       	import Window from './window.svelte'

     

       3
       3
       -
       	import '../styles/app.css'

     

       2
       2
       +
       	import Window from './window.svelte';

     

       3
       3
       +
       	import '../styles/app.css';

     

       4
       4
        
       

     

       5
       5
       -
           interface Props {

     

       6
       6
       -
               title: any;

     

       7
       7
       -
               sticky: any;

     

       8
       8
       -
               prose?: boolean;

     

       9
       9
       -
               children?: import('svelte').Snippet;

     

       10
       10
       -
           }

     

       5
       5
       +
       	interface Props {

     

       6
       6
       +
       		title: string;

     

       7
       7
       +
       		sticky: boolean;

     

       8
       8
       +
       		prose?: boolean;

     

       9
       9
       +
       		children?: import('svelte').Snippet;

     

       10
       10
       +
       	}

     

       11
       11
        
       

     

       12
       12
       -
           let {

     

       13
       13
       -
               title,

     

       14
       14
       -
               sticky,

     

       15
       15
       -
               prose = true,

     

       16
       16
       -
               children

     

       17
       17
       -
           }: Props = $props();

     

       12
       12
       +
       	let { title, sticky, prose = true, children }: Props = $props();

     

       18
       13
        
       </script>

     

       19
       14
        
       

     

       20
       15
        
       <Window {title} {sticky}>

     

       21
       21
       -
           <div class="{prose ? "prose prose-ralsei leading-6 prose-ul:leading-5" : ""}">

     

       22
       22
       -
               {@render children?.()}

     

       23
       23
       -
           </div>

     

       24
       24
       -
       </Window>
     

       16
       16
       +
       	<div class={prose ? 'prose prose-ralsei leading-6 prose-ul:leading-5' : ''}>

     

       17
       17
       +
       		{@render children?.()}

     

       18
       18
       +
       	</div>

     

       19
       19
       +
       </Window>

+39 -25

src/components/window.svelte

···

       3
       3
        
       	import { draggable } from '@neodrag/svelte';

     

       4
       4
        
       

     

       5
       5
        
       	interface Props {

     

       6
       6
       -
       		title?: string | undefined;

     

       6
       6
       +
       		title?: string;

     

       7
       7
        
       		iconUri?: string;

     

       8
       8
        
       		id?: string;

     

       9
       9
        
       		sticky?: boolean;

     
···

       25
       25
        
       		removePadding = false,

     

       26
       26
        
       		center = false,

     

       27
       27
        
       		layered = false,

     

       28
       28
       -
       		style = "",

     

       28
       28
       +
       		style = '',

     

       29
       29
        
       		tooltip = false,

     

       30
       30
        
       		children

     

       31
       31
        
       	}: Props = $props();

     

       32
       32
        
       

     

       33
       33
        
       	const scaleKeyframes = [

     

       34
       34
       -
       		"window-open",

     

       35
       35
       -
       		"window-open-vertical",

     

       36
       36
       -
       		"window-open-vertical",

     

       37
       37
       -
       		"window-open-horizontal",

     

       38
       38
       -
       		"window-open-horizontal",

     

       39
       39
       -
       		"window-open-move-up",

     

       40
       40
       -
       		"window-open-move-down",

     

       41
       41
       -
       		"window-open-move-left",

     

       42
       42
       -
       		"window-open-move-right",

     

       34
       34
       +
       		'window-open',

     

       35
       35
       +
       		'window-open-vertical',

     

       36
       36
       +
       		'window-open-vertical',

     

       37
       37
       +
       		'window-open-horizontal',

     

       38
       38
       +
       		'window-open-horizontal',

     

       39
       39
       +
       		'window-open-move-up',

     

       40
       40
       +
       		'window-open-move-down',

     

       41
       41
       +
       		'window-open-move-left',

     

       42
       42
       +
       		'window-open-move-right'

     

       43
       43
        
       	];

     

       44
       44
       -
       	let chosenKeyframe = $derived(scaleKeyframes.at(Math.floor(Math.random() * scaleKeyframes.length)))

     

       44
       44
       +
       	let chosenKeyframe = $derived(

     

       45
       45
       +
       		scaleKeyframes.at(Math.floor(Math.random() * scaleKeyframes.length))

     

       46
       46
       +
       	);

     

       45
       47
        
       

     

       46
       46
       -
       	const isOnMobile = isMobile()

     

       48
       48
       +
       	const isOnMobile = isMobile();

     

       47
       49
        
       	const _draggable = isOnMobile ? () => {} : draggable;

     

       48
       50
        
       

     

       49
       51
        
       	const focusWindow = (node: HTMLElement) => {

     

       50
       50
       -
       		$highestZIndex += 1

     

       51
       51
       -
       		node.style.zIndex = $highestZIndex.toString()

     

       52
       52
       -
       	}

     

       52
       52
       +
       		$highestZIndex += 1;

     

       53
       53
       +
       		node.style.zIndex = $highestZIndex.toString();

     

       54
       54
       +
       	};

     

       53
       55
        
       </script>

     

       54
       56
        
       

     

       55
       57
        
       <!-- svelte-ignore a11y_no_static_element_interactions -->

     
···

       59
       61
        
       		disabled: isOnMobile,

     

       60
       62
        
       		applyUserSelectHack: true,

     

       61
       63
        
       		handle: '.window-titlebar',

     

       62
       62
       -
       		onDragStart: (data) => {focusWindow(data.currentNode)},

     

       64
       64
       +
       		onDragStart: (data) => {

     

       65
       65
       +
       			focusWindow(data.currentNode);

     

       66
       66
       +
       		}

     

       63
       67
        
       	}}

     

       64
       64
       -
       	onclick={(data) => {focusWindow(data.currentTarget)}}

     

       68
       68
       +
       	onclick={(data) => {

     

       69
       69
       +
       		focusWindow(data.currentTarget);

     

       70
       70
       +
       	}}

     

       65
       71
        
       	class="

     

       66
       66
       -
               relative {layered ? "col-[1] row-[1]" : ""} flex flex-col {sticky ? 'md:sticky md:-top-9' : ''} {center ? "mx-auto" : ""}

     

       67
       67
       -
               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]

     

       68
       68
       -
       		bg-ralsei-black border-ralsei-white border-ridge {tooltip ? "border-[6px] border-t-[9px]" : "border-8 border-t-[12px]"}

     

       72
       72
       +
               relative {layered ? 'col-[1] row-[1]' : ''} flex flex-col {sticky

     

       73
       73
       +
       		? 'md:sticky md:-top-9'

     

       74
       74
       +
       		: ''} {center ? 'mx-auto' : ''}

     

       75
       75
       +
               max-w-screen-md xl:max-w-screen-lg 2xl:max-w-screen-xl {tooltip

     

       76
       76
       +
       		? 'min-w-fit'

     

       77
       77
       +
       		: 'min-w-[30ch] lg:min-w-[40ch]'} w-full md:w-fit [height:fit-content]

     

       78
       78
       +
       		bg-ralsei-black border-ralsei-white border-ridge {tooltip

     

       79
       79
       +
       		? 'border-[6px] border-t-[9px]'

     

       80
       80
       +
       		: 'border-8 border-t-[12px]'}

     

       69
       81
        
       		animate-{chosenKeyframe} drop-shadow-[24px_24px_24px_rgba(1,1,1,0.8)]

     

       70
       82
        
       		{style}

     

       71
       83
        
           "

     
···

       76
       88
        
       			class="

     

       77
       89
        
       				window-titlebar p-1 border-ralsei-white border-8

     

       78
       90
        
       				bg-gradient-to-l from-ralsei-pink-neon to-ralsei-black to-75%

     

       79
       79
       -
       				{!isOnMobile ? "cursor-move" : ""}

     

       91
       91
       +
       				{!isOnMobile ? 'cursor-move' : ''}

     

       80
       92
        
       			"

     

       81
       93
        
       			style="border-style: hidden hidden ridge hidden;"

     

       82
       94
        
       		>

     
···

       100
       112
        
       			</div>

     

       101
       113
        
       		</div>

     

       102
       114
        
       	{/if}

     

       103
       103
       -
       	<div class="

     

       104
       104
       -
       		{removePadding ? "" : tooltip ? "p-1" : "p-2"} bg-gradient-to-tl

     

       115
       115
       +
       	<div

     

       116
       116
       +
       		class="

     

       117
       117
       +
       		{removePadding ? '' : tooltip ? 'p-1' : 'p-2'} bg-gradient-to-tl

     

       105
       118
        
       		to-ralsei-pink-neon/15 from-ralsei-pink-regular/20

     

       106
       106
       -
       	">

     

       119
       119
       +
       	"

     

       120
       120
       +
       	>

     

       107
       121
        
       		{@render children?.()}

     

       108
       122
        
       	</div>

     

       109
       123
        
       </div>