restructure folders for layout

web/src/app/app/_components/AppContent.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import React, { PropsWithChildren, useEffect } from 'react';
+import React, { PropsWithChildren } from 'react';
 
 import { Layout } from 'antd';
 import { createStyles } from 'antd-style';
 import { appContentHeaderHeight } from './AppContentHeader';
 const { Content } = Layout;
 
-const useStyles = createStyles(({ token, css }) => {
+const useStyles = createStyles(({ css }) => {
   return {
     scrollableContainer: css`
       max-height: calc(100% - ${appContentHeaderHeight}px);

web/src/app/app/collections/[collectionId]/metrics/[threadId]/page.tsx

@@ -1,9 +1,9 @@
 import { ThreadContentController } from '@/app/app/_controllers/ThreadController';
 import { AppAssetCheckLayout } from '@/app/app/_layouts';
-import { getAppSplitterLayout } from '@/components/layout/splitContentHelper';
+import { getAppSplitterLayout } from '@/components/layout';
 import React from 'react';
 
-export default function CollectionThreadPage({
+export default async function CollectionThreadPage({
   params: { threadId, collectionId }
 }: {
   params: {
@@ -11,7 +11,7 @@ export default function CollectionThreadPage({
     collectionId: string;
   };
 }) {
-  const threadLayout = getAppSplitterLayout('thread', ['auto', '360px']);
+  const threadLayout = await getAppSplitterLayout('thread', ['auto', '360px']);
 
   return (
     <AppAssetCheckLayout threadId={threadId} type="thread">

web/src/app/app/dashboards/[dashboardId]/metrics/[threadId]/page.tsx

@@ -1,16 +1,16 @@
 import { ThreadContentController } from '@/app/app/_controllers/ThreadController';
 import { AppAssetCheckLayout } from '@/app/app/_layouts';
-import { getAppSplitterLayout } from '@/components/layout/splitContentHelper';
+import { getAppSplitterLayout } from '@/components/layout';
 import React from 'react';
 
-export default function DashboardThreadPage({
+export default async function DashboardThreadPage({
   params: { threadId }
 }: {
   params: {
     threadId: string;
   };
 }) {
-  const threadLayout = getAppSplitterLayout('thread', ['auto', '360px']);
+  const threadLayout = await getAppSplitterLayout('thread', ['auto', '360px']);
 
   return (
     <AppAssetCheckLayout threadId={threadId} type="thread">

web/src/app/app/layout.tsx

@@ -1,10 +1,8 @@
 'use server';
 
-import { AppProviders } from '@/context/AppProviders';
 import { useSupabaseServerContext } from '@/context/Supabase/useSupabaseContext';
 import React from 'react';
-import { AppLayout } from './_controllers/AppLayout';
-import { getAppSplitterLayout } from '@/components/layout/splitContentHelper';
+import { getAppSplitterLayout } from '@/components/layout/AppSplitter';
 import { getUserInfo } from '@/api/busterv2/users/requests';
 import { useBusterSupabaseAuthMethods } from '@/hooks/useBusterSupabaseAuthMethods';
 import { createBusterRoute } from '@/routes';
@@ -22,7 +20,7 @@ export default async function Layout({
   const headersList = headers();
   const supabaseContext = await useSupabaseServerContext();
   const userInfo = await getUserInfo({ jwtToken: supabaseContext.accessToken });
-  const defaultLayout = getAppSplitterLayout('app-layout', ['230px', 'auto']);
+  const defaultLayout = await getAppSplitterLayout('app-layout', ['230px', 'auto']);
   const { signOut } = useBusterSupabaseAuthMethods();
   const pathname = headersList.get('x-next-pathname') as string;
   const cookiePathname = cookies().get('x-next-pathname')?.value;

web/src/app/app/metrics/[threadId]/page.tsx

@@ -2,11 +2,11 @@ import {
   ThreadContentController,
   ThreadControllerHeader
 } from '../../_controllers/ThreadController';
-import { getAppSplitterLayout } from '@/components/layout/splitContentHelper';
+import { getAppSplitterLayout } from '@/components/layout';
 import { AppAssetCheckLayout } from '../../_layouts/AppAssetCheckLayout';
 import { AppContentHeader } from '../../_components/AppContentHeader';
 
-export default function ThreadsPage({
+export default async function ThreadsPage({
   params: { threadId },
   searchParams
 }: {
@@ -15,7 +15,7 @@ export default function ThreadsPage({
   };
   searchParams: { embed?: string };
 }) {
-  const threadLayout = getAppSplitterLayout('thread', ['auto', '360px']);
+  const threadLayout = await getAppSplitterLayout('thread', ['auto', '360px']);
   const embedView = searchParams.embed === 'true';
 
   return (

web/src/app/app/terms/[termId]/page.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { getAppSplitterLayout } from '@/components/layout/splitContentHelper';
+import { getAppSplitterLayout } from '@/components/layout';
 import { TermIndividualContainer } from './TermIndividualContainer';
 
-export default function TermIdPage({ params: { termId } }: { params: { termId: string } }) {
-  const termPageIdLayout = getAppSplitterLayout('term-page', ['auto', '300px']);
+export default async function TermIdPage({ params: { termId } }: { params: { termId: string } }) {
+  const termPageIdLayout = await getAppSplitterLayout('term-page', ['auto', '300px']);
 
   return <TermIndividualContainer termPageIdLayout={termPageIdLayout} termId={termId} />;
 }

web/src/components/grid/BusterResizeColumns.tsx

@@ -8,7 +8,7 @@ import { useMemoizedFn, useMouse } from 'ahooks';
 import { BusterDragColumnMarkers } from './_BusterDragColumnMarkers';
 import { calculateColumnSpan, columnSpansToPercent } from './config';
 import { createStyles } from 'antd-style';
-import SplitPane, { Pane } from '../layout/SplitPane';
+import SplitPane, { Pane } from '../layout/AppSplitter/SplitPane';
 import { useDropzoneStyles } from './BusterResizeRows';
 
 type ContainerProps = {

web/src/components/layout/AppSplitter/AppSplitter.tsx

@@ -1,14 +1,8 @@
-import { useAntToken } from '@/styles/useAntToken';
+'use client';
+
 import { useMemoizedFn } from 'ahooks';
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-  forwardRef,
-  useImperativeHandle
-} from 'react';
-import SplitPane, { Pane } from '@/components/layout/SplitPane';
+import React, { useEffect, useMemo, useState, forwardRef, useImperativeHandle } from 'react';
+import SplitPane, { Pane } from './SplitPane';
 import { createAutoSaveId } from './helper';
 import Cookies from 'js-cookie';
 import { createStyles } from 'antd-style';

web/src/components/layout/AppSplitter/index.ts

@@ -0,0 +1,2 @@
+export * from './AppSplitter';
+export * from './splitContentHelper';

web/src/components/layout/AppSplitter/splitContentHelper.ts

@@ -1,10 +1,14 @@
+'use server';
+
 import { cookies } from 'next/headers';
 import { createAutoSaveId } from './helper';
 
-export function getAppSplitterLayout(
+const DEFAULT_LAYOUT = ['300px', 'auto'];
+
+export async function getAppSplitterLayout(
   id: string = '',
-  defaultLayout: string[] = ['300px', 'auto']
-): [string, string] {
+  defaultLayout: string[] = DEFAULT_LAYOUT
+): Promise<[string, string]> {
   const key = createAutoSaveId(id);
   const layout = cookies().get(key);
   if (layout) {

web/src/components/layout/PreventNavigation.tsx

@@ -1,11 +1,10 @@
 'use client';
 
 import { useMemoizedFn, useMount } from 'ahooks';
-import { Modal } from 'antd';
 import { useRouter } from 'next/navigation';
 import { useState, useRef, useEffect, useMemo } from 'react';
 import React from 'react';
-import { AppModal } from '@/components';
+import { AppModal } from '../modal/AppModal';
 
 type PreventNavigationProps = {
   isDirty: boolean;

web/src/styles/styles.scss

@@ -7,7 +7,7 @@
 @import './transitions.scss';
 @import './animations.scss';
 @import './monaco.scss';
-@import '../components/layout/SplitPane/themes/default.scss';
+@import '../components/layout/AppSplitter/SplitPane/themes/default.scss';
 @import 'react-data-grid/lib/styles.css';
 
 h1,