Skip to content

fix(web): remove non-functional ui affordances from the sandbox #341

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tiana-code merged 1 commit into from
Jun 29, 2026
Merged

fix(web): remove non-functional ui affordances from the sandbox #341

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 5 additions & 41 deletions web/src/components/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { Icon, type IconName } from './Icon'
interface NavItem {
name: string
icon: IconName
path?: string
path: string
}

const NAV: NavItem[] = [
Expand All @@ -17,7 +17,6 @@ const NAV: NavItem[] = [
{ name: 'Payments', icon: 'send', path: '/payments' },
{ name: 'Decisions', icon: 'scale', path: '/decisions' },
{ name: 'Compliance', icon: 'shield', path: '/compliance/cases' },
{ name: 'Audit', icon: 'book' },
]

const SERVICES = ['postgres', 'redpanda', 'keycloak', 'redis']
Expand Down Expand Up @@ -69,30 +68,9 @@ export function Sidebar({ active = 'Overview' }: { active?: string }) {
</div>
</div>

<div style={{ padding: '12px 12px 8px' }}>
<div
style={{
display: 'flex',
alignItems: 'center',
gap: 8,
height: 28,
padding: '0 10px',
background: 'var(--bg)',
border: '1px solid var(--border)',
borderRadius: 4,
color: 'var(--text-3)',
fontSize: 12,
}}
>
<Icon name="search" size={13} />
<span style={{ flex: 1 }}>Jump to...</span>
<span className="kbd">Cmd K</span>
</div>
</div>

<nav
style={{
padding: '4px 8px',
padding: '12px 8px 4px',
flex: 1,
display: 'flex',
flexDirection: 'column',
Expand All @@ -116,29 +94,16 @@ export function Sidebar({ active = 'Overview' }: { active?: string }) {
paddingLeft: 8,
textDecoration: 'none',
}
const content = (
<>
<Icon name={item.icon} size={14} />
<span>{item.name}</span>
</>
)
return item.path ? (
return (
<Link
key={item.name}
to={item.path}
aria-current={isActive ? 'page' : undefined}
style={style}
>
{content}
<Icon name={item.icon} size={14} />
<span>{item.name}</span>
</Link>
) : (
<div
key={item.name}
aria-current={isActive ? 'page' : undefined}
style={style}
>
{content}
</div>
)
})}
</nav>
Expand Down Expand Up @@ -226,7 +191,6 @@ export function Sidebar({ active = 'Overview' }: { active?: string }) {
acme-eu-prod
</div>
</div>
<Icon name="chevDown" size={12} />
</div>
</div>
)
Expand Down
113 changes: 73 additions & 40 deletions web/src/features/overview/ActivityFeed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,45 +6,78 @@ import { toneColor } from '@/lib/tone'
import type { ActivityEvent } from '@/mock/types'

export function ActivityFeed({ activity }: { activity: ActivityEvent[] }) {
return (
<div className="card" style={{ display: 'flex', flexDirection: 'column' }}>
<div style={{ padding: '14px 18px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 8 }}>
<span style={{ fontSize: 13, fontWeight: 500 }}>Recent activity</span>
<span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)', boxShadow: '0 0 0 4px rgba(20,184,166,0.15)' }} />
<span className="mono" style={{ fontSize: 10.5, color: 'var(--text-3)' }}>live · last 12m</span>
<div style={{ flex: 1 }} />
<span style={{ fontSize: 11, color: 'var(--text-2)' }}>View all</span>
</div>
<div style={{ padding: '6px 18px 14px' }}>
{activity.map((event, i) => (
<div
key={`${event.type}-${i}`}
style={{
display: 'grid',
gridTemplateColumns: '22px 1fr 80px 14px',
alignItems: 'center',
gap: 12,
padding: '10px 0',
borderBottom: i < activity.length - 1 ? '1px solid var(--border)' : 'none',
}}
>
<span style={{ color: toneColor(event.tone), display: 'inline-flex' }}>
<Icon name={event.icon} size={14} />
</span>
<div style={{ minWidth: 0 }}>
<div className="mono" style={{ fontSize: 11.5, color: toneColor(event.tone) }}>{event.type}</div>
<div
className="mono"
style={{ fontSize: 11, color: 'var(--text-2)', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
>
{event.detail}
</div>
return (
<div className="card" style={{ display: 'flex', flexDirection: 'column' }}>
<div
style={{
padding: '14px 18px',
borderBottom: '1px solid var(--border)',
display: 'flex',
alignItems: 'center',
gap: 8,
}}
>
<span style={{ fontSize: 13, fontWeight: 500 }}>Recent activity</span>
<span
style={{
width: 6,
height: 6,
borderRadius: '50%',
background: 'var(--accent)',
boxShadow: '0 0 0 4px rgba(20,184,166,0.15)',
}}
/>
<span className="mono" style={{ fontSize: 10.5, color: 'var(--text-3)' }}>
live · last 12m
</span>
</div>
<span className="mono" style={{ fontSize: 10.5, color: 'var(--text-3)', textAlign: 'right' }}>{event.ts}</span>
<Icon name="chevRight" size={12} />
</div>
))}
</div>
</div>
)
<div style={{ padding: '6px 18px 14px' }}>
{activity.map((event, i) => (
<div
key={`${event.type}-${i}`}
style={{
display: 'grid',
gridTemplateColumns: '22px 1fr 80px',
alignItems: 'center',
gap: 12,
padding: '10px 0',
borderBottom:
i < activity.length - 1 ? '1px solid var(--border)' : 'none',
}}
>
<span style={{ color: toneColor(event.tone), display: 'inline-flex' }}>
<Icon name={event.icon} size={14} />
</span>
<div style={{ minWidth: 0 }}>
<div
className="mono"
style={{ fontSize: 11.5, color: toneColor(event.tone) }}
>
{event.type}
</div>
<div
className="mono"
style={{
fontSize: 11,
color: 'var(--text-2)',
marginTop: 2,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}}
>
{event.detail}
</div>
</div>
<span
className="mono"
style={{ fontSize: 10.5, color: 'var(--text-3)', textAlign: 'right' }}
>
{event.ts}
</span>
</div>
))}
</div>
</div>
)
}
77 changes: 49 additions & 28 deletions web/src/features/overview/SystemLinks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,33 +5,54 @@ import { Icon } from '@/components/Icon'
import type { SystemLink } from '@/mock/types'

export function SystemLinks({ links }: { links: SystemLink[] }) {
return (
<div className="grid grid-cols-1 gap-[18px] md:grid-cols-3">
{links.map((link) => (
<div key={link.title} className="card" style={{ padding: 16, display: 'flex', alignItems: 'center', gap: 14 }}>
<span
style={{
width: 36,
height: 36,
borderRadius: 8,
background: 'var(--bg-2)',
border: '1px solid var(--border)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'var(--accent)',
}}
>
<Icon name={link.icon} size={16} />
</span>
<div style={{ flex: 1, minWidth: 0 }}>
<div style={{ fontSize: 13, fontWeight: 500 }}>{link.title}</div>
<div className="mono" style={{ fontSize: 10.5, color: 'var(--text-3)', marginTop: 2 }}>{link.url}</div>
<div style={{ fontSize: 11, color: 'var(--text-2)', marginTop: 4 }}>{link.sub}</div>
</div>
<Icon name="chevRight" size={14} />
return (
<div className="grid grid-cols-1 gap-[18px] md:grid-cols-3">
{links.map((link) => (
<a
key={link.title}
href={link.url.startsWith('http') ? link.url : `http://${link.url}`}
target="_blank"
rel="noopener noreferrer"
className="card"
style={{
padding: 16,
display: 'flex',
alignItems: 'center',
gap: 14,
textDecoration: 'none',
color: 'inherit',
}}
>
<span
style={{
width: 36,
height: 36,
borderRadius: 8,
background: 'var(--bg-2)',
border: '1px solid var(--border)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'var(--accent)',
}}
>
<Icon name={link.icon} size={16} />
</span>
<div style={{ flex: 1, minWidth: 0 }}>
<div style={{ fontSize: 13, fontWeight: 500 }}>{link.title}</div>
<div
className="mono"
style={{ fontSize: 10.5, color: 'var(--text-3)', marginTop: 2 }}
>
{link.url}
</div>
<div style={{ fontSize: 11, color: 'var(--text-2)', marginTop: 4 }}>
{link.sub}
</div>
</div>
<Icon name="chevRight" size={14} />
</a>
))}
</div>
))}
</div>
)
)
}
Loading
Loading