refactor(thumbnail): sort blocks by their names

[hyrious]

No description provided.

[coderabbitai]

Summary by CodeRabbit

• New Features

  • Added support for customizable block ordering with enhanced numeric and locale-aware filename sorting to improve display organization.

• Improvements

  • Implemented more intelligent sorting for blocks and flows, ensuring consistent and intuitive arrangement regardless of locale or file naming conventions.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Walkthrough

The changes introduce locale-aware, numeric-based file-name sorting to the PkgData class in src/utils/thumbnail.ts. A new compareFileName helper function enables sorting with support for an optional explicit blocksOrder, falling back to numericCollator or localeCompare. The PkgData class now includes a blocksOrder property (string[] | undefined) populated from data.ui?.blocks during construction. Sorting logic is applied to blocks and flows lists. A new numericCollator is safely initialized with fallback handling. Data loading behavior remains unchanged; sorting is now applied based on the provided blocksOrder.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• compareFileName helper logic: Verify the priority ordering between blocksOrder, numericCollator, and localeCompare fallback works as intended
• Numeric collator initialization: Confirm safe initialization with appropriate fallback handling for environments where collator is unavailable
• Sorting application consistency: Ensure sorting is applied uniformly across all relevant list operations (blocks, flows)
• Property initialization timing: Validate that blocksOrder is correctly assigned from data.ui?.blocks during construction and available when needed by comparator logic

Pre-merge checks

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	No pull request description was provided by the author.	Add a description explaining the purpose and context of the sorting changes, such as why deterministic ordering is needed and how it improves the system.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The pull request title uses the correct format and accurately describes the main change: implementing sorting for blocks by their names.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/utils/thumbnail.ts (1)

241-254: LGTM! Robust comparison logic with clear prioritization.

The three-tier fallback (explicit order → numeric collator → locale compare) provides flexible, deterministic sorting. The logic correctly prioritizes items in the explicit order and sorts remaining items naturally.

For larger order arrays, consider a Map-based optimization to avoid O(n) indexOf lookups:

🔎 Optional performance optimization

 function compareFileName(name1: string, name2: string, order?: string[]): number {
     if (order) {
-        if (order.includes(name1) && order.includes(name2)) {
-            return order.indexOf(name1) - order.indexOf(name2);
-        }
-        if (order.includes(name1)) {
-            return -1;
-        }
-        if (order.includes(name2)) {
-            return 1;
-        }
+        const orderMap = new Map(order.map((name, idx) => [name, idx]));
+        const idx1 = orderMap.get(name1);
+        const idx2 = orderMap.get(name2);
+        if (idx1 !== undefined && idx2 !== undefined) {
+            return idx1 - idx2;
+        }
+        if (idx1 !== undefined) {
+            return -1;
+        }
+        if (idx2 !== undefined) {
+            return 1;
+        }
     }
     return numericCollator?.compare(name1, name2) || name1.localeCompare(name2);
 }

Note: This creates a Map on every call. For repeated sorts, consider memoizing the Map or building it once outside the comparator.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 378925d and c47b774.

📒 Files selected for processing (1)

• src/utils/thumbnail.ts (5 hunks)

🔇 Additional comments (4)

src/utils/thumbnail.ts (4)

232-239: LGTM! Safe collator initialization with fallback.

The defensive try-catch ensures compatibility across environments where Intl.Collator might not be available. The numeric option enables natural sorting (e.g., "file2" before "file10").

---

569-569: LGTM! Clean property addition for custom block ordering.

The blocksOrder property is correctly typed as optional and sourced from the manifest's UI configuration. Making it public readonly allows consuming code to access the ordering while preventing mutation.

Also applies to: 587-587

---

321-321: LGTM! Blocks sorted with custom order support.

The sort is correctly applied after collecting all blocks (tasks and subflows) and respects the custom blocksOrder when provided, falling back to natural numeric sorting otherwise.

---

356-356: LGTM! Flows sorted with natural numeric ordering.

The sort correctly applies natural, locale-aware numeric sorting to flows. Not passing blocksOrder is appropriate since flows don't require custom ordering like blocks do.