Refactor/shared and tasks components (#473)

* refactor: remove unused TasksSettings component * refactor: migrate TodoList component to a new file with improved structure and normalization logic * refactor: Move Tooltip and DarkModeToggle to shared/ui * refactor: Move Tooltip and DarkModeToggle to shared/view/ui * refactor: move GeminiLogo to llm-logo-provider and update imports * refactor: remove unused GeminiStatus component * refactor: move components in src/components/ui to src/shared/view/ui * refactor: move ErrorBoundary component to main-content/view and update imports * refactor: move VersionUpgradeModal to its own module * refactor(wizard): rebuild project creation flow as modular TypeScript components Replace the monolithic `ProjectCreationWizard.jsx` with a feature-based TS implementation under `src/components/project-creation-wizard`, while preserving existing behavior and improving readability, maintainability, and state isolation. Why: - The previous wizard mixed API logic, flow state, folder browsing, and UI in one file. - Refactoring and testing were difficult due to tightly coupled concerns. - We needed stronger type safety and localized component state. What changed: - Deleted: - `src/components/ProjectCreationWizard.jsx` - Added new modular structure: - `src/components/project-creation-wizard/index.ts` - `src/components/project-creation-wizard/ProjectCreationWizard.tsx` - `src/components/project-creation-wizard/types.ts` - `src/components/project-creation-wizard/data/workspaceApi.ts` - `src/components/project-creation-wizard/hooks/useGithubTokens.ts` - `src/components/project-creation-wizard/utils/pathUtils.ts` - `src/components/project-creation-wizard/components/*` - `WizardProgress`, `WizardFooter`, `ErrorBanner` - `StepTypeSelection`, `StepConfiguration`, `StepReview` - `WorkspacePathField`, `GithubAuthenticationCard`, `FolderBrowserModal` - Updated import usage: - `src/components/sidebar/view/subcomponents/SidebarModals.tsx` now imports from `../../../project-creation-wizard`. Implementation details: - Migrated wizard logic to TypeScript using `type` aliases only. - Kept component prop types colocated in each component file. - Split responsibilities by feature: - container/orchestration in `ProjectCreationWizard.tsx` - API/SSE and request parsing in `data/workspaceApi.ts` - GitHub token loading/caching behavior in `useGithubTokens` - path/URL helpers in `utils/pathUtils.ts` - Localized UI-only state to child components: - folder browser modal state (current path, hidden folders, create-folder input) - path suggestion dropdown state with debounced lookup - Preserved existing UX flows: - step navigation and validation - existing/new workspace modes - optional GitHub clone + auth modes - clone progress via SSE - folder browsing + folder creation - Added focused comments for non-obvious logic (debounce, SSE auth constraint, path edge cases). * refactor(quick-settings): migrate panel to typed feature-based modules Refactor QuickSettingsPanel from a single JSX component into a modular TypeScript feature structure while preserving behavior and translations. Highlights: - Replace legacy src/components/QuickSettingsPanel.jsx with a typed entrypoint (src/components/QuickSettingsPanel.tsx). - Introduce src/components/quick-settings-panel/ with clear separation of concerns: - view/: panel shell, header, handle, section wrappers, toggle rows, and content sections. - hooks/: drag interactions and whisper mode persistence. - constants.ts and types.ts for shared config and strict local typing. - Move drag logic into useQuickSettingsDrag with explicit touch/mouse handling, drag threshold detection, click suppression after drag, position clamping, and localStorage persistence. - Keep user-visible behavior intact: - same open/close panel interactions. - same mobile/desktop drag behavior and persisted handle position. - same quick preference toggles and wiring to useUiPreferences. - same hidden whisper section behavior and localStorage/event updates. - Improve readability and maintainability by extracting repetitive setting rows and section scaffolding into reusable components. - Add focused comments around non-obvious behavior (drag click suppression, touch scroll lock, hidden whisper section intent). - Keep files small and reviewable (all new/changed files are under 300 lines). Validation: - npm run typecheck - npm run build * refactor(quick-settings-panel): restructure QuickSettingsPanel import and create index file * refactor(shared): move shared ui components to share/view/ui without subfolders * refactor(LanguageSelector): move LanguageSelector to shared UI components * refactor(prd-editor): modularize PRD editor with typed feature modules Break the legacy PRDEditor.jsx monolith into a feature-based TypeScript architecture under src/components/prd-editor while keeping behavior parity and readability. Key changes: - Replace PRDEditor.jsx with a typed orchestrator component and a compatibility export bridge at src/components/PRDEditor.tsx. - Split responsibilities into dedicated hooks: document loading/init, existing PRD registry fetching, save workflow with overwrite detection, and keyboard shortcuts. - Split UI into focused view components: header, editor/preview body, footer stats, loading state, generate-tasks modal, and overwrite-confirm modal. - Move filename concerns into utility helpers (sanitize, extension handling, default naming) and centralize template/constants. - Keep component-local state close to the UI that owns it (workspace controls/modal toggles), while shared workflow state remains in the feature container. - Reuse the existing MarkdownPreview component for safer markdown rendering instead of ad-hoc HTML conversion. - Update TaskMasterPanel integration to consume typed PRDEditor directly (remove any-cast) and pass isExisting metadata for correct overwrite behavior. - Keep all new/changed files below 300 lines and add targeted comments where behavior needs clarification. Validation: - npm run typecheck - npm run build * refactor(TaskMasterPanel): update PRDEditor import path to match new structure * refactor(TaskMaster): Remove unused TaskMasterSetupWizard and TaskMasterStatus components * refactor(TaskDetail): remove unused TaskIndicator import * refactor(task-master): migrate tasks to a typed feature module - introduce a new feature-oriented TaskMaster domain under src/components/task-master - add typed TaskMaster context/provider with explicit project, task, MCP, and loading state handling - split task UI into focused components (panel, board, toolbar, content, card, detail modal, setup/help modals, banner) - move task board filtering/sorting/kanban derivation into dedicated hooks and utilities - relocate CreateTaskModal into the feature module and keep task views modular/readable - remove legacy monolithic TaskList/TaskDetail/TaskCard files and route main task panel to the new feature panel - replace contexts/TaskMasterContext.jsx with a typed contexts/TaskMasterContext.ts re-export to the feature context - update MainContent project sync logic to compare by project name to avoid state churn - validation: npm run typecheck, npm run build * refactor(MobileNav): remove unused React import and TaskMasterContext * refactor(auth): migrate login and setup flows to typed feature module - Introduce a new feature-based auth module under src/components/auth with clear separation of concerns:\n - context/AuthContext.tsx for session lifecycle, onboarding status checks, token persistence, and auth actions\n - view/* components for loading, route guarding, form layout, input fields, and error display\n - shared auth constants, utility helpers, and type aliases (no interfaces)\n- Convert login and setup UIs to TypeScript and keep form state local to each component for readability and component-level ownership\n- Add explicit API payload typing and safe JSON parsing helpers to improve resilience when backend responses are malformed or incomplete\n- Centralize error fallback handling for auth requests to reduce repeated logic - Replace legacy auth entrypoints with the new feature module in app wiring:\n - App now imports AuthProvider and ProtectedRoute from src/components/auth\n - WebSocketContext, TaskMasterContext, and Onboarding now consume useAuth from the new typed auth context\n- Remove duplicated legacy auth screens (LoginForm.jsx, SetupForm.jsx, ProtectedRoute.jsx)\n- Keep backward compatibility by turning src/contexts/AuthContext.jsx into a thin re-export of the new provider/hook Result: auth code now follows a feature/domain structure, is fully typed, easier to navigate, and cleaner to extend without touching unrelated UI areas. * refactor(AppContent): update MobileNav import path and add MobileNav component * refactor(DiffViewer): rename different diff viewers and place them in different components * refactor(components): reorganize onboarding/provider auth/sidebar indicator into domain features - Move onboarding out of root-level components into a dedicated feature module: - add src/components/onboarding/view/Onboarding.tsx - split onboarding UI into focused subcomponents: - OnboardingStepProgress - GitConfigurationStep - AgentConnectionsStep - AgentConnectionCard - add onboarding-local types and utils for provider status and validation helpers - Move multi-provider login modal into a dedicated provider-auth feature: - add src/components/provider-auth/view/ProviderLoginModal.tsx - add src/components/provider-auth/types.ts - keep provider-specific command/title behavior and Gemini setup guidance - preserve compatibility for both onboarding flow and settings login flow - Move TaskIndicator into the sidebar domain: - add src/components/sidebar/view/subcomponents/TaskIndicator.tsx - update SidebarProjectItem to consume local sidebar TaskIndicator - Update integration points to the new structure: - ProtectedRoute now imports onboarding from onboarding feature - Settings now imports ProviderLoginModal directly (remove legacy cast wrapper) - git panel consumers now import shared GitDiffViewer by explicit name - Rename git shared diff view to clearer domain naming: - replace shared DiffViewer with shared GitDiffViewer - update FileChangeItem and CommitHistoryItem imports accordingly - Remove superseded root-level legacy components: - delete src/components/LoginModal.jsx - delete src/components/Onboarding.jsx - delete src/components/TaskIndicator.jsx - delete old src/components/git-panel/view/shared/DiffViewer.tsx - Result: - clearer feature boundaries (auth vs onboarding vs provider-auth vs sidebar) - easier navigation and ownership by domain - preserved runtime behavior with improved readability and modularity * refactor(MainContent): remove TaskMasterPanel import and relocate to task-master component * fix: update import paths for Input component in FileTree and FileTreeNode * refactor(FileTree): make file tree context menu a typescript component and move it inside the file tree view * refactor(FileTree): remove unused ScrollArea import * feat: setup eslint with typescript and react rules, add unused imports plugin * fix: remove unused imports, functions, and types after discovering using `npm run lint` * feat: setup eslint-plugin-react, react-refresh, import-x, and tailwindcss plugins with recommended rules and configurations * chore: reformat files after running `npm run lint:fix` * chore: add omments about eslint config plugin uses * feat: add husky and lint-staged for pre-commit linting * feat: setup commitlint with conventional config * fix: i18n translations --------- Co-authored-by: Haileyesus <something@gmail.com> Co-authored-by: viper151 <simosmik@gmail.com>
2026-07-03 02:52:59 +08:00 · 2026-03-06 01:47:58 +03:00
parent 8d28438fe7
commit 844de26ada
254 changed files with 14571 additions and 9347 deletions
--- a/src/components/auth/context/AuthContext.tsx
+++ b/src/components/auth/context/AuthContext.tsx
@@ -0,0 +1,222 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { IS_PLATFORM } from '../../../constants/config';
+import { api } from '../../../utils/api';
+import { AUTH_ERROR_MESSAGES, AUTH_TOKEN_STORAGE_KEY } from '../constants';
+import type {
+  AuthContextValue,
+  AuthProviderProps,
+  AuthSessionPayload,
+  AuthStatusPayload,
+  AuthUser,
+  AuthUserPayload,
+  OnboardingStatusPayload,
+} from '../types';
+import { parseJsonSafely, resolveApiErrorMessage } from '../utils';
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+const readStoredToken = (): string | null => localStorage.getItem(AUTH_TOKEN_STORAGE_KEY);
+
+const persistToken = (token: string) => {
+  localStorage.setItem(AUTH_TOKEN_STORAGE_KEY, token);
+};
+
+const clearStoredToken = () => {
+  localStorage.removeItem(AUTH_TOKEN_STORAGE_KEY);
+};
+
+export function useAuth(): AuthContextValue {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+
+  return context;
+}
+
+export function AuthProvider({ children }: AuthProviderProps) {
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const [token, setToken] = useState<string | null>(() => readStoredToken());
+  const [isLoading, setIsLoading] = useState(true);
+  const [needsSetup, setNeedsSetup] = useState(false);
+  const [hasCompletedOnboarding, setHasCompletedOnboarding] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const setSession = useCallback((nextUser: AuthUser, nextToken: string) => {
+    setUser(nextUser);
+    setToken(nextToken);
+    persistToken(nextToken);
+  }, []);
+
+  const clearSession = useCallback(() => {
+    setUser(null);
+    setToken(null);
+    clearStoredToken();
+  }, []);
+
+  const checkOnboardingStatus = useCallback(async () => {
+    try {
+      const response = await api.user.onboardingStatus();
+      if (!response.ok) {
+        return;
+      }
+
+      const payload = await parseJsonSafely<OnboardingStatusPayload>(response);
+      setHasCompletedOnboarding(Boolean(payload?.hasCompletedOnboarding));
+    } catch (caughtError) {
+      console.error('Error checking onboarding status:', caughtError);
+      // Fail open to avoid blocking access on transient onboarding status errors.
+      setHasCompletedOnboarding(true);
+    }
+  }, []);
+
+  const refreshOnboardingStatus = useCallback(async () => {
+    await checkOnboardingStatus();
+  }, [checkOnboardingStatus]);
+
+  const checkAuthStatus = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const statusResponse = await api.auth.status();
+      const statusPayload = await parseJsonSafely<AuthStatusPayload>(statusResponse);
+
+      if (statusPayload?.needsSetup) {
+        setNeedsSetup(true);
+        return;
+      }
+
+      setNeedsSetup(false);
+
+      if (!token) {
+        return;
+      }
+
+      const userResponse = await api.auth.user();
+      if (!userResponse.ok) {
+        clearSession();
+        return;
+      }
+
+      const userPayload = await parseJsonSafely<AuthUserPayload>(userResponse);
+      if (!userPayload?.user) {
+        clearSession();
+        return;
+      }
+
+      setUser(userPayload.user);
+      await checkOnboardingStatus();
+    } catch (caughtError) {
+      console.error('[Auth] Auth status check failed:', caughtError);
+      setError(AUTH_ERROR_MESSAGES.authStatusCheckFailed);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [checkOnboardingStatus, clearSession, token]);
+
+  useEffect(() => {
+    if (IS_PLATFORM) {
+      setUser({ username: 'platform-user' });
+      setNeedsSetup(false);
+      void checkOnboardingStatus().finally(() => {
+        setIsLoading(false);
+      });
+      return;
+    }
+
+    void checkAuthStatus();
+  }, [checkAuthStatus, checkOnboardingStatus]);
+
+  const login = useCallback<AuthContextValue['login']>(
+    async (username, password) => {
+      try {
+        setError(null);
+        const response = await api.auth.login(username, password);
+        const payload = await parseJsonSafely<AuthSessionPayload>(response);
+
+        if (!response.ok || !payload?.token || !payload.user) {
+          const message = resolveApiErrorMessage(payload, AUTH_ERROR_MESSAGES.loginFailed);
+          setError(message);
+          return { success: false, error: message };
+        }
+
+        setSession(payload.user, payload.token);
+        setNeedsSetup(false);
+        await checkOnboardingStatus();
+        return { success: true };
+      } catch (caughtError) {
+        console.error('Login error:', caughtError);
+        setError(AUTH_ERROR_MESSAGES.networkError);
+        return { success: false, error: AUTH_ERROR_MESSAGES.networkError };
+      }
+    },
+    [checkOnboardingStatus, setSession],
+  );
+
+  const register = useCallback<AuthContextValue['register']>(
+    async (username, password) => {
+      try {
+        setError(null);
+        const response = await api.auth.register(username, password);
+        const payload = await parseJsonSafely<AuthSessionPayload>(response);
+
+        if (!response.ok || !payload?.token || !payload.user) {
+          const message = resolveApiErrorMessage(payload, AUTH_ERROR_MESSAGES.registrationFailed);
+          setError(message);
+          return { success: false, error: message };
+        }
+
+        setSession(payload.user, payload.token);
+        setNeedsSetup(false);
+        await checkOnboardingStatus();
+        return { success: true };
+      } catch (caughtError) {
+        console.error('Registration error:', caughtError);
+        setError(AUTH_ERROR_MESSAGES.networkError);
+        return { success: false, error: AUTH_ERROR_MESSAGES.networkError };
+      }
+    },
+    [checkOnboardingStatus, setSession],
+  );
+
+  const logout = useCallback(() => {
+    const tokenToInvalidate = token;
+    clearSession();
+
+    if (tokenToInvalidate) {
+      void api.auth.logout().catch((caughtError: unknown) => {
+        console.error('Logout endpoint error:', caughtError);
+      });
+    }
+  }, [clearSession, token]);
+
+  const contextValue = useMemo<AuthContextValue>(
+    () => ({
+      user,
+      token,
+      isLoading,
+      needsSetup,
+      hasCompletedOnboarding,
+      error,
+      login,
+      register,
+      logout,
+      refreshOnboardingStatus,
+    }),
+    [
+      error,
+      hasCompletedOnboarding,
+      isLoading,
+      login,
+      logout,
+      needsSetup,
+      refreshOnboardingStatus,
+      register,
+      token,
+      user,
+    ],
+  );
+
+  return <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>;
+}