@applicaster/zapp-react-native-utils 16.0.0-alpha.1052711356 → 16.0.0-alpha.1054344748

package/manifestUtils/modalBlocks.js

@@ -0,0 +1,304 @@
+function getModalBlockStyles({ prefix }) {
+  return [
+    {
+      group: true,
+      label: "Header Styles",
+      folded: true,
+      fields: [
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_container_default_backgroundColor`,
+          label: "Header Background Color",
+          initial_value: "rgba(30,30,30,1)",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_container_default_borderBottomColor`,
+          label: "Header Border Bottom Color",
+          initial_value: "transparent",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_header_container_default_borderBottomSize`,
+          label: "Header Border Bottom Size",
+          initial_value: 0,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_title_default_fontColor`,
+          label: "Header Title Color",
+          initial_value: "#EFEFEF",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_header_title_default_fontSize`,
+          label: "Header Title Font Size",
+          initial_value: 18,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_header_title_default_lineHeight`,
+          label: "Header Title Line Height",
+          initial_value: 32,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_close_button_default_backgroundColor`,
+          label: "Close Button Background Color",
+          initial_value: "transparent",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_close_button_hover_backgroundColor`,
+          label: "Close Button Hover Background Color",
+          initial_value: "rgba(46,46,46,1)",
+        },
+        {
+          type: "uploader",
+          key: `${prefix}_style_header_close_button_asset`,
+          label: "Close Button Icon Asset",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_action_buttons_default_backgroundColor`,
+          label: "Header Action Button Background Color",
+          initial_value: "rgba(46,46,46,1)",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_action_buttons_hover_backgroundColor`,
+          label: "Header Action Button Hover Color",
+          initial_value: "rgba(62,62,62,1)",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_action_buttons_default_fontColor`,
+          label: "Header Action Button Title Color",
+          initial_value: "#EFEFEF",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_header_action_buttons_default_fontSize`,
+          label: "Header Action Button Font Size",
+          initial_value: 14,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_header_action_buttons_default_borderRadius`,
+          label: "Header Action Button Radius",
+          initial_value: 16,
+        },
+      ],
+    },
+    {
+      group: true,
+      label: "Item Styles",
+      folded: true,
+      fields: [
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_item_background_default_backgroundColor`,
+          label: "Item Background Color",
+          initial_value: "transparent",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_item_background_focus_backgroundColor`,
+          label: "Item Focus/Touch Color",
+          initial_value: "rgba(62,62,62,1)",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_background_default_borderRadius`,
+          label: "Item Corner Radius",
+          initial_value: 12,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_background_default_paddingTop`,
+          label: "Item Padding Top",
+          initial_value: 8,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_background_default_paddingBottom`,
+          label: "Item Padding Bottom",
+          initial_value: 8,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_background_default_paddingLeft`,
+          label: "Item Padding Left",
+          initial_value: 10,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_background_default_paddingRight`,
+          label: "Item Padding Right",
+          initial_value: 10,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_image_default_width`,
+          label: "Item Image Width",
+          initial_value: 48,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_image_default_height`,
+          label: "Item Image Height",
+          initial_value: 48,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_image_default_borderRadius`,
+          label: "Item Image Radius",
+          initial_value: 6,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_item_text_label_1_default_fontColor`,
+          label: "Item Title Color",
+          initial_value: "#FFFFFF",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_text_label_1_default_fontSize`,
+          label: "Item Title Font Size",
+          initial_value: 15,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_item_text_label_2_default_fontColor`,
+          label: "Item Subtitle Color",
+          initial_value: "#999999",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_text_label_2_default_fontSize`,
+          label: "Item Subtitle Font Size",
+          initial_value: 13,
+        },
+      ],
+    },
+    {
+      group: true,
+      label: "Action Styles",
+      folded: true,
+      fields: [
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_action_background_default_backgroundColor`,
+          label: "Action Background Color",
+          initial_value: "transparent",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_action_background_hover_backgroundColor`,
+          label: "Action Hover/Touch Color",
+          initial_value: "rgba(46,46,46,1)",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_action_background_default_borderRadius`,
+          label: "Action Corner Radius",
+          initial_value: 12,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_action_background_default_paddingTop`,
+          label: "Action Padding Top",
+          initial_value: 14,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_action_background_default_paddingBottom`,
+          label: "Action Padding Bottom",
+          initial_value: 14,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_action_title_default_fontColor`,
+          label: "Action Title Color",
+          initial_value: "#EFEFEF",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_action_title_default_fontSize`,
+          label: "Action Title Font Size",
+          initial_value: 14,
+        },
+        {
+          type: "uploader",
+          key: `${prefix}_style_action_trailing_icon_chevron_asset`,
+          label: "Action Chevron Asset",
+        },
+      ],
+    },
+    {
+      group: true,
+      label: "Button Styles",
+      folded: true,
+      fields: [
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_button_background_default_backgroundColor`,
+          label: "Button Background Color",
+          initial_value: "#FFFFFF",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_button_background_focus_backgroundColor`,
+          label: "Button Focus Color",
+          initial_value: "#E0E0E0",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_button_background_inactive_backgroundColor`,
+          label: "Button Inactive Color",
+          initial_value: "#999999",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_button_background_default_borderRadius`,
+          label: "Button Corner Radius",
+          initial_value: 12,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_button_title_default_fontColor`,
+          label: "Button Title Color",
+          initial_value: "#000000",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_button_title_default_fontSize`,
+          label: "Button Title Font Size",
+          initial_value: 15,
+        },
+      ],
+    },
+  ];
+}
+
+function getModalLocalizations({ prefix }) {
+  return [
+    {
+      type: "text_input",
+      label: "Queue Header Title",
+      key: `${prefix}_header_title`,
+      initial_value: "Queue",
+    },
+    {
+      type: "text_input",
+      label: "Go To Queue Action Label",
+      key: `${prefix}_label_go_to_queue`,
+      initial_value: "Go To Queue",
+    },
+  ];
+}
+
+module.exports = {
+  getModalBlockStyles,
+  getModalLocalizations,
+};

package/modalState/ContentViewModel.ts

@@ -16,6 +16,7 @@ export interface ContentState {
   role?: string;
   behavior?: SelectionBehavior;
   dynamicCollection?: DynamicCollectionOptions;
+  themePluginId?: string;
 }
 
 export class ContentViewModel {
@@ -34,6 +35,7 @@ export class ContentViewModel {
       role: content.role,
       behavior: content.behavior,
       dynamicCollection: content.dynamicCollection,
+      themePluginId: content.themePluginId,
     });
 
     this.initEditableCollection(content);

package/modalState/ModalOrchestrator.ts

@@ -1,10 +1,16 @@
 import { dismissModal, modalStore, openBottomSheetModal } from "./store";
-import { isPresentSubMenuAction, Menu, MenuItem } from "./types";
+import {
+  getMenuItemActions,
+  isPresentSubMenuAction,
+  Menu,
+  MenuItem,
+  PresentSubMenuAction,
+} from "./types";
 import { ContentViewModel } from "./ContentViewModel";
 
 export type { Menu, MenuItem };
 
-export { isPresentSubMenuAction };
+export { isPresentSubMenuAction, getMenuItemActions };
 
 /**
  * Converts a Menu model into the props expected by BottomSheetModalContent.
@@ -37,6 +43,8 @@ function menuToModalArgs(
       itemsUrl: menu.content.itemsUrl,
       title: menu.header?.title ?? menu.content.title,
       summary: menu.header?.subtitle,
+      styleOverrides: menu.content.styleOverrides,
+      emptyMessage: menu.content.emptyMessage,
       onPress: onItemPress,
       viewModel,
     },
@@ -135,15 +143,21 @@ class ModalOrchestrator {
   private _buildOnPress(
     onItemPress?: (item: MenuItem) => void | Promise<void>
   ): (item: MenuItem) => void | Promise<void> {
-    return (item: MenuItem) => {
-      if (isPresentSubMenuAction(item.action)) {
-        // Navigate deeper into the sub-menu
-        this.open(item.action.menu, onItemPress);
-
-        return;
+    return async (item: MenuItem) => {
+      if (onItemPress) {
+        await onItemPress(item);
       }
 
-      return onItemPress?.(item);
+      const actions = getMenuItemActions(item);
+
+      const subMenuAction = actions.find(isPresentSubMenuAction) as
+        | PresentSubMenuAction
+        | undefined;
+
+      if (subMenuAction) {
+        // Navigate deeper into the sub-menu
+        this.open(subMenuAction.menu, onItemPress);
+      }
     };
   }
 

package/modalState/RemoteEditableCollection.ts

@@ -1,10 +1,11 @@
 import { BehaviorSubject, Observable } from "rxjs";
 import { Content, MenuItem, Operation } from "./types";
 import { EditableCollection } from "./EditableCollection";
+import { reorderByIds } from "../arrayUtils";
 import { actionExecutor } from "../actionsExecutor/ActionExecutor";
 import { createLogger } from "../logger";
 
-const { log_warning, log_error } = createLogger({
+const { log_debug, log_warning, log_error } = createLogger({
   subsystem: "modalState",
   category: "RemoteEditableCollection",
 });
@@ -15,6 +16,7 @@ export class RemoteEditableCollection implements EditableCollection {
   private itemsSubject: BehaviorSubject<MenuItem[]>;
   private refetch: () => Promise<void>;
   private content: Content;
+  private pendingMutationsCount = 0;
 
   constructor(content: Content, refetch: () => Promise<void>) {
     this.content = content;
@@ -29,6 +31,14 @@ export class RemoteEditableCollection implements EditableCollection {
    * a successful mutation reloads the feed). Overrides optimistic state.
    */
   sync(items: MenuItem[]): void {
+    if (this.pendingMutationsCount > 0) {
+      log_debug(
+        `sync: Suppressing server sync because ${this.pendingMutationsCount} local mutation(s) are in-flight`
+      );
+
+      return;
+    }
+
     this.itemsSubject.next(items);
   }
 
@@ -39,16 +49,26 @@ export class RemoteEditableCollection implements EditableCollection {
 
     if (!item) return;
 
+    this.pendingMutationsCount++;
+
     // Optimistic update
     const newItems = items.filter((_, i) => i !== index);
     this.itemsSubject.next(newItems);
 
+    let actionFailed = false;
+
     try {
       await this.executeActionAlias(item, "remove_item");
-      await this.refetch();
     } catch (e) {
+      actionFailed = true;
       log_error("Remove failed, rolling back", { error: e });
       this.itemsSubject.next(snapshot);
+    } finally {
+      this.pendingMutationsCount = Math.max(0, this.pendingMutationsCount - 1);
+    }
+
+    if (!actionFailed) {
+      await this.refetch();
     }
   }
 
@@ -57,32 +77,31 @@ export class RemoteEditableCollection implements EditableCollection {
     const snapshot = [...items];
 
     if (itemIds && itemIds.length > 0) {
-      const itemMap = new Map(items.map((item) => [item.id, item]));
-      const newItems: MenuItem[] = [];
-
-      itemIds.forEach((id) => {
-        const found = itemMap.get(id);
-        if (found) newItems.push(found);
-      });
-
-      items.forEach((item) => {
-        if (!newItems.includes(item)) newItems.push(item);
-      });
-
+      this.pendingMutationsCount++;
+      const newItems = reorderByIds(items, itemIds);
       this.itemsSubject.next(newItems);
 
+      let actionFailed = false;
+
       try {
         const targetItem = newItems[0] || items[0];
 
         await this.executeActionAlias(targetItem, "reorder_item", {
           itemIds,
         });
-
-        await this.refetch();
       } catch (e) {
-        console.error("[RemoteEditableCollection] move failed:", e);
+        actionFailed = true;
         log_error("Move failed, rolling back", { error: e });
         this.itemsSubject.next(snapshot);
+      } finally {
+        this.pendingMutationsCount = Math.max(
+          0,
+          this.pendingMutationsCount - 1
+        );
+      }
+
+      if (!actionFailed) {
+        await this.refetch();
       }
     }
   }
@@ -99,15 +118,30 @@ export class RemoteEditableCollection implements EditableCollection {
       return;
     }
 
+    this.pendingMutationsCount++;
+    let actionFailed = false;
+
     try {
       for (const action of addEvents) {
-        await actionExecutor.handleAction(action as any);
+        if (this.content.context) {
+          await actionExecutor.handleAction(
+            action as any,
+            this.content.context
+          );
+        } else {
+          await actionExecutor.handleAction(action as any);
+        }
       }
-
-      await this.refetch();
     } catch (e) {
+      actionFailed = true;
       log_error("Add/create collection failed", { error: e });
       this.itemsSubject.next(snapshot);
+    } finally {
+      this.pendingMutationsCount = Math.max(0, this.pendingMutationsCount - 1);
+    }
+
+    if (!actionFailed) {
+      await this.refetch();
     }
   }
 
@@ -115,32 +149,46 @@ export class RemoteEditableCollection implements EditableCollection {
     const items = this.itemsSubject.value;
     const snapshot = [...items];
 
+    this.pendingMutationsCount++;
     this.itemsSubject.next([]);
 
+    let actionFailed = false;
+
     try {
       const firstItem = items[0];
 
       if (firstItem) {
-        await this.executeActionAlias(firstItem, "clear_collection");
+        await this.executeActionAlias(firstItem, [
+          "delete_collection",
+          "clear_collection",
+        ]);
       }
-
-      await this.refetch();
     } catch (e) {
+      actionFailed = true;
       log_error("deleteCollection failed, rolling back", { error: e });
       this.itemsSubject.next(snapshot);
+    } finally {
+      this.pendingMutationsCount = Math.max(0, this.pendingMutationsCount - 1);
+    }
+
+    if (!actionFailed) {
+      await this.refetch();
     }
   }
 
   private async executeActionAlias(
     item: MenuItem,
-    alias: string,
+    alias: string | string[],
     data?: Record<string, unknown>
   ): Promise<void> {
     const entryActions = item.entryActions || [];
+    const aliases = Array.isArray(alias) ? alias : [alias];
 
-    const actionGroup = entryActions.find((ea) => ea.button?.alias === alias);
+    const actionGroup = entryActions.find(
+      (ea) => ea.button?.alias && aliases.includes(ea.button.alias)
+    );
 
-    console.log("[RemoteEditableCollection] executeActionAlias:", {
+    log_debug("executeActionAlias:", {
       alias,
       itemId: item.id,
       entryActionsCount: entryActions.length,
@@ -150,7 +198,7 @@ export class RemoteEditableCollection implements EditableCollection {
     });
 
     if (!actionGroup || !actionGroup.actions) {
-      log_warning(`No entry action found for alias "${alias}"`, {
+      log_warning(`No entry action found for alias "${aliases.join(", ")}"`, {
         itemId: item.id,
       });
 
@@ -173,14 +221,12 @@ export class RemoteEditableCollection implements EditableCollection {
           }
         : action;
 
-      console.log(
-        "[RemoteEditableCollection] handling action:",
-        actionToExecute
-      );
+      log_debug("handling action:", actionToExecute);
 
       await actionExecutor.handleAction(
         actionToExecute as any,
         {
+          ...this.content.context,
           entry: item as any,
         } as any
       );

package/modalState/__tests__/ContentViewModel.test.ts

@@ -18,7 +18,7 @@ describe("ContentViewModel", () => {
 
     const viewModel = new ContentViewModel(content);
 
-    expect(viewModel.getState()).toEqual({
+    expect(viewModel.getState()).toMatchObject({
       items: content.items,
       isLoading: false,
       role: undefined,
@@ -71,7 +71,7 @@ describe("ContentViewModel", () => {
       expect.stringMatching(/^http:\/\/example\.com\/items\?_t=\d+$/)
     );
 
-    expect(viewModel.getState()).toEqual({
+    expect(viewModel.getState()).toMatchObject({
       items: mockItems,
       isLoading: false,
       role: "collection_selector",
@@ -154,7 +154,7 @@ describe("ContentViewModel", () => {
 
     await new Promise(process.nextTick);
 
-    expect(viewModel.getState()).toEqual({
+    expect(viewModel.getState()).toMatchObject({
       items: [],
       isLoading: false,
       error: "Network Error",

package/modalState/__tests__/ModalOrchestrator.phase3.test.ts

@@ -25,4 +25,39 @@ describe("ModalOrchestrator phase 3", () => {
     expect(props.viewModel.getState().role).toBe("collection_selector");
     expect(props.title).toBe("Playlists");
   });
+
+  it("forwards header title and subtitle as summary", () => {
+    modalOrchestrator.open({
+      header: {
+        title: "Sleep Timer",
+        subtitle: "remaining",
+      },
+      content: {
+        title: "Sleep Timer",
+        items: [{ id: "5", title: "5 minutes" }],
+      },
+    });
+
+    const props = (modalStore.getState().modalState.screen as any)
+      ?.modalBottomSheetContentProps;
+
+    expect(props.title).toBe("Sleep Timer");
+    expect(props.summary).toBe("remaining");
+  });
+
+  it("forwards the queue empty message onto the sheet props", () => {
+    modalOrchestrator.open({
+      header: { title: "Queue" },
+      content: {
+        title: "Queue",
+        items: [],
+        emptyMessage: "Queued items will be added here",
+      },
+    });
+
+    const props = (modalStore.getState().modalState.screen as any)
+      ?.modalBottomSheetContentProps;
+
+    expect(props.emptyMessage).toBe("Queued items will be added here");
+  });
 });