From f9dcd979364acc5172fd0044c1c8b04dcaec9229 Mon Sep 17 00:00:00 2001 From: Aiden Cline Date: Thu, 4 Dec 2025 15:57:01 -0600 Subject: Revert "feat(desktop): terminal pane (#5081)" This reverts commit d763c11a6d5bc57869f11c87f5a293f61e427e0a. --- packages/ui/src/components/icon.tsx | 7 +-- packages/ui/src/components/select.css | 2 - packages/ui/src/components/select.tsx | 56 ++++++++------------ packages/ui/src/components/tabs.css | 96 ++++------------------------------ packages/ui/src/components/tabs.tsx | 17 +++--- packages/ui/src/components/tooltip.css | 7 +-- 6 files changed, 44 insertions(+), 141 deletions(-) (limited to 'packages/ui/src/components') diff --git a/packages/ui/src/components/icon.tsx b/packages/ui/src/components/icon.tsx index 9e4f00a0d..306d79649 100644 --- a/packages/ui/src/components/icon.tsx +++ b/packages/ui/src/components/icon.tsx @@ -153,10 +153,10 @@ const newIcons = { stop: ``, enter: ``, "layout-left": ``, - "layout-left-partial": ``, + "layout-left-partial": ``, "layout-left-full": ``, "layout-right": ``, - "layout-right-partial": ``, + "layout-right-partial": ``, "layout-right-full": ``, "speech-bubble": ``, "align-right": ``, @@ -167,9 +167,6 @@ const newIcons = { "bubble-5": ``, github: ``, discord: ``, - "layout-bottom": ``, - "layout-bottom-partial": ``, - "layout-bottom-full": ``, } export interface IconProps extends ComponentProps<"svg"> { diff --git a/packages/ui/src/components/select.css b/packages/ui/src/components/select.css index 96ddf174c..421215a78 100644 --- a/packages/ui/src/components/select.css +++ b/packages/ui/src/components/select.css @@ -20,7 +20,6 @@ [data-component="select-content"] { min-width: 4rem; - max-width: 23rem; overflow: hidden; border-radius: var(--radius-md); border-width: 1px; @@ -40,7 +39,6 @@ } [data-slot="select-select-content-list"] { - min-height: 2rem; overflow-y: auto; max-height: 12rem; white-space: nowrap; diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx index 9ba1f177b..464900ef9 100644 --- a/packages/ui/src/components/select.tsx +++ b/packages/ui/src/components/select.tsx @@ -1,10 +1,10 @@ import { Select as Kobalte } from "@kobalte/core/select" -import { createMemo, splitProps, type ComponentProps } from "solid-js" +import { createMemo, type ComponentProps } from "solid-js" import { pipe, groupBy, entries, map } from "remeda" import { Button, ButtonProps } from "./button" import { Icon } from "./icon" -export type SelectProps = Omit>, "value" | "onSelect"> & { +export interface SelectProps { placeholder?: string options: T[] current?: T @@ -17,21 +17,10 @@ export type SelectProps = Omit>, "value" | " } export function Select(props: SelectProps & ButtonProps) { - const [local, others] = splitProps(props, [ - "class", - "classList", - "placeholder", - "options", - "current", - "value", - "label", - "groupBy", - "onSelect", - ]) const grouped = createMemo(() => { const result = pipe( - local.options, - groupBy((x) => (local.groupBy ? local.groupBy(x) : "")), + props.options, + groupBy((x) => (props.groupBy ? props.groupBy(x) : "")), // mapValues((x) => x.sort((a, b) => a.title.localeCompare(b.title))), entries(), map(([k, v]) => ({ category: k, options: v })), @@ -40,30 +29,28 @@ export function Select(props: SelectProps & ButtonProps) { }) return ( - // @ts-ignore - {...others} data-component="select" - value={local.current} + value={props.current} options={grouped()} - optionValue={(x) => (local.value ? local.value(x) : (x as string))} - optionTextValue={(x) => (local.label ? local.label(x) : (x as string))} + optionValue={(x) => (props.value ? props.value(x) : (x as string))} + optionTextValue={(x) => (props.label ? props.label(x) : (x as string))} optionGroupChildren="options" - placeholder={local.placeholder} - sectionComponent={(local) => ( - {local.section.rawValue.category} + placeholder={props.placeholder} + sectionComponent={(props) => ( + {props.section.rawValue.category} )} itemComponent={(itemProps) => ( - {local.label ? local.label(itemProps.item.rawValue) : (itemProps.item.rawValue as string)} + {props.label ? props.label(itemProps.item.rawValue) : (itemProps.item.rawValue as string)} @@ -71,25 +58,24 @@ export function Select(props: SelectProps & ButtonProps) { )} onChange={(v) => { - local.onSelect?.(v ?? undefined) + props.onSelect?.(v ?? undefined) }} > data-slot="select-select-trigger-value"> {(state) => { - const selected = state.selectedOption() ?? local.current - if (!selected) return local.placeholder || "" - if (local.label) return local.label(selected) + const selected = state.selectedOption() ?? props.current + if (!selected) return props.placeholder || "" + if (props.label) return props.label(selected) return selected as string }} @@ -100,8 +86,8 @@ export function Select(props: SelectProps & ButtonProps) { diff --git a/packages/ui/src/components/tabs.css b/packages/ui/src/components/tabs.css index d60edc5c5..d03e57320 100644 --- a/packages/ui/src/components/tabs.css +++ b/packages/ui/src/components/tabs.css @@ -6,7 +6,7 @@ background-color: var(--background-stronger); overflow: clip; - [data-slot="tabs-list"] { + [data-slot="tabs-tabs-list"] { height: 48px; width: 100%; position: relative; @@ -36,7 +36,7 @@ } } - [data-slot="tabs-trigger-wrapper"] { + [data-slot="tabs-tabs-trigger-wrapper"] { position: relative; height: 100%; display: flex; @@ -58,14 +58,14 @@ border-right: 1px solid var(--border-weak-base); background-color: var(--background-base); - [data-slot="tabs-trigger"] { + [data-slot="tabs-tabs-trigger"] { display: flex; align-items: center; justify-content: center; padding: 14px 24px; } - [data-slot="tabs-trigger-close-button"] { + [data-slot="tabs-tabs-trigger-close-button"] { display: flex; align-items: center; justify-content: center; @@ -84,12 +84,12 @@ box-shadow: 0 0 0 2px var(--border-focus); } &:has([data-hidden]) { - [data-slot="tabs-trigger-close-button"] { + [data-slot="tabs-tabs-trigger-close-button"] { opacity: 0; } &:hover { - [data-slot="tabs-trigger-close-button"] { + [data-slot="tabs-tabs-trigger-close-button"] { opacity: 1; } } @@ -98,23 +98,23 @@ color: var(--text-strong); background-color: transparent; border-bottom-color: transparent; - [data-slot="tabs-trigger-close-button"] { + [data-slot="tabs-tabs-trigger-close-button"] { opacity: 1; } } &:hover:not(:disabled):not([data-selected]) { color: var(--text-strong); } - &:has([data-slot="tabs-trigger-close-button"]) { + &:has([data-slot="tabs-tabs-trigger-close-button"]) { padding-right: 12px; - [data-slot="tabs-trigger"] { + [data-slot="tabs-tabs-trigger"] { padding-right: 0; } } } - [data-slot="tabs-content"] { + [data-slot="tabs-tabs-content"] { overflow-y: auto; flex: 1; @@ -129,80 +129,4 @@ outline: none; } } - - &[data-variant="alt"] { - [data-slot="tabs-list"] { - padding-left: 24px; - padding-right: 24px; - gap: 12px; - border-bottom: 1px solid var(--border-weak-base); - background-color: transparent; - - &::after { - border: none; - background-color: transparent; - } - &:empty::after { - display: none; - } - } - - [data-slot="tabs-trigger-wrapper"] { - border: none; - color: var(--text-base); - background-color: transparent; - border-bottom-width: 2px; - border-bottom-style: solid; - border-bottom-color: transparent; - gap: 4px; - - /* text-14-regular */ - font-family: var(--font-family-sans); - font-size: var(--font-size-base); - font-style: normal; - font-weight: var(--font-weight-regular); - line-height: var(--line-height-x-large); /* 171.429% */ - letter-spacing: var(--letter-spacing-normal); - - [data-slot="tabs-trigger"] { - height: 100%; - padding: 4px; - background-color: transparent; - border-bottom-width: 2px; - border-bottom-color: transparent; - } - - [data-slot="tabs-trigger-close-button"] { - display: flex; - align-items: center; - justify-content: center; - } - - [data-component="icon-button"] { - width: 16px; - height: 16px; - margin: 0; - } - - &:has([data-selected]) { - color: var(--text-strong); - background-color: transparent; - border-bottom-color: var(--icon-strong-base); - } - - &:hover:not(:disabled):not([data-selected]) { - color: var(--text-strong); - } - - &:has([data-slot="tabs-trigger-close-button"]) { - padding-right: 0; - [data-slot="tabs-trigger"] { - padding-right: 0; - } - } - } - - /* [data-slot="tabs-content"] { */ - /* } */ - } } diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx index d91ad3c41..68acd88d4 100644 --- a/packages/ui/src/components/tabs.tsx +++ b/packages/ui/src/components/tabs.tsx @@ -2,9 +2,7 @@ import { Tabs as Kobalte } from "@kobalte/core/tabs" import { Show, splitProps, type JSX } from "solid-js" import type { ComponentProps, ParentProps } from "solid-js" -export interface TabsProps extends ComponentProps { - variant?: "normal" | "alt" -} +export interface TabsProps extends ComponentProps {} export interface TabsListProps extends ComponentProps {} export interface TabsTriggerProps extends ComponentProps { classes?: { @@ -16,12 +14,11 @@ export interface TabsTriggerProps extends ComponentProps export interface TabsContentProps extends ComponentProps {} function TabsRoot(props: TabsProps) { - const [split, rest] = splitProps(props, ["class", "classList", "variant"]) + const [split, rest] = splitProps(props, ["class", "classList"]) return ( ) { ]) return (
) { > {split.children} {(closeButton) => ( -
+
{closeButton()}
)} @@ -84,7 +81,7 @@ function TabsContent(props: ParentProps) { return (