[OFA] 気になるところを綺麗にする

apps/web/src/feature/app/create/CreateAppClient.tsx

@@ -1,7 +1,9 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { Button } from "@components/ui/v4/button";
 import { Title } from "@components/ui/v4/frame/Title";
+import { PageClientFrame } from "@components/ui/v4/PageClientFrame";
 import { AppNameInput } from "@feature/app/create/AppNameInput";
 import { CreateAppButton } from "@feature/app/create/CreateAppButton";
 import { FieldAddButton } from "@feature/app/create/FieldAddButton";
@@ -10,7 +12,6 @@ import {
   useResetAppFieldValue,
 } from "@feature/app/create/useAppFieldValueState";
 import { AppFieldInput } from "@feature/app/field/AppFieldInput";
-import { useEffect, useState } from "react";
 
 export const CreateAppClient = () => {
   const [appName, setAppName] = useState<string>("");
@@ -26,8 +27,7 @@ export const CreateAppClient = () => {
   );
 
   return (
-    <div className={"space-y-10"}>
-      <Title title={"アプリ作成"} />
+    <PageClientFrame title={<Title title={"アプリ作成"} />}>
       <div className={"grid grid-cols-2 gap-2"}>
         <AppNameInput appName={appName} setAppName={setAppName} />
         <div className={"grid grid-cols-3 gap-2"}>
@@ -41,6 +41,6 @@ export const CreateAppClient = () => {
           <AppFieldInput key={index} index={parseInt(index)} />
         ))}
       </div>
-    </div>
+    </PageClientFrame>
   );
 };

apps/web/src/features/fieldOptions/FieldOptionsLookUpInputFactory/FilterInputRow.tsx

@@ -7,7 +7,7 @@ import {
   FieldOptionsLookupFilter,
   Fields,
 } from "@oneforall/domain/schema/appSchema";
-import { FilterComplexity } from "@oneforall/domain/schema/filterComplexitySchema";
+import { FilterComplexity } from "@oneforall/domain/schema/filter/filterComplexitySchema";
 
 /**
  * @package

apps/web/src/features/fieldOptions/FieldOptionsLookUpInputFactory/FilterInputTable.tsx

@@ -7,7 +7,7 @@ import {
   FieldOptionsLookupFilter,
   Fields,
 } from "@oneforall/domain/schema/appSchema";
-import { FilterComplexity } from "@oneforall/domain/schema/filterComplexitySchema";
+import { FilterComplexity } from "@oneforall/domain/schema/filter/filterComplexitySchema";
 
 /**
  * @package

apps/web/src/features/viewAppModify/components/ModifyViewClient.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect } from "react";
 import { Title } from "@components/ui/v4/frame/Title";
+import { PageClientFrame } from "@components/ui/v4/PageClientFrame";
 import { RedirectViewRecordListButton } from "@feature/app/nav/RedirectViewRecordListButton";
 import { ViewFields } from "@oneforall/domain/schema/view/viewSchema";
 
@@ -37,13 +38,16 @@ export const ModifyViewClient = ({
   );
 
   return (
-    <div className={"space-y-5"}>
-      <Title title={"ビューを構成するアプリの設定"}>
-        <RedirectViewRecordListButton viewId={viewId} />
-      </Title>
+    <PageClientFrame
+      title={
+        <Title title={"ビューを構成するアプリの設定"}>
+          <RedirectViewRecordListButton viewId={viewId} />
+        </Title>
+      }
+    >
       <ViewAppOption appListData={appListData} viewFields={viewFields} />
       <ViewAppTable appListData={appListData} viewFields={viewFields} />
       <ModifyViewAppButton viewId={viewId} />
-    </div>
+    </PageClientFrame>
   );
 };

apps/web/src/features/viewRecordListFilter/components/InputFieldFilter.tsx

@@ -4,9 +4,9 @@ import { DateInput } from "@components/ui/v4/dateInput/DateInput";
 import { Select } from "@components/ui/v4/select";
 import { Table } from "@components/ui/v4/table";
 import { NumberInput, TextInput } from "@components/ui/v4/textInput";
-import { FilterComplexity } from "@oneforall/domain/schema/filterComplexitySchema";
-import { FilterOperator } from "@oneforall/domain/schema/filterOperatorSchema";
-import { ViewFilters } from "@oneforall/domain/schema/view/viewFilterSchema";
+import { FilterComplexity } from "@oneforall/domain/schema/filter/filterComplexitySchema";
+import { FilterOperator } from "@oneforall/domain/schema/filter/filterOperatorSchema";
+import { RecordFilters } from "@oneforall/domain/schema/filter/recordFiltersSchema";
 import {
   ViewField,
   ViewFields,
@@ -21,8 +21,8 @@ export const InputFieldFilter = ({
 }: {
   index: number;
   viewFields: ViewFields;
-  filter: ViewFilters[number];
-  setFilters: Dispatch<SetStateAction<ViewFilters>>;
+  filter: RecordFilters[number];
+  setFilters: Dispatch<SetStateAction<RecordFilters>>;
   disabled?: boolean;
 }) => {
   const [fieldId, setFieldId] = useState<string>(filter.fieldId);
@@ -111,7 +111,7 @@ export const InputFieldFilter = ({
                     value,
                     filterComplexity,
                   },
-                }) as ViewFilters,
+                }) as RecordFilters,
             );
           }}
           type={"add"}

apps/web/src/features/viewRecordListFilter/components/ViewRecordFilterSetting.tsx

@@ -3,7 +3,7 @@ import { useRouter } from "next/navigation";
 import { Button } from "@components/ui/v4/button";
 import { Table } from "@components/ui/v4/table";
 import { InputFieldFilter } from "@features/viewRecordListFilter/components/InputFieldFilter";
-import { ViewFilters } from "@oneforall/domain/schema/view/viewFilterSchema";
+import { RecordFilters } from "@oneforall/domain/schema/filter/recordFiltersSchema";
 import { View } from "@oneforall/domain/schema/view/viewSchema";
 import { paths } from "@routing/paths";
 
@@ -12,9 +12,9 @@ export const ViewRecordFilterSetting = ({
   defaultViewFilters = {},
 }: {
   view: View;
-  defaultViewFilters: ViewFilters | undefined;
+  defaultViewFilters: RecordFilters | undefined;
 }) => {
-  const [filters, setFilters] = useState<ViewFilters>(defaultViewFilters);
+  const [filters, setFilters] = useState<RecordFilters>(defaultViewFilters);
   const { push } = useRouter();
 
   useEffect(() => {

apps/web/src/pageComponents/appDangerous/components/AppDangerousClient.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { Title } from "@components/ui/v4/frame/Title";
 import { Modal } from "@components/ui/v4/modal";
+import { PageClientFrame } from "@components/ui/v4/PageClientFrame";
 import { DeleteAppRelationsClient } from "@features/appDelete/components/DeleteAppRelationsClient";
 import { AppDeleteRelations } from "@features/appDelete/types/appDeleteRelations";
 
@@ -18,8 +19,7 @@ export const AppDangerousClient = ({
 
   return (
     <>
-      <div className={"space-y-10"}>
-        <Title title={"危険エリア"} />
+      <PageClientFrame title={<Title title={"危険エリア"} />}>
         <div className={"space-y-10 px-10"}>
           <Section
             title={"アプリを削除します"}
@@ -43,7 +43,7 @@ export const AppDangerousClient = ({
             onClick={() => undefined}
           />
         </div>
-      </div>
+      </PageClientFrame>
       <Modal
         isOpen={isOpen}
         onClose={() => {

apps/web/src/pageComponents/appModify/components/ModifyAppClient.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { Title } from "@components/ui/v4/frame/Title";
+import { PageClientFrame } from "@components/ui/v4/PageClientFrame";
 import { AppNameInput } from "@feature/app/create/AppNameInput";
 import { FieldAddButton } from "@feature/app/create/FieldAddButton";
 import { useInitializeAppFieldValue } from "@feature/app/create/useAppFieldValueState";
@@ -27,10 +28,13 @@ export const ModifyAppClient = ({
   }, [initialize, defaultFields]);
 
   return (
-    <div className={"space-y-10"}>
-      <Title title={"アプリ設定"}>
-        <RedirectListButton appId={appId} />
-      </Title>
+    <PageClientFrame
+      title={
+        <Title title={"アプリ設定"}>
+          <RedirectListButton appId={appId} />
+        </Title>
+      }
+    >
       <div className={"grid grid-cols-2 gap-2"}>
         <AppNameInput appName={appName} setAppName={setAppName} />
         <div className={"grid grid-cols-3 gap-2"}>
@@ -39,6 +43,6 @@ export const ModifyAppClient = ({
         </div>
       </div>
       <FieldInputTable />
-    </div>
+    </PageClientFrame>
   );
 };

apps/web/src/pageComponents/appRecordImport/components/RecordImportClient.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react";
 import { Title } from "@components/ui/v4/frame/Title";
 import { Modal } from "@components/ui/v4/modal";
+import { PageClientFrame } from "@components/ui/v4/PageClientFrame";
 import { Tabs } from "@components/ui/v4/tab";
 import { OpenSettingButton } from "@feature/app/nav/OpenSettingButton";
 import { RedirectImportButton } from "@feature/app/nav/RedirectImportButton";
@@ -60,20 +61,23 @@ export const RecordImportClient = ({
 
   return (
     <>
-      <div className={"space-y-10"}>
-        <Title title={app.name}>
-          <RedirectSettingButton appId={app.id} />
-          <RedirectListButton appId={app.id} />
-          <RedirectImportButton appId={app.id} />
-          <OpenSettingButton onOpen={() => setIsOpen(true)} />
-        </Title>
+      <PageClientFrame
+        title={
+          <Title title={app.name}>
+            <RedirectSettingButton appId={app.id} />
+            <RedirectListButton appId={app.id} />
+            <RedirectImportButton appId={app.id} />
+            <OpenSettingButton onOpen={() => setIsOpen(true)} />
+          </Title>
+        }
+      >
         <ImportHistoryList />
         <ImportPreview
           app={app}
           previewRecords={previewRecords}
           lookupRecords={lookupRecords}
         />
-      </div>
+      </PageClientFrame>
       <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
         <Modal.Body>
           <Tabs

apps/web/src/pageComponents/appRecordList/components/RecordListClient.tsx

@@ -2,6 +2,7 @@
 
 import { ComponentProps, useEffect } from "react";
 import { Title } from "@components/ui/v4/frame/Title";
+import { PageClientFrame } from "@components/ui/v4/PageClientFrame";
 import { Table } from "@components/ui/v4/table";
 import { AddRecordButton } from "@feature/app/nav/AddRecordButton";
 import { RedirectChartButton } from "@feature/app/nav/RedirectChartButton";
@@ -39,18 +40,21 @@ export const RecordListClient = ({
   );
 
   return (
-    <div className={"space-y-10"}>
-      <Title title={app.name}>
-        <RedirectSettingButton appId={app.id} />
-        <AddRecordButton columnTemplate={columnsTemplate} />
-        <RedirectImportButton appId={app.id} />
-        <RedirectChartButton appId={app.id} />
-      </Title>
+    <PageClientFrame
+      title={
+        <Title title={app.name}>
+          <RedirectSettingButton appId={app.id} />
+          <AddRecordButton columnTemplate={columnsTemplate} />
+          <RedirectImportButton appId={app.id} />
+          <RedirectChartButton appId={app.id} />
+        </Title>
+      }
+    >
       <RecordListTable
         app={app}
         headerItems={headerItems}
         uneditable={uneditable}
       />
-    </div>
+    </PageClientFrame>
   );
 };

apps/web/src/pageComponents/showChart/components/ShowChartClient.tsx

@@ -2,6 +2,7 @@
 
 import React, { ComponentProps } from "react";
 import { Title } from "@components/ui/v4/frame/Title";
+import { PageClientFrame } from "@components/ui/v4/PageClientFrame";
 
 import { SwitchingCharts } from "./SwitchingCharts";
 
@@ -10,10 +11,9 @@ const ShowChartClient = ({
   colors,
 }: ComponentProps<typeof SwitchingCharts>) => {
   return (
-    <div className={"space-y-4"}>
-      <Title title={"グラフ表示"} />
+    <PageClientFrame title={<Title title={"グラフ表示"} />}>
       <SwitchingCharts data={data} colors={colors} />
-    </div>
+    </PageClientFrame>
   );
 };
 

apps/web/src/pageComponents/viewCreate/components/CreateViewClient.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react";
 import { Button } from "@components/ui/v4/button";
 import { Title } from "@components/ui/v4/frame/Title";
+import { PageClientFrame } from "@components/ui/v4/PageClientFrame";
 import { useGetViewFieldValue } from "@feature/view/create/useGetViewFieldValue";
 import { useResetViewFieldValue } from "@feature/view/create/useResetViewFieldValue";
 import { ViewFieldInput } from "@feature/view/field/ViewFieldInput";
@@ -24,8 +25,7 @@ export const CreateViewClient = () => {
   );
 
   return (
-    <div className={"space-y-10"}>
-      <Title title={"ビュー作成"} />
+    <PageClientFrame title={<Title title={"ビュー作成"} />}>
       <div className={"grid grid-cols-2 gap-2"}>
         <ViewNameInput viewName={viewName} setViewName={setViewName} />
         <div className={"grid grid-cols-3 gap-2"}>
@@ -39,6 +39,6 @@ export const CreateViewClient = () => {
           <ViewFieldInput key={index} index={parseInt(index)} />
         ))}
       </div>
-    </div>
+    </PageClientFrame>
   );
 };

apps/web/src/pageComponents/viewDangerous/components/ViewDangerousClient.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { Title } from "@components/ui/v4/frame/Title";
 import { Modal } from "@components/ui/v4/modal";
+import { PageClientFrame } from "@components/ui/v4/PageClientFrame";
 import { DeleteViewRelationsClient } from "@features/viewDelete/components/DeleteViewRelationsClient";
 import { ViewDeleteRelations } from "@features/viewDelete/types/viewDeleteRelations";
 import { Section } from "@pageComponents/viewDangerous/components/Section";
@@ -17,8 +18,7 @@ export const ViewDangerousClient = ({
 
   return (
     <>
-      <div className={"space-y-10"}>
-        <Title title={"危険エリア"} />
+      <PageClientFrame title={<Title title={"危険エリア"} />}>
         <div className={"space-y-10 px-10"}>
           <Section
             title={"ビューを削除します"}
@@ -42,7 +42,7 @@ export const ViewDangerousClient = ({
             onClick={() => undefined}
           />
         </div>
-      </div>
+      </PageClientFrame>
       <Modal
         isOpen={isOpen}
         onClose={() => {