Merged branch bugfix/mobile-action-buttons into develop

src/webui/app/components/infra/section-actions.tsx

@@ -22,7 +22,7 @@ import {
   TextField,
   useTheme,
 } from "@mui/material";
-import { Link } from "@remix-run/react";
+import { Form, Link } from "@remix-run/react";
 import React, { useState } from "react";
 import { isWorkspaceFeatureAvailable } from "~/logic/domain/workspace";
 import { useBigScreen } from "~/rendering/use-big-screen";
@@ -43,19 +43,26 @@ interface NavMultipleDesc {
   navs: Array<NavSingleDesc>;
 }
 
+interface ActionExtraHiddenInput {
+  name: string;
+  value: string;
+}
+
 interface ActionSingleDesc {
   kind: "action-single";
   text: string;
   value: string;
   highlight?: boolean;
   icon?: JSX.Element;
   gatedOn?: WorkspaceFeature;
+  extraHiddenInputs?: ActionExtraHiddenInput;
 }
 
 interface ActionMultipleDesc {
   kind: "action-multiple";
   approach: "spread" | "compact";
   actions: Array<ActionSingleDesc>;
+  extraHiddenInputs?: ActionExtraHiddenInput;
 }
 
 interface FilterOption<K> {
@@ -116,12 +123,12 @@ export function ActionSingle(
 }
 
 export function ActionMultipleSpread(
-  ...actions: Array<ActionSingleDesc>
+  desc: Omit<Omit<ActionMultipleDesc, "kind">, "approach">
 ): ActionMultipleDesc {
   return {
     kind: "action-multiple",
     approach: "spread",
-    actions: actions,
+    ...desc,
   };
 }
 
@@ -174,6 +181,8 @@ interface SectionActionsProps {
 export function SectionActions(props: SectionActionsProps) {
   const isBigScreen = useBigScreen();
 
+  const extraHiddenInputs = collectExtraHiddenInputs(props.actions);
+
   if (!isBigScreen) {
     const allActions = props.actions.concat(props.extraActions ?? []);
     return (
@@ -198,6 +207,10 @@ export function SectionActions(props: SectionActionsProps) {
         />
       ))}
 
+      {extraHiddenInputs.map((hi, index) => (
+        <input key={index} type="hidden" name={hi.name} value={hi.value} />
+      ))}
+
       <SectionActionsWithDialog
         id={props.id}
         topLevelInfo={props.topLevelInfo}
@@ -222,6 +235,8 @@ function SectionActionsWithDialog(props: SectionActionsWithDialogProps) {
     return <></>;
   }
 
+  const extraHiddenInputs = collectExtraHiddenInputs(props.actions);
+
   return (
     <>
       <Button
@@ -241,17 +256,27 @@ function SectionActionsWithDialog(props: SectionActionsWithDialogProps) {
       >
         <DialogTitle>Actions</DialogTitle>
         <DialogContent>
-          <Stack spacing={2}>
-            {props.actions.map((action, index) => (
-              <ActionView
-                key={`action-${props.id}-${index}`}
-                topLevelInfo={props.topLevelInfo}
-                inputsEnabled={props.inputsEnabled}
-                orientation="vertical"
-                action={action}
+          <Form method="post">
+            <Stack spacing={2}>
+              {props.actions.map((action, index) => (
+                <ActionView
+                  key={`action-${props.id}-${index}`}
+                  topLevelInfo={props.topLevelInfo}
+                  inputsEnabled={props.inputsEnabled}
+                  orientation="vertical"
+                  action={action}
+                />
+              ))}
+            </Stack>
+            {extraHiddenInputs.map((hi, index) => (
+              <input
+                key={index}
+                type="hidden"
+                name={hi.name}
+                value={hi.value}
               />
             ))}
-          </Stack>
+          </Form>
         </DialogContent>
         <DialogActions>
           <Button onClick={() => setShowExtraActionsDialog(false)}>
@@ -812,3 +837,18 @@ function FilterManyOptionsView<K>(props: FilterManyOptionsViewProps<K>) {
     />
   );
 }
+
+function collectExtraHiddenInputs(
+  actions: ActionDesc[]
+): ActionExtraHiddenInput[] {
+  const extraHiddenInputs = [];
+  for (const action of actions) {
+    if (action.kind === "action-single" && action.extraHiddenInputs) {
+      extraHiddenInputs.push(action.extraHiddenInputs);
+    } else if (action.kind === "action-multiple" && action.extraHiddenInputs) {
+      extraHiddenInputs.push(action.extraHiddenInputs);
+    }
+  }
+
+  return extraHiddenInputs;
+}

src/webui/app/routes/workspace/time-plans/$id/add-from-current-big-plans.tsx

@@ -223,17 +223,23 @@ export default function TimePlanAddFromCurrentBigPlans() {
             topLevelInfo={topLevelInfo}
             inputsEnabled={inputsEnabled}
             actions={[
-              ActionMultipleSpread(
-                ActionSingle({
-                  text: "Add",
-                  value: "add",
-                  highlight: true,
-                }),
-                ActionSingle({
-                  text: "Add And Override Dates",
-                  value: "add-and-override",
-                })
-              ),
+              ActionMultipleSpread({
+                actions: [
+                  ActionSingle({
+                    text: "Add",
+                    value: "add",
+                    highlight: true,
+                  }),
+                  ActionSingle({
+                    text: "Add And Override Dates",
+                    value: "add-and-override",
+                  }),
+                ],
+                extraHiddenInputs: {
+                  name: "targetBigPlanRefIds",
+                  value: Array.from(targetBigPlanRefIds).join(","),
+                },
+              }),
               FilterFewOptions(
                 selectedView,
                 [
@@ -309,12 +315,6 @@ export default function TimePlanAddFromCurrentBigPlans() {
             })}
           </>
         )}
-
-        <input
-          name="targetBigPlanRefIds"
-          type="hidden"
-          value={Array.from(targetBigPlanRefIds).join(",")}
-        />
       </SectionCardNew>
     </LeafPanel>
   );

src/webui/app/routes/workspace/time-plans/$id/add-from-current-inbox-tasks.tsx

@@ -1,6 +1,4 @@
-import type {
-  InboxTask,
-  Workspace} from "@jupiter/webapi-client";
+import type { InboxTask, Workspace } from "@jupiter/webapi-client";
 import {
   ApiError,
   TimePlanActivityTarget,
@@ -46,7 +44,7 @@ import { standardShouldRevalidate } from "~/rendering/standard-should-revalidate
 import { useLoaderDataSafeForAnimation } from "~/rendering/use-loader-data-for-animation";
 import { DisplayType } from "~/rendering/use-nested-entities";
 import { getSession } from "~/sessions";
-import type { TopLevelInfo} from "~/top-level-context";
+import type { TopLevelInfo } from "~/top-level-context";
 import { TopLevelInfoContext } from "~/top-level-context";
 
 enum View {
@@ -238,17 +236,23 @@ export default function TimePlanAddFromCurrentInboxTasks() {
             topLevelInfo={topLevelInfo}
             inputsEnabled={inputsEnabled}
             actions={[
-              ActionMultipleSpread(
-                ActionSingle({
-                  text: "Add",
-                  value: "add",
-                  highlight: true,
-                }),
-                ActionSingle({
-                  text: "Add And Override Dates",
-                  value: "add-and-override",
-                })
-              ),
+              ActionMultipleSpread({
+                actions: [
+                  ActionSingle({
+                    text: "Add",
+                    value: "add",
+                    highlight: true,
+                  }),
+                  ActionSingle({
+                    text: "Add And Override Dates",
+                    value: "add-and-override",
+                  }),
+                ],
+                extraHiddenInputs: {
+                  name: "targetInboxTaskRefIds",
+                  value: Array.from(targetInboxTaskRefIds).join(","),
+                },
+              }),
               FilterFewOptions(
                 selectedView,
                 [
@@ -326,12 +330,6 @@ export default function TimePlanAddFromCurrentInboxTasks() {
             })}
           </>
         )}
-
-        <input
-          name="targetInboxTaskRefIds"
-          type="hidden"
-          value={Array.from(targetInboxTaskRefIds).join(",")}
-        />
       </SectionCardNew>
     </LeafPanel>
   );

src/webui/app/routes/workspace/time-plans/$id/add-from-current-time-plans/$otherTimePlanId.tsx

@@ -1,6 +1,5 @@
 import type { BigPlan, InboxTask, TimePlan } from "@jupiter/webapi-client";
 import { ApiError, TimePlanActivityTarget } from "@jupiter/webapi-client";
-import { Button } from "@mui/material";
 import type { ActionArgs, LoaderArgs } from "@remix-run/node";
 import { json, redirect } from "@remix-run/node";
 import type { ShouldRevalidateFunction } from "@remix-run/react";
@@ -15,7 +14,13 @@ import { EntityStack } from "~/components/infra/entity-stack";
 import { makeErrorBoundary } from "~/components/infra/error-boundary";
 import { GlobalError } from "~/components/infra/errors";
 import { LeafPanel } from "~/components/infra/layout/leaf-panel";
+import {
+  ActionMultipleSpread,
+  ActionSingle,
+  SectionActions,
+} from "~/components/infra/section-actions";
 import { SectionCard } from "~/components/infra/section-card";
+import { SectionCardNew } from "~/components/infra/section-card-new";
 import { TimePlanActivityCard } from "~/components/time-plan-activity-card";
 import { TimePlanCard } from "~/components/time-plan-card";
 import { TimePlanStack } from "~/components/time-plan-stack";
@@ -213,30 +218,34 @@ export default function TimePlanAddFromCurrentTimePlans() {
       initialExpansionState={LeafPanelExpansionState.LARGE}
     >
       <GlobalError actionResult={actionData} />
-      <SectionCard
+      <SectionCardNew
         title="Current Activities"
-        actions={[
-          <Button
-            key="add"
-            variant="contained"
-            disabled={!inputsEnabled}
-            type="submit"
-            name="intent"
-            value="add"
-          >
-            Add
-          </Button>,
-          <Button
-            key="add-and-override"
-            variant="outlined"
-            disabled={!inputsEnabled}
-            type="submit"
-            name="intent"
-            value="add-and-override"
-          >
-            Add and Override Dates
-          </Button>,
-        ]}
+        actions={
+          <SectionActions
+            id="add-from-current-time-plans"
+            topLevelInfo={topLevelInfo}
+            inputsEnabled={inputsEnabled}
+            actions={[
+              ActionMultipleSpread({
+                actions: [
+                  ActionSingle({
+                    text: "Add",
+                    value: "add",
+                    highlight: true,
+                  }),
+                  ActionSingle({
+                    text: "Add And Override Dates",
+                    value: "add-and-override",
+                  }),
+                ],
+                extraHiddenInputs: {
+                  name: "targetActivitiesRefIds",
+                  value: Array.from(targetActivitiesRefIds).join(","),
+                },
+              }),
+            ]}
+          />
+        }
       >
         <EntityStack>
           {sortedOtherActivities.map((activity) => (
@@ -272,13 +281,7 @@ export default function TimePlanAddFromCurrentTimePlans() {
             />
           ))}
         </EntityStack>
-
-        <input
-          name="targetActivitiesRefIds"
-          type="hidden"
-          value={Array.from(targetActivitiesRefIds).join(",")}
-        />
-      </SectionCard>
+      </SectionCardNew>
 
       {loaderData.otherHigherTimePlan && (
         <SectionCard title="Higher Time Plan">