Search improvements (#154)

* style: tables * feat(search): add history * fix: display issues * refactor(button): enable melt actions * feat(search): button to close dialog * feat(search): latest history at top * feat(search): add max length to history * refactor: table component * refactor: use links instead of buttons * chore: use barrel export for utils * style(search): add styled history items * style: add focus state styles
greymass · Oct 9, 2024 · d92b3eb · d92b3eb
1 parent 57b9693
commit d92b3eb
Show file tree

Hide file tree

Showing 37 changed files with 509 additions and 438 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -11,7 +11,8 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"clean": "rm -rf ./.svelte-kit ./node_modules ./src/paraglide",
 		"lint": "prettier --check . && eslint .",
-		"format": "prettier --write ."
+		"format": "prettier --write .",
+		"test": "bun test"
 	},
 	"devDependencies": {
 		"@inlang/paraglide-js": "1.11.2",
@@ -24,6 +25,7 @@
 		"@sveltejs/kit": "^2.5.18",
 		"@sveltejs/vite-plugin-svelte": "^3.1.1",
 		"@types/big.js": "^6.2.2",
+		"@types/bun": "^1.1.10",
 		"@types/eslint": "^8.56.11",
 		"autoprefixer": "^10.4.19",
 		"eslint": "^9.7.0",
@@ -44,6 +46,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@fontsource/jetbrains-mono": "^5.1.0",
 		"@tailwindcss/container-queries": "^0.1.1",
 		"@wharfkit/account": "^1.2.0",
 		"@wharfkit/account-creation-plugin-greymass": "^1.2.0",

diff --git a/src/app.css b/src/app.css
@@ -73,11 +73,45 @@
 		@apply flex flex-wrap gap-4;
 	}
 
+	/* table styles */
+	.table-styles {
+		@apply w-full table-auto overflow-x-auto;
+
+		thead tr {
+			@apply bg-none;
+		}
+
+		tr,
+		.table-row-styles {
+			@apply table-row-border table-row-background;
+		}
+
+		th,
+		.table-head-styles {
+			@apply py-1.5 pl-2 pr-2 text-left text-base font-medium text-mineShaft-200/60 first:pl-0 last:pr-0;
+		}
+
+		td,
+		.table-cell-styles {
+			@apply py-3 pl-2 pr-2 text-base first:pl-0 last:pr-0;
+		}
+	}
+}
+
+@layer utilities {
 	.px-page {
 		@apply px-4;
 	}
 
 	.mx-page {
 		@apply px-4;
 	}
+
+	.table-row-border {
+		@apply border-b border-neutral-300/10 last:border-none;
+	}
+
+	.table-row-background {
+		@apply bg-gradient-to-r from-transparent to-transparent odd:via-mineShaft-950 hover:via-skyBlue-500/10 data-[clickable=true]:cursor-pointer data-[active=true]:via-skyBlue-500/10 data-[hover-effect=false]:hover:via-transparent data-[hover-effect=false]:odd:hover:via-mineShaft-950;
+	}
 }
diff --git a/src/lib/components/button/button.svelte b/src/lib/components/button/button.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { emptyMeltElement, melt, type AnyMeltElement } from '@melt-ui/svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes, HTMLLinkAttributes } from 'svelte/elements';
 
@@ -13,11 +14,24 @@
 		class?: string;
 		children: Snippet;
 		onclick?: (event: MouseEvent) => void;
+		meltAction?: AnyMeltElement;
 	}
 
-	let { class: className = '', onclick, ...props }: ButtonProps = $props();
+	let {
+		class: className = '',
+		meltAction,
+		onclick,
+		variant = 'primary',
+		active = false,
+		disabled = false,
+		...props
+	}: ButtonProps = $props();
 
-	let ariaRole = props.href ? 'link' : 'button';
+	const ariaRole = props.href ? 'link' : 'button';
+	const tag = props.href ? 'a' : 'button';
+
+	// Only use melt builder element if passed as a prop
+	let meltElement = $derived(meltAction ?? emptyMeltElement);
 
 	let linkProps = $derived(() =>
 		props.href && props.blank
@@ -29,154 +43,47 @@
 	);
 </script>
 
-<!-- [@media(any-hover:hover)]:hover:opacity-80 -->
-
-{#if props.variant === 'pill'}
-	<svelte:element
-		this={props.href ? 'a' : 'button'}
-		data-active={props.active}
-		class="
-		relative
-		inline-flex
-		items-center
-		justify-center
-		text-nowrap
-		rounded-full
-		border-2
-		border-transparent
-
-		px-5
-		py-2
-		text-center
-		text-base
-		font-medium
-		leading-4
-
-		focus-visible:outline
-		focus-visible:outline-2
-		focus-visible:outline-solar-500
-
-		data-[active=true]:border-mineShaft-200/30
-
-		[@media(any-hover:hover)]:hover:text-mineShaft-100
-
-		{className}"
-		{onclick}
-		role={ariaRole}
-		{...props}
-		{...linkProps}
-	>
-		<span class="pointer-events-none relative z-10 text-inherit">{@render props.children()}</span>
-		<div
-			class="absolute inset-0 rounded-[inherit] bg-mineShaft-900 opacity-0
-			[@media(any-hover:hover)]:hover:opacity-100
-			[@media(any-hover:hover)]:active:opacity-20
-			[@media(any-hover:hover)]:active:transition-opacity"
-		></div>
-	</svelte:element>
-{:else if props.variant === 'secondary'}
-	<svelte:element
-		this={props.href ? 'a' : 'button'}
-		disabled={props.disabled}
-		class="
-		relative
-		flex
-		grow
-		items-center
-		justify-center
-		text-nowrap
-		rounded-lg
-		px-8
-		py-3.5
-		text-center
-		text-base
-		font-medium
-		text-mineShaft-100
-
-		ring-2
-		ring-inset
-		ring-mineShaft-600
-
-		hover:ring-transparent
-		focus-visible:outline
-		focus-visible:outline-transparent
-
-		focus-visible:ring-solar-500
-		active:ring-transparent
-
-		disabled:cursor-not-allowed
-		disabled:text-mineShaft-400
-		disabled:active:ring-mineShaft-600
+<svelte:element
+	this={tag}
+	use:melt={$meltElement}
+	data-active={active}
+	data-variant={variant}
+	class={className}
+	role={ariaRole}
+	{disabled}
+	{onclick}
+	{...props}
+	{...linkProps}
+>
+	<span class="button-text">{@render props.children()}</span>
+	<div class="button-backdrop" class:hidden={disabled}></div>
+</svelte:element>
+
+<style>
+	.button-text {
+		@apply pointer-events-none relative z-10 text-inherit;
+	}
 
-		{className}
-		"
-		{onclick}
-		role={ariaRole}
-		{...props}
-		{...linkProps}
-	>
-		<span class="pointer-events-none relative z-10">{@render props.children()}</span>
-		<div
-			class="absolute
-inset-0
-rounded-[inherit]
-bg-mineShaft-900
-opacity-0
-[@media(any-hover:hover)]:hover:opacity-100
-[@media(any-hover:hover)]:active:opacity-20
-[@media(any-hover:hover)]:active:transition-opacity"
-			class:hidden={props.disabled}
-		></div>
-	</svelte:element>
-{:else}
-	<svelte:element
-		this={props.href ? 'a' : 'button'}
-		disabled={props.disabled}
-		class="
-		relative
-		inline-flex
-		grow
-		items-center
-		justify-center
-		text-nowrap
-		rounded-lg
-		bg-skyBlue-500
-		px-8
-		py-3.5
-		text-center
-		text-base
-		font-medium
-		text-skyBlue-950
-		transition-all
+	[data-variant='pill'] {
+		@apply relative inline-flex items-center justify-center text-nowrap rounded-full border-2 border-transparent px-5 py-2 text-center text-base font-medium leading-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-solar-500 data-[active=true]:border-mineShaft-200/30 [@media(any-hover:hover)]:hover:text-mineShaft-100;
+	}
 
-		focus:outline-transparent
-		focus-visible:outline
-		focus-visible:ring-2
-		focus-visible:ring-inset
-		focus-visible:ring-solar-500
+	[data-variant='secondary'] {
+		@apply relative flex grow items-center justify-center text-nowrap rounded-lg px-8 py-3.5 text-center text-base font-medium text-mineShaft-100 ring-2 ring-inset ring-mineShaft-600 hover:ring-transparent focus-visible:outline focus-visible:outline-transparent focus-visible:ring-solar-500 active:ring-transparent disabled:cursor-not-allowed disabled:text-mineShaft-400 disabled:hover:ring-mineShaft-600 disabled:active:ring-mineShaft-600;
+	}
+	[data-variant='primary'] {
+		@apply relative inline-flex grow items-center justify-center text-nowrap rounded-lg bg-skyBlue-500 px-8 py-3.5 text-center text-base font-medium text-skyBlue-950 transition-all focus:outline-transparent focus-visible:outline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-solar-500 disabled:cursor-not-allowed disabled:bg-mineShaft-900 disabled:text-white/60;
+	}
 
-		disabled:cursor-not-allowed
-		disabled:bg-mineShaft-900
-		disabled:text-white/60
+	.button-backdrop {
+		@apply absolute inset-0 rounded-[inherit] opacity-0;
+	}
 
-		{className}
-		"
-		{onclick}
-		role={ariaRole}
-		{...props}
-		{...linkProps}
-	>
-		<span class="pointer-events-none relative z-10">{@render props.children()}</span>
-		<div
-			class="absolute
-inset-0
-rounded-[inherit]
-bg-white
-opacity-0
-transition-opacity
-active:bg-black/30
-			[@media(any-hover:hover)]:hover:opacity-20"
-			class:hidden={props.disabled}
-		></div>
-	</svelte:element>
-{/if}
+	[data-variant='pill'] .button-backdrop,
+	[data-variant='secondary'] .button-backdrop {
+		@apply bg-mineShaft-900 [@media(any-hover:hover)]:hover:opacity-100 [@media(any-hover:hover)]:active:opacity-20 [@media(any-hover:hover)]:active:transition-opacity;
+	}
+	[data-variant='primary'] .button-backdrop {
+		@apply bg-white transition-opacity active:bg-black/30 [@media(any-hover:hover)]:hover:opacity-20;
+	}
+</style>
diff --git a/src/lib/components/chart/barchart.svelte b/src/lib/components/chart/barchart.svelte
@@ -70,7 +70,7 @@
 	<canvas bind:this={ctx}></canvas>
 	<hr class="h-px border-0 bg-shark-200/50" />
 	<div class="flex items-center justify-between font-medium">
-		<span class="text-shark-200/70">{data.length} days</span>
+		<!-- <span class="text-shark-200/70">{String(data.length)} days</span> -->
 		<div class="flex gap-4">
 			<div class="flex items-center gap-1">
 				<div class="size-4 rounded bg-[#00ED97]"></div>

diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
@@ -4,7 +4,7 @@
 
 	const codeStyles = 'bg-shark-900/40 text-xs text-white font-mono rounded-md px-2 py-1';
 	const preStyles =
-		'bg-shark-900/20 text-sm text-white font-mono rounded-lg px-2 py-2 overflow-x-auto';
+		'bg-shark-900/20 text-sm text-white font-mono rounded-lg px-2 py-2 overflow-x-scroll';
 </script>
 
 <svelte:element this={tag} class={props.inline ? codeStyles : preStyles}>

diff --git a/src/lib/components/input/asset.svelte b/src/lib/components/input/asset.svelte
@@ -3,6 +3,7 @@
 	import type { ComponentProps } from 'svelte';
 	import TextInput from './text.svelte';
 	import Big from 'big.js';
+	import Code from '../code.svelte';
 
 	interface AssetInputProps extends ComponentProps<TextInput> {
 		min?: number;
@@ -129,26 +130,24 @@
 
 {#if debug}
 	<h3>Component State</h3>
-	<pre>
-
-input (string):   "{input}"
-input (number):   "{number}"
+	<!-- prettier-ignore -->
+	<Code>
+input (string): "{input}"
+input (number): "{number}"
 input (decimals): {decimals}
-input (min):      {min}
+input (min): {min}
 input (minUnits): {minUnits}
-input (max):      {max}
+input (max): {max}
 input (maxUnits): {maxUnits}
-token symbol:     {symbol}
-precision:        {symbol.precision}
-formatted:        {formatted}
-Asset:            {asset}
-
----
-
-Valid Input:       {satisfies}
-Valid Number:      {satisfiesNumber}
-Valid Precision:   {satisfiesPrecision}
-Valid Minimum:     {satisfiesMinimum}
-Valid Maximum:     {satisfiesMaximum}
-</pre>
+token symbol: {symbol}
+precision: {symbol.precision}
+formatted: {formatted}
+Asset: {asset}
+--- 
+Valid Input: {satisfies}
+Valid Number: {satisfiesNumber}
+Valid Precision: {satisfiesPrecision}
+Valid Minimum: {satisfiesMinimum}
+Valid Maximum: {satisfiesMaximum}
+	</Code>
 {/if}
diff --git a/src/lib/components/input/assetOrUnits.svelte b/src/lib/components/input/assetOrUnits.svelte
@@ -6,6 +6,7 @@
 	import Button from '../button/button.svelte';
 	import Cluster from '$lib/components/layout/cluster.svelte';
 	import Stack from '$lib/components/layout/stack.svelte';
+	import Code from '../code.svelte';
 
 	interface AssetOrUnitsProps extends ComponentProps<TextInput> {
 		assetValue: Asset;
@@ -85,12 +86,13 @@
 	{#if debug}
 		<div class="mt-4">
 			<h3>Component State</h3>
-			<pre>
-                Input Type: {format === 'asset' ? 'Asset' : 'Units'}
-                Asset Value: {assetValue}
-                Units Value: {unitsValue}
-                Symbol: {assetValue?.symbol.code}
-			</pre>
+			<!-- prettier-ignore -->
+			<Code>
+Input Type: {format === 'asset' ? 'Asset' : 'Units'}
+Asset Value: {assetValue}
+Units Value: {unitsValue}
+Symbol: {assetValue?.symbol.code}
+			</Code>
 		</div>
 	{/if}
 </div>