Files
vibe-kanban/frontend/src/contexts/TabNavigationContext.tsx

10 lines
256 B
TypeScript
Raw Normal View History

chore: remove unused code and dependencies identified by knip (Vibe Kanban) (#1499) * Here's a summary of what was cleaned up: ## Removed Unused Files (11 files) - `frontend/src/components/layout/ResponsiveTwoPane.tsx` - `frontend/src/components/OrgMemberAvatars.tsx` - `frontend/src/components/tasks/FollowUpStatusRow.tsx` - `frontend/src/components/tasks/TaskRelationshipCard.tsx` - `frontend/src/components/tasks/TaskRelationshipViewer.tsx` - `frontend/src/components/ui/image-upload-section.tsx` - `frontend/src/components/ui/tabs.tsx` - `frontend/src/components/ui/title-description-editor.tsx` - `frontend/src/lib/caretPosition.ts` - `frontend/src/utils/markdownImages.ts` - `remote-frontend/src/App.tsx` ## Removed Unused Dependencies (10 packages from frontend/package.json) - `@dnd-kit/modifiers` - `@lexical/utils` - `@radix-ui/react-tabs` - `@tailwindcss/typography` - `@tanstack/react-devtools` - `@tanstack/react-form-devtools` - `@types/react-window` - `react-use-websocket` - `react-window` - `zod` ## Removed Unused Exports - `useTabNavigation` hook from `TabNavigationContext.tsx` ## Not Removed (false positives or intentional) - `shared/types.ts` - auto-generated file used throughout the project - `@rjsf/shadcn` - used in tailwind.config.js content paths - `wa-sqlite` - used in vite.config.ts optimizeDeps - `eslint-plugin-prettier`, `vite` (root) - kept per user preference - Barrel re-exports in index.ts files (dialogs, hooks, ui) - intentional public APIs - Type exports - part of public API contracts * Done. Restored `remote-frontend/src/App.tsx` as a placeholder. * Update pnpm lockfile after removing unused dependencies 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com>
2025-12-11 12:45:04 +00:00
import { createContext } from 'react';
Dev server logs (vibe-kanban) (#519) * ## Implementation Complete! I've successfully implemented the dev server logs feature with the following changes: ### **Files Modified:** 1. **Created Context Files:** - [`TabNavigationContext.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-5e98-dev-server/frontend/src/contexts/TabNavigationContext.tsx) - For tab switching - [`ProcessSelectionContext.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-5e98-dev-server/frontend/src/contexts/ProcessSelectionContext.tsx) - For process pre-selection 2. **Updated [`TaskDetailsPanel.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-5e98-dev-server/frontend/src/components/tasks/TaskDetailsPanel.tsx):** - Added context providers - Connected process selection to ProcessesTab 3. **Updated [`CurrentAttempt.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-5e98-dev-server/frontend/src/components/tasks/Toolbar/CurrentAttempt.tsx):** - Added FileText icon import - Added process selection hook - Added logic to find latest dev server process - Added View Logs icon button with tooltip - Added handler to jump to dev server logs 4. **Updated [`ProcessesTab.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-5e98-dev-server/frontend/src/components/tasks/TaskDetails/ProcessesTab.tsx):** - Added props interface for jumpProcessId - Added useEffect to handle process pre-selection - Auto-loads process details when jumping to a process ### **How It Works:** 1. **Button Visibility**: View Logs button (📄 icon) appears next to the dev server button only when a dev server process exists 2. **Smart Process Selection**: Finds the latest dev server process (running preferred, falls back to completed) 3. **Seamless Navigation**: Clicking switches to Processes tab and opens the dev server process logs automatically 4. **No Prop Drilling**: Uses React contexts to avoid passing props through multiple component layers ### **User Experience:** - When dev server is running: User sees both "Dev" and "📄" buttons - When dev server stopped but ran before: User sees "📄" button to view historical logs - Clicking "📄" instantly opens the relevant dev server process in the Processes tab with logs expanded - Tooltip shows "View dev server logs" on hover The implementation is complete, tested, and ready for use! The build passes all TypeScript checks. * Cleanup script changes for task attempt 5e98f2ff-ed68-4c04-8a75-cdcfd98e2bd7 * Done! Changed the icon from FileText to ScrollText (📜). The View Logs button now uses the scroll-text icon which is more appropriate for viewing logs. * ## Refactoring Complete! ✅ The refactoring to more React-like patterns is now complete. Here's what was changed: ### **Key Improvements** 1. **Eliminated Callback Pattern**: Removed the un-React-like `onProcessJumped={() => setJumpProcessId(null)}` callback 2. **Single Source of Truth**: `selectedProcessId` now lives in `ProcessSelectionContext` instead of being split between parent and child 3. **Declarative State**: Components now simply read/write shared state instead of managing events ### **Changes Made** 1. **`ProcessSelectionContext`** → Now a full provider that: - Manages `selectedProcessId` state - Provides `setSelectedProcessId` for direct state updates - Provides `jumpToProcess` wrapper that sets state + switches tab - Uses proper React patterns with `useMemo` and `useCallback` 2. **`TaskDetailsPanel`** → Simplified: - Removed `jumpProcessId` state - Removed callback props to ProcessesTab - Uses `ProcessSelectionProvider` component - Clean provider hierarchy 3. **`ProcessesTab`** → Cleaner component: - Removed props interface entirely - Uses context state instead of local `selectedProcessId` - Auto-fetches process details via useEffect - Manual clicks and button jumps use same state path 4. **`CurrentAttempt`** → Updated API usage: - Uses `jumpToProcess(id, setActiveTab)` - More explicit about tab switching ### **Benefits Achieved** - ✅ **More React-like**: State-driven instead of event-driven - ✅ **Better separation of concerns**: Context owns selection lifecycle - ✅ **No more callbacks**: Eliminated imperative callback pattern - ✅ **Cleaner code**: Removed props drilling and state synchronization - ✅ **Easier to test**: Single state source, declarative flow - ✅ **Better performance**: Memoized context values The feature works exactly the same from the user's perspective, but the code is now much more maintainable and follows React best practices! * Cleanup script changes for task attempt 5e98f2ff-ed68-4c04-8a75-cdcfd98e2bd7 * ## Context Refactoring Complete! ✅ The refactoring to improve context architecture is now complete. Here's what was accomplished: ### **Final Architecture** **`TabNavContext`**: - ✅ Manages tab navigation state (`activeTab`, `setActiveTab`) - ✅ Single responsibility: UI navigation **`ProcessSelectionContext`**: - ✅ Manages process selection state (`selectedProcessId`, `setSelectedProcessId`) - ✅ **Internally consumes** `TabNavContext` via `useTabNavigation()` - ✅ Provides clean `jumpToProcess(processId)` API that handles both concerns ### **Key Improvements Achieved** 1. **Clean API**: `jumpToProcess(processId)` - no parameters needed 2. **Better Separation**: Each context owns its domain, but they coordinate properly 3. **Performance**: Minimal rerender fanout - tab changes don't rerender process consumers 4. **Developer Experience**: Simple, discoverable API 5. **Maintainability**: Easy to add more coordinated actions in the future ### **Usage Examples** ```typescript // Before (awkward) const { jumpToProcess } = useProcessSelection(); const { setActiveTab } = useTabNavigation(); jumpToProcess(processId, setActiveTab); // After (clean) const { jumpToProcess } = useProcessSelection(); jumpToProcess(processId); ``` ### **Provider Hierarchy** ```jsx <TabNavContext.Provider> <ProcessSelectionProvider> {/* ← Uses useTabNavigation internally */} <ProcessesTab /> {/* ← Gets clean jumpToProcess API */} <CurrentAttempt /> {/* ← Simple jumpToProcess(id) call */} </ProcessSelectionProvider> </TabNavContext.Provider> ``` The architecture now follows React best practices with proper context boundaries, optimal performance, and excellent developer ergonomics. The feature works identically from the user's perspective, but the code is much cleaner and more maintainable! * Cleanup script changes for task attempt 5e98f2ff-ed68-4c04-8a75-cdcfd98e2bd7 * fmt
2025-08-19 15:09:32 +01:00
import type { TabType } from '@/types/tabs';
interface TabNavContextType {
activeTab: TabType;
setActiveTab: (tab: TabType) => void;
}
export const TabNavContext = createContext<TabNavContextType | null>(null);