refactor: colocate frontend component files

src/app/routes/AppRoutes/AppRoutes.tsx

@@ -1,8 +1,8 @@
 import type { FC } from "react";
 import { lazy } from "react";
 import { Navigate, Route, Routes } from "react-router";
-import { LazyPage } from "./RouteFallback";
-import { Protected, Public } from "./RouteGuards";
+import { LazyPage } from "../RouteFallback";
+import { Protected, Public } from "../RouteGuards";
 
 const CardPage = lazy(async () => {
 	const { CardPage } = await import("@/pages/card");
@@ -65,7 +65,7 @@ const SettingsPage = lazy(async () => {
 	return { default: SettingsPage };
 });
 const ProtectedLayout = lazy(async () => {
-	const { ProtectedLayout } = await import("./ProtectedLayout");
+	const { ProtectedLayout } = await import("../ProtectedLayout");
 	return { default: ProtectedLayout };
 });
 

src/app/routes/ProtectedLayout.tsx

@@ -1,6 +1,6 @@
 import type { FC } from "react";
 import { AppBreadcrumbs, AppShell } from "@/app/ui";
-import { ProtectedDocumentTitle } from "./DocumentTitle";
+import { ProtectedDocumentTitle } from "./DocumentTitle/DocumentTitle";
 
 const ProtectedLayout: FC = () => {
 	return (

src/app/routes/index.ts

@@ -1,2 +1,2 @@
-export { AppRoutes } from "./AppRoutes";
-export { RouteErrorBoundary } from "./RouteErrorBoundary";
+export { AppRoutes } from "./AppRoutes/AppRoutes";
+export { RouteErrorBoundary } from "./RouteErrorBoundary/RouteErrorBoundary";

src/app/ui/index.ts

@@ -1,2 +1,2 @@
-export { AppBreadcrumbs } from "./AppBreadcrumbs";
-export { AppShell } from "./AppShell";
+export { AppBreadcrumbs } from "./AppBreadcrumbs/AppBreadcrumbs";
+export { AppShell } from "./AppShell/AppShell";

src/entities/bank-card/index.ts

@@ -20,11 +20,11 @@ export {
 } from "./model/form-validation";
 export { bankOperationKinds } from "./model/operation-kinds";
 export { bankPeriod } from "./model/period";
-export { BankCardFace } from "./ui/BankCardFace";
-export { BankCardForm } from "./ui/BankCardForm";
+export { BankCardFace } from "./ui/BankCardFace/BankCardFace";
+export { BankCardForm } from "./ui/BankCardForm/BankCardForm";
 export { BankFeedback } from "./ui/BankFeedback";
-export { BankOperationIcon } from "./ui/BankOperationIcon";
+export { BankOperationIcon } from "./ui/BankOperationIcon/BankOperationIcon";
 export { BankPeriodPicker } from "./ui/BankPeriodPicker";
-export { BankSummaryView } from "./ui/BankSummary.view";
-export { CategoryManager } from "./ui/CategoryManager";
+export { BankSummaryView } from "./ui/BankSummary/BankSummary.view";
+export { CategoryManager } from "./ui/CategoryManager/CategoryManager";
 export { useBankFormFocus } from "./ui/useBankFormFocus";

src/entities/bank-card/ui/BankCardFace/BankCardFace.tsx

@@ -1,7 +1,7 @@
 import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { formatMoney } from "@/shared/lib";
-import type { BankCard } from "../api/queries";
+import type { BankCard } from "../../api/queries";
 import classes from "./BankCardFace.module.css";
 
 type BankCardFaceProps = { card: BankCard };

src/entities/bank-card/ui/BankCardForm/BankCardForm.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { FormProvider, useForm } from "react-hook-form";
-import type { BankCardValues } from "../model/form-validation";
+import type { BankCardValues } from "../../model/form-validation";
 import { BankCardFields } from "./BankCardForm.view";
 
 const meta = {

src/entities/bank-card/ui/BankCardForm/BankCardForm.test.tsx

@@ -6,7 +6,7 @@ import { describe, expect, it, vi } from "vitest";
 import { configureAuthClient } from "@/shared/api";
 import { createTestQueryClient } from "@/test/query";
 import { server } from "@/test/server";
-import type { BankCard } from "../api/queries";
+import type { BankCard } from "../../api/queries";
 import { BankCardForm } from "./BankCardForm";
 
 const card: BankCard = {

src/entities/bank-card/ui/BankCardForm/BankCardForm.tsx

@@ -4,18 +4,18 @@ import { type FC, useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { formatDate } from "@/shared/lib";
-import { useBankMutations } from "../api/mutations";
-import { type BankCard, useBankCard } from "../api/queries";
+import { useBankMutations } from "../../api/mutations";
+import { type BankCard, useBankCard } from "../../api/queries";
 import {
 	type BankCardValues,
 	bankCardSchema,
 	bankMoneyValue,
 	bankToday,
-} from "../model/form-validation";
+} from "../../model/form-validation";
+import { BankFeedback } from "../BankFeedback";
+import classes from "../BankForms.module.css";
+import { useBankFormFocus } from "../useBankFormFocus";
 import { BankCardFields } from "./BankCardForm.view";
-import { BankFeedback } from "./BankFeedback";
-import classes from "./BankForms.module.css";
-import { useBankFormFocus } from "./useBankFormFocus";
 
 type BankCardFormProps = { card?: BankCard; onClose: () => void };
 const BankCardForm: FC<BankCardFormProps> = (props) => {

src/entities/bank-card/ui/BankCardForm/BankCardForm.view.tsx

@@ -8,7 +8,7 @@ import {
 	bankDateInputValue,
 	bankDateSchema,
 	bankToday,
-} from "../model/form-validation";
+} from "../../model/form-validation";
 
 type BankCardFieldsProps = { archived: boolean };
 const BankCardFields: FC<BankCardFieldsProps> = (props) => {

src/entities/bank-card/ui/BankOperationIcon/BankOperationIcon.tsx

@@ -1,8 +1,8 @@
 import type { FC } from "react";
 import { bindIconAnimation } from "@/shared/lib";
-import type { BankOperation } from "../api/queries";
+import type { BankOperation } from "../../api/queries";
 
-import { bankOperationAppearance } from "../model/operation-appearance";
+import { bankOperationAppearance } from "../../model/operation-appearance";
 import classes from "./BankOperationIcon.module.css";
 
 type BankOperationIconProps = {

src/entities/bank-card/ui/BankSummary/BankSummary.view.tsx

@@ -3,8 +3,8 @@ import { LoadingSkeleton } from "@wealthledger/ui";
 import type { CSSProperties, FC } from "react";
 import { useTranslation } from "react-i18next";
 import { formatMoney } from "@/shared/lib";
-import type { BankSummary } from "../api/queries";
-import { BankOperationIcon } from "./BankOperationIcon";
+import type { BankSummary } from "../../api/queries";
+import { BankOperationIcon } from "../BankOperationIcon/BankOperationIcon";
 import classes from "./BankSummary.module.css";
 
 type BankSummaryViewProps = {

src/entities/bank-card/ui/CategoryManager/CategoryManager.tsx

@@ -18,12 +18,12 @@ import {
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
 import { validationMessage } from "@/shared/i18n";
-import { useBankMutations } from "../api/mutations";
-import { type ExpenseCategory, useBankCategories } from "../api/queries";
-import { BankFeedback } from "./BankFeedback";
-import classes from "./BankForms.module.css";
-import { BankOperationIcon } from "./BankOperationIcon";
-import { useBankFormFocus } from "./useBankFormFocus";
+import { useBankMutations } from "../../api/mutations";
+import { type ExpenseCategory, useBankCategories } from "../../api/queries";
+import { BankFeedback } from "../BankFeedback";
+import classes from "../BankForms.module.css";
+import { BankOperationIcon } from "../BankOperationIcon/BankOperationIcon";
+import { useBankFormFocus } from "../useBankFormFocus";
 
 const MAX_CATEGORY_NAME_LENGTH = 80;
 

src/entities/brokerage-account/index.ts

@@ -8,4 +8,4 @@ export {
 	type BrokerageAccountCard,
 	brokerageAccountCards,
 } from "./model/display";
-export { BrokerageAccountList } from "./ui/BrokerageAccountList";
+export { BrokerageAccountList } from "./ui/BrokerageAccountList/BrokerageAccountList";

src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { MemoryRouter } from "react-router";
-import type { BrokerageAccount } from "../api/useBrokerageAccounts";
-import { brokerageAccountCards } from "../model/display";
+import type { BrokerageAccount } from "../../api/useBrokerageAccounts";
+import { brokerageAccountCards } from "../../model/display";
 import { BrokerageAccountList } from "./BrokerageAccountList";
 
 const syntheticAccount = {

src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.test.tsx

@@ -2,7 +2,7 @@ import { MantineProvider } from "@mantine/core";
 import { render, screen, within } from "@testing-library/react";
 import { MemoryRouter } from "react-router";
 import { describe, expect, it } from "vitest";
-import { brokerageAccountCards } from "../model/display";
+import { brokerageAccountCards } from "../../model/display";
 import { BrokerageAccountList } from "./BrokerageAccountList";
 
 describe("BrokerageAccountList", () => {

src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.tsx

@@ -3,8 +3,8 @@ import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 import { formatDate, formatMoney } from "@/shared/lib";
-import type { BrokerageAccountCard } from "../model/display";
-import { accountTypeKey } from "../model/display";
+import type { BrokerageAccountCard } from "../../model/display";
+import { accountTypeKey } from "../../model/display";
 import classes from "./BrokerageAccountList.module.css";
 
 type BrokerageAccountListProps = { accounts: BrokerageAccountCard[] };

src/entities/brokerage-event/index.ts

@@ -6,4 +6,4 @@ export { BrokerageEventCard } from "./ui/BrokerageEventCard";
 export {
 	BrokerageEventsPreview,
 	type BrokerageEventsPreviewState,
-} from "./ui/BrokerageEventsPreview";
+} from "./ui/BrokerageEventsPreview/BrokerageEventsPreview";

src/entities/brokerage-event/ui/BrokerageEventsPreview/BrokerageEventsPreview.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { MemoryRouter } from "react-router";
-import type { BrokerageEvent } from "../api/useBrokerageEvents";
+import type { BrokerageEvent } from "../../api/useBrokerageEvents";
 import { BrokerageEventsPreview } from "./BrokerageEventsPreview";
 
 const syntheticEvent = {

src/entities/brokerage-event/ui/BrokerageEventsPreview/BrokerageEventsPreview.tsx

@@ -3,8 +3,8 @@ import { LoadingSkeleton } from "@wealthledger/ui";
 import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
-import type { BrokerageEvent } from "../api/useBrokerageEvents";
-import { BrokerageEventCard } from "./BrokerageEventCard";
+import type { BrokerageEvent } from "../../api/useBrokerageEvents";
+import { BrokerageEventCard } from "../BrokerageEventCard";
 
 type BrokerageEventsPreviewProps = {
 	events: BrokerageEventsPreviewState;

src/features/auth/index.ts

@@ -1,4 +1,4 @@
 export { AuthProvider, useAuth } from "./model/auth";
-export { AuthPageLayout } from "./ui/AuthPageLayout";
+export { AuthPageLayout } from "./ui/AuthPageLayout/AuthPageLayout";
 export { LoginForm } from "./ui/LoginForm";
 export { RegisterForm } from "./ui/RegisterForm";

src/features/auth/ui/AuthForm/AuthForm.tsx

@@ -9,7 +9,7 @@ import {
 	type AuthFormValues,
 	loginSchema,
 	registerSchema,
-} from "../model/validation";
+} from "../../model/validation";
 import classes from "./AuthForm.module.css";
 
 type AuthFormProps = {

src/features/auth/ui/LoginForm.tsx

@@ -1,7 +1,7 @@
 import type { FC } from "react";
 import { useLocation, useNavigate } from "react-router";
 import { useAuth } from "../model/auth";
-import { AuthForm } from "./AuthForm";
+import { AuthForm } from "./AuthForm/AuthForm";
 
 const LoginForm: FC = () => {
 	const { login } = useAuth();

src/features/auth/ui/RegisterForm.tsx

@@ -1,7 +1,7 @@
 import type { FC } from "react";
 import { useLocation, useNavigate } from "react-router";
 import { useAuth } from "../model/auth";
-import { AuthForm } from "./AuthForm";
+import { AuthForm } from "./AuthForm/AuthForm";
 
 const RegisterForm: FC = () => {
 	const { register } = useAuth();

src/features/tbank-connection/index.ts

@@ -1 +1 @@
-export { TbankConnectionSection } from "./ui/TbankConnectionSection";
+export { TbankConnectionSection } from "./ui/TbankConnectionSection/TbankConnectionSection";

src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.vm.ts

@@ -1,5 +1,5 @@
 import { useAuthenticatedQuery } from "@/shared/api";
-import { tbankConnectionQueryOptions } from "../model/connection-boundary";
+import { tbankConnectionQueryOptions } from "../../model/connection-boundary";
 
 function useTbankConnectionViewModel() {
 	const status = useAuthenticatedQuery({

src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSectionLoaded.tsx

@@ -15,7 +15,7 @@ import { apiErrorCode, apiQueryClient } from "@/shared/api";
 import {
 	commitTbankConnectionBoundary,
 	type TbankConnectionStatus,
-} from "../model/connection-boundary";
+} from "../../model/connection-boundary";
 
 type TbankConnectionSectionLoadedProps = {
 	status: TbankConnectionStatus;

src/pages/account-events/index.ts

@@ -1 +1 @@
-export { AccountEventsPage } from "./ui/AccountEventsPage";
+export { AccountEventsPage } from "./ui/AccountEventsPage/AccountEventsPage";

src/pages/account-income/index.ts

@@ -1 +1 @@
-export { AccountIncomePage } from "./ui/AccountIncomePage";
+export { AccountIncomePage } from "./ui/AccountIncomePage/AccountIncomePage";

src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.test.tsx

@@ -23,7 +23,7 @@ import type { IncomeAnalytics } from "@/entities/income";
 import { configureAuthClient } from "@/shared/api";
 import { createQueryWrapper } from "@/test/query";
 import { server } from "@/test/server";
-import { isDate } from "../model/period";
+import { isDate } from "../../model/period";
 import { AccountIncomePage } from "./AccountIncomePage";
 import { toIncomeDisplayModel } from "./AccountIncomePage.vm";
 import { IncomePayments } from "./components/IncomePayments.view";

src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.vm.ts

@@ -13,7 +13,7 @@ import {
 	isDate,
 	moscowDate,
 	parseDraftDate,
-} from "../model/period";
+} from "../../model/period";
 
 const ISO_MONTH_LENGTH = 7;
 

src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageLoaded.view.tsx

@@ -15,7 +15,7 @@ import classes from "../AccountIncomePage.module.css";
 import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";
 import { IncomeComparisons } from "./IncomeComparisons.view";
 import { IncomePayments } from "./IncomePayments.view";
-import { IncomePeriodForm } from "./IncomePeriodForm.view";
+import { IncomePeriodForm } from "./IncomePeriodForm/IncomePeriodForm.view";
 import { IncomeSummary } from "./IncomeSummary.view";
 
 type LoadedProps = Extract<AccountIncomePageViewModel, { state: "loaded" }>;

src/pages/account-income/ui/AccountIncomePage/components/IncomePeriodForm/IncomePeriodForm.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import type { FC } from "react";
 import { FormProvider, useForm, useFormState } from "react-hook-form";
-import type { IncomeForm } from "../../model/period";
+import type { IncomeForm } from "../../../../model/period";
 import { IncomePeriodForm } from "./IncomePeriodForm.view";
 
 const period = { from: "01.08.2026", to: "27.08.2026" };

src/pages/account-income/ui/AccountIncomePage/components/IncomePeriodForm/IncomePeriodForm.view.tsx

@@ -8,8 +8,8 @@ import {
 	type IncomeForm,
 	moscowDate,
 	parseDraftDate,
-} from "../../model/period";
-import classes from "../AccountIncomePage.module.css";
+} from "../../../../model/period";
+import classes from "../../AccountIncomePage.module.css";
 
 type IncomePeriodFormProps = {
 	onSubmit: FormEventHandler<HTMLFormElement>;

src/pages/account-operations/index.ts

@@ -1 +1 @@
-export { AccountOperationsPage } from "./ui/AccountOperationsPage";
+export { AccountOperationsPage } from "./ui/AccountOperationsPage/AccountOperationsPage";

src/pages/account/index.ts

@@ -1 +1 @@
-export { AccountPage } from "./ui/AccountPage";
+export { AccountPage } from "./ui/AccountPage/AccountPage";

src/pages/account/ui/AccountPage/AccountPage.test.tsx

@@ -24,7 +24,7 @@ import { toAccountPagePositionSections } from "./AccountPage.vm";
 import { AccountPageEmpty } from "./components/AccountPageEmpty.view";
 import { AccountPageError } from "./components/AccountPageError.view";
 import { AccountPageLoaded } from "./components/AccountPageLoaded.view";
-import { AccountPageLoading } from "./components/AccountPageLoading.view";
+import { AccountPageLoading } from "./components/AccountPageLoading/AccountPageLoading.view";
 
 function renderPage(ui: React.ReactNode) {
 	const queryClient = createTestQueryClient();

src/pages/account/ui/AccountPage/AccountPage.tsx

@@ -3,7 +3,7 @@ import { useAccountPageViewModel } from "./AccountPage.vm";
 import { AccountPageEmpty } from "./components/AccountPageEmpty.view";
 import { AccountPageError } from "./components/AccountPageError.view";
 import { AccountPageLoaded } from "./components/AccountPageLoaded.view";
-import { AccountPageLoading } from "./components/AccountPageLoading.view";
+import { AccountPageLoading } from "./components/AccountPageLoading/AccountPageLoading.view";
 
 type AccountPageProps = { accountId?: string };
 

src/pages/account/ui/AccountPage/components/AccountPageEmpty.view.tsx

@@ -11,8 +11,8 @@ import type {
 } from "../AccountPage.vm";
 import { AccountHeading } from "./AccountHeading.view";
 import { IncomeSummary } from "./IncomeSummary.view";
-import { PortfolioRefreshState } from "./PortfolioRefreshState.view";
-import { PortfolioStructure } from "./PortfolioStructure";
+import { PortfolioRefreshState } from "./PortfolioRefreshState/PortfolioRefreshState.view";
+import { PortfolioStructure } from "./PortfolioStructure/PortfolioStructure";
 import { RecentOperations } from "./RecentOperations.view";
 
 type AccountPageEmptyProps = {

src/pages/account/ui/AccountPage/components/AccountPageLoaded.view.tsx

@@ -13,10 +13,10 @@ import type {
 	AccountPageRecentOperations,
 } from "../AccountPage.vm";
 import { AccountHeading } from "./AccountHeading.view";
-import { CurrencyCards } from "./CurrencyCards.view";
+import { CurrencyCards } from "./CurrencyCards/CurrencyCards.view";
 import { IncomeSummary } from "./IncomeSummary.view";
-import { PortfolioRefreshState } from "./PortfolioRefreshState.view";
-import { PortfolioStructure } from "./PortfolioStructure";
+import { PortfolioRefreshState } from "./PortfolioRefreshState/PortfolioRefreshState.view";
+import { PortfolioStructure } from "./PortfolioStructure/PortfolioStructure";
 import { PositionSection } from "./PositionSection.view";
 import { RecentOperations } from "./RecentOperations.view";