@jonsoc/ui 1.1.34

package/src/components/image-preview.tsx

@@ -0,0 +1,32 @@
+import { Dialog as Kobalte } from "@kobalte/core/dialog"
+import { useI18n } from "../context/i18n"
+import { IconButton } from "./icon-button"
+
+export interface ImagePreviewProps {
+  src: string
+  alt?: string
+}
+
+export function ImagePreview(props: ImagePreviewProps) {
+  const i18n = useI18n()
+  return (
+    <div data-component="image-preview">
+      <div data-slot="image-preview-container">
+        <Kobalte.Content data-slot="image-preview-content">
+          <div data-slot="image-preview-header">
+            <Kobalte.CloseButton
+              data-slot="image-preview-close"
+              as={IconButton}
+              icon="close"
+              variant="ghost"
+              aria-label={i18n.t("ui.common.close")}
+            />
+          </div>
+          <div data-slot="image-preview-body">
+            <img src={props.src} alt={props.alt ?? i18n.t("ui.imagePreview.alt")} data-slot="image-preview-image" />
+          </div>
+        </Kobalte.Content>
+      </div>
+    </div>
+  )
+}

package/src/components/inline-input.css

@@ -0,0 +1,17 @@
+[data-component="inline-input"] {
+  color: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-md);
+  padding: 0;
+  min-width: 0;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  box-sizing: border-box;
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--border-interactive-focus);
+  }
+}

package/src/components/inline-input.tsx

@@ -0,0 +1,11 @@
+import type { ComponentProps } from "solid-js"
+import { splitProps } from "solid-js"
+
+export type InlineInputProps = ComponentProps<"input"> & {
+  width?: string
+}
+
+export function InlineInput(props: InlineInputProps) {
+  const [local, others] = splitProps(props, ["class", "width"])
+  return <input data-component="inline-input" class={local.class} style={{ width: local.width }} {...others} />
+}

package/src/components/keybind.css

@@ -0,0 +1,18 @@
+[data-component="keybind"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  height: 20px;
+  padding: 0 8px;
+  border-radius: 2px;
+  background: var(--surface-base);
+  box-shadow: var(--shadow-xxs-border);
+
+  /* text-12-medium */
+  font-family: var(--font-family-sans);
+  font-size: 12px;
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  color: var(--text-weak);
+}

package/src/components/keybind.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps, ParentProps } from "solid-js"
+
+export interface KeybindProps extends ParentProps {
+  class?: string
+  classList?: ComponentProps<"span">["classList"]
+}
+
+export function Keybind(props: KeybindProps) {
+  return (
+    <span
+      data-component="keybind"
+      classList={{
+        ...(props.classList ?? {}),
+        [props.class ?? ""]: !!props.class,
+      }}
+    >
+      {props.children}
+    </span>
+  )
+}

package/src/components/list.css

@@ -0,0 +1,278 @@
+@property --bottom-fade {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@keyframes scroll {
+  0% {
+    --bottom-fade: 20px;
+  }
+  90% {
+    --bottom-fade: 20px;
+  }
+  100% {
+    --bottom-fade: 0;
+  }
+}
+
+[data-component="list"] {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow: hidden;
+  padding: 0 12px;
+
+  [data-slot="list-search-wrapper"] {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+    margin-bottom: 4px;
+    padding-right: 4px;
+
+    > [data-component="icon-button"] {
+      width: 24px;
+      height: 24px;
+      flex-shrink: 0;
+      background-color: transparent;
+      opacity: 0.5;
+      transition: opacity 0.15s ease;
+
+      &:hover:not(:disabled),
+      &:focus:not(:disabled),
+      &:active:not(:disabled) {
+        background-color: transparent;
+        opacity: 0.7;
+      }
+
+      &:hover:not(:disabled) [data-slot="icon-svg"] {
+        color: var(--icon-hover);
+      }
+
+      &:active:not(:disabled) [data-slot="icon-svg"] {
+        color: var(--icon-active);
+      }
+    }
+  }
+
+  [data-slot="list-search"] {
+    display: flex;
+    flex: 1;
+    padding: 8px;
+    align-items: center;
+    gap: 12px;
+
+    border-radius: var(--radius-md);
+    background: var(--surface-base);
+
+    [data-slot="list-search-container"] {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex: 1 0 0;
+      max-height: 20px;
+
+      [data-slot="list-search-input"] {
+        width: 100%;
+
+        &[data-slot="input-input"] {
+          line-height: 20px;
+          max-height: 20px;
+        }
+      }
+    }
+
+    > [data-component="icon-button"] {
+      width: 20px;
+      height: 20px;
+      background-color: transparent;
+      opacity: 0.5;
+      transition: opacity 0.15s ease;
+
+      &:hover:not(:disabled),
+      &:focus:not(:disabled),
+      &:active:not(:disabled) {
+        background-color: transparent;
+        opacity: 0.7;
+      }
+
+      &:hover:not(:disabled) [data-slot="icon-svg"] {
+        color: var(--icon-hover);
+      }
+
+      &:active:not(:disabled) [data-slot="icon-svg"] {
+        color: var(--icon-active);
+      }
+    }
+  }
+
+  [data-slot="list-scroll"] {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    mask: linear-gradient(to bottom, #ffff calc(100% - var(--bottom-fade)), #0000);
+    animation: scroll;
+    animation-timeline: --scroll;
+    scroll-timeline: --scroll y;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    [data-slot="list-empty-state"] {
+      display: flex;
+      padding: 32px 48px;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 8px;
+      align-self: stretch;
+
+      [data-slot="list-message"] {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 2px;
+        max-width: 100%;
+        color: var(--text-weak);
+        white-space: nowrap;
+
+        /* text-14-regular */
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        font-style: normal;
+        font-weight: var(--font-weight-regular);
+        line-height: var(--line-height-large); /* 142.857% */
+        letter-spacing: var(--letter-spacing-normal);
+      }
+
+      [data-slot="list-filter"] {
+        color: var(--text-strong);
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    [data-slot="list-group"] {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+
+      &:last-child {
+        padding-bottom: 12px;
+      }
+
+      [data-slot="list-header"] {
+        display: flex;
+        z-index: 10;
+        padding: 8px 12px 8px 12px;
+        justify-content: space-between;
+        align-items: center;
+        align-self: stretch;
+        background: var(--surface-raised-stronger-non-alpha);
+        position: sticky;
+        top: 0;
+
+        color: var(--text-weak);
+
+        /* text-14-medium */
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        font-style: normal;
+        font-weight: var(--font-weight-medium);
+        line-height: var(--line-height-large); /* 142.857% */
+        letter-spacing: var(--letter-spacing-normal);
+
+        &::after {
+          content: "";
+          position: absolute;
+          top: 100%;
+          left: 0;
+          right: 0;
+          height: 16px;
+          background: linear-gradient(to bottom, var(--surface-raised-stronger-non-alpha), transparent);
+          pointer-events: none;
+          opacity: 0;
+          transition: opacity 0.15s ease;
+        }
+
+        &[data-stuck="true"]::after {
+          opacity: 1;
+        }
+      }
+
+      [data-slot="list-items"] {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        align-self: stretch;
+
+        [data-slot="list-item"] {
+          display: flex;
+          width: 100%;
+          padding: 6px 8px 6px 8px;
+          align-items: center;
+          color: var(--text-strong);
+          scroll-margin-top: 28px;
+
+          /* text-14-medium */
+          font-family: var(--font-family-sans);
+          font-size: 14px;
+          font-style: normal;
+          font-weight: var(--font-weight-medium);
+          line-height: var(--line-height-large); /* 142.857% */
+          letter-spacing: var(--letter-spacing-normal);
+
+          [data-slot="list-item-selected-icon"] {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            aspect-ratio: 1/1;
+            [data-component="icon"] {
+              color: var(--icon-strong-base);
+            }
+          }
+          [data-slot="list-item-active-icon"] {
+            display: none;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            aspect-ratio: 1/1;
+            [data-component="icon"] {
+              color: var(--icon-strong-base);
+            }
+          }
+
+          [data-slot="list-item-extra-icon"] {
+            color: var(--icon-base);
+            margin-left: -4px;
+          }
+
+          &[data-active="true"] {
+            border-radius: var(--radius-md);
+            background: var(--surface-raised-base-hover);
+            [data-slot="list-item-active-icon"] {
+              display: inline-flex;
+            }
+            [data-slot="list-item-extra-icon"] {
+              display: block !important;
+              color: var(--icon-strong-base) !important;
+            }
+          }
+          &:active {
+            background: var(--surface-raised-base-active);
+          }
+          &:focus-visible {
+            outline: none;
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/list.tsx

@@ -0,0 +1,307 @@
+import { type FilteredListProps, useFilteredList } from "@jonsoc/ui/hooks"
+import { createEffect, createSignal, For, onCleanup, type JSX, on, Show } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useI18n } from "../context/i18n"
+import { Icon, type IconProps } from "./icon"
+import { IconButton } from "./icon-button"
+import { TextField } from "./text-field"
+
+function findByKey(container: HTMLElement, key: string) {
+  const nodes = container.querySelectorAll<HTMLElement>('[data-slot="list-item"][data-key]')
+  for (const node of nodes) {
+    if (node.getAttribute("data-key") === key) return node
+  }
+}
+
+export interface ListSearchProps {
+  placeholder?: string
+  autofocus?: boolean
+  hideIcon?: boolean
+  class?: string
+  action?: JSX.Element
+}
+
+export interface ListProps<T> extends FilteredListProps<T> {
+  class?: string
+  children: (item: T) => JSX.Element
+  emptyMessage?: string
+  loadingMessage?: string
+  onKeyEvent?: (event: KeyboardEvent, item: T | undefined) => void
+  onMove?: (item: T | undefined) => void
+  activeIcon?: IconProps["name"]
+  filter?: string
+  search?: ListSearchProps | boolean
+  itemWrapper?: (item: T, node: JSX.Element) => JSX.Element
+}
+
+export interface ListRef {
+  onKeyDown: (e: KeyboardEvent) => void
+  setScrollRef: (el: HTMLDivElement | undefined) => void
+}
+
+export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void }) {
+  const i18n = useI18n()
+  const [scrollRef, setScrollRef] = createSignal<HTMLDivElement | undefined>(undefined)
+  const [internalFilter, setInternalFilter] = createSignal("")
+  const [store, setStore] = createStore({
+    mouseActive: false,
+  })
+
+  const scrollIntoView = (container: HTMLDivElement, node: HTMLElement, block: "center" | "nearest") => {
+    const containerRect = container.getBoundingClientRect()
+    const nodeRect = node.getBoundingClientRect()
+    const top = nodeRect.top - containerRect.top + container.scrollTop
+    const bottom = top + nodeRect.height
+    const viewTop = container.scrollTop
+    const viewBottom = viewTop + container.clientHeight
+    const target =
+      block === "center"
+        ? top - container.clientHeight / 2 + nodeRect.height / 2
+        : top < viewTop
+          ? top
+          : bottom > viewBottom
+            ? bottom - container.clientHeight
+            : viewTop
+    const max = Math.max(0, container.scrollHeight - container.clientHeight)
+    container.scrollTop = Math.max(0, Math.min(target, max))
+  }
+
+  const { filter, grouped, flat, active, setActive, onKeyDown, onInput } = useFilteredList<T>(props)
+
+  const searchProps = () => (typeof props.search === "object" ? props.search : {})
+  const searchAction = () => searchProps().action
+
+  const moved = (event: MouseEvent) => event.movementX !== 0 || event.movementY !== 0
+
+  createEffect(() => {
+    if (props.filter !== undefined) {
+      onInput(props.filter)
+    }
+  })
+
+  createEffect((prev) => {
+    if (!props.search) return
+    const current = internalFilter()
+    if (prev !== current) {
+      onInput(current)
+    }
+    return current
+  }, "")
+
+  createEffect(
+    on(
+      filter,
+      () => {
+        scrollRef()?.scrollTo(0, 0)
+      },
+      { defer: true },
+    ),
+  )
+
+  createEffect(() => {
+    const scroll = scrollRef()
+    if (!scroll) return
+    if (!props.current) return
+    const key = props.key(props.current)
+    requestAnimationFrame(() => {
+      const element = findByKey(scroll, key)
+      if (!element) return
+      scrollIntoView(scroll, element, "center")
+    })
+  })
+
+  createEffect(() => {
+    const all = flat()
+    if (store.mouseActive || all.length === 0) return
+    const scroll = scrollRef()
+    if (!scroll) return
+    if (active() === props.key(all[0])) {
+      scroll.scrollTo(0, 0)
+      return
+    }
+    const key = active()
+    if (!key) return
+    const element = findByKey(scroll, key)
+    if (!element) return
+    scrollIntoView(scroll, element, "center")
+  })
+
+  createEffect(() => {
+    const all = flat()
+    const current = active()
+    const item = all.find((x) => props.key(x) === current)
+    props.onMove?.(item)
+  })
+
+  const handleSelect = (item: T | undefined, index: number) => {
+    props.onSelect?.(item, index)
+  }
+
+  const handleKey = (e: KeyboardEvent) => {
+    setStore("mouseActive", false)
+    if (e.key === "Escape") return
+
+    const all = flat()
+    const selected = all.find((x) => props.key(x) === active())
+    const index = selected ? all.indexOf(selected) : -1
+    props.onKeyEvent?.(e, selected)
+
+    if (e.key === "Enter" && !e.isComposing) {
+      e.preventDefault()
+      if (selected) handleSelect(selected, index)
+    } else {
+      onKeyDown(e)
+    }
+  }
+
+  props.ref?.({
+    onKeyDown: handleKey,
+    setScrollRef,
+  })
+
+  function GroupHeader(groupProps: { category: string }): JSX.Element {
+    const [stuck, setStuck] = createSignal(false)
+    const [header, setHeader] = createSignal<HTMLDivElement | undefined>(undefined)
+
+    createEffect(() => {
+      const scroll = scrollRef()
+      const node = header()
+      if (!scroll || !node) return
+
+      const handler = () => {
+        const rect = node.getBoundingClientRect()
+        const scrollRect = scroll.getBoundingClientRect()
+        setStuck(rect.top <= scrollRect.top + 1 && scroll.scrollTop > 0)
+      }
+
+      scroll.addEventListener("scroll", handler, { passive: true })
+      handler()
+      onCleanup(() => scroll.removeEventListener("scroll", handler))
+    })
+
+    return (
+      <div data-slot="list-header" data-stuck={stuck()} ref={setHeader}>
+        {groupProps.category}
+      </div>
+    )
+  }
+
+  const emptyMessage = () => {
+    if (grouped.loading) return props.loadingMessage ?? i18n.t("ui.list.loading")
+    if (props.emptyMessage) return props.emptyMessage
+
+    const query = filter()
+    if (!query) return i18n.t("ui.list.empty")
+
+    const suffix = i18n.t("ui.list.emptyWithFilter.suffix")
+    return (
+      <>
+        <span>{i18n.t("ui.list.emptyWithFilter.prefix")}</span>
+        <span data-slot="list-filter">&quot;{query}&quot;</span>
+        <Show when={suffix}>
+          <span>{suffix}</span>
+        </Show>
+      </>
+    )
+  }
+
+  return (
+    <div data-component="list" classList={{ [props.class ?? ""]: !!props.class }}>
+      <Show when={!!props.search}>
+        <div data-slot="list-search-wrapper">
+          <div data-slot="list-search" classList={{ [searchProps().class ?? ""]: !!searchProps().class }}>
+            <div data-slot="list-search-container">
+              <Show when={!searchProps().hideIcon}>
+                <Icon name="magnifying-glass" />
+              </Show>
+              <TextField
+                autofocus={searchProps().autofocus}
+                variant="ghost"
+                data-slot="list-search-input"
+                type="text"
+                value={internalFilter()}
+                onChange={setInternalFilter}
+                onKeyDown={handleKey}
+                placeholder={searchProps().placeholder}
+                spellcheck={false}
+                autocorrect="off"
+                autocomplete="off"
+                autocapitalize="off"
+              />
+            </div>
+            <Show when={internalFilter()}>
+              <IconButton
+                icon="circle-x"
+                variant="ghost"
+                onClick={() => setInternalFilter("")}
+                aria-label={i18n.t("ui.list.clearFilter")}
+              />
+            </Show>
+          </div>
+          {searchAction()}
+        </div>
+      </Show>
+      <div ref={setScrollRef} data-slot="list-scroll">
+        <Show
+          when={flat().length > 0}
+          fallback={
+            <div data-slot="list-empty-state">
+              <div data-slot="list-message">{emptyMessage()}</div>
+            </div>
+          }
+        >
+          <For each={grouped.latest}>
+            {(group) => (
+              <div data-slot="list-group">
+                <Show when={group.category}>
+                  <GroupHeader category={group.category} />
+                </Show>
+                <div data-slot="list-items">
+                  <For each={group.items}>
+                    {(item, i) => {
+                      const node = (
+                        <button
+                          data-slot="list-item"
+                          data-key={props.key(item)}
+                          data-active={props.key(item) === active()}
+                          data-selected={item === props.current}
+                          onClick={() => handleSelect(item, i())}
+                          type="button"
+                          onMouseMove={(event) => {
+                            if (!moved(event)) return
+                            setStore("mouseActive", true)
+                            setActive(props.key(item))
+                          }}
+                          onMouseLeave={() => {
+                            if (!store.mouseActive) return
+                            setActive(null)
+                          }}
+                        >
+                          {props.children(item)}
+                          <Show when={item === props.current}>
+                            <span data-slot="list-item-selected-icon">
+                              <Icon name="check-small" />
+                            </span>
+                          </Show>
+                          <Show when={props.activeIcon}>
+                            {(icon) => (
+                              <span data-slot="list-item-active-icon">
+                                <Icon name={icon()} />
+                              </span>
+                            )}
+                          </Show>
+                        </button>
+                      )
+                      if (props.itemWrapper) return props.itemWrapper(item, node)
+                      return node
+                    }}
+                  </For>
+                </div>
+              </div>
+            )}
+          </For>
+        </Show>
+      </div>
+    </div>
+  )
+}

package/src/components/logo.css

@@ -0,0 +1,4 @@
+[data-component="logo-mark"] {
+  width: 16px;
+  aspect-ratio: 4/5;
+}