From 679270d9e0731c2b3e2c059d83907cb4086d90e2 Mon Sep 17 00:00:00 2001 From: Adam <2363879+adamdotdevin@users.noreply.github.com> Date: Mon, 12 Jan 2026 10:11:29 -0600 Subject: feat(app): new layout --- packages/ui/src/components/hover-card.css | 55 +++++++++++++++++++++++++++++++ packages/ui/src/components/hover-card.tsx | 31 +++++++++++++++++ packages/ui/src/components/icon.tsx | 6 ++-- packages/ui/src/components/spinner.tsx | 7 +++- 4 files changed, 96 insertions(+), 3 deletions(-) create mode 100644 packages/ui/src/components/hover-card.css create mode 100644 packages/ui/src/components/hover-card.tsx (limited to 'packages/ui/src/components') diff --git a/packages/ui/src/components/hover-card.css b/packages/ui/src/components/hover-card.css new file mode 100644 index 000000000..43a26c98f --- /dev/null +++ b/packages/ui/src/components/hover-card.css @@ -0,0 +1,55 @@ +[data-slot="hover-card-trigger"] { + display: inline-flex; +} + +[data-component="hover-card-content"] { + z-index: 50; + min-width: 200px; + max-width: 320px; + border-radius: var(--radius-md); + background-color: var(--surface-raised-stronger-non-alpha); + + border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent); + background-clip: padding-box; + box-shadow: var(--shadow-md); + + transform-origin: var(--kb-hovercard-content-transform-origin); + + &:focus-within { + outline: none; + } + + &[data-closed] { + animation: hover-card-close 0.15s ease-out; + } + + &[data-expanded] { + animation: hover-card-open 0.15s ease-out; + } + + [data-slot="hover-card-body"] { + padding: 12px; + } +} + +@keyframes hover-card-open { + from { + opacity: 0; + transform: scale(0.96); + } + to { + opacity: 1; + transform: scale(1); + } +} + +@keyframes hover-card-close { + from { + opacity: 1; + transform: scale(1); + } + to { + opacity: 0; + transform: scale(0.96); + } +} diff --git a/packages/ui/src/components/hover-card.tsx b/packages/ui/src/components/hover-card.tsx new file mode 100644 index 000000000..a920330c4 --- /dev/null +++ b/packages/ui/src/components/hover-card.tsx @@ -0,0 +1,31 @@ +import { HoverCard as Kobalte } from "@kobalte/core/hover-card" +import { ComponentProps, JSXElement, ParentProps, splitProps } from "solid-js" + +export interface HoverCardProps extends ParentProps, Omit, "children"> { + trigger: JSXElement + class?: ComponentProps<"div">["class"] + classList?: ComponentProps<"div">["classList"] +} + +export function HoverCard(props: HoverCardProps) { + const [local, rest] = splitProps(props, ["trigger", "class", "classList", "children"]) + + return ( + + + {local.trigger} + + + +
{local.children}
+ + + + ) +} diff --git a/packages/ui/src/components/icon.tsx b/packages/ui/src/components/icon.tsx index 17b5da489..a3e24c990 100644 --- a/packages/ui/src/components/icon.tsx +++ b/packages/ui/src/components/icon.tsx @@ -45,7 +45,6 @@ const icons = { "square-arrow-top-right": ``, "speech-bubble": ``, "folder-add-left": ``, - "settings-gear": ` `, github: ``, discord: ``, "layout-bottom": ``, @@ -60,7 +59,10 @@ const icons = { download: ``, menu: ``, server: ``, - branch: ``, + branch: ``, + edit: ``, + help: ``, + "settings-gear": ``, } export interface IconProps extends ComponentProps<"svg"> { diff --git a/packages/ui/src/components/spinner.tsx b/packages/ui/src/components/spinner.tsx index 41f4d9e71..b8cc933c8 100644 --- a/packages/ui/src/components/spinner.tsx +++ b/packages/ui/src/components/spinner.tsx @@ -10,9 +10,14 @@ const squares = Array.from({ length: 16 }, (_, i) => ({ outer: outerIndices.has(i), })) -export function Spinner(props: { class?: string; classList?: ComponentProps<"div">["classList"] }) { +export function Spinner(props: { + class?: string + classList?: ComponentProps<"div">["classList"] + style?: ComponentProps<"div">["style"] +}) { return (