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