refactor(frontend) Refactor and move components (#5290)

frontend/README.md

@@ -9,6 +9,7 @@ This is the frontend of the OpenHands project. It is a React application that pr
 - Remix SPA Mode (React + Vite + React Router)
 - TypeScript
 - Redux
+- TanStack Query
 - Tailwind CSS
 - i18next
 - React Testing Library
@@ -85,7 +86,7 @@ frontend
 ├── src
 │   ├── api # API calls
 │   ├── assets
-│   ├── components # Reusable components
+│   ├── components
 │   ├── context # Local state management
 │   ├── hooks # Custom hooks
 │   ├── i18n # Internationalization
@@ -99,6 +100,18 @@ frontend
 └── .env.sample # Sample environment variables
 ```
 
+#### Components
+
+Components are organized into folders based on their **domain**, **feature**, or **shared functionality**.
+
+```sh
+components
+├── features # Domain-specific components
+├── layout
+├── modals
+└── ui # Shared UI components
+```
+
 ### Features
 
 - Real-time updates with WebSockets

frontend/__tests__/components/browser.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from "@testing-library/react";
 import { describe, it, expect } from "vitest";
 import { renderWithProviders } from "../../test-utils";
-import BrowserPanel from "#/components/browser";
+import { BrowserPanel } from "#/components/features/browser/browser";
 
 describe("Browser", () => {
   it("renders a message if no screenshotSrc is provided", () => {

frontend/__tests__/components/chat-message.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, it, expect, test } from "vitest";
-import { ChatMessage } from "#/components/chat-message";
+import { ChatMessage } from "#/components/features/chat/chat-message";
 
 describe("ChatMessage", () => {
   it("should render a user message", () => {

frontend/__tests__/components/chat/chat-input.test.tsx

@@ -1,7 +1,7 @@
 import userEvent from "@testing-library/user-event";
 import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, afterEach, vi, it, expect } from "vitest";
-import { ChatInput } from "#/components/chat-input";
+import { ChatInput } from "#/components/features/chat/chat-input";
 
 describe("ChatInput", () => {
   const onSubmitMock = vi.fn();

frontend/__tests__/components/chat/chat-interface.test.tsx

@@ -6,7 +6,7 @@ import { addUserMessage } from "#/state/chat-slice";
 import { SUGGESTIONS } from "#/utils/suggestions";
 import * as ChatSlice from "#/state/chat-slice";
 import { WsClientProviderStatus } from "#/context/ws-client-provider";
-import { ChatInterface } from "#/routes/_oh.app/chat-interface";
+import { ChatInterface } from "#/components/features/chat/chat-interface";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const renderChatInterface = (messages: (Message | ErrorMessage)[]) =>

frontend/__tests__/components/context-menu/account-settings-context-menu.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, describe, expect, it, test, vi } from "vitest";
-import { AccountSettingsContextMenu } from "#/components/context-menu/account-settings-context-menu";
+import { AccountSettingsContextMenu } from "#/components/features/context-menu/account-settings-context-menu";
 
 describe("AccountSettingsContextMenu", () => {
   const user = userEvent.setup();

frontend/__tests__/components/context-menu/context-menu-list-item.test.tsx

@@ -1,7 +1,7 @@
 import { describe, it, expect, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { ContextMenuListItem } from "#/components/context-menu/context-menu-list-item";
+import { ContextMenuListItem } from "#/components/features/context-menu/context-menu-list-item";
 
 describe("ContextMenuListItem", () => {
   it("should render the component with the children", () => {

frontend/__tests__/components/feedback-actions.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { FeedbackActions } from "#/components/feedback-actions";
+import { FeedbackActions } from "#/components/features/feedback/feedback-actions";
 
 describe("FeedbackActions", () => {
   const user = userEvent.setup();

frontend/__tests__/components/feedback-form.test.tsx

@@ -2,7 +2,7 @@ import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "test-utils";
-import { FeedbackForm } from "#/components/feedback-form";
+import { FeedbackForm } from "#/components/features/feedback/feedback-form";
 
 describe("FeedbackForm", () => {
   const user = userEvent.setup();

frontend/__tests__/components/file-explorer/explorer-tree.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from "@testing-library/react";
 import { renderWithProviders } from "test-utils";
 import { describe, afterEach, vi, it, expect } from "vitest";
-import ExplorerTree from "#/components/file-explorer/explorer-tree";
+import { ExplorerTree } from "#/components/features/file-explorer/explorer-tree";
 
 const FILES = ["file-1-1.ts", "folder-1-2"];
 

frontend/__tests__/components/file-explorer/file-explorer.test.tsx

@@ -4,8 +4,8 @@ import { renderWithProviders } from "test-utils";
 import { describe, it, expect, vi, Mock, afterEach } from "vitest";
 import toast from "#/utils/toast";
 import AgentState from "#/types/agent-state";
-import { FileExplorer } from "#/routes/_oh.app._index/file-explorer/file-explorer";
 import OpenHands from "#/api/open-hands";
+import { FileExplorer } from "#/components/features/file-explorer/file-explorer";
 
 const toastSpy = vi.spyOn(toast, "error");
 const uploadFilesSpy = vi.spyOn(OpenHands, "uploadFiles");

frontend/__tests__/components/file-explorer/tree-node.test.tsx

@@ -2,7 +2,7 @@ import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { renderWithProviders } from "test-utils";
 import { vi, describe, afterEach, it, expect } from "vitest";
-import TreeNode from "#/components/file-explorer/tree-node";
+import TreeNode from "#/components/features/file-explorer/tree-node";
 import OpenHands from "#/api/open-hands";
 
 const getFileSpy = vi.spyOn(OpenHands, "getFile");

frontend/__tests__/components/image-preview.test.tsx

@@ -1,7 +1,7 @@
+import { ImagePreview } from "#/components/features/images/image-preview";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
-import { ImagePreview } from "#/components/image-preview";
 
 describe("ImagePreview", () => {
   it("should render an image", () => {

frontend/__tests__/components/interactive-chat-box.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
-import { InteractiveChatBox } from "#/components/interactive-chat-box";
+import { InteractiveChatBox } from "#/components/features/chat/interactive-chat-box";
 
 describe("InteractiveChatBox", () => {
   const onSubmitMock = vi.fn();

frontend/__tests__/components/modals/base-modal/base-modal.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen, act } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, it, vi, expect } from "vitest";
-import BaseModal from "#/components/modals/base-modal/base-modal";
+import { BaseModal } from "#/components/shared/modals/base-modal/base-modal";
 
 describe("BaseModal", () => {
   it("should render if the modal is open", () => {

frontend/__tests__/components/modals/settings/model-selector.test.tsx

@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { ModelSelector } from "#/components/modals/settings/model-selector";
+import { ModelSelector } from "#/components/shared/modals/settings/model-selector";
 
 describe("ModelSelector", () => {
   const models = {

frontend/__tests__/components/suggestion-item.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { SuggestionItem } from "#/components/suggestion-item";
+import { SuggestionItem } from "#/components/features/suggestions/suggestion-item";
 
 describe("SuggestionItem", () => {
   const suggestionItem = { label: "suggestion1", value: "a long text value" };

frontend/__tests__/components/suggestions.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { Suggestions } from "#/components/suggestions";
+import { Suggestions } from "#/components/features/suggestions/suggestions";
 
 describe("Suggestions", () => {
   const firstSuggestion = {

frontend/__tests__/components/terminal/terminal.test.tsx

@@ -2,7 +2,7 @@ import { act, screen } from "@testing-library/react";
 import { renderWithProviders } from "test-utils";
 import { vi, describe, afterEach, it, expect } from "vitest";
 import { Command, appendInput, appendOutput } from "#/state/command-slice";
-import Terminal from "#/components/terminal/terminal";
+import Terminal from "#/components/features/terminal/terminal";
 
 global.ResizeObserver = vi.fn().mockImplementation(() => ({
   observe: vi.fn(),

frontend/__tests__/components/upload-image-input.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { UploadImageInput } from "#/components/upload-image-input";
+import { UploadImageInput } from "#/components/features/images/upload-image-input";
 
 describe("UploadImageInput", () => {
   const user = userEvent.setup();

frontend/__tests__/components/user-actions.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it, test, vi, afterEach } from "vitest";
 import userEvent from "@testing-library/user-event";
-import { UserActions } from "#/components/user-actions";
+import { UserActions } from "#/components/features/sidebar/user-actions";
 
 describe("UserActions", () => {
   const user = userEvent.setup();

frontend/__tests__/components/user-avatar.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { UserAvatar } from "#/components/user-avatar";
+import { UserAvatar } from "#/components/features/sidebar/user-avatar";
 
 describe("UserAvatar", () => {
   const onClickMock = vi.fn();