Skip to content

Commit 33ea685

Browse files
jonathanlabjonathanlab
committed
feat: bunch of ui tweaks
1 parent f9a23e9 commit 33ea685

File tree

9 files changed

+155
-139
lines changed

9 files changed

+155
-139
lines changed

‎src/main/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ function createWindow(): void {
3434
mainWindow?.show();
3535
});
3636

37+
3738
// Set up menu for keyboard shortcuts
3839
const template: MenuItemConstructorOptions[] = [
3940
{

‎src/renderer/components/AuthScreen.tsx‎

Lines changed: 69 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useState } from 'react';
2-
import { Container, Flex, Card, Heading, Text, TextField, Button, Callout } from '@radix-ui/themes';
2+
import { Container, Flex, Card, Heading, Text, TextField, Button, Callout, Box } from '@radix-ui/themes';
33
import { useAuthStore } from '../stores/authStore';
4+
import { AsciiArt } from './AsciiArt';
45

56
export function AuthScreen() {
67
const [apiKey, setApiKey] = useState('');
@@ -25,71 +26,79 @@ export function AuthScreen() {
2526
};
2627

2728
return (
28-
<Container size="1">
29-
<Flex direction="column" align="center" justify="center" minHeight="100vh">
30-
<Card size="3">
31-
<Flex direction="column" gap="6" width="25vw">
32-
<Flex direction="column" gap="2">
33-
<Heading size="4">Array</Heading>
34-
</Flex>
29+
<Flex height="100vh">
30+
{/* Left pane - Auth form */}
31+
<Box width="50%" className="border-r border-gray-6">
32+
<Container size="1">
33+
<Flex direction="column" align="center" justify="center" height="100vh">
34+
<Card size="3">
35+
<Flex direction="column" gap="6" width="25vw">
36+
<Flex direction="column" gap="2">
37+
<Heading size="4">Array</Heading>
38+
</Flex>
3539

36-
<form onSubmit={handleSubmit}>
37-
<Flex direction="column" gap="4">
38-
<Flex direction="column" gap="6">
40+
<form onSubmit={handleSubmit}>
41+
<Flex direction="column" gap="4">
42+
<Flex direction="column" gap="6">
43+
<Flex direction="column" gap="2">
44+
<Text as="label" htmlFor="apiKey" size="2" weight="medium" color="gray">
45+
Personal API Key
46+
</Text>
47+
<TextField.Root
48+
id="apiKey"
49+
type="password"
50+
value={apiKey}
51+
onChange={(e) => setApiKey(e.target.value)}
52+
placeholder="phx_..."
53+
required
54+
/>
55+
<Text size="1" color="gray">
56+
Get your API key from PostHog settings
57+
</Text>
58+
</Flex>
3959

60+
<Flex direction="column" gap="2">
61+
<Text as="label" htmlFor="apiHost" size="2" weight="medium" color="gray">
62+
PostHog Instance URL
63+
</Text>
64+
<TextField.Root
65+
id="apiHost"
66+
type="url"
67+
value={apiHost}
68+
onChange={(e) => setApiHost(e.target.value)}
69+
placeholder="https://app.posthog.com"
70+
required
71+
/>
72+
</Flex>
73+
</Flex>
4074

41-
<Flex direction="column" gap="2">
42-
<Text as="label" htmlFor="apiKey" size="2" weight="medium" color="gray">
43-
Personal API Key
44-
</Text>
45-
<TextField.Root
46-
id="apiKey"
47-
type="password"
48-
value={apiKey}
49-
onChange={(e) => setApiKey(e.target.value)}
50-
placeholder="phx_..."
51-
required
52-
/>
53-
<Text size="1" color="gray">
54-
Get your API key from PostHog settings
55-
</Text>
56-
</Flex>
75+
{error && (
76+
<Callout.Root color="red">
77+
<Callout.Text>{error}</Callout.Text>
78+
</Callout.Root>
79+
)}
5780

58-
<Flex direction="column" gap="2">
59-
<Text as="label" htmlFor="apiHost" size="2" weight="medium" color="gray">
60-
PostHog Instance URL
61-
</Text>
62-
<TextField.Root
63-
id="apiHost"
64-
type="url"
65-
value={apiHost}
66-
onChange={(e) => setApiHost(e.target.value)}
67-
placeholder="https://app.posthog.com"
68-
required
69-
/>
81+
<Button
82+
type="submit"
83+
disabled={isLoading || !apiKey}
84+
variant='classic'
85+
size="3"
86+
mt="4"
87+
>
88+
{isLoading ? 'Connecting...' : 'Connect'}
89+
</Button>
7090
</Flex>
71-
</Flex>
72-
73-
{error && (
74-
<Callout.Root color="red">
75-
<Callout.Text>{error}</Callout.Text>
76-
</Callout.Root>
77-
)}
78-
79-
<Button
80-
type="submit"
81-
disabled={isLoading || !apiKey}
82-
variant='classic'
83-
size="3"
84-
mt="4"
85-
>
86-
{isLoading ? 'Connecting...' : 'Connect'}
87-
</Button>
91+
</form>
8892
</Flex>
89-
</form>
93+
</Card>
9094
</Flex>
91-
</Card>
92-
</Flex>
93-
</Container>
95+
</Container>
96+
</Box>
97+
98+
{/* Right pane - ASCII Art */}
99+
<Box width="50%" height="100%">
100+
<AsciiArt scale={1} />
101+
</Box>
102+
</Flex>
94103
);
95104
}

‎src/renderer/components/LogView.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect, useRef } from 'react';
2-
import { Flex, Box, Heading, Text, Code, Button, IconButton } from '@radix-ui/themes';
2+
import { Flex, Box, Heading, Text, Code, IconButton } from '@radix-ui/themes';
33
import { TrashIcon } from '@radix-ui/react-icons';
44
import { LogEntry, formatTime } from '../types/log';
55
import { ToolCallView } from './log/ToolCallView';
@@ -27,7 +27,6 @@ export function LogView({ logs, isRunning, onClearLogs }: LogViewProps) {
2727
<Flex direction="column" align="center" justify="center" height="100%" p="8">
2828
<Flex direction="column" align="center" gap="2">
2929
<Text color="gray">No activity yet</Text>
30-
<Text size="2" color="gray">Run the task to see logs here</Text>
3130
</Flex>
3231
</Flex>
3332
);

‎src/renderer/components/StatusBar.tsx‎

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Flex, Text, Kbd, Badge, Code } from '@radix-ui/themes';
2+
import { Flex, Kbd, Badge, Code, Box } from '@radix-ui/themes';
33
import { useStatusBarStore } from '../stores/statusBarStore';
44
import { StatusBarMenu } from './StatusBarMenu';
55

@@ -15,22 +15,13 @@ export function StatusBar({ showKeyHints = true }: StatusBarProps) {
1515
const version = '0.1.0'; // You can get this from package.json or env vars
1616

1717
return (
18-
<div
19-
className="border-t border-gray-6 bg-gray-2"
20-
style={{
21-
display: 'flex',
22-
alignItems: 'center',
23-
justifyContent: 'space-between',
24-
padding: '8px 16px',
25-
minHeight: '32px',
26-
boxSizing: 'border-box',
27-
position: 'relative'
28-
}}
18+
<Box
19+
className="border-t border-gray-6 bg-gray-2 flex flex-row items-center justify-between py-2 px-4 "
2920
>
3021
<Flex align="center" gap="2">
3122
<StatusBarMenu />
3223
<Code size="1" variant="ghost" color="gray">
33-
{statusText}
24+
{statusText && '- '}{statusText}
3425
</Code>
3526
</Flex>
3627

@@ -63,6 +54,6 @@ export function StatusBar({ showKeyHints = true }: StatusBarProps) {
6354
<Code size="1" variant="ghost">v{version}</Code>
6455
</Badge>
6556
</Flex>
66-
</div>
57+
</Box>
6758
);
6859
}

‎src/renderer/components/StatusBarMenu.tsx‎

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
2-
import { Flex, Text, DropdownMenu, Switch } from '@radix-ui/themes';
3-
import { ChevronUpIcon, ExitIcon } from '@radix-ui/react-icons';
2+
import { Flex, Text, DropdownMenu, Switch, Code, Button } from '@radix-ui/themes';
3+
import { ExitIcon } from '@radix-ui/react-icons';
44
import { useThemeStore } from '../stores/themeStore';
55
import { useAuthStore } from '../stores/authStore';
66

@@ -12,21 +12,12 @@ export function StatusBarMenu() {
1212
return (
1313
<DropdownMenu.Root>
1414
<DropdownMenu.Trigger>
15-
<button
16-
className="text-gray-9 hover:text-gray-11"
17-
style={{
18-
background: 'none',
19-
border: 'none',
20-
cursor: 'pointer',
21-
padding: '8px',
22-
margin: '-8px',
23-
display: 'flex',
24-
alignItems: 'center',
25-
transition: 'color 0.15s'
26-
}}
15+
<Button
16+
size="1"
17+
variant="ghost"
2718
>
28-
<ChevronUpIcon className="w-3 h-3" />
29-
</button>
19+
<Code size="1" color="gray" variant="ghost">ARRAY</Code>
20+
</Button>
3021
</DropdownMenu.Trigger>
3122

3223
<DropdownMenu.Content >

‎src/renderer/components/TaskDetail.tsx‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useEffect } from 'react';
2-
import { Flex, Box, Text, Badge, Button, Link, SegmentedControl, DataList, Code } from '@radix-ui/themes';
2+
import { Flex, Box, Badge, Button, Link, SegmentedControl, DataList, Code } from '@radix-ui/themes';
3+
import { Pencil1Icon } from '@radix-ui/react-icons';
34
import { Task } from '@shared/types';
45
import { format } from 'date-fns';
56
import { useStatusBarStore } from '../stores/statusBarStore';
@@ -91,7 +92,13 @@ export function TaskDetail({ task }: TaskDetailProps) {
9192
<DataList.Item>
9293
<DataList.Label>Remote Repository</DataList.Label>
9394
<DataList.Value>
94-
{task.repository_config.organization}/{task.repository_config.repository}
95+
<Link
96+
href={`https://github.com/${task.repository_config.organization}/${task.repository_config.repository}`}
97+
target="_blank"
98+
size="2"
99+
>
100+
{task.repository_config.organization}/{task.repository_config.repository} →
101+
</Link>
95102
</DataList.Value>
96103
</DataList.Item>
97104
)}
@@ -132,7 +139,15 @@ export function TaskDetail({ task }: TaskDetailProps) {
132139
<DataList.Label>Working Directory</DataList.Label>
133140
<DataList.Value>
134141
{repoPath ? (
135-
<Text size="2">{repoPath}</Text>
142+
<Button
143+
size="1"
144+
variant="ghost"
145+
onClick={handleSelectRepo}
146+
className="group cursor-pointer"
147+
>
148+
<Code variant="ghost" size="2">{repoPath}</Code>
149+
<Pencil1Icon className="opacity-0 group-hover:opacity-100 transition-opacity ml-2" />
150+
</Button>
136151
) : (
137152
<Button size="1" variant="outline" onClick={handleSelectRepo}>
138153
Choose folder

‎src/renderer/components/TaskList.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ function TaskItem({ task, isSelected, onClick }: TaskItemProps) {
193193
onClick={onClick}
194194
>
195195
<Flex align="center" gap="2">
196-
<Text color="gray" size="2">
196+
<Text color="gray" size="1">
197197
{isSelected ? '[•]' : '[ ]'}
198198
</Text>
199199

@@ -204,7 +204,7 @@ function TaskItem({ task, isSelected, onClick }: TaskItemProps) {
204204
{status}
205205
</Badge>
206206

207-
<Text className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">
207+
<Text size="2" className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">
208208
{task.title}
209209
</Text>
210210

0 commit comments

Comments
 (0)