salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: restyle chips via tokens

Browse Source
This commit is contained in:
Shantur Rathore
2025-10-28 20:18:36 +00:00
parent c6889bef1f
commit d473c73771
8 changed files with 111 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/agent-selector.tsx
View File

@@ -70,7 +70,7 @@ export default function AgentSelector(props: AgentSelectorProps) {
<Select.ItemLabel class="font-medium text-sm text-gray-900 dark:text-gray-100 flex items-center gap-2">
<span>{itemProps.item.rawValue.name}</span>
<Show when={itemProps.item.rawValue.mode === "subagent"}>
<span class="text-xs font-normal text-blue-600 dark:text-blue-300 bg-blue-50 dark:bg-blue-900/40 px-1.5 py-0.5 rounded">
<span class="neutral-badge">
subagent
</span>
</Show>
@@ -88,7 +88,7 @@ export default function AgentSelector(props: AgentSelectorProps) {
>
<Select.Trigger
data-agent-selector
class="inline-flex items-center justify-between gap-2 px-2 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 outline-none focus:ring-2 focus:ring-blue-500 text-xs min-w-[100px] transition-colors"
class="selector-trigger"
>
<Select.Value<Agent>>
{(state) => (
@@ -101,8 +101,8 @@ export default function AgentSelector(props: AgentSelectorProps) {
</Select.Trigger>
<Select.Portal>
<Select.Content class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-lg max-h-80 overflow-auto p-1 z-50">
<Select.Listbox class="bg-white dark:bg-gray-800" />
<Select.Content class="selector-popover max-h-80 overflow-auto p-1 z-50">
<Select.Listbox class="selector-listbox" />
</Select.Content>
</Select.Portal>
</Select>

4
src/components/attachment-chip.tsx
View File

@@ -9,13 +9,13 @@ interface AttachmentChipProps {
const AttachmentChip: Component<AttachmentChipProps> = (props) => {
return (
<div
class="inline-flex items-center gap-1 rounded bg-blue-100 px-2 py-1 text-sm text-blue-800 dark:bg-blue-900/30 dark:text-blue-300"
class="attachment-chip"
title={props.attachment.source.type === "file" ? props.attachment.source.path : undefined}
>
<span class="font-mono">{props.attachment.display}</span>
<button
onClick={props.onRemove}
class="flex h-4 w-4 items-center justify-center rounded hover:bg-blue-200 dark:hover:bg-blue-800"
class="attachment-remove"
aria-label="Remove attachment"
>
×

5
src/components/empty-state.tsx
View File

@@ -8,7 +8,7 @@ interface EmptyStateProps {
const EmptyState: Component<EmptyStateProps> = (props) => {
return (
<div class="flex h-full w-full items-center justify-center bg-gray-50 dark:bg-gray-900">
<div class="flex h-full w-full items-center justify-center" style="background-color: var(--surface-secondary);">
<div class="max-w-[500px] px-8 py-12 text-center">
<div class="mb-8 flex justify-center">
<Folder class="h-16 w-16 text-gray-400 dark:text-gray-600" />
@@ -21,7 +21,8 @@ const EmptyState: Component<EmptyStateProps> = (props) => {
<button
onClick={props.onSelectFolder}
disabled={props.isLoading}
class="mb-4 inline-flex items-center gap-2 rounded-lg bg-blue-600 px-6 py-3 text-base font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
class="mb-4 inline-flex items-center gap-2 rounded-lg px-6 py-3 text-base font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-offset-2 hover:opacity-90"
style="background-color: var(--accent-primary); color: var(--text-inverted); ring-color: var(--accent-primary); ring-offset-color: var(--surface-base);"
>
{props.isLoading ? (
<>

6
src/components/folder-selection-view.tsx
View File

@@ -248,11 +248,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
<button
onClick={handleBrowse}
disabled={props.isLoading}
class="w-full px-4 py-2.5 rounded-lg transition-all font-medium flex items-center justify-between text-sm disabled:cursor-not-allowed"
classList={{
"bg-blue-600 text-white hover:bg-blue-700": !props.isLoading,
"bg-gray-300 dark:bg-gray-600 text-gray-500 cursor-not-allowed": props.isLoading
}}
class={`w-full px-4 py-2.5 rounded-lg transition-all font-medium flex items-center justify-between text-sm disabled:cursor-not-allowed ${props.isLoading ? "selector-button-secondary disabled" : "selector-button-primary"}`}
onMouseEnter={() => setFocusMode("new")}
>
<div class="flex items-center gap-2 flex-1 justify-center">

42
src/components/instance-info.tsx
View File

@@ -75,14 +75,14 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
})
return (
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
<div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
<h2 class="text-base font-semibold text-gray-900 dark:text-gray-100">Instance Information</h2>
<div class="panel">
<div class="panel-header">
<h2 class="panel-title">Instance Information</h2>
</div>
<div class="p-4 space-y-3">
<div class="panel-body space-y-3">
<div>
<div class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">Folder</div>
<div class="text-xs text-gray-900 dark:text-gray-100 font-mono break-all bg-gray-50 dark:bg-gray-900 px-2 py-1.5 rounded border border-gray-200 dark:border-gray-700">
<div class="text-xs text-gray-900 dark:text-gray-100 font-mono break-all px-2 py-1.5 rounded border" style="background-color: var(--surface-secondary); border-color: var(--border-base); color: var(--text-primary);">
{props.instance.folder}
</div>
</div>
@@ -94,7 +94,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
<div class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">
Project
</div>
<div class="text-xs text-gray-900 dark:text-gray-100 font-mono bg-gray-50 dark:bg-gray-900 px-2 py-1.5 rounded border border-gray-200 dark:border-gray-700 truncate">
<div class="text-xs font-mono px-2 py-1.5 rounded border truncate" style="background-color: var(--surface-secondary); border-color: var(--border-base); color: var(--text-primary);">
{project().id}
</div>
</div>
@@ -125,7 +125,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
<div class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">
OpenCode Version
</div>
<div class="text-xs text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-900 px-2 py-1.5 rounded border border-gray-200 dark:border-gray-700">
<div class="text-xs px-2 py-1.5 rounded border" style="background-color: var(--surface-secondary); border-color: var(--border-base); color: var(--text-primary);">
v{metadata()?.version}
</div>
</div>
@@ -136,7 +136,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
<div class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">
Binary Path
</div>
<div class="text-xs text-gray-900 dark:text-gray-100 font-mono break-all bg-gray-50 dark:bg-gray-900 px-2 py-1.5 rounded border border-gray-200 dark:border-gray-700">
<div class="text-xs font-mono break-all px-2 py-1.5 rounded border" style="background-color: var(--surface-secondary); border-color: var(--border-base); color: var(--text-primary);">
{props.instance.binaryPath}
</div>
</div>
@@ -150,11 +150,11 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
<div class="space-y-1">
<For each={Object.entries(props.instance.environmentVariables!)}>
{([key, value]) => (
<div class="flex items-center gap-2 px-2 py-1.5 bg-gray-50 dark:bg-gray-900 rounded border border-gray-200 dark:border-gray-700">
<span class="text-xs text-gray-900 dark:text-gray-100 font-mono font-medium flex-1" title={key}>
<div class="flex items-center gap-2 px-2 py-1.5 rounded border" style="background-color: var(--surface-secondary); border-color: var(--border-base);">
<span class="text-xs font-mono font-medium flex-1" title={key} style="color: var(--text-primary);">
{key}
</span>
<span class="text-xs text-gray-600 dark:text-gray-400 font-mono flex-1" title={value}>
<span class="text-xs font-mono flex-1" title={value} style="color: var(--text-secondary);">
{value}
</span>
</div>
@@ -172,7 +172,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
<div class="space-y-1.5">
<For each={mcpServers()}>
{(server) => (
<div class="flex items-center justify-between px-2 py-1.5 bg-gray-50 dark:bg-gray-900 rounded border border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between px-2 py-1.5 rounded border" style="background-color: var(--surface-secondary); border-color: var(--border-base);">
<span class="text-xs text-gray-900 dark:text-gray-100 font-medium truncate">{server.name}</span>
<div class="flex items-center gap-1.5 flex-shrink-0">
<Show
@@ -226,24 +226,10 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
<div class="flex justify-between items-center">
<span class="text-gray-600 dark:text-gray-400">Status:</span>
<span
class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-medium"
classList={{
"bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400":
props.instance.status === "ready",
"bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400":
props.instance.status === "starting",
"bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400": props.instance.status === "error",
"bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300": props.instance.status === "stopped",
}}
class={`status-badge ${props.instance.status}`}
>
<div
class="w-1 h-1 rounded-full"
classList={{
"bg-green-600 animate-pulse": props.instance.status === "ready",
"bg-yellow-600 animate-pulse": props.instance.status === "starting",
"bg-red-600": props.instance.status === "error",
"bg-gray-600": props.instance.status === "stopped",
}}
class={`status-dot ${props.instance.status} ${props.instance.status === "ready" || props.instance.status === "starting" ? "animate-pulse" : ""}`}
/>
{props.instance.status}
</span>

3
src/components/prompt-input.tsx
View File

@@ -618,7 +618,8 @@ export default function PromptInput(props: PromptInputProps) {
<div class="prompt-input-container">
<div
ref={containerRef}
class={`prompt-input-wrapper relative ${isDragging() ? "border-2 border-blue-500 bg-blue-50 dark:bg-blue-900/10" : ""}`}
class={`prompt-input-wrapper relative ${isDragging() ? "border-2" : ""}`}
style={isDragging() ? "border-color: var(--accent-primary); background-color: rgba(0, 102, 255, 0.05);" : ""}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}

12
src/components/session-picker.tsx
View File

@@ -66,8 +66,8 @@ const SessionPicker: Component<SessionPickerProps> = (props) => {
<Dialog.Portal>
<Dialog.Overlay class="fixed inset-0 bg-black/50 z-50" />
<div class="fixed inset-0 z-50 flex items-center justify-center p-4">
<Dialog.Content class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-2xl w-full max-w-lg p-6">
<Dialog.Title class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
<Dialog.Content class="modal-surface w-full max-w-lg p-6">
<Dialog.Title class="text-xl font-semibold mb-4" style="color: var(--text-primary);">
OpenCode • {instance()?.folder.split("/").pop()}
</Dialog.Title>
@@ -109,19 +109,19 @@ const SessionPicker: Component<SessionPickerProps> = (props) => {
<div class="w-full border-t border-gray-300 dark:border-gray-700" />
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white dark:bg-gray-900 text-gray-500 dark:text-gray-400">or</span>
<span class="px-2" style="background-color: var(--surface-base); color: var(--text-muted);">or</span>
</div>
</div>
<div>
<h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Start new session:</h3>
<h3 class="text-sm font-medium mb-2" style="color: var(--text-secondary);">Start new session:</h3>
<div class="space-y-3">
<Show
when={agentList().length > 0}
fallback={<div class="text-sm text-gray-500 dark:text-gray-400">Loading agents...</div>}
>
<select
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded text-sm bg-white dark:bg-gray-800 dark:text-gray-100 hover:border-gray-400 dark:hover:border-gray-500 transition-colors"
class="selector-input"
value={selectedAgent()}
onChange={(e) => setSelectedAgent(e.currentTarget.value)}
>
@@ -130,7 +130,7 @@ const SessionPicker: Component<SessionPickerProps> = (props) => {
</Show>
<button
class="w-full px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 dark:hover:bg-blue-500 disabled:bg-gray-300 dark:disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500/40"
class="selector-button-primary w-full"
onClick={handleNewSession}
disabled={isCreating() || agentList().length === 0}
>

79
src/styles/components.css
View File

@@ -154,6 +154,85 @@
background-color: rgba(0, 128, 255, 0.2);
}
/* Neutral badge utilities */
.neutral-badge {
@apply inline-flex items-center rounded px-1.5 py-0.5 text-xs font-normal;
--badge-bg: rgba(0, 102, 255, 0.05);
--badge-text: #0066ff;
background-color: var(--badge-bg);
color: var(--badge-text);
}
[data-theme="dark"] .neutral-badge {
--badge-bg: rgba(0, 128, 255, 0.15);
--badge-text: #0080ff;
}
/* Status badge utilities */
.status-badge {
@apply inline-flex items-center gap-1.5 rounded px-2 py-1 text-xs font-medium;
}
.status-badge.ready {
background-color: rgba(34, 197, 94, 0.1);
color: #16a34a;
}
[data-theme="dark"] .status-badge.ready {
background-color: rgba(34, 197, 94, 0.2);
color: #22c55e;
}
.status-badge.starting {
background-color: rgba(250, 204, 21, 0.1);
color: #ca8a04;
}
[data-theme="dark"] .status-badge.starting {
background-color: rgba(250, 204, 21, 0.2);
color: #facc15;
}
.status-badge.error {
background-color: rgba(239, 68, 68, 0.1);
color: #dc2626;
}
[data-theme="dark"] .status-badge.error {
background-color: rgba(239, 68, 68, 0.2);
color: #ef4444;
}
.status-badge.stopped {
background-color: rgba(107, 114, 128, 0.1);
color: #6b7280;
}
[data-theme="dark"] .status-badge.stopped {
background-color: rgba(107, 114, 128, 0.2);
color: #9ca3af;
}
.status-dot {
@apply w-1 h-1 rounded-full;
}
.status-dot.ready {
background-color: #16a34a;
}
.status-dot.starting {
background-color: #ca8a04;
}
.status-dot.error {
background-color: #dc2626;
}
.status-dot.stopped {
background-color: #6b7280;
}
/* Tab component utilities */
.tab-bar {
@apply border-b;