home index

.gitignore

@@ -5,3 +5,7 @@ db/
 .env
 
 *sql.gz
+crates/prisma/generated/client
+crates.sublime-workspace
+crates/static/css
+crates/prisma/generated

CLAUDE.md

@@ -0,0 +1,5 @@
+- The aim is to convert the existing websocket client application to a Deno Fresh serverside rendered one with the minimum amount of change to styling and functionality.
+- don't add tailwind styles unless directed
+- in serverside rendered components, do not use clientside hooks such as usestate
+- copy files when possible instead of reading them in and writing out
+- useState hooks cannot be used in ssr components, such components must be converted to fresh islands

client/src/components/nav.tsx

@@ -1,81 +0,0 @@
-import { h } from 'preact';
-import { route } from 'preact-router';
-import { useEffect } from 'preact/hooks';
-import { useSelector } from 'react-redux'
-import LogRocket from 'logrocket';
-
-import http from './../http';
-import { State } from './../store';
-
-import Swirl from './swirl';
-
-function showAdmin(user) {
-    return user && user.email === 'ntr@mnml.gg';
-}
-
-const DEFAULT_ROUTE = '/';
-
-const Nav = () => {
-    const user = useSelector((state: State) => state.user);
-
-    useEffect(() => {
-        if (!user) {
-            route('/login');
-            return;
-        }
-        route(DEFAULT_ROUTE)
-
-        if (window.location.host === 'crates.ntwl.xyz') {
-            LogRocket.identify(user.id, {
-                name: user.email,
-                email: user.email,
-            });
-        }
-
-        return;
-    }, [user])
-
-    async function logoutClick(e) {
-        e.preventDefault();
-        await http.postLogout();
-        window.location.reload();
-    }
-
-    const nav = () => (
-        <nav>
-            <a href="/">Offers</a>
-            <a href='/list'>List</a>
-            <a href="/search">Search</a>
-        </nav>
-    );
-
-    const anonNav = () => (
-        <nav>
-            <a href="/login">Login</a>
-            <a href="/register">Register</a>
-        </nav>
-    );
-
-    const adminNav = () => (
-        <nav>
-            <a href='/acp'>Offers ACP</a>
-        </nav>
-    )
-
-    const userNav = () => (
-        <nav>
-            <a href="/info">Info</a>
-            <a href="/auth/logout" onClick={logoutClick}>Logout</a>
-        </nav>
-    )
-
-    return (
-        <header>
-            {user ? nav() : anonNav()}
-            {showAdmin(user) ? adminNav() : <div />}
-            {user ? userNav() : null}
-        </header>
-    );
-}
-
-export default Nav;

crates.sublime-project

@@ -0,0 +1,31 @@
+{
+    "settings": {
+        "LSP": {
+            "LSP-typescript": {
+                "enabled": false,
+            },
+            "Deno": {
+                "enabled": true,
+                "settings": {
+                    "deno.config": "./crates/deno.jsonc",
+                    "deno.unstable": true,
+                    "deno.importMap": "./import_map.json",
+                    "deno.suggest.imports.hosts": {
+                        "https://deno.land": true,
+                        "https://some-other-cdn.com": true,
+                    },
+                },
+            },
+            "LSP-pyright":
+            {
+                "enabled": false
+            },
+        },
+    },
+    "folders":
+    [
+        {
+            "path": ".",
+        }
+    ],
+}

crates/.gitignore

@@ -0,0 +1,11 @@
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# Fresh build directory
+_fresh/
+# npm dependencies
+node_modules/

crates/CLAUDE.md

@@ -0,0 +1,3 @@
+- forms submitted should be validated using zod
+- packages should always be added to deno.jsonc as import maps
+- errors should be handled in the mw.error.ts and thrown as custom errors

crates/README.md

@@ -0,0 +1,16 @@
+# Fresh project
+
+Your new Fresh project is ready to go. You can follow the Fresh "Getting
+Started" guide here: https://fresh.deno.dev/docs/getting-started
+
+### Usage
+
+Make sure to install Deno: https://deno.land/manual/getting_started/installation
+
+Then start the project:
+
+```
+deno task start
+```
+
+This will watch the project directory and restart as necessary.

crates/api/errors.ts

@@ -0,0 +1,80 @@
+// Base custom error class
+export class AppError extends Error {
+    status: number
+    details?: Record<string, unknown>
+    override name: string
+
+    constructor(message: string, status = 500, details?: Record<string, unknown>) {
+        super(message)
+        this.name = this.constructor.name
+        this.status = status
+        this.details = details
+    }
+}
+
+// Validation error
+export class ValidationError extends AppError {
+    constructor(message = "Validation failed", details?: Record<string, unknown>) {
+        super(message, 400, details)
+        this.name = "ValidationError"
+    }
+}
+
+// Authentication errors
+export class AuthError extends AppError {
+    constructor(message = "Authentication failed", status = 401) {
+        super(message, status)
+        this.name = "AuthError"
+    }
+}
+
+export class InvalidCredentialsError extends AuthError {
+    constructor(message = "Invalid credentials") {
+        super(message)
+        this.name = "InvalidCredentialsError"
+    }
+}
+
+export class NotLoggedInError extends AuthError {
+    constructor(message = "Not logged in") {
+        super(message)
+        this.name = "NotLoggedInError"
+    }
+}
+
+export class SessionExpiredError extends AuthError {
+    constructor(message = "Session expired") {
+        super(message)
+        this.name = "SessionExpiredError"
+    }
+}
+
+// Resource errors
+export class ResourceError extends AppError {
+    constructor(message: string, status = 404) {
+        super(message, status)
+        this.name = "ResourceError"
+    }
+}
+
+export class ResourceNotFoundError extends ResourceError {
+    constructor(resource = "Resource") {
+        super(`${resource} not found`)
+        this.name = "ResourceNotFoundError"
+    }
+}
+
+export class ResourceExistsError extends ResourceError {
+    constructor(resource = "Resource") {
+        super(`${resource} already exists`, 409)
+        this.name = "ResourceExistsError"
+    }
+}
+
+// Server error
+export class ServerError extends AppError {
+    constructor(message = "An unexpected error occurred") {
+        super(message, 500)
+        this.name = "ServerError"
+    }
+}

crates/api/mw.auth.ts

@@ -0,0 +1,112 @@
+import { FreshContext } from "$fresh/server.ts"
+import { getCookies } from "$std/http/cookie.ts"
+import { CratesCtx } from 'api/mw.service.ts'
+
+const PROTECTED = [
+    "/",
+    "/home",
+    "/api/auth",
+]
+
+// Open Deno KV database
+const kv = await Deno.openKv();
+
+// Session prefix for KV
+const SESSION_PREFIX = "session:";
+
+// Helper functions for session management
+export async function createSession(userId: string, expirationHours = 24): Promise<{sessionId: string, expiresAt: Date}> {
+    const sessionId = crypto.randomUUID();
+    const expiresAt = new Date();
+    expiresAt.setHours(expiresAt.getHours() + expirationHours);
+    
+    await kv.set([SESSION_PREFIX, sessionId], {
+        userId,
+        expiresAt: expiresAt.toISOString(),
+    });
+    
+    return { sessionId, expiresAt };
+}
+
+export async function deleteSession(sessionId: string): Promise<void> {
+    await kv.delete([SESSION_PREFIX, sessionId]);
+}
+
+export async function getSession(sessionId: string): Promise<{ userId: string, expiresAt: Date } | null> {
+    if (!sessionId) return null;
+    
+    const sessionRes = await kv.get([SESSION_PREFIX, sessionId]);
+    const session = sessionRes.value as { userId: string, expiresAt: string } | null;
+    
+    if (!session) return null;
+    
+    // Check if session is expired
+    if (new Date() > new Date(session.expiresAt)) {
+        await deleteSession(sessionId);
+        return null;
+    }
+    
+    return {
+        userId: session.userId,
+        expiresAt: new Date(session.expiresAt)
+    };
+}
+
+export async function authMiddleware(req: Request, ctx: CratesCtx): Promise<Response> {
+    const { pg } = ctx.state
+
+    const url = new URL(req.url)
+    const path = url.pathname
+
+    // Check for authentication
+    const cookies = getCookies(req.headers)
+    const sessionId = cookies.session
+
+    // Allow public paths without authentication
+    if (!PROTECTED.includes(path)) {
+        return await ctx.next()
+    }
+
+    if (!sessionId) {
+        if (path.startsWith("/api/")) {
+            return new Response(JSON.stringify({ error: "Not logged in" }), {
+                status: 401,
+                headers: { "Content-Type": "application/json" }
+            })
+        }
+        
+        // Redirect to login page for non-API routes
+        return new Response(null, {
+            status: 302,
+            headers: { Location: "/login" }
+        })
+    }
+
+    // Verify session using getSession helper
+    const session = await getSession(sessionId);
+
+    if (!session) {
+        if (path.startsWith("/api/")) {
+            return new Response(JSON.stringify({ error: "Invalid or expired session" }), {
+                status: 401,
+                headers: { "Content-Type": "application/json" }
+            });
+        }
+        
+        // Redirect to login page for non-API routes
+        return new Response(null, {
+            status: 302,
+            headers: { Location: "/login" }
+        });
+    }
+
+    // Get user from database
+    const user = await pg.userFindId(session.userId)
+
+    if (!user) {
+        throw new Error("User not found")
+    }
+
+    ctx.state.user = user
+    return await ctx.next()
+}

crates/api/mw.error.ts

@@ -0,0 +1,34 @@
+import { FreshContext } from "$fresh/server.ts"
+import { AppError } from "./errors.ts"
+
+export async function errorMiddleware(req: Request, ctx: FreshContext): Promise<Response> {
+    try {
+        const response = await ctx.next()
+        return response
+    } catch (error) {
+        console.error(`Error handling ${req.method} ${new URL(req.url).pathname}:`, error)
+        
+        // Check if it's a custom app error
+        if (error instanceof AppError) {
+            return new Response(
+                JSON.stringify({
+                    error: error.message,
+                    ...(error.details && { details: error.details })
+                }),
+                {
+                    status: error.status,
+                    headers: { "Content-Type": "application/json" }
+                }
+            )
+        } 
+        
+        // Handle unexpected errors
+        return new Response(
+            JSON.stringify({ error: "An unexpected error occurred" }),
+            {
+                status: 500,
+                headers: { "Content-Type": "application/json" }
+            }
+        )
+    }
+}

crates/api/mw.service.ts

@@ -0,0 +1,25 @@
+import { FreshContext } from "$fresh/server.ts";
+import { User } from 'prisma/generated/index.ts'
+
+import { Pg } from 'api/pg.ts'
+import { Offers } from 'api/offers.ts'
+import { createPg } from 'api/pg.ts'
+import createOffers from 'api/offers.ts'
+
+export interface CratesState {
+  user: User
+  pg: Pg;
+  offers: Offers
+}
+
+export type CratesCtx = FreshContext<CratesState>
+
+export async function serviceMiddleware(_req: Request, ctx: FreshContext): Promise<Response> {
+    const pg = createPg(console)
+    const offers = createOffers(pg)
+
+    ctx.state.pg = pg
+    ctx.state.offers = offers
+
+    return await ctx.next()
+}

crates/api/offers.ts

@@ -0,0 +1,154 @@
+import { assert } from "$std/assert/mod.ts";
+import { groupBy, sortBy, flatMap } from 'lodash'
+
+import type { User } from 'prismaClient';
+import { Pg } from "api/pg.ts";
+import { UUID } from 'node:crypto'
+
+export enum Status {
+    Complete     = 'Complete',
+    Confirmed    = 'Confirmed',
+    Accepted     = 'Accepted',
+    Pending      = 'Pending',
+    Declined     = 'Declined',
+}
+
+function sortOffers(o) {
+    return Object.values(Status).indexOf(o.status);
+}
+
+export default function createOffers(pg: Pg) {
+    async function generate() {
+        const listings = flatMap(await pg.interestingListings());
+        console.debug('generateOffers', { listings: listings.length });
+
+        const shipping = 7.5; // yolt
+
+        const offers = listings.map(l => ({
+            userId: l.want.user.id,
+            listingId: l.id,
+            wantId: l.want.id,
+
+            status: Status.Pending,
+
+            condition: l.data.condition,
+
+            item: l.data.price.value,
+            shipping,
+            total: l.data.price.value + shipping,
+        }))
+
+        // we must sort the offers by price,
+        // sometimes a seller has multiples of a want
+        // to deal with this we just ignore duplicates on insert
+        // and ensure the cheapest one goes in first
+        const sorted = sortBy(offers, ['item']);
+
+        // TODO probably need to take one of each condition of record from a store
+        // eg. they have a VG+ and a M we should make offers for each
+
+        console.trace('generated offers', sorted);
+        const inserts = await pg.offersUpdate(sorted);
+
+        return inserts;
+    }
+
+    async function accept(user: User, id: UUID) {
+        assert(id, 'no id supplied');
+
+        // check the user actually has this offer
+        const offer = await pg.userOfferFind(user, id);
+        return pg.offerStatusSet([offer.id], Status.Accepted);
+    }
+
+    async function statusSet(user: User, ids: UUID[], status: Status) {
+        console.info({ status, ids }, 'setting offer status');
+
+        // Validate the inputs
+        assert(Array.isArray(ids), "ids must be an array");
+        assert(ids.length > 0, "ids array cannot be empty");
+        assert(ids.every(id => isUUID(id)), "All ids must be valid UUIDs");
+        assert(Object.values(Status).includes(status), "Invalid status value");
+
+        // const offer = await pg.offerFindId(ids);
+        const update = await pg.offerStatusSet(ids, status);
+
+        // forget about this for now
+        // if (status === Status.Complete) {
+        //     console.info({ id, status }, 'completed offer, removing want...');
+        //     await pg.wantRm(offer.wantId);
+        // }
+
+        return update;
+    }
+
+    // converts offers into groups based on seller
+    // includes some bits of info about shipping etc
+    async function acpOffers() {
+        const offers = await pg.offersAdmin();
+
+        const grouped = groupBy(offers, o => o.listing.data.seller.id);
+
+        const sellerOffers = sortBy(Object.values(grouped).map(offers => {
+            const shipping = offers[0]?.listing.data.seller.shipping;
+            const bundle = {
+                username: offers[0]?.listing.data.seller.username,
+                seller: offers[0]?.listing.data.seller.id,
+                shipsFrom: offers[0]?.listing.data.ships_from,
+                shipping,
+                offers: sortBy(offers, sortOffers),
+                mentionsAustralia: shipping.toLowerCase().includes('australia'),
+                mentionsWorldwide: shipping.toLowerCase().includes('world'),
+            }
+
+            return bundle;
+        }), bundle => -bundle.offers.length);
+
+        return sellerOffers;
+    }
+
+    // also groups offers by seller for users
+    // but mostly just munges the structure so the details
+    // are easily available
+    async function userOffers(user: User) {
+        const offers = await pg.userOffers(user);
+        const groups = Object.values(groupBy(offers, (o) => o.wantId))
+            .map(g => {
+                // the offer status is just the most advanced status
+                // based on sort
+                const offers = sortBy(g, sortOffers);
+                const status = offers[0].status;
+
+                // now actually sort them by price
+                offers.sort((a, b) => a.total - b.total);
+
+                const details = offers[0].want.data;
+
+                return {
+                    details,
+                    offers,
+                    status,
+                };
+            });
+
+        return groups;
+    }
+
+    async function samples() {
+       const user = await pg.userFindEmail('ntr@mnml.gg');
+       const offerGroups = await userOffers(user);
+       const i = Math.floor(Math.random() * offerGroups.length / 2);
+       return offerGroups[i];
+    }
+
+    return {
+        generate,
+        accept,
+        statusSet,
+        acpOffers,
+        userOffers,
+        samples,
+    };
+}
+
+export type Offers = ReturnType<typeof createOffers>;

crates/api/pg.ts

@@ -0,0 +1,92 @@
+import * as bcrypt from "https://deno.land/x/bcrypt@v0.4.1/mod.ts"
+import { load } from "$std/dotenv/mod.ts"
+import { PrismaClient } from "prismaClient"
+
+// Load environment variables
+await load({ export: true })
+
+// Create and export the Prisma client
+const DATABASE_URL = Deno.env.get("DATABASE_URL")
+console.log("DATABASE_URL", { DATABASE_URL })
+export const prisma = new PrismaClient({
+  datasources: {
+    db: {
+      url: DATABASE_URL,
+    },
+  },
+});
+
+export interface UserCreateParams {
+    email: string
+    password: string
+    discogs?: string
+    data?: Record<string, unknown>
+}
+
+export function createPg(log: Console) {
+    async function userFindId(id: string) {
+        return prisma.user.findUnique({ where: { id } })
+    }
+
+    async function userFindEmail(email: string) {
+        return prisma.user.findUnique({ where: { email } })
+    }
+
+    async function userWants(user: User) {
+        const wants = await prisma.want.findMany({
+            where: { userId: user.id },
+            include: { _count: { select: { offers: true } } },
+        })
+
+        // Sort by artist and title
+        return wants.sort((a, b) => {
+            const aKey = `${a.data.artists_sort} - ${a.data.title}`
+            const bKey = `${b.data.artists_sort} - ${b.data.title}`
+            return aKey.localeCompare(bKey)
+        })
+    }
+
+    async function userOffers(user: User) {
+        return prisma.offer.findMany({
+            where: {
+                userId: user.id,
+                status: { not: "declined" } // Assuming Status.Declined is "declined"
+            },
+            include: {
+                want: true,
+            },
+            orderBy: [
+                { updatedAt: "asc" },
+                { total: "asc" },
+                { listingId: "asc" },
+            ],
+        })
+    }
+
+    async function userCreate(params: UserCreateParams) {
+        const password = await bcrypt.hash(params.password)
+
+        const data = {
+            email: params.email,
+            password,
+            data: params.data || {},
+        }
+
+        return prisma.user.create({
+            data,
+        })
+    }
+
+    return {
+        userFindId,
+        userFindEmail,
+        userCreate,
+        userWants,
+        userOffers,
+
+        // Add more functions as needed
+    }
+}
+
+// Export type Pg for type checking
+export type Pg = ReturnType<typeof createPg>

crates/api/responses.ts

@@ -0,0 +1,6 @@
+function Ok(headers) {
+    return new Response(JSON.stringify({ success: true }), {
+        status: 200,
+        headers
+    })
+}

crates/api/utils.ts

@@ -0,0 +1,34 @@
+import type { Want, User } from "prismaClient";
+
+export function logFetchError(e: Response, requestUrl: string, responseData: any) {
+    console.warn({
+        status: e.status,
+        statusText: e.statusText,
+        url: requestUrl,
+        data: responseData,
+        rateLimiting: {
+            limit: e.headers.get('x-discogs-ratelimit'),
+            remaining: e.headers.get('x-discogs-ratelimit-remaining'),
+            used: e.headers.get('x-discogs-ratelimit-used'),
+        },
+    });
+}
+
+export function wantDetails(want: Want) {
+    const data = want.data as any;
+
+    if (!data) console.warn(want);
+
+    return {
+        title: data.title,
+        release: data.id,
+        artist: data.artists_sort,
+        id: want.id
+    }
+}
+
+export function isAdmin(user: User) {
+    return user.email === 'ntr@mnml.gg';
+}
+
+export function offerDetails() {}

crates/components/acp.tsx

@@ -0,0 +1,89 @@
+import { h } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+
+import http from './../http';
+
+import { useSelector, useDispatch } from 'react-redux'
+import { State } from './../store';
+
+enum Status {
+    Accepted     = 'Accepted',
+    Pending      = 'Pending',
+    Declined     = 'Declined',
+    Confirmed    = 'Confirmed',
+    Complete     = 'Complete',
+}
+
+const POSITIVE_STATUS = [Status.Accepted, Status.Confirmed, Status.Complete];
+
+function Item({ item }) {
+    const ws = useSelector((state: State) => state.ws);
+    console.log(item);
+
+    const statuses = Object.entries(Status).map(([label, value]) => (
+        <option selected={item.status === value} value={value}>{value}</option>
+    ));
+
+    function onChange(e) {
+        ws.sendAcpOfferStatusSet(item.id, e.target.value);
+    }
+
+    const bold = POSITIVE_STATUS.includes(item.status)
+        ? 'bold'
+        : '';
+
+    return (
+        <div key={item.id} class={bold}>
+            <a href={item.listing.data.uri} target="_blank" rel="noreferrer" >
+                <h4>{item.listing.data.release.description}</h4>
+            </a>
+            <h5>{item.user.email}</h5>
+            <h5 class='alt-text'>{item.total} - {item.condition}</h5>
+            <h5>{item.status}</h5>
+            <label>Set Status:</label>
+            <select onChange={onChange}>
+                {statuses}
+            </select>
+        </div>
+    );
+}
+
+function SellerGroup(group) {
+    const ready = group.offers.filter(item => POSITIVE_STATUS.includes(item.status)).length;
+
+    return (
+        <div class="bundle">
+            <section>
+                <h2>{group.username} - {group.seller}</h2>
+                <h3>{ready} / {group.offers.length} offers</h3>
+                <h4>Ships: {group.mentionsAustralia && 'AU'} {group.mentionsWorldwide && 'WORLD'}</h4>
+            </section>
+
+            <div class='items'>
+                {group.offers.map(i => <Item item={i} />)}
+            </div>
+        </div>
+    )
+}
+
+function Home() {
+    const offers = useSelector((state: State) => state.acpOffers);
+    const ws = useSelector((state: State) => state.ws);
+
+    function sync() {
+        ws.sendAcpListingsSync();
+    }
+
+    return (
+        <div class='acp'>
+            <button onClick={sync}> sync listings </button>
+            <button onClick={sync}> generate offers </button>
+            <hr />
+            <div class='bundles'>
+                {offers.map(SellerGroup)}
+            </div>
+        </div>
+    );
+}
+
+export default Home;

crates/components/info.tsx

@@ -0,0 +1,56 @@
+import { h } from 'preact';
+
+import Swirl from './../components/swirl';
+
+const Info = () => {
+    return (
+        <div class='info'>
+            <Swirl />
+            <div class='words'>
+                <section>
+                    <h1>Info</h1>
+                    <p> Thanks for signing up! </p>
+                    <p> Mates Crates is a record importing service in alpha. </p>
+                    <p> Its purpose is to reduce the cost of shipping vinyl records to Melbourne, Australia. </p>
+                </section>
+
+                <section>
+                    <h2>How It Works</h2>
+                    <p> First, add some records to your <span class='alt'>List</span> on the <a href='/search'>Search Page</a>. </p>
+                    <p> Mates Crates will then make <span class='alt'>Offers</span> to you for releases you add to your <a href='/list'>List</a>. </p>
+                    <p> (this can take a few minutes time!) </p>
+                    <p> Select all <span class='alt'>Offers</span> you are interested in, the more you accept the more likely the item will be <span class='alt-text'>Confirmed</span>.</p>
+                    <p> Check back regularly for updated <span class='alt'>Offers</span>, the global record marketplace is a living thing. </p>
+                </section>
+
+                <section>
+                    <h2>Offers</h2>
+                    <p> Not all items on your <span class='alt'>List</span> will have offers. However, as new users join the site the number of offers we can make increases, so be sure to tell your friends!</p>
+                    <p> Think of offers like an expression of interest, they are not confirmed until they are set to <span class='alt-text'>Confirmed</span> status. </p>
+                    <p> After that they will be shipped to Melbourne and ready for pick up. </p>
+                </section>
+
+                <section>
+                    <h2>Pick Up</h2>
+                    <p> Use the contact options to get in touch. </p>
+                    <p> Payment is cash on delivery. </p>
+                </section>
+
+                <section>
+                    <h2>FAQ</h2>
+                    <h3> Delivery Times </h3>
+                    <p> Records are usually available for pickup within a week. We order in bulk, which often means express, insured shipping to Melbourne. </p>
+                    <h3> Friends </h3>
+                    <p> Please invite other collectors to the site. More users means offers can become cheaper and shipped sooner. </p>
+                </section>
+            </div>
+            <section class='contact'>
+                <h2>Contact</h2>
+                <p><a href='mailto:ntr@mnml.gg?subject=Mates%20Crates%20Enquiry'>Email</a></p>
+                <p><a href='https://discord.gg/QfjY8WNQyx'>Discord</a></p>
+            </section>
+        </div>
+    );
+};
+
+export default Info;

crates/components/list.tsx

@@ -0,0 +1,30 @@
+import { h } from 'preact';
+
+import { useSelector } from 'react-redux'
+import { route } from 'preact-router';
+
+import { State } from './../store'
+import * as toast from './../toast';
+
+import Want from './../components/want';
+
+const List = () => {
+    const wants = useSelector((state: State) => state.wants);
+
+    if (!wants) {
+        return <div> loading... </div>;
+    }
+
+    if (!wants.length) {
+        toast.info('List Empty', 'You have no items in your list, add some with search.');
+        route('/search');
+    }
+
+    return (
+        <div class="list">
+            {wants.map(Want)}
+        </div>
+    );
+};
+
+export default List;

crates/components/login.tsx

@@ -0,0 +1,118 @@
+import { h } from 'preact';
+import { route } from 'preact-router';
+import { useState, useEffect, useRef } from 'preact/hooks';
+import { useSelector, useDispatch } from 'react-redux'
+
+import http from './../http';
+import { State, userState } from './../store';
+import Swirl from './../components/swirl';
+
+const Login = ({ mode }) => {
+    const dispatch = useDispatch()
+    const user = useSelector((state: State) => state.user);
+    const ws = useSelector((state: State) => state.ws);
+
+    const [error, setError] = useState('');
+
+    function gotoRegister() {
+        return route('/register');
+    }
+
+    async function postLogin(email, password) {
+        const [error, user] = await http.postLogin(email, password);
+        if (error) return setError(error);
+        route('/');
+        dispatch(userState.actions.set(user));
+        // reconnect ws to get logged in methods
+        ws.connect();
+    }
+
+    async function postRegister(email, password, confirm) {
+        if (password !== confirm) return setError('passwords do not match');
+
+        const [error, user] = await http.postRegister(email, password);
+        if (error) return setError(error);
+        route('/search');
+        dispatch(userState.actions.set(user));
+        // reconnect ws to get logged in methods
+        ws.connect();
+    }
+
+    function handleSubmit(e) {
+        e.preventDefault();
+
+        console.log(e.target.email, e.target.password, e.target.confirm);
+        if (mode === 'login') return postLogin(e.target.email.value, e.target.password.value);
+        if (mode === 'register') return postRegister(e.target.email.value, e.target.password.value, e.target.confirm.value);
+    }
+
+    const emailRef = useRef<HTMLInputElement>()
+    useEffect(() => {
+        emailRef.current.focus()
+    }, [])
+
+
+    const errorEl = error
+        ? <div class='alt-text'>{error}</div>
+        : null;
+
+    if (mode === 'register') return (
+        <div class="login">
+            {errorEl}
+            <form action="" onSubmit={handleSubmit}>
+                <div class="item">
+                    <label for="email">email</label>
+                    <input type="email" name="email" id="email" ref={emailRef} required />
+                </div>
+                <div class="item">
+                    <label for="password">password</label>
+                    <input type="password" name="password" id="password" required />
+                </div>
+                <div class="item">
+                    <label for="password">confirm password</label>
+                    <input type="password" name="confirm" id="confirm" required />
+                </div>
+                <div class="item">
+                    <input type="submit" value="register" />
+                </div>
+            </form>
+        </div>
+
+    );
+
+    return (
+        <div class="login">
+            {errorEl}
+            <form action="" onSubmit={handleSubmit}>
+                <div class="item">
+                    <label for="email">email</label>
+                    <input type="email" name="email" id="email" ref={emailRef} />
+                </div>
+                <div class="item">
+                    <label for="password">password</label>
+                    <input type="password" name="password" id="password" />
+                </div>
+                <div class="item">
+                    <input type="submit" value="login" />
+                </div>
+            </form>
+            <button onClick={gotoRegister}> create account </button>
+        </div>
+    );
+};
+
+function LoginPage({ mode }) {
+    return (
+        <div class="landing">
+            <Login mode={mode} />
+            <Swirl />
+            <div class='words'>
+                <p>record importing service</p>
+                <p>we bundle orders together from thousands of online stores to reduce the cost of shipping vinyl</p>
+                <p>then we get together and play them</p>
+            </div>
+        </div>
+    )
+}
+
+export default LoginPage;

crates/components/main.tsx

@@ -0,0 +1,53 @@
+import { h } from 'preact';
+// import { route } from 'preact-router';
+
+import OfferGroup from "./offer.group.tsx";
+
+const GroupNav = (want) => {
+    if (!want._count.offers) return null
+    const href = `#${want.release}`;
+
+    return (
+        <div class=''>
+            <a href={href}>{want.data.artists_sort} - {want.data.title}</a>
+            <span>{want._count.offers}</span>
+        </div>
+    );
+};
+
+function Main({ wants, offers }) {
+    if (offers && offers.length === 0) {
+        // Redirect to search if no offers
+        if (typeof window !== 'undefined') {
+            // route('/search');
+        }
+    }
+
+    if (!offers || !wants) {
+        return (
+            <div>
+                <p>No wants or offers found.</p>
+                <a href="/search" class="button">Search Records</a>
+            </div>
+        );
+    }
+
+    console.log(offers)
+
+    return (
+        <main>
+            <nav>
+                <div class='header'>
+                    <span>Record</span>
+                    <span>Offers</span>
+                </div>
+                {wants.map(GroupNav)}
+            </nav>
+            <div class={'offers'}>
+                {offers.map(OfferGroup)}
+            </div>
+        </main>
+    );
+}
+
+export default Main;

crates/components/nav.tsx

@@ -0,0 +1,45 @@
+import { User } from 'prismaClient'
+
+function showAdmin(user: User) {
+    return user && user.email === 'ntr@mnml.gg';
+}
+
+const Nav = ({ user }) => {
+    const nav = () => (
+        <nav>
+            <a href="/">Offers</a>
+            <a href='/list'>List</a>
+            <a href="/search">Search</a>
+        </nav>
+    );
+
+    const anonNav = () => (
+        <nav>
+            <a href="/login">Login</a>
+            <a href="/register">Register</a>
+        </nav>
+    );
+
+    const adminNav = () => (
+        <nav>
+            <a href='/acp'>Offers ACP</a>
+        </nav>
+    )
+
+    const userNav = () => (
+        <nav>
+            <a href="/info">Info</a>
+            <a href="/api/auth/logout" >Logout</a>
+        </nav>
+    )
+
+    return (
+        <header>
+            {user ? nav() : anonNav()}
+            {showAdmin(user) ? adminNav() : <div />}
+            {user ? userNav() : null}
+        </header>
+    );
+}
+
+export default Nav;

crates/components/offer.group.tsx

@@ -1,50 +1,29 @@
 import { h } from 'preact';
-import { ExternalLink, Check } from 'react-feather';
 import { useState, useCallback } from 'preact/hooks';
-import _ from 'lodash'
+import { ExternalLink, Check } from 'lucide-preact';
-
+import _ from 'lodash';
-import { useSelector, useDispatch } from 'react-redux'
-import { State } from './../store';
-
-import http from '../http';
 
 function OfferLine(offer) {
-    const ws = useSelector((state: State) => state.ws);
+    // Server-side rendering version doesn't support interactive status changes
-
-    function setStatus(status) {
-        ws.sendOfferStatusSet(offer.id, status);
-    }
-
     const accepted = offer.status === 'Accepted';
     const classes = `${accepted ? 'accepted' : ''}`;
     const btnText = accepted
         ? offer.status
         : 'Accept';
 
-    const negBtn = accepted
-        ? <button onClick={() => setStatus('Pending')} class='neg'>Cancel</button>
-        : <button onClick={() => setStatus('Declined')} class='neg'>Decline</button>;
-
     return (
         <div class="line">
             <div class='number'>${offer.total}</div>
             <div class='number'>{offer.condition}</div>
-            <button onClick={() => setStatus('Accepted')} disabled={accepted} class={classes} >{btnText}</button>
+            <div class='number'>{offer.status}</div>
-            {negBtn}
         </div>
     )
 }
 
 function OfferPriceBtn(offer) {
-    const ws = useSelector((state: State) => state.ws);
     const accepted = offer.status === 'Accepted';
     const confirmed = offer.status === 'Confirmed';
 
-    function setStatus() {
-        if (accepted) return ws.sendOfferStatusSet(offer.id, 'Pending')
-        ws.sendOfferStatusSet(offer.id, 'Accepted');
-    }
-
     const classes = `${accepted ? 'accepted' : ''} ${confirmed ? 'confirmed' : ''}`;
     const btnText = accepted
         ? offer.status
@@ -55,7 +34,7 @@ function OfferPriceBtn(offer) {
         : 'Click to accept this offer';
 
     return (
-        <button disabled={confirmed} title={title} onClick={() => setStatus()} class={classes}>${offer.total} {offer.condition}</button>
+        <button disabled={true} title={title} class={classes}>${offer.total} {offer.condition}</button>
     )
 }
 
@@ -65,29 +44,7 @@ function OfferConditionSlider([condition, offers], i, groupId, rangeMin, rangeMa
     const markersId = `${id}-markers`
     const steps = offers.map(o => o.total)
     const initialValue = _.last(offers.filter(o => o.status === 'Accepted'))?.total || 0
-
+    const acceptedPriceLabel = initialValue ? `$${initialValue}` : '-'
-    const ws = useSelector((state: State) => state.ws);
-    const [acceptedPrice, setAcceptedPrice] = useState(initialValue)
-
-    const sendOffers = useCallback(_.debounce(function send(v) {
-        const accepted = offers.filter(o => Number(o.total) <= v).map(o => o.id)
-        const pending = offers.filter(o => Number(o.total) > v).map(o => o.id)
-        ws.sendOfferStatusSet(accepted, 'Accepted')
-        ws.sendOfferStatusSet(pending, 'Pending')
-    }, 1000), [])
-
-    function onChange(target) {
-        const highest = () => {
-            return _.findLast(steps, s => target.value >= Number(s)) || 0
-        }
-
-        const v = highest()
-        target.value = v
-        setAcceptedPrice(v)
-        sendOffers(v)
-    }
-
-    const acceptedPriceLabel = acceptedPrice ? `$${acceptedPrice}` : '-'
 
     return (
         <div key={id}>
@@ -101,8 +58,8 @@ function OfferConditionSlider([condition, offers], i, groupId, rangeMin, rangeMa
                 step={step}
                 min={rangeMin}
                 max={rangeMax}
-                value={acceptedPrice}
+                value={initialValue}
-                onChange={e => onChange((e.target as HTMLInputElement)) } />
+                disabled={true} />
 
             <datalist id={markersId}>
                 {offers.map(o => <option value={o.total}></option>)}
@@ -113,8 +70,6 @@ function OfferConditionSlider([condition, offers], i, groupId, rangeMin, rangeMa
 
 
 export default function OfferGroup(group, i) {
-    const ws = useSelector((state: State) => state.ws);
-
     const format = group.details.formats[0].text ? `${group.details.formats[0].text} - ` : '';
     const descriptions = group.details.formats.map(f => f.descriptions.join(' ')).join(' ')
     const detailText = `${format} ${descriptions}`;

crates/components/offer.tsx

@@ -1,21 +1,9 @@
 import { h } from 'preact';
-import { ExternalLink, Check } from 'react-feather';
+import { ExternalLink, Check } from 'lucide-preact';
-import { useState } from 'preact/hooks';
-
-import { useSelector, useDispatch } from 'react-redux'
-import { State } from './../store';
-
-import http from '../http';
 
 export default function Offer(offer) {
-    const ws = useSelector((state: State) => state.ws);
-
     const { want: { data: details } } = offer;
 
-    function setStatus(status) {
-        ws.sendOfferStatusSet(offer.id, status);
-    }
-
     const accepted = offer.status === 'Accepted';
     const classes = `${accepted ? 'accepted' : ''}`;
     const btnText = accepted
@@ -23,8 +11,8 @@ export default function Offer(offer) {
         : 'Accept';
 
     const negBtn = accepted
-        ? <button onClick={() => setStatus('Pending')} class='neg'>Cancel</button>
+        ? <button disabled={true} class='neg'>Cancel</button>
-        : <button onClick={() => setStatus('Declined')} class='neg'>Decline</button>;
+        : <button disabled={true} class='neg'>Decline</button>;
 
     return (
         <div class="offer">
@@ -36,7 +24,7 @@ export default function Offer(offer) {
                 <div class='number'>shipped by itself: ${offer.comparison}</div>
             </section>
             <img src={details.thumb} />
-            <button onClick={() => setStatus('Accepted')} disabled={accepted} class={classes} >{btnText}</button>
+            <button disabled={true} class={classes}>{btnText}</button>
             {negBtn}
         </div>
     )

crates/components/search.tsx

@@ -0,0 +1,126 @@
+import { h } from 'preact';
+import { useState, useRef, useEffect } from 'preact/hooks';
+import { ExternalLink, Check } from 'react-feather';
+import { useSelector } from 'react-redux'
+
+import { State } from './../store';
+import { info, error as toastError } from './../toast';
+
+import http from '../http';
+
+function Result(r, wants, ws) {
+    async function onClick() {
+        ws.sendWantAdd(r.id);
+    }
+
+    // releaseIds are bigints on server
+    const wanted = wants.some(w => BigInt(w.release) === BigInt(r.id));
+
+    const classes = `${wanted ? 'added' : ''}`;
+    const btnText = wanted
+        ? <Check />
+        : '+';
+
+    return (
+        <article key={r.id}>
+            <button onClick={onClick} disabled={wanted} class={classes} >{btnText}</button>
+            <div>
+                <h3>{r.title} <a href={`https://discogs.com${r.uri}`} target="_blank" rel="noreferrer"><ExternalLink /></a></h3>
+                <h5 class='alt-text' >{r.year}</h5>
+                <h5 class='alt-text'>{r.country}</h5>
+                <h5 class='alt-text'>{r.format.join(' ')}</h5>
+            </div>
+            <img src={r.thumb} />
+        </article>
+    );
+}
+
+const User = () => {
+    const [query, setQuery] = useState('')
+    const [username, setUsername] = useState('');
+    const [results, setResults] = useState([]);
+
+    const wants = useSelector((state: State) => state.wants);
+    const ws = useSelector((state: State) => state.ws);
+
+    async function fetchResults() {
+        const [error, results] = await http.postWantSearch(query);
+
+        if (error) {
+            setResults([]);
+            toastError('Error', error);
+        }
+
+        if (results.length === 0) {
+            setResults([]);
+            return info('No Results', 'No results returned from search');
+        }
+
+        setResults(results);
+    }
+
+    async function submitWantlist() {
+        const [error, wants] = await http.postDiscogs(username);
+
+        if (error) {
+            setResults([]);
+            toastError('Error', error);
+        }
+
+        if (wants.length === 0) {
+            setResults([]);
+            return info('Success', 'No new additions');
+        }
+
+        info('Success', `Added ${wants.length} items to your list.`);
+    }
+
+    const searchRef = useRef<HTMLInputElement>();
+    const resultsRef = useRef<HTMLDivElement>();
+
+    useEffect(() => {
+        searchRef.current.focus()
+    }, [])
+
+    function handleSubmit(e) {
+        e.preventDefault();
+        fetchResults();
+    }
+
+    function handleDiscogsSubmit(e) {
+        e.preventDefault();
+        submitWantlist();
+    }
+
+    const topEl = results.length
+        ? <button onClick={() => resultsRef.current.scrollTo(0, 0)}> top </button>
+        : null;
+
+    return (
+        <div class='search'>
+            <div>
+                <form action="" method="get">
+                    <label for="query">Query</label>
+                    <input type="text" name="query" ref={searchRef} placeholder="ben klock subzero" id="query" value={query} onChange={e => setQuery((e.target as HTMLInputElement).value) } required />
+                    <input type="submit" value="Search" onClick={handleSubmit} />
+                </form>
+                <hr />
+                <div>
+                    <form action="" method="get">
+                        <label for="Discogs">Discogs Username</label>
+                        <input type="text" name="username" placeholder="Discogs Username" id="username" value={username} onChange={e => setUsername((e.target as HTMLInputElement).value) } required />
+                        <input type="submit" value="Sync Wantlist" onClick={handleDiscogsSubmit} />
+                    </form>
+                </div>
+                <hr />
+                <p>Data provided by Discogs.</p>
+            </div>
+            <div class='results' ref={resultsRef}>
+                {results.map(r => Result(r, wants, ws))}
+                {topEl}
+            </div>
+        </div>
+    );
+};
+
+export default User;

crates/components/style/fonts.less

@@ -0,0 +1,87 @@
+/* vietnamese */
+@font-face {
+  font-family: 'Barlow';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/barlow/v12/7cHpv4kjgoGqM7E_A8s52Hs.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Barlow';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/barlow/v12/7cHpv4kjgoGqM7E_Ass52Hs.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Barlow';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/barlow/v12/7cHpv4kjgoGqM7E_DMs5.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Noto Sans Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/notosansmono/v21/BngrUXNETWXI6LwhGYvaxZikqZqK6fBq6kPvUce2oAZcdthSBUsYck4-_FNJ09DdVXQQ.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Noto Sans Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/notosansmono/v21/BngrUXNETWXI6LwhGYvaxZikqZqK6fBq6kPvUce2oAZcdthSBUsYck4-_FNJ09ndVXQQ.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Noto Sans Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/notosansmono/v21/BngrUXNETWXI6LwhGYvaxZikqZqK6fBq6kPvUce2oAZcdthSBUsYck4-_FNJ09HdVXQQ.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Noto Sans Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/notosansmono/v21/BngrUXNETWXI6LwhGYvaxZikqZqK6fBq6kPvUce2oAZcdthSBUsYck4-_FNJ097dVXQQ.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Noto Sans Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/notosansmono/v21/BngrUXNETWXI6LwhGYvaxZikqZqK6fBq6kPvUce2oAZcdthSBUsYck4-_FNJ09LdVXQQ.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Noto Sans Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/notosansmono/v21/BngrUXNETWXI6LwhGYvaxZikqZqK6fBq6kPvUce2oAZcdthSBUsYck4-_FNJ09PdVXQQ.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Noto Sans Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/notosansmono/v21/BngrUXNETWXI6LwhGYvaxZikqZqK6fBq6kPvUce2oAZcdthSBUsYck4-_FNJ093dVQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

crates/components/style/index.less

@@ -0,0 +1,194 @@
+// Digital Ocean reset
+html {
+  box-sizing: border-box;
+  font-size: 16px;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body, h4, h5, h6, p, ol, ul {
+  margin: 0;
+  padding: 0;
+  font-weight: normal;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+img {
+  // max-width: 100%;
+  height: auto;
+}
+
+// stuff from UX laws
+html {
+    color:var(--base-font-color);
+    font-size:clamp(var(--min-font-size),calc(50% + 1vw),var(--max-font-size));
+    font-family:var(--base-font-family);
+    line-height:var(--base-line-height);
+    -webkit-text-size-adjust:100%;
+    background:var(--background-0);
+    box-sizing:border-box
+}
+
+// @charset "UTF-8";
+:root {
+    --breakpoint-medium: 35em;
+    --breakpoint-large: 56em;
+
+    --small-font-size: 0.75em;
+    --base-font-size: 1em;
+    --smedium-font-size: 1.333em;
+    --medium-font-size: 1.777em;
+    --large-font-size: 2.369em;
+    --xlarge-font-size: 3.157em;
+    --base-font-family: 'Barlow', Arial, Sans-Serif;
+    --secondary-font-family: 'Noto Sans Mono', monospace;
+    --base-font-color: var(--color-off-white);
+    --secondary-font-color: var(--color-mid-grey);
+
+    --base-line-height: 1.4;
+    --header-line-height: 1.2;
+
+    --base-border-color: var(--secondary-font-color);
+    --base-border: 2px solid var(--base-border-color);
+    --hover-border: 2px solid var(--base-font-color);
+    --focus-border: 2px solid var(--base-font-color);
+    --base-border-radius: .2rem;
+    --base-focus: 2px solid var(--base-accent-color);
+    --base-outline-offset: 0.25em;
+
+    --min-font-size: var(--base-font-size);
+    --max-font-size: var(--large-font-size);
+
+    --color-dark-blue: #101014;
+    --color-mid-blue: #16171d;
+    --color-light-blue: #1f2128;
+    --color-mid-grey: #9BA0B3;
+    --color-off-white: #F4F1D0;
+    --color-accent-blue: #5E9ED6;
+
+    --color-blue-gray: #506485;
+
+    --color-blue: #475977;
+    --color-green: #476d4a;
+    --color-red: #ae4442;
+
+    --color-accepted: var(--color-blue);
+    --color-confirmed: var(--color-green);
+
+    --base-accent-color: var(--color-accent-blue);
+    --fg-color: var(--color-off-white);
+    --hover-link-color: var(--color-off-white);
+
+    --background-0: var(--color-dark-blue);
+    --background-1: var(--color-mid-blue);
+    --background-2: var(--color-light-blue);
+
+    --spacing: 1rem;
+    --spacing-half: calc(var(--spacing)/2);
+    --spacing-double: calc(var(--spacing)*2);
+
+    --utility-bar-header-height: calc(var(--spacing) * 1.5);
+}
+
+button, input, optgroup, select, textarea {
+    margin:0;
+    border:var(--base-border);
+    border-radius:var(--base-border-radius);
+    background:0 0;
+    font-family:inherit;
+    font-size:100%;
+    color:inherit;
+    line-height:var(--base-line-height);
+}
+
+button, [type=submit] {
+    padding: var(--spacing-half);
+    background: var(--background-1);
+}
+
+input:hover, textarea:hover {
+    color:var(--base-font-color);
+    border:var(--hover-border)
+}
+
+input:focus, textarea:focus {
+    border:var(--focus-border);
+    outline:0
+}
+
+button, input {
+    overflow:visible;
+}
+
+button, select {
+    text-transform: none;
+}
+
+button, [type=button], [type=reset], [type=submit] {
+    -webkit-appearance:button;
+    border-color: transparent;
+    cursor:pointer;
+
+    font-family: var(--secondary-font-family);
+    font-size: var(--small-font-size);
+    // font-weight: bold;
+    text-transform: uppercase;
+
+    &:hover {
+        background: var(--background-2);
+        border-color: transparent;
+    }
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin-top:0;
+    line-height:var(--header-line-height);
+}
+
+h1 {
+    margin-bottom:var(--spacing);
+    font-size:var(--large-font-size)
+}
+
+h2 {
+    margin-bottom:var(--spacing);
+    font-size:var(--medium-font-size);
+}
+
+h3 {
+    margin-bottom:calc(var(--spacing)/2);
+    font-size:var(--smedium-font-size)
+}
+
+h4 {
+    margin-bottom:calc(var(--spacing)/3);
+    font-size:var(--base-font-size)
+}
+
+p {
+    margin:0 0 var(--spacing)
+}
+
+a {
+    color: var(--secondary-font-color);
+    font-family: var(--secondary-font-family);
+    text-transform: uppercase;
+
+    &:hover {
+        color: var(--fg-color);
+    }
+}
+
+.alt-text, .alt {
+    font-family: var(--secondary-font-family);
+    // font-size: var(--small-font-size);
+    text-transform: uppercase;
+}
+
+@import 'fonts.less';
+@import 'styles.less';

crates/components/style/styles.less

@@ -0,0 +1,422 @@
+body {
+    padding-top: calc(var(--spacing)/2);
+    overflow: hidden;
+}
+
+#mcrates {
+    padding: 0 var(--spacing-double) var(--spacing) var(--spacing-double);
+    display: grid;
+
+    grid-template-areas:
+        "header header"
+        "main   main"
+        "footer footer";
+
+    height: 100vh;
+    width: 100vw;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: min-content 1fr min-content;
+}
+
+.landing {
+    display: grid;
+
+    overflow: scroll;
+
+    grid-template-columns: 1fr 2fr;
+    grid-gap: calc(var(--spacing-double) * 2);
+    grid-template-areas:
+        "login swirl"
+        "login words";
+
+    .login {
+        grid-area: login;
+        button {
+            width: 100%;
+        }
+    }
+
+    .swirl {
+        grid-area: swirl;
+        height: 15rem;
+    }
+
+    .words {
+        grid-area: words;
+        text-align: center;
+    }
+}
+
+.info {
+    display: grid;
+
+    overflow: hidden;
+
+    grid-template-areas:
+        "words swirl"
+        "words contact";
+
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: min-content 1fr;
+
+    section {
+        margin-bottom: var(--spacing);
+    }
+
+    .contact {
+        grid-area: contact;
+        text-align: center;
+        overflow: scroll;
+    }
+
+    .words {
+        grid-area: words;
+        overflow: scroll;
+    }
+
+    .swirl {
+        grid-area: swirl;
+        height: 15rem;
+    }
+}
+
+article {
+    background-color: var(--background-1);
+
+    button {
+        border-color: var(--background-2);
+    }
+}
+
+.search {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+
+    overflow: hidden;
+
+    .results {
+        display: grid;
+        padding-left: var(--spacing);
+        grid-gap: var(--spacing);
+
+        article {
+            display: grid;
+            padding: var(--spacing);
+            grid-template-columns: 1fr 4fr min-content;
+        }
+
+        overflow: scroll;
+    }
+
+    button {
+        margin-right: var(--spacing);
+        background: var(--background-2);
+        border-color: var(--background-1);
+
+        &.added {
+            background: var(--color-green);
+            cursor: auto;
+        }
+    }
+}
+
+.list {
+    display: grid;
+    grid-template-columns:
+        1fr 1fr 1fr;
+
+    grid-gap: var(--spacing);
+    overflow: scroll;
+
+    article {
+        display: grid;
+
+        grid-template-areas:
+            "title img"
+            "details details"
+            "remove remove";
+
+        button {
+            margin-top: var(--spacing-half);
+            grid-area: remove
+        }
+
+        .details {
+            grid-area: details;
+        }
+
+        padding: var(--spacing);
+
+        img {
+            justify-self: end;
+        }
+    }
+}
+
+form {
+    margin-bottom: var(--spacing);
+
+    label, input {
+        display: block;
+    }
+
+    input, button {
+        width: 100%;
+    }
+
+    input {
+        padding: var(--spacing-half);
+        margin-bottom: var(--spacing);
+    }
+
+    label {
+        font-family: var(--secondary-font-family);
+        font-size: var(--small-font-size);
+        text-transform: uppercase;
+        margin-bottom: var(--spacing-half);
+    }
+
+}
+
+header {
+    grid-area: header;
+
+    display: grid;
+    grid-template-columns: 1fr 1fr min-content;
+
+    border-bottom: var(--base-border);
+    padding-bottom: var(--spacing-half);
+    margin-bottom: var(--spacing-half);
+
+    a {
+        font-size: var(--small-font-size);
+        margin-right: var(--spacing);
+    }
+
+    a {
+        white-space: nowrap;
+    }
+}
+
+main {
+    grid-area: main;
+
+    display: grid;
+    grid-template-areas:
+        "nav content";
+
+    grid-template-columns:
+        1fr 1fr;
+
+    column-gap: var(--spacing);
+
+    overflow: hidden;
+
+    nav {
+        // duck scrollbars
+        padding-right: var(--spacing-half);
+
+        grid-area: nav;
+
+        div {
+            display: grid;
+            grid-template-columns:
+                1fr min-content min-content;
+
+            column-gap: var(--spacing-half);
+
+            a {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+
+        overflow: scroll;
+    }
+
+    .offers {
+        grid-area: content;
+        overflow: scroll;
+    }
+}
+
+.acp {
+    overflow: scroll;
+
+    .bundles {
+        flex-flow: row;
+
+        .bundle {
+            margin-bottom: var(--spacing-double);
+
+            section {
+                margin-bottom: var(--spacing);
+            }
+
+            .items {
+                display: grid;
+                grid-template-columns: repeat(5, 1fr);
+
+                div {
+                    margin-right: var(--spacing);
+                    margin-bottom: var(--spacing);
+
+                    display: grid;
+
+                    &.bold {
+                        font-weight: bold;
+                        background: var(--background-2);
+                    }
+                }
+            }
+        }
+    }
+}
+
+.offers {
+    display: grid;
+    // grid-template-columns: 1fr 1fr;
+    grid-gap: var(--spacing);
+
+    .offer {
+        display: grid;
+        grid-template-columns: 1fr min-content;
+        grid-template-rows: min-content min-content;
+        grid-template-areas:
+            "details img"
+            "lines lines";
+
+        padding: var(--spacing);
+        background: var(--background-1);
+
+        .details {
+            font-size: var(--small-font-size);
+        }
+
+        .status {
+            margin-top: var(--spacing-half);
+        }
+
+        section {
+            grid-area: details;
+        }
+
+        img {
+            grid-area: img;
+            justify-self: end;
+            margin-left: var(--spacing-half);
+        }
+
+        .lines {
+            grid-area: lines;
+            display: flex;
+            flex-wrap: wrap;
+            column-gap: var(--spacing-half);
+
+            button {
+                margin-top: var(--spacing-half);
+                border-color: var(--background-2);
+
+                &.accepted {
+                    background: var(--color-accepted);
+                }
+
+                &.confirmed {
+                    cursor: auto;
+                    background: var(--color-confirmed);
+                }
+
+                &.neg {
+                    margin-left: var(--spacing-half);
+                }
+            }
+        }
+    }
+}
+
+.number {
+    font-family: var(--secondary-font-family);
+    text-transform: uppercase;
+}
+
+.swirl {
+    background-image: url("/swirl.svg");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+
+    margin-bottom: var(--spacing);
+}
+
+input[type='range']{ accent-color: var(--color-accepted); }
+
+@media (max-width:900px)  {
+    .landing {
+        grid-template-columns: 1fr;
+        grid-template-areas:
+            "swirl"
+            "login"
+            "words";
+    }
+
+    .list {
+        grid-template-columns: 1fr;
+    }
+
+    .search {
+        grid-template-columns: 1fr;
+    }
+
+    .offers {
+        grid-template-columns: 1fr;
+    }
+
+    .info {
+        grid-template-columns: 1fr;
+        // is necessary for some reason
+        grid-template-areas:
+            "swirl"
+            "contact"
+            "words";
+    }
+
+    #mcrates {
+        padding: 0 var(--spacing) 0 var(--spacing);
+    }
+
+    main {
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr 3fr;
+        grid-gap: var(--spacing-half);
+        grid-template-areas:
+            "nav"
+            "content";
+    }
+}
+
+@media (max-width:1200px) {
+    img {
+        width: 5rem;
+    }
+}
+
+
+// ------------
+// toasts
+
+.iziToast {
+    border-radius: 0;
+    border-color: var(--base-border-color);
+
+    .iziToast-body {
+        font-family: var(--base-font-family);
+        font-size: var(--base-font-size);
+    }
+
+    .iziToast-title {
+        font-family: var(--secondary-font-family);
+        text-transform: uppercase;
+    }
+}

crates/crates.sublime-project

@@ -0,0 +1,30 @@
+{
+    "settings": {
+        "LSP": {
+            "LSP-typescript": {
+                "enabled": false,
+            },
+            "Deno": {
+                "enabled": true,
+                "settings": {
+                    "deno.config": "./deno.jsonc",
+                    "deno.unstable": true,
+                    "deno.suggest.imports.hosts": {
+                        "https://deno.land": true,
+                        "https://some-other-cdn.com": true,
+                    },
+                },
+            },
+            "LSP-pyright":
+            {
+                "enabled": false,
+            },
+        },
+    },
+    "folders":
+    [
+        {
+            "path": ".",
+        }
+    ],
+}

crates/deno.jsonc

@@ -0,0 +1,69 @@
+{
+  "lock": false,
+
+  "unstable": ["kv"],
+
+  "tasks": {
+    "check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx",
+    "cli": "echo \"import '\\$fresh/src/dev/cli.ts'\" | deno run --unstable -A -",
+    "manifest": "deno task cli manifest $(pwd)",
+    "start": "deno run -A --unstable-kv --watch=routes/,.env dev.ts",
+    "build": "deno run -A --unstable-kv dev.ts build",
+    "preview": "deno run -A main.ts",
+    "prisma-clean": "rm -rf prisma/generated",
+    "prisma-generate": "deno task prisma-clean && deno run -A --env-file npm:prisma generate",
+    "prisma:migrate": "deno run -A --env-file npm:prisma migrate dev",
+    "update": "deno run -A -r https://fresh.deno.dev/update ."
+  },
+
+  "imports": {
+    "$std/": "https://deno.land/std@0.217.0/",
+    "$fresh/": "https://deno.land/x/fresh@1.7.3/",
+    "preact": "https://esm.sh/preact@10.22.0",
+    "preact/": "https://esm.sh/preact@10.22.0/",
+    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",
+    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",
+    "@twind/core": "https://esm.sh/@twind/core@1.1.3",
+    "@twind/preset-tailwind": "https://esm.sh/@twind/preset-tailwind@1.1.4/",
+    "@twind/preset-autoprefix": "https://esm.sh/@twind/preset-autoprefix@1.0.7/",
+
+    "lodash": "https://deno.land/x/lodash@4.17.15-es/lodash.js",
+    "less": "npm:less@4.2.0",
+    "lucide-preact": "npm:lucide-preact@^0.475.0",
+    "@prisma/client": "npm:@prisma/client@^6.6.0",
+    "zodix": "npm:zodix@^0.4.4",
+
+
+    "api/": "./api/",
+    "api": "./api/",
+    "prisma/": "./prisma/",
+    "prisma": "./prisma/",
+    "prismaClient": "./prisma/generated/index.ts",
+  },
+
+  "fmt": {
+    "useTabs": false,
+    "indentWidth": 4,
+    "semiColons": false,
+    "singleQuote": true,
+    "proseWrap": "preserve"
+  },
+
+  "lint": {
+    "rules": {
+      "tags": [
+        "fresh",
+        "recommended"
+      ]
+    }
+  },
+  "exclude": [
+    "**/_fresh/*"
+  ],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  },
+
+  "nodeModulesDir": "auto"
+}

crates/dev.ts

@@ -0,0 +1,8 @@
+#!/usr/bin/env -S deno run -A --watch=static/,routes/
+
+import dev from "$fresh/dev.ts";
+import config from "./fresh.config.ts";
+
+import "$std/dotenv/load.ts";
+
+await dev(import.meta.url, "./main.ts", config);

crates/fresh.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from "$fresh/server.ts";
+// import twind from "$fresh/plugins/twindv1.ts";
+// import twindConfig from "./twind.config.ts";
+import lessPlugin from "./less.plugin.ts";
+
+const less = lessPlugin()
+await less.buildStart()
+
+export default defineConfig({
+  plugins: [
+    // twind(twindConfig),
+    lessPlugin()
+  ],
+});

crates/fresh.gen.ts

@@ -0,0 +1,43 @@
+// DO NOT EDIT. This file is generated by Fresh.
+// This file SHOULD be checked into source version control.
+// This file is automatically updated during development when running `dev.ts`.
+
+import * as $_404 from './routes/_404.tsx'
+import * as $_500 from './routes/_500.tsx'
+import * as $_app from './routes/_app.tsx'
+import * as $_middleware from './routes/_middleware.ts'
+import * as $api_auth_login from './routes/api/auth/login.ts'
+import * as $api_auth_logout from './routes/api/auth/logout.ts'
+import * as $api_auth_register from './routes/api/auth/register.ts'
+import * as $api_auth_status from './routes/api/auth/status.ts'
+import * as $api_offers from './routes/api/offers.ts'
+import * as $api_wants from './routes/api/wants.ts'
+import * as $home from './routes/home.tsx'
+import * as $index from './routes/index.tsx'
+import * as $login from './routes/login.tsx'
+import * as $register from './routes/register.tsx'
+
+import type { Manifest } from '$fresh/server.ts'
+
+const manifest = {
+    routes: {
+        './routes/_404.tsx': $_404,
+        './routes/_500.tsx': $_500,
+        './routes/_app.tsx': $_app,
+        './routes/_middleware.ts': $_middleware,
+        './routes/api/auth/login.ts': $api_auth_login,
+        './routes/api/auth/logout.ts': $api_auth_logout,
+        './routes/api/auth/register.ts': $api_auth_register,
+        './routes/api/auth/status.ts': $api_auth_status,
+        './routes/api/offers.ts': $api_offers,
+        './routes/api/wants.ts': $api_wants,
+        './routes/home.tsx': $home,
+        './routes/index.tsx': $index,
+        './routes/login.tsx': $login,
+        './routes/register.tsx': $register,
+    },
+    islands: {},
+    baseUrl: import.meta.url,
+} satisfies Manifest
+
+export default manifest

crates/less.plugin.ts

@@ -0,0 +1,51 @@
+import { Plugin } from "$fresh/server.ts";
+import { ensureDir } from "$std/fs/mod.ts";
+import { join } from "$std/path/mod.ts";
+import { dirname } from "$std/path/mod.ts";
+
+// Import Less directly
+import less from "less";
+
+interface LessPluginOptions {
+  path: string;
+  outDir: string;
+}
+
+export default function lessPlugin(): Plugin {
+  const path = "components/style"
+  const outDir = "static/css"
+
+  // Compile the Less file using the Less package
+  async function compileLess(inputPath: string, outputPath: string): Promise<void> {
+    try {
+      const lessContent = await Deno.readTextFile(inputPath);
+      const lessOptions = {
+        filename: inputPath, // This helps with resolving imports
+        paths: [dirname(inputPath)],
+      };
+
+      const output = await less.render(lessContent, lessOptions);
+      await Deno.writeTextFile(outputPath, output.css);
+      console.log(`Compiled ${inputPath} to ${outputPath}`);
+    } catch (error) {
+      console.error("Less compilation error:", error);
+    }
+  }
+
+  return {
+    name: "lessPlugin",
+    async buildStart() {
+      // Ensure output directory exists
+      const outputDir = join(Deno.cwd(), outDir);
+      await ensureDir(outputDir);
+
+      // Only process index.less which imports the others
+      const inputPath = join(Deno.cwd(), path, "index.less");
+      const outputPath = join(outputDir, "style.css");
+
+      // Initial compilation
+      await compileLess(inputPath, outputPath);
+      console.log("Less styles compiled during build start");
+    },
+  };
+}

crates/main.ts

@@ -0,0 +1,13 @@
+/// <reference no-default-lib="true" />
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
+/// <reference lib="dom.asynciterable" />
+/// <reference lib="deno.ns" />
+
+import "$std/dotenv/load.ts";
+
+import { start } from "$fresh/server.ts";
+import manifest from "./fresh.gen.ts";
+import config from "./fresh.config.ts";
+
+await start(manifest, config);

crates/package-lock.json

@@ -0,0 +1,608 @@
+{
+  "name": "crates",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "@prisma/client": "^6.6.0"
+      },
+      "devDependencies": {
+        "prisma": "^6.6.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.3.tgz",
+      "integrity": "sha512-W8bFfPA8DowP8l//sxjJLSLkD8iEjMc7cBVyP+u4cEv9sM7mdUCkgsj+t0n/BWPFtv7WWCN5Yzj0N6FJNUUqBQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.3.tgz",
+      "integrity": "sha512-PuwVXbnP87Tcff5I9ngV0lmiSu40xw1At6i3GsU77U7cjDDB4s0X2cyFuBiDa1SBk9DnvWwnGvVaGBqoFWPb7A==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.3.tgz",
+      "integrity": "sha512-XelR6MzjlZuBM4f5z2IQHK6LkK34Cvv6Rj2EntER3lwCBFdg6h2lKbtRjpTTsdEjD/WSe1q8UyPBXP1x3i/wYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.3.tgz",
+      "integrity": "sha512-ogtTpYHT/g1GWS/zKM0cc/tIebFjm1F9Aw1boQ2Y0eUQ+J89d0jFY//s9ei9jVIlkYi8AfOjiixcLJSGNSOAdQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.3.tgz",
+      "integrity": "sha512-eESK5yfPNTqpAmDfFWNsOhmIOaQA59tAcF/EfYvo5/QWQCzXn5iUSOnqt3ra3UdzBv073ykTtmeLJZGt3HhA+w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.3.tgz",
+      "integrity": "sha512-Kd8glo7sIZtwOLcPbW0yLpKmBNWMANZhrC1r6K++uDR2zyzb6AeOYtI6udbtabmQpFaxJ8uduXMAo1gs5ozz8A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.3.tgz",
+      "integrity": "sha512-EJiyS70BYybOBpJth3M0KLOus0n+RRMKTYzhYhFeMwp7e/RaajXvP+BWlmEXNk6uk+KAu46j/kaQzr6au+JcIw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.3.tgz",
+      "integrity": "sha512-Q+wSjaLpGxYf7zC0kL0nDlhsfuFkoN+EXrx2KSB33RhinWzejOd6AvgmP5JbkgXKmjhmpfgKZq24pneodYqE8Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.3.tgz",
+      "integrity": "sha512-dUOVmAUzuHy2ZOKIHIKHCm58HKzFqd+puLaS424h6I85GlSDRZIA5ycBixb3mFgM0Jdh+ZOSB6KptX30DD8YOQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.3.tgz",
+      "integrity": "sha512-xCUgnNYhRD5bb1C1nqrDV1PfkwgbswTTBRbAd8aH5PhYzikdf/ddtsYyMXFfGSsb/6t6QaPSzxtbfAZr9uox4A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.3.tgz",
+      "integrity": "sha512-yplPOpczHOO4jTYKmuYuANI3WhvIPSVANGcNUeMlxH4twz/TeXuzEP41tGKNGWJjuMhotpGabeFYGAOU2ummBw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.3.tgz",
+      "integrity": "sha512-P4BLP5/fjyihmXCELRGrLd793q/lBtKMQl8ARGpDxgzgIKJDRJ/u4r1A/HgpBpKpKZelGct2PGI4T+axcedf6g==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.3.tgz",
+      "integrity": "sha512-eRAOV2ODpu6P5divMEMa26RRqb2yUoYsuQQOuFUexUoQndm4MdpXXDBbUoKIc0iPa4aCO7gIhtnYomkn2x+bag==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.3.tgz",
+      "integrity": "sha512-ZC4jV2p7VbzTlnl8nZKLcBkfzIf4Yad1SJM4ZMKYnJqZFD4rTI+pBG65u8ev4jk3/MPwY9DvGn50wi3uhdaghg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.3.tgz",
+      "integrity": "sha512-LDDODcFzNtECTrUUbVCs6j9/bDVqy7DDRsuIXJg6so+mFksgwG7ZVnTruYi5V+z3eE5y+BJZw7VvUadkbfg7QA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.3.tgz",
+      "integrity": "sha512-s+w/NOY2k0yC2p9SLen+ymflgcpRkvwwa02fqmAwhBRI3SC12uiS10edHHXlVWwfAagYSY5UpmT/zISXPMW3tQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.3.tgz",
+      "integrity": "sha512-nQHDz4pXjSDC6UfOE1Fw9Q8d6GCAd9KdvMZpfVGWSJztYCarRgSDfOVBY5xwhQXseiyxapkiSJi/5/ja8mRFFA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.3.tgz",
+      "integrity": "sha512-1QaLtOWq0mzK6tzzp0jRN3eccmN3hezey7mhLnzC6oNlJoUJz4nym5ZD7mDnS/LZQgkrhEbEiTn515lPeLpgWA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.3.tgz",
+      "integrity": "sha512-i5Hm68HXHdgv8wkrt+10Bc50zM0/eonPb/a/OFVfB6Qvpiirco5gBA5bz7S2SHuU+Y4LWn/zehzNX14Sp4r27g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.3.tgz",
+      "integrity": "sha512-zGAVApJEYTbOC6H/3QBr2mq3upG/LBEXr85/pTtKiv2IXcgKV0RT0QA/hSXZqSvLEpXeIxah7LczB4lkiYhTAQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.3.tgz",
+      "integrity": "sha512-fpqctI45NnCIDKBH5AXQBsD0NDPbEFczK98hk/aa6HJxbl+UtLkJV2+Bvy5hLSLk3LHmqt0NTkKNso1A9y1a4w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.3.tgz",
+      "integrity": "sha512-ROJhm7d8bk9dMCUZjkS8fgzsPAZEjtRJqCAmVgB0gMrvG7hfmPmz9k1rwO4jSiblFjYmNvbECL9uhaPzONMfgA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.3.tgz",
+      "integrity": "sha512-YWcow8peiHpNBiIXHwaswPnAXLsLVygFwCB3A7Bh5jRkIBFWHGmNQ48AlX4xDvQNoMZlPYzjVOQDYEzWCqufMQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.3.tgz",
+      "integrity": "sha512-qspTZOIGoXVS4DpNqUYUs9UxVb04khS1Degaw/MnfMe7goQ3lTfQ13Vw4qY/Nj0979BGvMRpAYbs/BAxEvU8ew==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.3.tgz",
+      "integrity": "sha512-ICgUR+kPimx0vvRzf+N/7L7tVSQeE3BYY+NhHRHXS1kBuPO7z2+7ea2HbhDyZdTephgvNvKrlDDKUexuCVBVvg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@prisma/client": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@prisma/client/-/client-6.6.0.tgz",
+      "integrity": "sha512-vfp73YT/BHsWWOAuthKQ/1lBgESSqYqAWZEYyTdGXyFAHpmewwWL2Iz6ErIzkj4aHbuc6/cGSsE6ZY+pBO04Cg==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=18.18"
+      },
+      "peerDependencies": {
+        "prisma": "*",
+        "typescript": ">=5.1.0"
+      },
+      "peerDependenciesMeta": {
+        "prisma": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@prisma/config": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@prisma/config/-/config-6.6.0.tgz",
+      "integrity": "sha512-d8FlXRHsx72RbN8nA2QCRORNv5AcUnPXgtPvwhXmYkQSMF/j9cKaJg+9VcUzBRXGy9QBckNzEQDEJZdEOZ+ubA==",
+      "devOptional": true,
+      "dependencies": {
+        "esbuild": ">=0.12 <1",
+        "esbuild-register": "3.6.0"
+      }
+    },
+    "node_modules/@prisma/debug": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-6.6.0.tgz",
+      "integrity": "sha512-DL6n4IKlW5k2LEXzpN60SQ1kP/F6fqaCgU/McgaYsxSf43GZ8lwtmXLke9efS+L1uGmrhtBUP4npV/QKF8s2ZQ==",
+      "devOptional": true
+    },
+    "node_modules/@prisma/engines": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-6.6.0.tgz",
+      "integrity": "sha512-nC0IV4NHh7500cozD1fBoTwTD1ydJERndreIjpZr/S3mno3P6tm8qnXmIND5SwUkibNeSJMpgl4gAnlqJ/gVlg==",
+      "devOptional": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "@prisma/debug": "6.6.0",
+        "@prisma/engines-version": "6.6.0-53.f676762280b54cd07c770017ed3711ddde35f37a",
+        "@prisma/fetch-engine": "6.6.0",
+        "@prisma/get-platform": "6.6.0"
+      }
+    },
+    "node_modules/@prisma/engines-version": {
+      "version": "6.6.0-53.f676762280b54cd07c770017ed3711ddde35f37a",
+      "resolved": "https://registry.npmjs.org/@prisma/engines-version/-/engines-version-6.6.0-53.f676762280b54cd07c770017ed3711ddde35f37a.tgz",
+      "integrity": "sha512-JzRaQ5Em1fuEcbR3nUsMNYaIYrOT1iMheenjCvzZblJcjv/3JIuxXN7RCNT5i6lRkLodW5ojCGhR7n5yvnNKrw==",
+      "devOptional": true
+    },
+    "node_modules/@prisma/fetch-engine": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@prisma/fetch-engine/-/fetch-engine-6.6.0.tgz",
+      "integrity": "sha512-Ohfo8gKp05LFLZaBlPUApM0M7k43a0jmo86YY35u1/4t+vuQH9mRGU7jGwVzGFY3v+9edeb/cowb1oG4buM1yw==",
+      "devOptional": true,
+      "dependencies": {
+        "@prisma/debug": "6.6.0",
+        "@prisma/engines-version": "6.6.0-53.f676762280b54cd07c770017ed3711ddde35f37a",
+        "@prisma/get-platform": "6.6.0"
+      }
+    },
+    "node_modules/@prisma/get-platform": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@prisma/get-platform/-/get-platform-6.6.0.tgz",
+      "integrity": "sha512-3qCwmnT4Jh5WCGUrkWcc6VZaw0JY7eWN175/pcb5Z6FiLZZ3ygY93UX0WuV41bG51a6JN/oBH0uywJ90Y+V5eA==",
+      "devOptional": true,
+      "dependencies": {
+        "@prisma/debug": "6.6.0"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
+      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
+      "devOptional": true,
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.3.tgz",
+      "integrity": "sha512-qKA6Pvai73+M2FtftpNKRxJ78GIjmFXFxd/1DVBqGo/qNhLSfv+G12n9pNoWdytJC8U00TrViOwpjT0zgqQS8Q==",
+      "devOptional": true,
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.25.3",
+        "@esbuild/android-arm": "0.25.3",
+        "@esbuild/android-arm64": "0.25.3",
+        "@esbuild/android-x64": "0.25.3",
+        "@esbuild/darwin-arm64": "0.25.3",
+        "@esbuild/darwin-x64": "0.25.3",
+        "@esbuild/freebsd-arm64": "0.25.3",
+        "@esbuild/freebsd-x64": "0.25.3",
+        "@esbuild/linux-arm": "0.25.3",
+        "@esbuild/linux-arm64": "0.25.3",
+        "@esbuild/linux-ia32": "0.25.3",
+        "@esbuild/linux-loong64": "0.25.3",
+        "@esbuild/linux-mips64el": "0.25.3",
+        "@esbuild/linux-ppc64": "0.25.3",
+        "@esbuild/linux-riscv64": "0.25.3",
+        "@esbuild/linux-s390x": "0.25.3",
+        "@esbuild/linux-x64": "0.25.3",
+        "@esbuild/netbsd-arm64": "0.25.3",
+        "@esbuild/netbsd-x64": "0.25.3",
+        "@esbuild/openbsd-arm64": "0.25.3",
+        "@esbuild/openbsd-x64": "0.25.3",
+        "@esbuild/sunos-x64": "0.25.3",
+        "@esbuild/win32-arm64": "0.25.3",
+        "@esbuild/win32-ia32": "0.25.3",
+        "@esbuild/win32-x64": "0.25.3"
+      }
+    },
+    "node_modules/esbuild-register": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/esbuild-register/-/esbuild-register-3.6.0.tgz",
+      "integrity": "sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg==",
+      "devOptional": true,
+      "dependencies": {
+        "debug": "^4.3.4"
+      },
+      "peerDependencies": {
+        "esbuild": ">=0.12 <1"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "devOptional": true
+    },
+    "node_modules/prisma": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/prisma/-/prisma-6.6.0.tgz",
+      "integrity": "sha512-SYCUykz+1cnl6Ugd8VUvtTQq5+j1Q7C0CtzKPjQ8JyA2ALh0EEJkMCS+KgdnvKW1lrxjtjCyJSHOOT236mENYg==",
+      "devOptional": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "@prisma/config": "6.6.0",
+        "@prisma/engines": "6.6.0"
+      },
+      "bin": {
+        "prisma": "build/index.js"
+      },
+      "engines": {
+        "node": ">=18.18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.3"
+      },
+      "peerDependencies": {
+        "typescript": ">=5.1.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    }
+  }
+}

crates/package.json

@@ -0,0 +1,11 @@
+{
+  "devDependencies": {
+    "prisma": "^6.6.0"
+  },
+  "dependencies": {
+    "@prisma/client": "^6.6.0",
+    "lodash": "^4.17.21",
+    "zod": "^3.24.3",
+    "zodix": "^0.4.4"
+  }
+}

crates/prisma/schema.prisma

@@ -1,8 +1,7 @@
 generator client {
-    provider = "prisma-client-js"
+    provider = "prisma-client"
-    // include for node docker image
+    output = "./generated"
-    binaryTargets = ["native", "debian-openssl-1.1.x"]
+    moduleFormat = "esm"
-    previewFeatures = ["interactiveTransactions"]
 }
 
 datasource db {

crates/routes/_404.tsx

@@ -0,0 +1,27 @@
+import { Head } from "$fresh/runtime.ts";
+
+export default function Error404() {
+  return (
+    <>
+      <Head>
+        <title>404 - Page not found</title>
+      </Head>
+      <div class="px-4 py-8 mx-auto bg-[#86efac]">
+        <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
+          <img
+            class="my-6"
+            src="/swirl.svg"
+            width="128"
+            height="128"
+            alt="the Fresh logo: a sliced lemon dripping with juice"
+          />
+          <h1 class="text-4xl font-bold">404 - Page not found</h1>
+          <p class="my-4">
+            The page you were looking for doesn't exist.
+          </p>
+          <a href="/" class="underline">Go back home</a>
+        </div>
+      </div>
+    </>
+  );
+}

crates/routes/_500.tsx

@@ -0,0 +1,28 @@
+import { PageProps } from "$fresh/server.ts";
+import { Head } from "$fresh/runtime.ts";
+
+export default function Error500Page({ error }: PageProps) {
+  return (
+    <>
+      <Head>
+        <title>500 - Server Error</title>
+      </Head>
+      <div class="px-4 py-8 mx-auto bg-[#86efac]">
+        <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
+          <img
+            class="my-6"
+            src="/swirl.svg"
+            width="128"
+            height="128"
+            alt="the Fresh logo: a sliced lemon dripping with juice"
+          />
+          <h1 class="text-4xl font-bold">500 - Server Error</h1>
+          <p class="my-4">
+            {(error as Error).message}
+          </p>
+          <a href="/" class="underline">Go back home</a>
+        </div>
+      </div>
+    </>
+  );
+}

crates/routes/_app.tsx

@@ -0,0 +1,20 @@
+import { type PageProps } from "$fresh/server.ts";
+
+export default function App({ Component }: PageProps) {
+  return (
+    <html>
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="/css/base.css" />
+        <link rel="stylesheet" href="/css/style.css" />
+        <title>crates</title>
+      </head>
+      <body>
+        <div id="mcrates">
+          <Component />
+        </div>
+      </body>
+    </html>
+  );
+}

crates/routes/_middleware.ts

@@ -0,0 +1,5 @@
+import { errorMiddleware } from 'api/mw.error.ts'
+import { serviceMiddleware } from 'api/mw.service.ts'
+import { authMiddleware } from 'api/mw.auth.ts'
+
+export const handler = [errorMiddleware, serviceMiddleware, authMiddleware]

crates/routes/api/auth/login.ts

@@ -0,0 +1,52 @@
+import { Handlers } from "$fresh/server.ts"
+import { setCookie } from "$std/http/cookie.ts"
+import * as bcrypt from "https://deno.land/x/bcrypt@v0.4.1/mod.ts"
+
+import { z } from "npm:zod"
+import { zx } from "npm:zodix"
+
+import { createSession } from "api/mw.auth.ts"
+import { InvalidCredentialsError } from "api/errors.ts"
+import { CratesState } from 'api/mw.service.ts'
+
+const LoginSchema = z.object({
+    email: z.string().email("Invalid email format"),
+    password: z.string().min(1)
+})
+
+export const handler: Handlers<{email: string}, CratesState> = {
+    async POST(req, ctx) {
+        const { email, password } = await zx.parseForm(req, LoginSchema)
+
+        // Create pg instance for database operations
+        const { pg } = ctx.state
+
+        // Find user by email
+        const user = await pg.userFindEmail(email)
+        if (!user) throw new InvalidCredentialsError()
+
+        // Verify password
+        const match = await bcrypt.compare(password, user.password)
+        if (!match) throw new InvalidCredentialsError()
+
+        // Create session using Deno KV
+        const { sessionId, expiresAt } = await createSession(user.id, 24 * 7) // 7 days in hours
+
+        // Set cookie
+        const headers = new Headers({ "Content-Type": "application/json" })
+        setCookie(headers, {
+            name: "session",
+            value: sessionId,
+            expires: expiresAt,
+            path: "/",
+            httpOnly: true,
+            secure: true,
+            sameSite: "Lax"
+        })
+
+        return new Response(null, {
+            status: 302,
+            headers: { Location: "/home" }
+        });
+    },
+}

crates/routes/api/auth/logout.ts

@@ -0,0 +1,32 @@
+import { Handlers } from "$fresh/server.ts"
+import { getCookies, setCookie } from "$std/http/cookie.ts"
+import { deleteSession } from "api/mw.auth.ts"
+
+export const handler: Handlers = {
+    async POST(req, _ctx) {
+        const cookies = getCookies(req.headers)
+        const sessionId = cookies.session
+        
+        if (sessionId) {
+            // Remove session from Deno KV
+            await deleteSession(sessionId)
+        }
+        
+        // Clear the cookie
+        const headers = new Headers({ "Content-Type": "application/json" })
+        setCookie(headers, {
+            name: "session",
+            value: "",
+            expires: new Date(0),
+            path: "/",
+            httpOnly: true,
+            secure: true,
+            sameSite: "Lax"
+        })
+        
+        return new Response(JSON.stringify({ success: true }), {
+            status: 200,
+            headers
+        })
+    }
+}

crates/routes/api/auth/register.ts

@@ -0,0 +1,58 @@
+import { Handlers } from "$fresh/server.ts"
+import { setCookie } from "$std/http/cookie.ts"
+
+import { z } from "npm:zod"
+import { zx } from "npm:zodix"
+
+import { createPg } from "api/pg.ts"
+import { createSession } from "api/mw.auth.ts"
+import { ResourceExistsError } from "api/errors.ts"
+import { CratesState } from 'api/mw.service.ts'
+
+// Define validation schema with Zod
+const RegisterSchema = z.object({
+    email: z.string().email("Invalid email format"),
+    password: z.string().min(6, "Password must be at least 6 characters"),
+    discogs: z.string().optional()
+})
+
+export const handler: Handlers<{email: string}, CratesState> = {
+    async POST(req, _ctx) {
+        const { discogs, email, password } = await zx.parseForm(req, RegisterSchema)
+
+        // Create pg instance for database operations
+        const pg = createPg(console)
+
+        // Check if user exists
+        const existingUser = await pg.userFindEmail(email)
+        if (existingUser) throw new ResourceExistsError("User with this email")
+
+        // Create user
+        const params = { discogs, email, password, data: {} }
+        const user = await pg.userCreate(params)
+
+        // Create session using Deno KV
+        const { sessionId, expiresAt } = await createSession(user.id, 24 * 7) // 7 days in hours
+
+        // Set cookie
+        const headers = new Headers({ "Content-Type": "application/json" })
+        setCookie(headers, {
+            name: "session",
+            value: sessionId,
+            expires: expiresAt,
+            path: "/",
+            httpOnly: true,
+            secure: true,
+            sameSite: "Lax"
+        })
+
+        // Return user data
+        return new Response(JSON.stringify({
+            id: user.id,
+            email: user.email
+        }), {
+            status: 200,
+            headers
+        })
+    }
+}

crates/routes/api/auth/status.ts

@@ -0,0 +1,18 @@
+import { Handlers } from "$fresh/server.ts"
+
+export const handler: Handlers = {
+    async GET(_req, ctx) {
+        const user = ctx.state.user
+        
+        return new Response(JSON.stringify({
+            authenticated: true,
+            user: {
+                id: user.id,
+                email: user.email
+            }
+        }), {
+            status: 200,
+            headers: { "Content-Type": "application/json" }
+        })
+    }
+}

crates/routes/api/offers.ts

@@ -0,0 +1,15 @@
+import { Handlers } from "$fresh/server.ts"
+
+import * as offersService from "api/offers.ts"
+
+export const handler: Handlers = {
+    async GET(_req, ctx) {
+        const user = ctx.state.user
+        const offers = await offersService.userOffers(user)
+        
+        return new Response(JSON.stringify(offers), {
+            status: 200,
+            headers: { "Content-Type": "application/json" }
+        })
+    }
+}

crates/routes/api/wants.ts

@@ -0,0 +1,15 @@
+import { Handlers } from "$fresh/server.ts"
+import { createPg } from "../../api/pg.ts"
+
+export const handler: Handlers = {
+    async GET(_req, ctx) {
+        const user = ctx.state.user
+        const pg = createPg(console)
+        const wants = await pg.userWants(user)
+        
+        return new Response(JSON.stringify(wants), {
+            status: 200,
+            headers: { "Content-Type": "application/json" }
+        })
+    }
+}

crates/routes/home.tsx

@@ -0,0 +1,33 @@
+import { Handlers, PageProps } from "$fresh/server.ts";
+import Main from "../components/main.tsx";
+
+import { CratesState } from "api/mw.service.ts"
+import { Offer, Want } from "prismaClient"
+import Nav from '../components/nav.tsx'
+
+interface HomeData {
+  wants: Want[],
+  offers: Offer[],
+}
+
+export const handler: Handlers<HomeData, CratesState> = {
+  async GET(_req, ctx) {
+    const { pg, offers, user } = ctx.state
+
+    const wants = await pg.userWants(user);
+    const uOffers = await offers.userOffers(user);
+
+    return await ctx.render({ user, wants, offers: uOffers });
+  },
+};
+
+export default function Home({ data }: PageProps) {
+  const { user, wants, offers } = data
+
+  return (
+    <>
+      <Nav user={user} />
+      <Main wants={wants} offers={offers} />
+    </>
+  );
+}

crates/routes/index.tsx

@@ -0,0 +1,18 @@
+import { Handlers } from "$fresh/server.ts"
+import { CratesState } from 'api/mw.service.ts'
+
+export const handler: Handlers<{email: string}, CratesState> = {
+    GET(_req, ctx) {
+        const { user } = ctx.state
+
+        if (user) return new Response(null, {
+            status: 302,
+            headers: { Location: "/home" }
+        });
+
+        return new Response(null, {
+            status: 302,
+            headers: { Location: "/login" }
+        });
+    }
+}

crates/routes/login.tsx

@@ -0,0 +1,44 @@
+import { PageProps } from "$fresh/server.ts";
+import Swirl from "../components/swirl.tsx";
+
+function Login({ error }: { error?: string }) {
+  const errorEl = error
+    ? <div class="alt-text">{error}</div>
+    : null;
+
+  return (
+    <div class="login">
+      {errorEl}
+      <form method="POST" action="/api/auth/login">
+        <div class="item">
+          <label for="email">email</label>
+          <input type="email" name="email" id="email" required />
+        </div>
+        <div class="item">
+          <label for="password">password</label>
+          <input type="password" name="password" id="password" required />
+        </div>
+        <div class="item">
+          <input type="submit" value="login" />
+        </div>
+      </form>
+      <a href="/register" class="button">create account</a>
+    </div>
+  );
+}
+
+export default function LoginPage(props: PageProps) {
+  const { error } = props.data || {};
+  
+  return (
+    <div class="landing">
+      <Login error={error} />
+      <Swirl />
+      <div class="words">
+        <p>record importing service</p>
+        <p>we bundle orders together from thousands of online stores to reduce the cost of shipping vinyl</p>
+        <p>then we get together and play them</p>
+      </div>
+    </div>
+  );
+}

crates/routes/register.tsx

@@ -0,0 +1,45 @@
+import Swirl from "../components/swirl.tsx";
+
+function Register({ error = "" }: { error?: string }) {
+
+  const errorEl = error
+    ? <div class="alt-text">{error}</div>
+    : null;
+
+  return (
+    <div class="login">
+      {errorEl}
+      <form action="/api/auth/register" method="post">
+        <div class="item">
+          <label for="email">email</label>
+          <input type="email" name="email" id="email" required />
+        </div>
+        <div class="item">
+          <label for="password">password</label>
+          <input type="password" name="password" id="password" required />
+        </div>
+        <div class="item">
+          <label for="confirm">confirm password</label>
+          <input type="password" name="confirm" id="confirm" required />
+        </div>
+        <div class="item">
+          <input type="submit" value="register" />
+        </div>
+      </form>
+    </div>
+  );
+}
+
+export default function RegisterPage() {
+  return (
+    <div class="landing">
+      <Register />
+      <Swirl />
+      <div class="words">
+        <p>record importing service</p>
+        <p>we bundle orders together from thousands of online stores to reduce the cost of shipping vinyl</p>
+        <p>then we get together and play them</p>
+      </div>
+    </div>
+  );
+}

crates/static/logo.svg

@@ -0,0 +1,6 @@
+<svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M34.092 8.845C38.929 20.652 34.092 27 30 30.5c1 3.5-2.986 4.222-4.5 2.5-4.457 1.537-13.512 1.487-20-5C2 24.5 4.73 16.714 14 11.5c8-4.5 16-7 20.092-2.655Z" fill="#FFDB1E"/>
+  <path d="M14 11.5c6.848-4.497 15.025-6.38 18.368-3.47C37.5 12.5 21.5 22.612 15.5 25c-6.5 2.587-3 8.5-6.5 8.5-3 0-2.5-4-5.183-7.75C2.232 23.535 6.16 16.648 14 11.5Z" fill="#fff" stroke="#FFDB1E"/>
+  <path d="M28.535 8.772c4.645 1.25-.365 5.695-4.303 8.536-3.732 2.692-6.606 4.21-7.923 4.83-.366.173-1.617-2.252-1.617-1 0 .417-.7 2.238-.934 2.326-1.365.512-4.223 1.29-5.835 1.29-3.491 0-1.923-4.754 3.014-9.122.892-.789 1.478-.645 2.283-.645-.537-.773-.534-.917.403-1.546C17.79 10.64 23 8.77 25.212 8.42c.366.014.82.35.82.629.41-.14 2.095-.388 2.503-.278Z" fill="#FFE600"/>
+  <path d="M14.297 16.49c.985-.747 1.644-1.01 2.099-2.526.566.121.841-.08 1.29-.701.324.466 1.657.608 2.453.701-.715.451-1.057.852-1.452 2.106-1.464-.611-3.167-.302-4.39.42Z" fill="#fff"/>
+</svg>

crates/static/swirl.fix.svg

@@ -0,0 +1,337 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   sodipodi:docname="swirl.fix.svg"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   id="svg8"
+   version="1.1"
+   viewBox="0 0 96.148266 82.95547"
+   height="313.53247"
+   width="363.39502">
+  <defs
+     id="defs2">
+    <inkscape:path-effect
+       effect="perspective-envelope"
+       up_left_point="-158.75,85.333336"
+       up_right_point="159.45,85.333336"
+       down_left_point="-158.75,111.79167"
+       down_right_point="158.75,111.79167"
+       id="path-effect6876"
+       is_visible="true"
+       deform_type="perspective"
+       horizontal_mirror="false"
+       vertical_mirror="false"
+       overflow_perspective="false" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffebcd"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="14.481547"
+     inkscape:cx="181.99653"
+     inkscape:cy="193.62635"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     showborder="true"
+     inkscape:window-width="2556"
+     inkscape:window-height="1402"
+     inkscape:window-x="2560"
+     inkscape:window-y="34"
+     inkscape:window-maximized="0"
+     units="px"
+     fit-margin-top="8"
+     fit-margin-right="8"
+     fit-margin-bottom="8"
+     fit-margin-left="8"
+     inkscape:pagecheckerboard="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid815"
+       spacingx="2.6458333"
+       spacingy="2.6458333"
+       originx="-36.831378"
+       originy="-89.812155" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline"
+     transform="translate(-36.831378,-124.23238)">
+    <path
+       inkscape:connector-curvature="0"
+       id="path10242"
+       d="m 39.087803,177.13337 v -22.9279 l 45.818557,27.79778 45.81855,-27.71837 v 22.892 l -45.818559,27.75426 z"
+       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:0.39687499;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path10244"
+       d="M 39.087803,154.20547 84.906351,126.48711 130.72491,154.28488 84.906351,182.03914 39.087794,154.20547"
+       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:0.39687499;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path10396"
+       d="m 84.90636,182.03914 v 22.892"
+       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:0.39687499;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+    <path
+       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:0.39687499;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+       d="M 43.6823,155.2907 84.251848,129.27328 126.12932,153.20325 85.560615,179.25297 43.6823,155.2907"
+       id="path11658"
+       inkscape:connector-curvature="0" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path11660"
+       d="m 47.84146,156.15882 35.887132,-24.36344 38.240578,20.54299 -35.88561,24.39248 -38.2421,-20.57203"
+       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:0.39687499;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+    <path
+       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:0.39687499;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+       d="m 51.603832,156.84186 31.713373,-22.76505 34.888705,17.58143 -31.711318,22.79115 -34.89076,-17.60753"
+       id="path11662"
+       inkscape:connector-curvature="0" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path11664"
+       d="M 55.004869,157.36773 83.000788,136.13907 114.80407,151.13498 86.810601,172.38708 55.00486,157.36773"
+       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:0.39687499;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+    <path
+       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:0.39687499;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+       d="M 58.077109,157.76072 82.76466,138.00191 111.7311,150.74435 87.046302,170.52419 58.0771,157.76072"
+       id="path11666"
+       inkscape:connector-curvature="0" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path11668"
+       d="M 60.850409,158.0419 82.596088,139.68344 108.95716,150.46527 87.214448,168.84259 60.850409,158.0419"
+       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:0.39687499;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+    <path
+       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:0.39687499;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+       d="m 63.352121,158.22952 19.131893,-17.02926 23.970846,9.07928 -19.128774,17.04616 -23.973965,-9.09618"
+       id="path11670"
+       inkscape:connector-curvature="0" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path11672"
+       d="m 65.607289,158.33937 16.811604,-15.77181 21.780277,7.60381 -16.808406,15.78696 -21.783475,-7.61896"
+       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:0.39687499;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+    <path
+       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:0.39687499;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+       d="m 67.638806,158.38507 14.753693,-14.58584 19.774661,6.32796 -14.750438,14.59939 -19.777916,-6.34151"
+       id="path11674"
+       inkscape:connector-curvature="0" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path11676"
+       d="m 69.467606,158.37833 12.930142,-13.47036 17.940192,5.22734 -12.926902,13.48245 -17.943432,-5.23943"
+       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:0.39687499;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+    <path
+       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:0.39687499;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+       d="m 71.112789,158.32915 11.315792,-12.42379 16.263793,4.28033 -11.312595,12.43461 -16.26699,-4.29115"
+       id="path11678"
+       inkscape:connector-curvature="0" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path11680"
+       d="m 72.591771,158.24614 9.888034,-11.44417 14.733241,3.46781 -9.884899,11.45383 -14.736376,-3.47747"
+       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:0.39687499;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+    <path
+       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:0.39687499;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+       d="m 73.920439,158.1366 8.626548,-10.52918 13.33708,2.77287 -8.62352,10.53779 -13.340117,-2.78148"
+       id="path11682"
+       inkscape:connector-curvature="0" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path11684"
+       d="m 75.113233,158.00675 7.513182,-9.67626 12.064591,2.18051 -7.510251,9.68394 -12.067531,-2.18819"
+       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:0.39687499;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+    <path
+       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:0.39687499;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+       d="m 76.183315,157.86181 6.531587,-8.88266 10.905765,1.67756 -6.528763,8.88949 -10.908598,-1.68439"
+       id="path11686"
+       inkscape:connector-curvature="0" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path11688"
+       d="m 77.142637,157.70619 5.667137,-8.14552 9.851348,1.25235 -5.664445,8.15161 -9.854048,-1.25844"
+       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:0.39687499;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+    <path
+       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:0.39687499;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+       d="m 78.002061,157.54358 4.906768,-7.46198 8.892683,0.89464 -4.904201,7.46738 -8.89525,-0.90004"
+       id="path11690"
+       inkscape:connector-curvature="0" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path11694"
+       d="m 78.771436,157.37702 4.238774,-6.82908 8.02175,0.5954 -4.236341,6.83388 -8.024183,-0.6002"
+       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:0.39687499;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+    <path
+       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:0.39687499;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+       d="m 79.459703,157.20905 3.652706,-6.24394 7.231124,0.34668 -3.650397,6.2482 -7.233433,-0.35094"
+       id="path11696"
+       inkscape:connector-curvature="0" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path11698"
+       d="m 80.074972,157.04169 3.1392,-5.70366 6.51395,0.14155 -3.137033,5.70744 -6.516117,-0.14533"
+       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:0.39687499;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+    <path
+       style="opacity:1;vector-effect:none;fill:#f4f1d0;fill-opacity:1;stroke:#f4f1d0;stroke-width:0.39687499;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+       d="m 80.624568,156.87663 2.689946,-5.2055 5.863887,-0.0261 -2.687912,5.20886 -5.86593,0.0228"
+       id="path11700"
+       inkscape:connector-curvature="0" />
+    <g
+       style="stroke:#f4f1d0;stroke-width:4.46899033;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="g9298"
+       transform="matrix(0.08880641,0,0,0.08880641,-71.602691,3.991392)">
+      <path
+         id="path5442"
+         inkscape:connector-curvature="0"
+         d="m 1888.0249,2040.4803 -52.9167,32.054 v 34.3699 l 52.9167,-32.054"
+         style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.46899033;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         id="path5444"
+         sodipodi:nodetypes="cc"
+         inkscape:connector-curvature="0"
+         d="m 1925.0665,2035.2276 29.1042,-0.4447"
+         style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.46899033;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         id="path5446"
+         inkscape:connector-curvature="0"
+         d="m 1927.7124,2033.6249 -26.4584,16.027"
+         style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.46899033;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         id="path5448"
+         inkscape:connector-curvature="0"
+         d="m 1901.254,2066.8368 v -34.3699 l 39.6875,-24.0404 13.2292,9.1714 -26.4583,16.027"
+         style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.46899033;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         id="path5450"
+         style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.46899033;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1967.3999,2026.7694 26.4583,-50.3968 26.4583,18.3429"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path5452"
+         style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.46899033;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1980.629,2001.571 26.4584,-16.027"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path5454"
+         style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.46899033;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 2020.3166,1960.3456 52.9167,-32.0539"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path5456"
+         style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.46899033;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 2046.7749,1944.3187 v 34.3699"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path5458"
+         style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.46899033;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 2086.4624,1954.6481 v -34.3699 l 52.9167,-32.0539"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path5460"
+         style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.46899033;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 2086.4624,1937.4632 26.4584,-16.027"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path5462"
+         style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.46899033;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 2086.4624,1954.6481 52.9167,-32.0539"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path5464"
+         style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.46899033;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 2205.5249,1848.157 -52.9166,32.0538 v 17.185 l 52.9166,-32.0539 v 17.185 l -52.9166,32.0538"
+         inkscape:connector-curvature="0" />
+    </g>
+    <g
+       style="stroke:#f4f1d0;stroke-width:3.91797233;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="g9259"
+       transform="matrix(0.08880641,0.05387819,0,0.11554215,6.1924204,89.232392)">
+      <g
+         style="stroke:#f4f1d0;stroke-width:3.91797233;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="translate(13.215028,6.61458)"
+         id="g9255">
+        <path
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.91797233;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+           d="m 463.02082,495.4375 v -26.45833 l 26.45834,13.22916 26.45833,-13.22916 v 26.45833"
+           inkscape:connector-curvature="0"
+           id="path9237" />
+        <path
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.91797233;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+           d="m 529.16665,495.4375 26.45834,-26.45833 26.45833,26.45833"
+           inkscape:connector-curvature="0"
+           id="path9239" />
+        <path
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.91797233;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+           d="m 542.39582,482.20833 h 26.45833"
+           inkscape:connector-curvature="0"
+           id="path9241" />
+        <path
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.91797233;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+           d="m 582.08333,468.97917 h 52.91666"
+           inkscape:connector-curvature="0"
+           id="path9243" />
+        <path
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.91797233;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+           d="M 608.54166,468.97917 V 495.4375"
+           inkscape:connector-curvature="0"
+           id="path9245" />
+        <path
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.91797233;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+           d="m 648.22916,495.4375 v -26.45833 h 52.91667"
+           inkscape:connector-curvature="0"
+           id="path9247" />
+        <path
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.91797233;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+           d="m 648.22916,482.20833 h 26.45833"
+           inkscape:connector-curvature="0"
+           id="path9249" />
+        <path
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.91797233;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+           d="m 648.22916,495.4375 h 52.91667"
+           inkscape:connector-curvature="0"
+           id="path9251" />
+        <path
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.91797233;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+           d="m 767.29166,468.97917 h -52.91667 v 13.22916 h 52.91667 v 13.22917 h -52.91667"
+           inkscape:connector-curvature="0"
+           id="path9253" />
+      </g>
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="Box"
+     transform="translate(-36.831378,-124.23238)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="Text"
+     transform="translate(-36.831378,-124.23238)" />
+</svg>

crates/static/swirl.svg

@@ -0,0 +1,541 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   sodipodi:docname="swirl.svg"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   id="svg8"
+   version="1.1"
+   viewBox="0 0 94.568563 81.393395"
+   height="307.62857"
+   width="357.4245">
+  <defs
+     id="defs2">
+    <inkscape:path-effect
+       effect="perspective-envelope"
+       up_left_point="-158.75,85.333336"
+       up_right_point="159.45,85.333336"
+       down_left_point="-158.75,111.79167"
+       down_right_point="158.75,111.79167"
+       id="path-effect6876"
+       is_visible="true"
+       deform_type="perspective"
+       horizontal_mirror="false"
+       vertical_mirror="false"
+       overflow_perspective="false" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffebcd"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.313708"
+     inkscape:cx="234.71776"
+     inkscape:cy="105.70791"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer3"
+     showgrid="false"
+     showborder="true"
+     inkscape:window-width="2556"
+     inkscape:window-height="1402"
+     inkscape:window-x="2560"
+     inkscape:window-y="34"
+     inkscape:window-maximized="0"
+     inkscape:pagecheckerboard="true"
+     units="px"
+     fit-margin-top="5"
+     fit-margin-left="5"
+     fit-margin-right="5"
+     fit-margin-bottom="5">
+    <inkscape:grid
+       type="xygrid"
+       id="grid815"
+       spacingx="2.6458333"
+       spacingy="2.6458333"
+       originx="-118.41853"
+       originy="-209.93335" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="Text"
+     transform="translate(-58.547806,-111.30139)">
+    <g
+       style="display:inline;stroke:#f4f1d0;stroke-opacity:1;stroke-width:4.47492335;stroke-miterlimit:4;stroke-dasharray:none"
+       id="g12059"
+       transform="matrix(0.08868867,0,0,0.08868867,-50.468219,-9.5066841)">
+      <g
+         id="g10220"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.92624803;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         transform="matrix(1,-0.60574282,0,1.2990197,876.00795,2035.6967)">
+        <path
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.92624803;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+           d="m 1005.4167,475.69732 h -52.91672 v 26.45834 h 52.91672"
+           id="path10196"
+           inkscape:connector-curvature="0" />
+        <path
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.92624803;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+           d="m 1042.4583,488.92649 29.1042,13.22917"
+           id="path10198"
+           inkscape:connector-curvature="0"
+           sodipodi:nodetypes="cc" />
+        <path
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.92624803;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+           d="m 1045.1042,488.92649 h -26.4584"
+           id="path10200"
+           inkscape:connector-curvature="0" />
+        <path
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.92624803;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+           d="m 1018.6458,502.15566 v -26.45834 h 39.6875 l 13.2292,13.22917 h -26.4583"
+           id="path10202"
+           inkscape:connector-curvature="0" />
+        <path
+           inkscape:connector-curvature="0"
+           id="path10204"
+           d="m 1084.7917,502.15566 26.4583,-26.45833 26.4583,26.45833"
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.92624803;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+        <path
+           inkscape:connector-curvature="0"
+           id="path10206"
+           d="m 1098.0208,488.92649 h 26.4584"
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.92624803;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+        <path
+           inkscape:connector-curvature="0"
+           id="path10208"
+           d="m 1150.9375,475.69732 h 52.9167"
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.92624803;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+        <path
+           inkscape:connector-curvature="0"
+           id="path10210"
+           d="m 1177.3958,475.69732 v 26.45834"
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.92624803;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+        <path
+           inkscape:connector-curvature="0"
+           id="path10212"
+           d="M 1217.0833,502.15566 V 475.69732 H 1270"
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.92624803;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+        <path
+           inkscape:connector-curvature="0"
+           id="path10214"
+           d="m 1217.0833,488.92649 h 26.4584"
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.92624803;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+        <path
+           inkscape:connector-curvature="0"
+           id="path10216"
+           d="M 1217.0833,502.15566 H 1270"
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.92624803;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+        <path
+           inkscape:connector-curvature="0"
+           id="path10218"
+           d="m 1336.1458,475.69732 h -52.9166 v 13.22917 h 52.9166 v 13.22917 h -52.9166"
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.92624803;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      </g>
+      <g
+         transform="matrix(1,0.60669255,0,1.3010563,1504.3934,1849.0405)"
+         id="g10240"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.92317387;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill">
+        <path
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.92317387;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+           d="M -158.75,111.79167 V 85.333336 l 26.45834,13.229164 26.45833,-13.229164 v 26.458334"
+           id="path10222"
+           inkscape:connector-curvature="0" />
+        <path
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.92317387;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+           d="M -92.604166,111.79167 -66.145832,85.333336 -39.6875,111.79167"
+           id="path10224"
+           inkscape:connector-curvature="0" />
+        <path
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.92317387;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+           d="m -79.374999,98.5625 h 26.458333"
+           id="path10226"
+           inkscape:connector-curvature="0" />
+        <path
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.92317387;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+           d="M -26.458333,85.333336 H 26.458333"
+           id="path10228"
+           inkscape:connector-curvature="0" />
+        <path
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.92317387;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+           d="M 0,85.333336 V 111.79167"
+           id="path10230"
+           inkscape:connector-curvature="0" />
+        <path
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.92317387;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+           d="M 39.6875,111.79167 V 85.333336 h 52.916666"
+           id="path10232"
+           inkscape:connector-curvature="0" />
+        <path
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.92317387;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+           d="M 39.6875,98.5625 H 66.145832"
+           id="path10234"
+           inkscape:connector-curvature="0" />
+        <path
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.92317387;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+           d="M 39.6875,111.79167 H 92.604166"
+           id="path10236"
+           inkscape:connector-curvature="0" />
+        <path
+           style="vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:3.92317387;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+           d="M 158.75,85.333336 H 105.83333 V 98.5625 H 158.75 v 13.22917 h -52.91667"
+           id="path10238"
+           inkscape:connector-curvature="0" />
+      </g>
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1246.4246,1949.6563 v -258.1784 l 515.9375,313.0154 515.9374,-312.1212 v 257.7742 l -515.9375,312.5254 z"
+         id="path10242"
+         inkscape:connector-curvature="0" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1246.4246,1691.4779 515.9374,-312.1212 515.9375,313.0154 -515.9375,312.5254 -515.9375,-313.4196"
+         id="path10244"
+         inkscape:connector-curvature="0" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1762.3621,2004.8975 v 257.7742"
+         id="path10396"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11658"
+         d="m 1298.1607,1703.6981 456.8313,-292.9679 471.5591,269.4622 -456.8218,293.3316 -471.5686,-269.8259"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1344.9947,1713.4735 404.1052,-274.3433 430.6061,231.3233 -404.0881,274.6703 -430.6232,-231.6503"
+         id="path11660"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11662"
+         d="m 1387.3607,1721.1648 357.1068,-256.3447 392.8625,197.9748 -357.0837,256.6386 -392.8856,-198.2687"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1425.6579,1727.0864 315.2466,-239.0443 358.1192,168.8607 -315.219,239.3082 -358.1469,-169.1246"
+         id="path11664"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11666"
+         d="m 1460.2527,1731.5116 277.9929,-222.4931 326.1751,143.4856 -277.9619,222.7299 -326.2062,-143.7224"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1491.4813,1734.6778 244.8661,-206.7245 296.8375,121.4083 -244.8327,206.9368 -296.8709,-121.6206"
+         id="path11668"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11670"
+         d="m 1519.6517,1736.7905 215.4337,-191.7571 269.9225,102.2367 -215.3986,191.9474 -269.9576,-102.427"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1545.0459,1738.0275 189.3062,-177.5977 245.2557,85.6223 -189.2702,177.7682 -245.2917,-85.7928"
+         id="path11672"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11674"
+         d="m 1567.9217,1738.5421 166.1332,-164.2431 222.6716,71.2556 -166.0966,164.3957 -222.7082,-71.4082"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1588.5148,1738.4661 145.5992,-151.6822 202.0146,58.8621 -145.5627,151.8185 -202.0511,-58.9984"
+         id="path11676"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11678"
+         d="m 1607.0403,1737.9124 127.4209,-139.8975 183.1376,48.1985 -127.3849,140.0192 -183.1736,-48.3202"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1623.6943,1736.9776 111.3437,-128.8665 165.9029,39.0492 -111.3084,128.9752 -165.9382,-39.1579"
+         id="path11680"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11682"
+         d="m 1638.6557,1735.7442 97.1388,-118.5633 150.1815,31.2237 -97.1047,118.6603 -150.2157,-31.3207"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1652.0871,1734.282 84.6018,-108.959 135.8527,24.5535 -84.5688,109.0455 -135.8858,-24.64"
+         id="path11684"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11686"
+         d="m 1664.1367,1732.6499 73.5486,-100.0227 122.8038,18.8901 -73.5168,100.0996 -122.8357,-18.967"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1674.9391,1730.8976 63.8145,-91.7223 110.9306,14.1021 -63.7842,91.7907 -110.961,-14.1705"
+         id="path11688"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11690"
+         d="m 1684.6166,1729.0665 55.2524,-84.0253 100.1356,10.0741 -55.2235,84.0861 -100.1645,-10.1349"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1693.2801,1727.191 47.7305,-76.8986 90.3285,6.7045 -47.7031,76.9526 -90.3559,-6.7585"
+         id="path11694"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11696"
+         d="m 1701.0303,1725.2995 41.1311,-70.3095 81.4257,3.9038 -41.1051,70.3575 -81.4517,-3.9518"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1707.9585,1723.415 35.3488,-64.2258 73.35,1.5939 -35.3244,64.2684 -73.3744,-1.6365"
+         id="path11698"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11700"
+         d="m 1714.1472,1721.5563 30.29,-58.6162 66.03,-0.2941 -30.2671,58.654 -66.053,0.2563"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1719.6718,1719.7364 25.8707,-53.45 59.3996,-1.8202 -25.849,53.4835 -59.4213,1.7867"
+         id="path11702"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11704"
+         d="m 1724.5994,1717.9689 22.0164,-48.698 53.3985,-3.0369 -21.9962,48.7276 -53.4187,3.0073"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1728.9909,1716.2627 18.6609,-44.3319 47.9706,-3.9903 -18.6419,44.358 -47.9895,3.9642"
+         id="path11706"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11708"
+         d="m 1732.9019,1714.6241 15.7446,-40.3246 43.0646,-4.7202 -15.7268,40.3477 -43.0824,4.6971"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1736.3819,1713.0578 13.2153,-36.6507 38.6337,-5.2613 -13.1988,36.6711 -38.6502,5.2409"
+         id="path11710"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11712"
+         d="m 1739.4759,1711.5666 11.0263,-33.2856 34.6344,-5.6438 -11.0109,33.3036 -34.6498,5.6258"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1742.2244,1710.1521 9.1361,-30.2065 31.0273,-5.8937 -9.1217,30.2224 -31.0417,5.8778"
+         id="path11714"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11716"
+         d="m 1744.6639,1708.8147 7.5081,-27.3918 27.7762,-6.0334 -7.4948,27.4057 -27.7895,6.0195"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1746.8272,1707.554 6.1096,-24.8211 24.8479,-6.0826 -6.0973,24.8333 -24.8602,6.0704"
+         id="path11718"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11720"
+         d="m 1748.7438,1706.3688 4.912,-22.4753 22.2122,-6.0578 -4.9007,22.4859 -22.2235,6.0472"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1750.4402,1705.2573 3.8898,-20.3366 19.8413,-5.9734 -3.8793,20.3458 -19.8518,5.9642"
+         id="path11722"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11724"
+         d="m 1751.9404,1704.2174 3.0205,-18.3884 17.7103,-5.8416 -3.0109,18.3963 -17.7199,5.8337"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1753.2654,1703.2464 2.2844,-16.615 15.7962,-5.673 -2.2755,16.622 -15.8051,5.666"
+         id="path11726"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11728"
+         d="m 1754.4347,1702.3415 1.6639,-15.0021 14.078,-5.4761 -1.6557,15.0082 -14.0862,5.47"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1755.4655,1701.4999 1.1434,-13.5365 12.5369,-5.2585 -1.136,13.5418 -12.5443,5.2532"
+         id="path11730"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11732"
+         d="m 1756.3731,1700.7184 0.7097,-12.2056 11.1555,-5.0263 -0.703,12.2101 -11.1622,5.0218"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1757.1711,1699.9939 0.351,-10.9979 9.9181,-4.785 -0.3448,11.0019 -9.9243,4.781"
+         id="path11734"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11736"
+         d="m 1757.872,1699.3233 0.057,-9.9029 8.8105,-4.5387 -0.051,9.9064 -8.8162,4.5352"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1758.4869,1698.7034 -0.1823,-8.9109 7.8197,-4.2909 0.1874,8.9139 -7.825,4.2879"
+         id="path11738"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11740"
+         d="m 1759.0257,1698.1313 -0.3739,-8.0128 6.9342,-4.0447 0.3786,8.0154 -6.9392,4.0421"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1759.4969,1697.6039 -0.5251,-7.2002 6.1433,-3.8024 0.5296,7.2025 -6.1479,3.8001"
+         id="path11742"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11744"
+         d="m 1759.9085,1697.1183 -0.6422,-6.4656 5.4376,-3.5657 0.6462,6.4676 -5.4418,3.5637"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1760.2674,1696.6718 -0.73,-5.802 4.8081,-3.3361 0.7338,5.8036 -4.812,3.3345"
+         id="path11746"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11748"
+         d="m 1760.5797,1696.2616 -0.7935,-5.2028 4.2473,-3.1148 0.7969,5.2042 -4.2507,3.1134"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1760.8512,1695.8851 -0.8365,-4.6622 3.7478,-2.9024 0.8396,4.6635 -3.751,2.9011"
+         id="path11750"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11754"
+         d="m 1761.0865,1695.5401 -0.8624,-4.1749 3.3034,-2.6996 0.8653,4.176 -3.3064,2.6985"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1761.2901,1695.2241 -0.8743,-3.7358 2.9084,-2.5067 0.877,3.7368 -2.9112,2.5057"
+         id="path11756"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11758"
+         d="m 1761.4657,1694.935 -0.8745,-3.3404 2.5576,-2.3239 0.877,3.3414 -2.5602,2.3229"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1761.617,1694.6708 -0.8655,-2.9848 2.2463,-2.151 0.8678,2.9856 -2.2488,2.1502"
+         id="path11760"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11762"
+         d="m 1761.7469,1694.4295 -0.849,-2.665 1.9703,-1.9881 0.8511,2.6656 -1.9725,1.9875"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1761.8581,1694.2094 -0.8266,-2.3777 1.7257,-1.8351 0.8286,2.3782 -1.7278,1.8346"
+         id="path11764"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11766"
+         d="m 1761.9529,1694.0088 -0.7998,-2.1198 1.5093,-1.6917 0.8016,2.1201 -1.5112,1.6914"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1762.0335,1693.826 -0.7696,-1.8883 1.3181,-1.5575 0.7712,1.8885 -1.3198,1.5573"
+         id="path11928"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11930"
+         d="m 1762.1017,1693.6596 -0.7369,-1.6807 1.1492,-1.4323 0.7383,1.6808 -1.1507,1.4323"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1762.1591,1693.5084 -0.7025,-1.4948 1.0002,-1.3157 0.7037,1.4948 -1.0015,1.3157"
+         id="path11932"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11934"
+         d="m 1762.2072,1693.371 -0.6672,-1.3283 0.8688,-1.2074 0.6683,1.3283 -0.8699,1.2074"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1762.2472,1693.2462 -0.6315,-1.1794 0.7532,-1.1067 0.6325,1.1794 -0.7542,1.1067"
+         id="path11936"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11938"
+         d="m 1762.2802,1693.133 -0.5958,-1.0463 0.6516,-1.0134 0.5967,1.0463 -0.6525,1.0134"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1762.3073,1693.0304 -0.5607,-0.9274 0.5624,-0.927 0.5615,0.9273 -0.5632,0.9271"
+         id="path11940"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11942"
+         d="m 1762.3292,1692.9374 -0.5262,-0.8212 0.4842,-0.8472 0.5269,0.8211 -0.4849,0.8473"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1762.3467,1692.8533 -0.4926,-0.7265 0.4156,-0.7736 0.4933,0.7263 -0.4163,0.7738"
+         id="path11944"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path11946"
+         d="m 1762.3606,1692.7772 -0.4604,-0.6421 0.3557,-0.7058 0.461,0.6419 -0.3563,0.706"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+      <path
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#f4f1d0;stroke-width:4.47492335;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
+         d="m 1762.3713,1692.7084 -0.4294,-0.5669 0.3034,-0.6434 0.4299,0.5667 -0.3039,0.6436"
+         id="path11948"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>

crates/twind.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig, Preset } from "@twind/core";
+import presetTailwind from "@twind/preset-tailwind";
+import presetAutoprefix from "@twind/preset-autoprefix";
+
+export default {
+  ...defineConfig({
+    presets: [presetTailwind() as Preset, presetAutoprefix() as Preset],
+  }),
+  selfURL: import.meta.url,
+};

docker-compose.OLD.yaml

@@ -0,0 +1,63 @@
+version: "3.3"
+
+services:
+  pg:
+    image: postgres:latest
+    environment:
+      POSTGRES_USER: '${POSTGRES_USER}'
+      POSTGRES_DB: '${POSTGRES_DB}'
+      POSTGRES_PASSWORD: '${POSTGRES_PASSWORD}'
+    volumes:
+      # so ez
+      # insane
+      - "./pg:/docker-entrypoint-initdb.d"
+    ports:
+      - '45432:5432'
+
+  api:
+    image: crates/api
+    build:
+      context: ./api
+      dockerfile: ./api.Dockerfile
+    working_dir: /opt/crates/api
+    depends_on:
+      - 'pg'
+    command: npm start
+    environment:
+      DATABASE_URL: 'postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:5432/${POSTGRES_DB}?schema=public'
+      DISCORD_TOKEN: '${DISCORD_TOKEN}'
+      DISCOGS_TOKEN: '${DISCOGS_TOKEN}'
+      CHOKIDAR_USEPOLLING: 1
+    volumes:
+      - "./api:/opt/crates/api"
+      - "/opt/crates/api/node_modules"
+
+  migrate:
+    restart: on-failure:3
+    extends: api
+    command: npm run migrate status
+
+  client:
+    image: node:16
+    working_dir: /opt/crates/client
+    build:
+      context: ./client
+      dockerfile: ./client.dev.Dockerfile
+    entrypoint: npm start
+    ports:
+      - '8080:8080' # fwd the hmr websocket
+    environment:
+      CHOKIDAR_USEPOLLING: 1
+    volumes:
+      - "./client:/opt/crates/client"
+      - "./api:/opt/crates/api"
+      - "/opt/crates/client/node_modules"
+
+  nginx:
+    image: nginx:latest
+    depends_on:
+      - 'api'
+    volumes:
+      - './nginx/localhost.nginx.conf:/etc/nginx/conf.d/default.conf'
+    ports:
+      - '80:80'

docker-compose.yaml

@@ -13,51 +13,3 @@ services:
       - "./pg:/docker-entrypoint-initdb.d"
     ports:
       - '45432:5432'
-
-  api:
-    image: crates/api
-    build:
-      context: ./api
-      dockerfile: ./api.Dockerfile
-    working_dir: /opt/crates/api
-    depends_on:
-      - 'pg'
-    command: npm start
-    environment:
-      DATABASE_URL: 'postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:5432/${POSTGRES_DB}?schema=public'
-      DISCORD_TOKEN: '${DISCORD_TOKEN}'
-      DISCOGS_TOKEN: '${DISCOGS_TOKEN}'
-      CHOKIDAR_USEPOLLING: 1
-    volumes:
-      - "./api:/opt/crates/api"
-      - "/opt/crates/api/node_modules"
-
-  migrate:
-    restart: on-failure:3
-    extends: api
-    command: npm run migrate status
-
-  client:
-    image: node:16
-    working_dir: /opt/crates/client
-    build:
-      context: ./client
-      dockerfile: ./client.dev.Dockerfile
-    entrypoint: npm start
-    ports:
-      - '8080:8080' # fwd the hmr websocket
-    environment:
-      CHOKIDAR_USEPOLLING: 1
-    volumes:
-      - "./client:/opt/crates/client"
-      - "./api:/opt/crates/api"
-      - "/opt/crates/client/node_modules"
-
-  nginx:
-    image: nginx:latest
-    depends_on:
-      - 'api'
-    volumes:
-      - './nginx/localhost.nginx.conf:/etc/nginx/conf.d/default.conf'
-    ports:
-      - '80:80'

justfile

@@ -0,0 +1,2 @@
+dev:
+    docker compose up