refactor(web): finish the component reorganisation — theme, skeletons, shell, modals

apps/admin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "admin",
-  "version": "1.4.43",
+  "version": "1.4.45",
   "private": true,
   "description": "Admin UI for Pace",
   "license": "AGPL-3.0",

apps/space/package.json

@@ -1,6 +1,6 @@
 {
   "name": "space",
-  "version": "1.4.43",
+  "version": "1.4.45",
   "private": true,
   "license": "AGPL-3.0",
   "type": "module",

apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/layout.tsx

@@ -6,8 +6,8 @@
 
 // components
 import { Outlet } from "react-router";
-import { AppHeader } from "@/components/core/app-header";
-import { ContentWrapper } from "@/components/core/content-wrapper";
+import { AppHeader } from "@/components/shell/app-header";
+import { ContentWrapper } from "@/components/shell/content-wrapper";
 // local imports
 import { WorkspaceActiveCycleHeader } from "./header";
 

apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/page.tsx

@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 // components
-import { PageHead } from "@/components/core/page-title";
+import { PageHead } from "@/components/shell/page-title";
 // hooks
 import { useWorkspace } from "@/hooks/store/use-workspace";
 // local imports

apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/layout.tsx

@@ -6,8 +6,8 @@
 
 // components
 import { Outlet } from "react-router";
-import { AppHeader } from "@/components/core/app-header";
-import { ContentWrapper } from "@/components/core/content-wrapper";
+import { AppHeader } from "@/components/shell/app-header";
+import { ContentWrapper } from "@/components/shell/content-wrapper";
 import { WorkspaceAnalyticsHeader } from "./header";
 
 export default function WorkspaceAnalyticsTabLayout() {

apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx

@@ -15,7 +15,7 @@ import { Tab, Tabs, TabsList, TabsPanel } from "@makeplane/propel/components/tab
 // components
 import { cn } from "@pace/utils";
 import AnalyticsFilterActions from "@/components/analytics/analytics-filter-actions";
-import { PageHead } from "@/components/core/page-title";
+import { PageHead } from "@/components/shell/page-title";
 // hooks
 import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useProject } from "@/hooks/store/use-project";

apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/header.tsx

@@ -10,7 +10,7 @@ import { useParams } from "@/lib/navigation";
 import { Header, Row } from "@pace/ui";
 import { cn } from "@pace/utils";
 // components
-import { AppHeader } from "@/components/core/app-header";
+import { AppHeader } from "@/components/shell/app-header";
 import { TabNavigationRoot } from "@/components/navigation";
 import { AppSidebarToggleButton } from "@/components/sidebar/sidebar-toggle-button";
 // hooks

apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/layout.tsx

@@ -6,7 +6,7 @@
 
 // components
 import { Outlet } from "react-router";
-import { ContentWrapper } from "@/components/core/content-wrapper";
+import { ContentWrapper } from "@/components/shell/content-wrapper";
 import { ProjectWorkItemDetailsHeader } from "./header";
 
 export default function ProjectIssueDetailsLayout() {

apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx

@@ -18,7 +18,7 @@ import emptyIssueDark from "@/assets/empty-state/search/issues-dark.webp?url";
 import emptyIssueLight from "@/assets/empty-state/search/issues-light.webp?url";
 // components
 import { EmptyState } from "@/components/empty-state/empty-state";
-import { PageHead } from "@/components/core/page-title";
+import { PageHead } from "@/components/shell/page-title";
 // hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";

apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/layout.tsx

@@ -6,8 +6,8 @@
 
 // components
 import { Outlet } from "react-router";
-import { AppHeader } from "@/components/core/app-header";
-import { ContentWrapper } from "@/components/core/content-wrapper";
+import { AppHeader } from "@/components/shell/app-header";
+import { ContentWrapper } from "@/components/shell/content-wrapper";
 // local imports
 import { WorkspaceDraftHeader } from "./header";
 

apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/page.tsx

@@ -5,7 +5,7 @@
  */
 
 // components
-import { PageHead } from "@/components/core/page-title";
+import { PageHead } from "@/components/shell/page-title";
 import { WorkspaceDraftIssuesRoot } from "@/components/issues/workspace-draft";
 import type { Route } from "./+types/page";
 

apps/web/app/(all)/[workspaceSlug]/(projects)/notifications/page.tsx

@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // pace imports
 import { useTranslation } from "@pace/i18n";
 // components
-import { PageHead } from "@/components/core/page-title";
+import { PageHead } from "@/components/shell/page-title";
 import { NotificationsRoot } from "@/components/workspace-notifications";
 // hooks
 import { useWorkspace } from "@/hooks/store/use-workspace";

apps/web/app/(all)/[workspaceSlug]/(projects)/page.tsx

@@ -7,9 +7,9 @@
 import { observer } from "mobx-react";
 // components
 import { useTranslation } from "@pace/i18n";
-import { AppHeader } from "@/components/core/app-header";
-import { ContentWrapper } from "@/components/core/content-wrapper";
-import { PageHead } from "@/components/core/page-title";
+import { AppHeader } from "@/components/shell/app-header";
+import { ContentWrapper } from "@/components/shell/content-wrapper";
+import { PageHead } from "@/components/shell/page-title";
 import { WorkspaceHomeView } from "@/components/home";
 // hooks
 import { useWorkspace } from "@/hooks/store/use-workspace";

apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/[profileViewId]/page.tsx

@@ -6,7 +6,7 @@
 
 import React from "react";
 // components
-import { PageHead } from "@/components/core/page-title";
+import { PageHead } from "@/components/shell/page-title";
 import { ProfileIssuesPage } from "@/components/profile/profile-issues";
 import type { Route } from "./+types/page";
 

apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx

@@ -11,7 +11,7 @@ import { EUserPermissions, EUserPermissionsLevel } from "@pace/constants";
 import { useTranslation } from "@pace/i18n";
 import { Button } from "@pace/propel/button";
 // components
-import { PageHead } from "@/components/core/page-title";
+import { PageHead } from "@/components/shell/page-title";
 import { DownloadActivityButton } from "@/components/profile/activity/download-button";
 import { WorkspaceActivityListPage } from "@/components/profile/activity/workspace-activity-list";
 // hooks

apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx

@@ -11,8 +11,8 @@ import useSWR from "swr";
 // components
 import { PROFILE_VIEWER_TAB, PROFILE_ADMINS_TAB, EUserPermissions, EUserPermissionsLevel } from "@pace/constants";
 import { useTranslation } from "@pace/i18n";
-import { AppHeader } from "@/components/core/app-header";
-import { ContentWrapper } from "@/components/core/content-wrapper";
+import { AppHeader } from "@/components/shell/app-header";
+import { ContentWrapper } from "@/components/shell/content-wrapper";
 import { ProfileSidebar } from "@/components/profile/sidebar";
 // constants
 import { USER_PROFILE_PROJECT_SEGREGATION } from "@pace/constants";

apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/page.tsx

@@ -11,7 +11,7 @@ import { useTranslation } from "@pace/i18n";
 import type { IUserStateDistribution, TStateGroups } from "@pace/types";
 import { ContentWrapper } from "@pace/ui";
 // components
-import { PageHead } from "@/components/core/page-title";
+import { PageHead } from "@/components/shell/page-title";
 import { ProfileActivity } from "@/components/profile/overview/activity";
 import { ProfilePriorityDistribution } from "@/components/profile/overview/priority-distribution";
 import { ProfileStateDistribution } from "@/components/profile/overview/state-distribution";

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/layout.tsx

@@ -6,8 +6,8 @@
 
 import { Outlet } from "react-router";
 // components
-import { AppHeader } from "@/components/core/app-header";
-import { ContentWrapper } from "@/components/core/content-wrapper";
+import { AppHeader } from "@/components/shell/app-header";
+import { ContentWrapper } from "@/components/shell/content-wrapper";
 import { ProjectArchivesHeader } from "../header";
 
 export default function ProjectArchiveCyclesLayout() {

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/page.tsx

@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 // components
-import { PageHead } from "@/components/core/page-title";
+import { PageHead } from "@/components/shell/page-title";
 import { ArchivedCycleLayoutRoot } from "@/components/cycles/archived-cycles";
 import { ArchivedCyclesHeader } from "@/components/cycles/archived-cycles/header";
 // hooks

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx

@@ -14,7 +14,7 @@ import { useTranslation } from "@pace/i18n";
 import { Button } from "@pace/propel/button";
 import { Loader } from "@pace/ui";
 // components
-import { PageHead } from "@/components/core/page-title";
+import { PageHead } from "@/components/shell/page-title";
 import { IssueDetailRoot } from "@/components/issues/issue-detail";
 // constants
 // hooks

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/layout.tsx

@@ -6,8 +6,8 @@
 
 import { Outlet } from "react-router";
 // components
-import { AppHeader } from "@/components/core/app-header";
-import { ContentWrapper } from "@/components/core/content-wrapper";
+import { AppHeader } from "@/components/shell/app-header";
+import { ContentWrapper } from "@/components/shell/content-wrapper";
 import { ProjectArchivedIssueDetailsHeader } from "./header";
 
 export default function ProjectArchivedIssueDetailLayout() {

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/layout.tsx

@@ -6,8 +6,8 @@
 
 import { Outlet } from "react-router";
 // components
-import { AppHeader } from "@/components/core/app-header";
-import { ContentWrapper } from "@/components/core/content-wrapper";
+import { AppHeader } from "@/components/shell/app-header";
+import { ContentWrapper } from "@/components/shell/content-wrapper";
 import { ProjectArchivesHeader } from "../../header";
 
 export default function ProjectArchiveIssuesLayout() {

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/page.tsx

@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 // components
-import { PageHead } from "@/components/core/page-title";
+import { PageHead } from "@/components/shell/page-title";
 import { ArchivedIssuesHeader } from "@/components/issues/archived-issues-header";
 import { ArchivedIssueLayoutRoot } from "@/components/issues/issue-layouts/roots/archived-issue-layout-root";
 // hooks

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/layout.tsx

@@ -6,8 +6,8 @@
 
 import { Outlet } from "react-router";
 // components
-import { AppHeader } from "@/components/core/app-header";
-import { ContentWrapper } from "@/components/core/content-wrapper";
+import { AppHeader } from "@/components/shell/app-header";
+import { ContentWrapper } from "@/components/shell/content-wrapper";
 import { ProjectArchivesHeader } from "../header";
 
 export default function ProjectArchiveModulesLayout() {

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/page.tsx

@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 // components
-import { PageHead } from "@/components/core/page-title";
+import { PageHead } from "@/components/shell/page-title";
 import { ArchivedModuleLayoutRoot, ArchivedModulesHeader } from "@/components/modules";
 // hooks
 import { useProject } from "@/hooks/store/use-project";

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx

@@ -11,7 +11,7 @@ import { cn } from "@pace/utils";
 import emptyCycle from "@/assets/empty-state/cycle.svg?url";
 // components
 import { EmptyState } from "@/components/empty-state/empty-state";
-import { PageHead } from "@/components/core/page-title";
+import { PageHead } from "@/components/shell/page-title";
 import useCyclesDetails from "@/components/cycles/active-cycle/use-cycles-details";
 import { CycleDetailsSidebar } from "@/components/cycles/analytics-sidebar";
 import { CycleLayoutRoot } from "@/components/issues/issue-layouts/roots/cycle-layout-root";

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/layout.tsx

@@ -6,8 +6,8 @@
 
 import { Outlet } from "react-router";
 // components
-import { AppHeader } from "@/components/core/app-header";
-import { ContentWrapper } from "@/components/core/content-wrapper";
+import { AppHeader } from "@/components/shell/app-header";
+import { ContentWrapper } from "@/components/shell/content-wrapper";
 import { CycleIssuesHeader } from "./header";
 import { CycleIssuesMobileHeader } from "./mobile-header";
 

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/layout.tsx

@@ -6,8 +6,8 @@
 
 import { Outlet } from "react-router";
 // components
-import { AppHeader } from "@/components/core/app-header";
-import { ContentWrapper } from "@/components/core/content-wrapper";
+import { AppHeader } from "@/components/shell/app-header";
+import { ContentWrapper } from "@/components/shell/content-wrapper";
 import { CyclesListHeader } from "./header";
 import { CyclesListMobileHeader } from "./mobile-header";
 

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx

@@ -20,12 +20,12 @@ import { calculateTotalFilters } from "@pace/utils";
 import darkEmptyState from "@/assets/empty-state/disabled-feature/cycles-dark.webp?url";
 import lightEmptyState from "@/assets/empty-state/disabled-feature/cycles-light.webp?url";
 // components
-import { PageHead } from "@/components/core/page-title";
+import { PageHead } from "@/components/shell/page-title";
 import { CycleAppliedFiltersList } from "@/components/cycles/applied-filters";
 import { CyclesView } from "@/components/cycles/cycles-view";
 import { CycleCreateUpdateModal } from "@/components/cycles/modal";
 import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
-import { CycleModuleListLayoutLoader } from "@/components/ui/loader/cycle-module-list-loader";
+import { CycleModuleListLayoutLoader } from "@/components/skeletons/loader/cycle-module-list-loader";
 // hooks
 import { useCycle } from "@/hooks/store/use-cycle";
 import { useCycleFilter } from "@/hooks/store/use-cycle-filter";

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/intake/layout.tsx

@@ -6,8 +6,8 @@
 
 import { Outlet } from "react-router";
 // components
-import { AppHeader } from "@/components/core/app-header";
-import { ContentWrapper } from "@/components/core/content-wrapper";
+import { AppHeader } from "@/components/shell/app-header";
+import { ContentWrapper } from "@/components/shell/content-wrapper";
 import { ProjectInboxHeader } from "@/components/projects/settings/intake/header";
 
 export default function ProjectInboxIssuesLayout() {

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/intake/page.tsx

@@ -15,7 +15,7 @@ import { EUserProjectRoles, EInboxIssueCurrentTab } from "@pace/types";
 import darkIntakeAsset from "@/assets/empty-state/disabled-feature/intake-dark.webp?url";
 import lightIntakeAsset from "@/assets/empty-state/disabled-feature/intake-light.webp?url";
 // components
-import { PageHead } from "@/components/core/page-title";
+import { PageHead } from "@/components/shell/page-title";
 import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
 import { InboxIssueRoot } from "@/components/inbox";
 // hooks

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/layout.tsx

@@ -6,8 +6,8 @@
 
 // components
 import { Outlet } from "react-router";
-import { AppHeader } from "@/components/core/app-header";
-import { ContentWrapper } from "@/components/core/content-wrapper";
+import { AppHeader } from "@/components/shell/app-header";
+import { ContentWrapper } from "@/components/shell/content-wrapper";
 import { ProjectIssuesHeader } from "./header";
 import { ProjectIssuesMobileHeader } from "./mobile-header";
 

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/page.tsx

@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // i18n
 import { useTranslation } from "@pace/i18n";
 // components
-import { PageHead } from "@/components/core/page-title";
+import { PageHead } from "@/components/shell/page-title";
 import { ProjectLayoutRoot } from "@/components/issues/issue-layouts/roots/project-layout-root";
 // hooks
 import { useProject } from "@/hooks/store/use-project";

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx

@@ -12,7 +12,7 @@ import { cn } from "@pace/utils";
 import emptyModule from "@/assets/empty-state/module.svg?url";
 // components
 import { EmptyState } from "@/components/empty-state/empty-state";
-import { PageHead } from "@/components/core/page-title";
+import { PageHead } from "@/components/shell/page-title";
 import { ModuleLayoutRoot } from "@/components/issues/issue-layouts/roots/module-layout-root";
 import { ModuleAnalyticsSidebar } from "@/components/modules";
 // hooks

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/layout.tsx

@@ -6,8 +6,8 @@
 
 import { Outlet } from "react-router";
 // components
-import { AppHeader } from "@/components/core/app-header";
-import { ContentWrapper } from "@/components/core/content-wrapper";
+import { AppHeader } from "@/components/shell/app-header";
+import { ContentWrapper } from "@/components/shell/content-wrapper";
 import { ModuleIssuesHeader } from "./header";
 import { ModuleIssuesMobileHeader } from "./mobile-header";
 

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/layout.tsx

@@ -6,8 +6,8 @@
 
 import { Outlet } from "react-router";
 // components
-import { AppHeader } from "@/components/core/app-header";
-import { ContentWrapper } from "@/components/core/content-wrapper";
+import { AppHeader } from "@/components/shell/app-header";
+import { ContentWrapper } from "@/components/shell/content-wrapper";
 import { ModulesListHeader } from "./header";
 import { ModulesListMobileHeader } from "./mobile-header";
 

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx

@@ -17,7 +17,7 @@ import { calculateTotalFilters } from "@pace/utils";
 import darkModulesAsset from "@/assets/empty-state/disabled-feature/modules-dark.webp?url";
 import lightModulesAsset from "@/assets/empty-state/disabled-feature/modules-light.webp?url";
 // components
-import { PageHead } from "@/components/core/page-title";
+import { PageHead } from "@/components/shell/page-title";
 import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
 import { ModuleAppliedFiltersList, ModulesListView } from "@/components/modules";
 // hooks

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx

@@ -17,7 +17,7 @@ import { EFileAssetType } from "@pace/types";
 import { cn } from "@pace/utils";
 // components
 import { LogoSpinner } from "@/components/common/logo-spinner";
-import { PageHead } from "@/components/core/page-title";
+import { PageHead } from "@/components/shell/page-title";
 import { IssuePeekOverview } from "@/components/issues/peek-overview";
 import type { TPageRootConfig, TPageRootHandlers } from "@/components/pages/editor/page-root";
 import { PageRoot } from "@/components/pages/editor/page-root";

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/layout.tsx

@@ -7,8 +7,8 @@
 // component
 import { Outlet } from "react-router";
 import useSWR from "swr";
-import { AppHeader } from "@/components/core/app-header";
-import { ContentWrapper } from "@/components/core/content-wrapper";
+import { AppHeader } from "@/components/shell/app-header";
+import { ContentWrapper } from "@/components/shell/content-wrapper";
 // pace web hooks
 import { EPageStoreType, usePageStore } from "@/hooks/store";
 // local components

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/layout.tsx

@@ -6,8 +6,8 @@
 
 // components
 import { Outlet } from "react-router";
-import { AppHeader } from "@/components/core/app-header";
-import { ContentWrapper } from "@/components/core/content-wrapper";
+import { AppHeader } from "@/components/shell/app-header";
+import { ContentWrapper } from "@/components/shell/content-wrapper";
 // local components
 import { PagesListHeader } from "./header";