feat(swarm): implement mission picker for left panel
This commit is contained in:
parent
1925d625b6
commit
f35ae8df33
2 changed files with 48 additions and 0 deletions
34
src/components/swarm/swarm-mission-picker.tsx
Normal file
34
src/components/swarm/swarm-mission-picker.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { useUrlState } from '@/hooks/use-url-state';
|
||||||
|
|
||||||
|
// Mock hook for now, would connect to actual beads data
|
||||||
|
const useMissionList = () => ({
|
||||||
|
missions: [
|
||||||
|
{ id: '1', title: 'Sample Mission', progress: 50 }
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
export function SwarmMissionPicker() {
|
||||||
|
const { setUrlState, swarmId } = useUrlState();
|
||||||
|
const { missions } = useMissionList();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-2 p-2 w-full">
|
||||||
|
<h2 className="px-2 text-sm font-semibold text-muted-foreground">Active Missions</h2>
|
||||||
|
{missions.map(m => (
|
||||||
|
<button
|
||||||
|
key={m.id}
|
||||||
|
onClick={() => setUrlState({ view: 'swarm', swarmId: m.id })}
|
||||||
|
className={`flex flex-col items-start p-3 min-h-[44px] rounded-md hover:bg-accent transition-colors w-full focus:outline-none focus:ring-2 focus:ring-ring ${swarmId === m.id ? 'bg-accent border' : ''}`}
|
||||||
|
>
|
||||||
|
<span className="font-medium text-sm">{m.title}</span>
|
||||||
|
<div className="w-full bg-secondary h-1 mt-2 rounded">
|
||||||
|
<div className="bg-primary h-1 rounded transition-all duration-300" style={{ width: `${m.progress}%` }} />
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
14
tests/components/swarm/swarm-mission-picker.test.tsx
Normal file
14
tests/components/swarm/swarm-mission-picker.test.tsx
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
import { expect, test, describe, mock } from 'bun:test';
|
||||||
|
|
||||||
|
// Mock the hook that the component tries to import
|
||||||
|
mock.module('@/hooks/use-url-state', () => ({
|
||||||
|
useUrlState: () => ({ setUrlState: () => { }, swarmId: '1' })
|
||||||
|
}));
|
||||||
|
|
||||||
|
describe('SwarmMissionPicker Component', () => {
|
||||||
|
test('exports SwarmMissionPicker component that is a function', async () => {
|
||||||
|
const mod = await import('../../../src/components/swarm/swarm-mission-picker');
|
||||||
|
expect(mod.SwarmMissionPicker).toBeDefined();
|
||||||
|
expect(typeof mod.SwarmMissionPicker).toBe('function');
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Add table
Add a link
Reference in a new issue