Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 | 3x 3x 30x 3x 128x 116x 4x 4x 4x 3x 3x 2x 3x 128x 2x 128x 128x 3x 128x 128x 128x | import clsx from 'clsx'
import { Array, Option, pipe } from 'effect'
import { Submodel } from 'foldkit'
import type { Html, HtmlBuilder } from 'foldkit/html'
import { Button, Input } from '@foldkit/ui'
import { parsers } from '../../core/systems/registry'
import * as Icon from '../../views/ui/icon'
import { Message } from './message'
import { type Model, Status } from './model'
const SEARCH_INPUT_ID = 'coordinate-search'
const acceptedFormats = `Accepts ${pipe(
parsers,
Array.map(({ label }) => label),
Array.join(', '),
)}.`
const statusTextView = (status: Status, h: HtmlBuilder<Message>): Html =>
Status.match(status, {
Idle: () => h.empty,
Found: ({ kind, maybeCaution }) =>
Option.match(maybeCaution, {
onNone: () => h.span([h.Class('text-ok')], [`Read as ${kind}`]),
onSome: caution => {
const text = `${kind}: ${caution}`
return h.span([h.Class('text-warn'), h.Title(text)], [text])
},
}),
SearchFailed: ({ reason }) => h.span([h.Class('text-danger')], [reason]),
Locating: () => h.span([h.Class('text-muted')], ['Finding you…']),
LocateFailed: ({ reason }) => h.span([h.Class('text-danger')], [reason]),
})
/** The search field and its status line; both search and "Find my location" report here. */
export const view = Submodel.defineView<Model, Message>((model, h) =>
h.form(
[
h.OnSubmit(Message.SubmittedSearch()),
h.Attribute('autocomplete', 'off'),
h.Class('flex min-w-0 flex-1 items-center gap-1.5 2xl:flex-none'),
],
[
Input.view(
{
id: SEARCH_INPUT_ID,
type: 'search',
value: model.query,
placeholder: 'Go to 51.5074, -0.1278 · 30UXC9935',
onInput: value => Message.UpdatedQuery({ value }),
isInvalid: Status.guards.SearchFailed(model.status),
hasDescription: true,
toView: attributes =>
h.span(
[h.Class('flex min-w-0 flex-1 2xl:w-64 2xl:flex-none')],
[
h.label(
[...attributes.label, h.Class('sr-only')],
['Go to a coordinate (sets the cue)'],
),
h.input([
...attributes.input,
h.Spellcheck(false),
h.Class(
'min-w-0 flex-1 rounded-md border border-line bg-surface px-2.5 py-1 font-mono text-xs text-ink outline-hidden placeholder:text-faint focus-visible:ring-2 focus-visible:ring-focus aria-invalid:border-danger [@media(hover:none)]:text-base',
),
]),
h.span(
[...attributes.description, h.Class('sr-only')],
[acceptedFormats],
),
],
),
},
h,
),
Button.view(
{
type: 'submit',
toView: attributes =>
h.button(
[
...attributes.button,
h.Class(
'shrink-0 rounded-md bg-accent px-2.5 py-1 text-xs font-semibold text-white outline-hidden hover:bg-accent/90 focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 focus-visible:ring-offset-panel',
),
],
['Go'],
),
},
h,
),
h.span(
[
h.Role('status'),
h.AriaLive('polite'),
h.Class('min-w-0 max-w-24 truncate text-xs sm:max-w-48'),
],
[statusTextView(model.status, h)],
),
],
),
)
/** The "Find my location" button, shown with the toolbar's other icon buttons. */
export const locateButtonView = Submodel.defineView<Model, Message>(
(model, h) => {
const isLocating = Status.guards.Locating(model.status)
return Button.view(
{
onClick: Message.ClickedFindMyLocation(),
toView: attributes =>
h.button(
[
...attributes.button,
h.AriaLabel('Find my location'),
h.Title('Find my location (sets the cue)'),
h.Class(
clsx(
'ml-auto shrink-0 rounded-md p-1.5 text-muted outline-hidden hover:bg-ink/10 hover:text-ink focus-visible:ring-2 focus-visible:ring-focus 2xl:order-last',
{ 'animate-pulse text-cue': isLocating },
),
),
],
[Icon.locate(h)],
),
},
h,
)
},
)
|