mejorar diseño

sepa/sitio2/package.json

@@ -41,6 +41,7 @@
 	"type": "module",
 	"dependencies": {
 		"@types/node": "^22.5.0",
+		"bits-ui": "^0.21.13",
 		"clsx": "^2.1.1",
 		"drizzle-orm": "^0.33.0",
 		"leaflet": "^1.9.4",

sepa/sitio2/src/lib/components/SearchBar.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Input } from '$lib/components/ui/input';
+	import { Button } from '$lib/components/ui/button';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+
+	let search = $page.params.query ?? '';
+
+	function handleSubmit() {
+		goto(`/search/${encodeURIComponent(search)}`);
+	}
+</script>
+
+<form class="flex gap-2" on:submit|preventDefault={handleSubmit}>
+	<Input placeholder="Buscar productos" bind:value={search} />
+	<Button>Buscar</Button>
+</form>

sepa/sitio2/src/lib/components/ui/badge/badge.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { type Variant, badgeVariants } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	let className: string | undefined | null = undefined;
+	export let href: string | undefined = undefined;
+	export let variant: Variant = "default";
+	export { className as class };
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	{href}
+	class={cn(badgeVariants({ variant, className }))}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>

sepa/sitio2/src/lib/components/ui/badge/index.ts

@@ -0,0 +1,21 @@
+import { type VariantProps, tv } from "tailwind-variants";
+export { default as Badge } from "./badge.svelte";
+
+export const badgeVariants = tv({
+	base: "focus:ring-ring inline-flex select-none items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/80 border-transparent",
+			secondary:
+				"bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
+			destructive:
+				"bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
+			outline: "text-foreground",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+
+export type Variant = VariantProps<typeof badgeVariants>["variant"];

sepa/sitio2/src/lib/components/ui/button/button.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Button as ButtonPrimitive } from "bits-ui";
+	import { type Events, type Props, buttonVariants } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = Props;
+	type $$Events = Events;
+
+	let className: $$Props["class"] = undefined;
+	export let variant: $$Props["variant"] = "default";
+	export let size: $$Props["size"] = "default";
+	export let builders: $$Props["builders"] = [];
+	export { className as class };
+</script>
+
+<ButtonPrimitive.Root
+	{builders}
+	class={cn(buttonVariants({ variant, size, className }))}
+	type="button"
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<slot />
+</ButtonPrimitive.Root>

sepa/sitio2/src/lib/components/ui/button/index.ts

@@ -0,0 +1,49 @@
+import { type VariantProps, tv } from "tailwind-variants";
+import type { Button as ButtonPrimitive } from "bits-ui";
+import Root from "./button.svelte";
+
+const buttonVariants = tv({
+	base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/90",
+			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+			outline:
+				"border-input bg-background hover:bg-accent hover:text-accent-foreground border",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			ghost: "hover:bg-accent hover:text-accent-foreground",
+			link: "text-primary underline-offset-4 hover:underline",
+		},
+		size: {
+			default: "h-10 px-4 py-2",
+			sm: "h-9 rounded-md px-3",
+			lg: "h-11 rounded-md px-8",
+			icon: "h-10 w-10",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+	},
+});
+
+type Variant = VariantProps<typeof buttonVariants>["variant"];
+type Size = VariantProps<typeof buttonVariants>["size"];
+
+type Props = ButtonPrimitive.Props & {
+	variant?: Variant;
+	size?: Size;
+};
+
+type Events = ButtonPrimitive.Events;
+
+export {
+	Root,
+	type Props,
+	type Events,
+	//
+	Root as Button,
+	type Props as ButtonProps,
+	type Events as ButtonEvents,
+	buttonVariants,
+};

sepa/sitio2/src/lib/components/ui/card/card-content.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("p-6 pt-0", className)} {...$$restProps}>
+	<slot />
+</div>

sepa/sitio2/src/lib/components/ui/card/card-description.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLParagraphElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<p class={cn("text-muted-foreground text-sm", className)} {...$$restProps}>
+	<slot />
+</p>

sepa/sitio2/src/lib/components/ui/card/card-footer.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex items-center p-6 pt-0", className)} {...$$restProps}>
+	<slot />
+</div>

sepa/sitio2/src/lib/components/ui/card/card-header.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex flex-col space-y-1.5 p-6", className)} {...$$restProps}>
+	<slot />
+</div>

sepa/sitio2/src/lib/components/ui/card/card-title.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { HeadingLevel } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
+		tag?: HeadingLevel;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let tag: $$Props["tag"] = "h3";
+	export { className as class };
+</script>
+
+<svelte:element
+	this={tag}
+	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>

sepa/sitio2/src/lib/components/ui/card/card.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn("bg-card text-card-foreground rounded-lg border shadow-sm", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>

sepa/sitio2/src/lib/components/ui/card/index.ts

@@ -0,0 +1,24 @@
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+
+export {
+	Root,
+	Content,
+	Description,
+	Footer,
+	Header,
+	Title,
+	//
+	Root as Card,
+	Content as CardContent,
+	Description as CardDescription,
+	Footer as CardFooter,
+	Header as CardHeader,
+	Title as CardTitle,
+};
+
+export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";

sepa/sitio2/src/lib/components/ui/input/index.ts

@@ -0,0 +1,29 @@
+import Root from "./input.svelte";
+
+export type FormInputEvent<T extends Event = Event> = T & {
+	currentTarget: EventTarget & HTMLInputElement;
+};
+export type InputEvents = {
+	blur: FormInputEvent<FocusEvent>;
+	change: FormInputEvent<Event>;
+	click: FormInputEvent<MouseEvent>;
+	focus: FormInputEvent<FocusEvent>;
+	focusin: FormInputEvent<FocusEvent>;
+	focusout: FormInputEvent<FocusEvent>;
+	keydown: FormInputEvent<KeyboardEvent>;
+	keypress: FormInputEvent<KeyboardEvent>;
+	keyup: FormInputEvent<KeyboardEvent>;
+	mouseover: FormInputEvent<MouseEvent>;
+	mouseenter: FormInputEvent<MouseEvent>;
+	mouseleave: FormInputEvent<MouseEvent>;
+	mousemove: FormInputEvent<MouseEvent>;
+	paste: FormInputEvent<ClipboardEvent>;
+	input: FormInputEvent<InputEvent>;
+	wheel: FormInputEvent<WheelEvent>;
+};
+
+export {
+	Root,
+	//
+	Root as Input,
+};

sepa/sitio2/src/lib/components/ui/input/input.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import type { InputEvents } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLInputAttributes;
+	type $$Events = InputEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"] = undefined;
+	export { className as class };
+
+	// Workaround for https://github.com/sveltejs/svelte/issues/9305
+	// Fixed in Svelte 5, but not backported to 4.x.
+	export let readonly: $$Props["readonly"] = undefined;
+</script>
+
+<input
+	class={cn(
+		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:value
+	{readonly}
+	on:blur
+	on:change
+	on:click
+	on:focus
+	on:focusin
+	on:focusout
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:mousemove
+	on:paste
+	on:input
+	on:wheel|passive
+	{...$$restProps}
+/>

sepa/sitio2/src/routes/+layout.svelte

@@ -1,5 +1,16 @@
 <script>
+	// import { cubicIn, cubicOut } from 'svelte/easing';
 	import '../app.css';
+	// import { fly } from 'svelte/transition';
+
+	export let data;
 </script>
 
-<slot></slot>
+<!-- {#key data.pathname}
+	<div
+		in:fly={{ easing: cubicOut, x: 10, duration: 150, delay: 300 }}
+		out:fly={{ easing: cubicIn, x: -10, duration: 150 }}
+	> -->
+<slot />
+<!-- </div>
+{/key} -->

sepa/sitio2/src/routes/+layout.ts

@@ -0,0 +1,7 @@
+export const load = ({ url }) => {
+	const { pathname } = url;
+
+	return {
+		pathname
+	};
+};

sepa/sitio2/src/routes/+page.svelte

@@ -1,10 +1,18 @@
 <script lang="ts">
+	import SearchBar from '$lib/components/SearchBar.svelte';
 	import type { PageData } from './$types';
 
+	const numberFormat = new Intl.NumberFormat('es-AR', {
+		style: 'decimal'
+	});
+
 	export let data: PageData;
 </script>
 
-<h1 class="flex text-3xl font-bold">
+<div class="mx-auto max-w-screen-sm p-4">
-	preciazo<small class="text-xs">alpha</small>
+	<h1 class="flex text-3xl font-bold">
-</h1>
+		preciazo<small class="text-xs">alpha</small>
-<h2>actualmente tengo {data.count} registros de precios</h2>
+	</h1>
+	<h2>¡actualmente tengo {numberFormat.format(data.count)} registros de precios!</h2>
+	<SearchBar />
+</div>

sepa/sitio2/src/routes/search/[query]/+page.server.ts

@@ -3,7 +3,6 @@ import { sql } from 'drizzle-orm';
 import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ params }) => {
-
 	// const latestDatasetsSq =  db.$with('latest_datasets').as(
 	// 	db.select({
 	// 		id: datasets.id,
@@ -18,11 +17,13 @@ export const load: PageServerLoad = async ({ params }) => {
 	// 	))
 
 	const query = params.query;
-	const productos = await db.execute(sql`
+	const productos = await db.execute<{
-		SELECT id_producto, productos_descripcion, productos_marca
+		id_producto: string;
-		FROM productos_descripcion_index index
+		productos_descripcion: string;
-		WHERE productos_descripcion ILIKE ${`%${query}%`}
+		productos_marca: string;
-		ORDER BY 
+		in_datasets_count: number;
+	}>(sql`
+		SELECT id_producto, productos_descripcion, productos_marca,
 (WITH latest_datasets AS (
   SELECT d1.id
   FROM datasets d1
@@ -34,41 +35,73 @@ export const load: PageServerLoad = async ({ params }) => {
 )SELECT COUNT(DISTINCT p.id_dataset) as dataset_count
 FROM precios p
 JOIN latest_datasets ld ON p.id_dataset = ld.id
-WHERE p.id_producto = index.id_producto) desc
+WHERE p.id_producto = index.id_producto) as in_datasets_count
-	`)
+		FROM productos_descripcion_index index
-// 		'latest_datasets',
+		WHERE productos_descripcion ILIKE ${`%${query}%`}
-// 		sql`
+		ORDER BY in_datasets_count desc
-// WITH latest_datasets AS (
+		LIMIT 100
-//   SELECT d1.id
+	`);
-//   FROM datasets d1
+	const collapsedProductos = productos.reduce(
-//   JOIN (
+		(acc, producto) => {
-//     SELECT id_comercio, MAX(date) as max_date
+			const existingProduct = acc.find((p) => p.id_producto === producto.id_producto);
-//     FROM datasets
+			if (existingProduct) {
-//     GROUP BY id_comercio
+				existingProduct.descriptions.push(producto.productos_descripcion);
-//   ) d2 ON d1.id_comercio = d2.id_comercio AND d1.date = d2.max_date
+				existingProduct.marcas.add(producto.productos_marca);
-// )`
+				existingProduct.in_datasets_count = Math.max(
-// 		.select({
+					existingProduct.in_datasets_count,
-// 			id_producto: productos_descripcion_index.id_producto,
+					producto.in_datasets_count
-// 			productos_descripcion: productos_descripcion_index.productos_descripcion,
+				);
-// 			productos_marca: productos_descripcion_index.productos_marca,
+			} else {
-// 		})
+				acc.push({
-// 		.from(productos_descripcion_index)
+					id_producto: producto.id_producto,
-// 		.where(ilike(productos_descripcion_index.productos_descripcion, `%${query}%`))
+					descriptions: [producto.productos_descripcion],
-// 		.orderBy(sql`
+					marcas: new Set([producto.productos_marca]),
-// WITH latest_datasets AS (
+					in_datasets_count: producto.in_datasets_count
-//   SELECT d1.id
+				});
-//   FROM datasets d1
+			}
-//   JOIN (
+			return acc;
-//     SELECT id_comercio, MAX(date) as max_date
+		},
-//     FROM datasets
+		[] as Array<{
-//     GROUP BY id_comercio
+			id_producto: string;
-//   ) d2 ON d1.id_comercio = d2.id_comercio AND d1.date = d2.max_date
+			descriptions: string[];
-// )
+			marcas: Set<string>;
-// SELECT COUNT(DISTINCT p.id_dataset) as dataset_count
+			in_datasets_count: number;
-// FROM precios p
+		}>
-// JOIN latest_datasets ld ON p.id_dataset = ld.id
+	);
-// WHERE p.id_producto = ${productos_descripcion_index.id_producto}`);
+
-	return { productos };
+	// 		'latest_datasets',
+	// 		sql`
+	// WITH latest_datasets AS (
+	//   SELECT d1.id
+	//   FROM datasets d1
+	//   JOIN (
+	//     SELECT id_comercio, MAX(date) as max_date
+	//     FROM datasets
+	//     GROUP BY id_comercio
+	//   ) d2 ON d1.id_comercio = d2.id_comercio AND d1.date = d2.max_date
+	// )`
+	// 		.select({
+	// 			id_producto: productos_descripcion_index.id_producto,
+	// 			productos_descripcion: productos_descripcion_index.productos_descripcion,
+	// 			productos_marca: productos_descripcion_index.productos_marca,
+	// 		})
+	// 		.from(productos_descripcion_index)
+	// 		.where(ilike(productos_descripcion_index.productos_descripcion, `%${query}%`))
+	// 		.orderBy(sql`
+	// WITH latest_datasets AS (
+	//   SELECT d1.id
+	//   FROM datasets d1
+	//   JOIN (
+	//     SELECT id_comercio, MAX(date) as max_date
+	//     FROM datasets
+	//     GROUP BY id_comercio
+	//   ) d2 ON d1.id_comercio = d2.id_comercio AND d1.date = d2.max_date
+	// )
+	// SELECT COUNT(DISTINCT p.id_dataset) as dataset_count
+	// FROM precios p
+	// JOIN latest_datasets ld ON p.id_dataset = ld.id
+	// WHERE p.id_producto = ${productos_descripcion_index.id_producto}`);
+	return { productos, collapsedProductos, query };
 	// 	const precios = await sql<
 	// 		{
 	// 			id_producto: string;

sepa/sitio2/src/routes/search/[query]/+page.svelte

@@ -1,15 +1,37 @@
 <script lang="ts">
+	import SearchBar from '$lib/components/SearchBar.svelte';
+	import Badge from '$lib/components/ui/badge/badge.svelte';
+	import * as Card from '$lib/components/ui/card/index.js';
 	import type { PageData } from './$types';
 
 	export let data: PageData;
 </script>
 
-<ul>
+<div class="mx-auto max-w-screen-sm p-4">
-	{#each data.productos as producto}
+	<SearchBar />
-		<li>
+	<h1 class="my-2 text-2xl font-bold">Resultados para "{data.query}"</h1>
-			<a href={`/id_producto/${producto.id_producto}`}
+	{#each data.collapsedProductos as producto}
-				>{producto.productos_marca} - {producto.productos_descripcion}</a
+		<a href={`/id_producto/${producto.id_producto}`} class="my-2 block">
-			>
+			<Card.Root class="transition-colors duration-200 hover:bg-gray-100">
-		</li>
+				<Card.Header class="block px-3 py-2 pb-0">
+					<Badge
+						>{Array.from(producto.marcas)
+							.filter((m) => !['sin marca', 'VARIOS'].includes(m))
+							.filter((m) => m?.trim().length > 0)
+							.join('/')}</Badge
+					>
+					<Badge variant="outline">en {producto.in_datasets_count} cadenas</Badge>
+					<Badge variant="outline">EAN {producto.id_producto}</Badge>
+				</Card.Header>
+				<Card.Content class="px-3 py-2">
+					{#each producto.descriptions as description}
+						<span>{description}</span>
+						{#if description !== producto.descriptions[producto.descriptions.length - 1]}
+							<span class="text-gray-500">⋅</span>{' '}
+						{/if}
+					{/each}
+				</Card.Content>
+			</Card.Root>
+		</a>
 	{/each}
-</ul>
+</div>