Skip to content

Commit ada40de

Browse files
adamdotdevinadamdotdevin
committed
wip(desktop): progress
1 parent 6866a06 commit ada40de

12 files changed

Lines changed: 101 additions & 553 deletions

File tree

‎packages/desktop/src/components/prompt-input.tsx‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { createEffect, on, Component, Show, For, onMount, onCleanup, Switch, Mat
33
import { createStore } from "solid-js/store"
44
import { createFocusSignal } from "@solid-primitives/active-element"
55
import { useLocal } from "@/context/local"
6-
import { DateTime } from "luxon"
76
import { ContentPart, DEFAULT_PROMPT, isPromptEqual, Prompt, useSession } from "@/context/session"
87
import { useSDK } from "@/context/sdk"
98
import { useNavigate } from "@solidjs/router"
@@ -14,10 +13,9 @@ import { Button } from "@opencode-ai/ui/button"
1413
import { Icon } from "@opencode-ai/ui/icon"
1514
import { Tooltip } from "@opencode-ai/ui/tooltip"
1615
import { IconButton } from "@opencode-ai/ui/icon-button"
17-
import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
1816
import { Select } from "@opencode-ai/ui/select"
17+
import { Tag } from "@opencode-ai/ui/tag"
1918
import { getDirectory, getFilename } from "@opencode-ai/util/path"
20-
import { type IconName } from "@opencode-ai/ui/icons/provider"
2119

2220
interface PromptInputProps {
2321
class?: string
@@ -486,20 +484,10 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
486484
}
487485
>
488486
{(i) => (
489-
<div class="w-full flex items-center justify-between gap-x-3">
490-
<div class="flex items-center gap-x-2.5 text-text-muted grow min-w-0">
491-
{/* <ProviderIcon name={i.provider.id as IconName} class="size-6 p-0.5 shrink-0" /> */}
492-
<div class="flex gap-x-3 items-baseline flex-[1_0_0]">
493-
<span class="text-14-medium text-text-strong overflow-hidden text-ellipsis">{i.name}</span>
494-
<Show when={false}>
495-
<span class="text-12-medium text-text-weak overflow-hidden text-ellipsis truncate min-w-0">
496-
{DateTime.fromFormat("unknown", "yyyy-MM-dd").toFormat("LLL yyyy")}
497-
</span>
498-
</Show>
499-
</div>
500-
</div>
487+
<div class="w-full flex items-center gap-x-2.5">
488+
<span>{i.name}</span>
501489
<Show when={!i.cost || i.cost?.input === 0}>
502-
<div class="overflow-hidden text-12-medium text-text-strong">Free</div>
490+
<Tag>Free</Tag>
503491
</Show>
504492
</div>
505493
)}

‎packages/ui/index.html‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎packages/ui/src/components/icon.tsx‎

Lines changed: 20 additions & 167 deletions
Large diffs are not rendered by default.

‎packages/ui/src/components/select-dialog.css‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -103,20 +103,31 @@
103103
display: flex;
104104
flex-direction: column;
105105
align-items: flex-start;
106-
gap: 4px;
107106
align-self: stretch;
108107

109108
[data-slot="select-dialog-item"] {
110109
display: flex;
111110
width: 100%;
112-
height: 32px;
113-
padding: 4px 8px 4px 4px;
111+
height: 28px;
112+
padding: 4px 10px;
114113
align-items: center;
114+
color: var(--text-strong);
115+
116+
/* text-14-medium */
117+
font-family: var(--font-family-sans);
118+
font-size: 14px;
119+
font-style: normal;
120+
font-weight: var(--font-weight-medium);
121+
line-height: var(--line-height-large); /* 142.857% */
122+
letter-spacing: var(--letter-spacing-normal);
115123

116124
&[data-active="true"] {
117125
border-radius: var(--radius-md);
118126
background: var(--surface-raised-base-hover);
119127
}
128+
&[data-selected="true"] {
129+
background: var(--surface-raised-base-hover);
130+
}
120131
}
121132
}
122133
}

‎packages/ui/src/components/select-dialog.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,13 +145,15 @@ export function SelectDialog<T>(props: SelectDialogProps<T>) {
145145
data-slot="select-dialog-item"
146146
data-key={others.key(item)}
147147
data-active={others.key(item) === active()}
148+
data-selected={item === others.current}
148149
onClick={() => handleSelect(item)}
149150
onMouseMove={() => {
150151
setStore("mouseActive", true)
151152
setActive(others.key(item))
152153
}}
153154
>
154155
{others.children(item)}
156+
<Icon name="check-small" size="small" />
155157
</button>
156158
)}
157159
</For>

‎packages/ui/src/components/tag.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
[data-component="tag"] {
2+
display: inline-flex;
3+
align-items: center;
4+
justify-content: center;
5+
user-select: none;
6+
7+
border-radius: var(--radius-xs);
8+
border: 0.5px solid var(--border-weak-base);
9+
background: var(--surface-raised-base);
10+
color: var(--text-base);
11+
12+
&[data-size="normal"] {
13+
height: 18px;
14+
padding: 0 6px;
15+
16+
/* text-12-medium */
17+
font-family: var(--font-family-sans);
18+
font-size: var(--font-size-small);
19+
font-style: normal;
20+
font-weight: var(--font-weight-medium);
21+
line-height: var(--line-height-large); /* 166.667% */
22+
letter-spacing: var(--letter-spacing-normal);
23+
}
24+
25+
&[data-size="large"] {
26+
height: 22px;
27+
padding: 0 8px;
28+
29+
/* text-14-medium */
30+
font-family: var(--font-family-sans);
31+
font-size: 14px;
32+
font-style: normal;
33+
font-weight: var(--font-weight-medium);
34+
line-height: var(--line-height-large); /* 142.857% */
35+
letter-spacing: var(--letter-spacing-normal);
36+
}
37+
}

‎packages/ui/src/components/tag.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { type ComponentProps, splitProps } from "solid-js"
2+
3+
export interface TagProps extends ComponentProps<"span"> {
4+
size?: "normal" | "large"
5+
}
6+
7+
export function Tag(props: TagProps) {
8+
const [split, rest] = splitProps(props, ["size", "class", "classList", "children"])
9+
return (
10+
<span
11+
{...rest}
12+
data-component="tag"
13+
data-size={split.size || "normal"}
14+
classList={{
15+
...(split.classList ?? {}),
16+
[split.class ?? ""]: !!split.class,
17+
}}
18+
>
19+
{split.children}
20+
</span>
21+
)
22+
}

0 commit comments

Comments
 (0)