From 7d849a6258cab8a05cec25ec8433a1dbb03f802c Mon Sep 17 00:00:00 2001
From: Yucheng Chuang <ducksteven@gmail.com>
Date: Thu, 29 Aug 2024 22:49:48 +0900
Subject: [PATCH] Simplify input

---
 src/lib/custom-format.js       |  69 ++++++++++---------
 src/ui/custom-format-help.html | 121 +++++++++++++--------------------
 src/ui/custom-format.js        |  48 +++++--------
 test/custom-format.test.js     |  98 +++++++++-----------------
 4 files changed, 135 insertions(+), 201 deletions(-)

diff --git a/src/lib/custom-format.js b/src/lib/custom-format.js
index 051e0fe..911082f 100644
--- a/src/lib/custom-format.js
+++ b/src/lib/custom-format.js
@@ -15,17 +15,18 @@ Mustache.escape = function (text) { return text; };
  */
 
 /**
- * @typedef {Object} RenderInputGroup
- * @prop {String} name
- * @prop {Boolean} is_ungrouped
+ * @typedef {Object} RenderInputEntry
+ * @prop {String} title
+ * @prop {String} url
+ * @prop {Boolean} isGroup
  * @prop {Number} number
- * @prop {RenderInputLink[]} links
+ * @prop {RenderInputEntry[]} links
  */
 
 /**
  * @typedef {Object} RenderInput
  * @prop {RenderInputLink[]} links
- * @prop {RenderInputGroup[]} groups
+ * @prop {RenderInputEntry[]} grouped
  */
 
 export default class CustomFormat {
@@ -75,37 +76,43 @@ export default class CustomFormat {
         number: idx + 1,
       }));
 
-    let ol = 1;
-    /** @type {RenderInputGroup[]} */
-    const groups = lists.map((group, idx) => {
-      const initialOl = ol;
-      const groupLinks = group.tabs.map((tab, jdx) => {
-        const ret = {
-          title: tab.title,
-          url: tab.url,
-          number: jdx + 1,
-          ol: group.isNonGroup() ? ol : jdx + 1,
-        };
-        if (group.isNonGroup()) {
-          ol += 1;
-        }
-        return ret;
-      });
-      if (!group.isNonGroup()) {
-        ol += 1;
+    let number = 1;
+    /** @type {RenderInputEntry[]} */
+    const grouped = [];
+
+    lists.forEach((group) => {
+      if (group.isNonGroup()) {
+        group.tabs.forEach((tab, idx) => {
+          grouped.push({
+            title: tab.title,
+            url: tab.url,
+            number: idx + number,
+            isGroup: false,
+            links: [],
+          });
+        });
+        number += group.tabs.length;
+      } else {
+        grouped.push({
+          isGroup: true,
+          title: group.name,
+          url: null,
+          number,
+          links: group.tabs.map((tab, jdx) => ({
+            title: tab.title,
+            url: tab.url,
+            number: jdx + 1,
+            isGroup: false,
+            links: [],
+          })),
+        });
+        number += 1;
       }
-      return {
-        name: group.name,
-        is_ungrouped: group.isNonGroup(),
-        number: idx + 1,
-        links: groupLinks,
-        ol: initialOl,
-      };
     });
 
     return {
       links,
-      groups,
+      grouped,
     };
   }
 }
diff --git a/src/ui/custom-format-help.html b/src/ui/custom-format-help.html
index 07ad68f..de4588e 100644
--- a/src/ui/custom-format-help.html
+++ b/src/ui/custom-format-help.html
@@ -17,82 +17,58 @@ <h1 class="title">Copy as Markdown</h1>
     <div class="column">
       <div class="box content">
         <h2 class="title is-3">Custom Format Help</h2>
-        <h2 class="title is-4">Writing Templates</h2>
         <p>Write the template in the Mustache template language. </p>
+        <h2 class="title is-4">Multiple Tabs</h2>
         <p>The input object contains 2 attributes:
-          <code>links</code> for flattened links, and <code>groups</code> for links grouped in Tab Groups
+          <code>links</code> for flattened links, and <code>grouped</code> for links grouped in Tab Groups
           (supported browsers only).</p>
         <p>Tab Groups appear in its original order.
-          For tabs that are not grouped in any Tab Group, they will be gathered in a virtual-group,
-          with <code>"is_ungrouped": true</code> and <code>"name": null</code> attributes.</p>
+          For tabs that belong to a Tab Group, they will be gathered in an entry
+          with <code>"isGroup": true</code> attribute. The tabs appear in its nested <code>"links": [...]</code> array.
+          For tabs that do not belong to any Tab Group, they will appear at the top level.
         <p>In loops, use <code>{{@index}}</code> for 0-based indexes, and <code>{{number}}</code> for 1-based indexes.</p>
-        <p>For nested loops, use <code>{{ol}}</code> for the current 1-based index of nesting.</p>
         <div><details><summary>Example Input: List of links without grouping</summary>
-        <pre class="is-size-7"><code>{
+        <pre class="is-size-7 is-overflow-x-scroll"><code>{
   "links": [
     { "title": "Example 1", "url": "https://example.com/1", "number":1 },
     { "title": "Example 2", "url": "https://example.com/2", "number":2 },
     { "title": "Example 3", "url": "https://example.com/3", "number":3 },
     { "title": "Example 4", "url": "https://example.com/4", "number":4 }
   ],
-  "groups":[
-    {
-      "name": null,
-      "is_ungrouped": true,
-      "number": 1,
-      "links": [
-        { "title": "Example 1", "url": "https://example.com/1", "number":1 },
-        { "title": "Example 2", "url": "https://example.com/2", "number":2 },
-        { "title": "Example 3", "url": "https://example.com/3", "number":3 },
-        { "title": "Example 4", "url": "https://example.com/4", "number":4 }
-      ]
-    }
+  "grouped":[
+    { "title": "Example 1", "url": "https://example.com/1", "number":1, "isGroup": false, "links": [] },
+    { "title": "Example 2", "url": "https://example.com/2", "number":2, "isGroup": false, "links": [] },
+    { "title": "Example 3", "url": "https://example.com/3", "number":3, "isGroup": false, "links": [] },
+    { "title": "Example 4", "url": "https://example.com/4", "number":4, "isGroup": false, "links": [] }
   ]
 }</code></pre>
         </details></div>
         <div><details><summary>Example Input: List of links with grouping</summary>
         <p class="help">Suppose tab 2 and 3 are grouped in Group A, but tab 1 and 4 are not in any group:</p>
-        <pre class="is-size-7"><code>{
-links: [
-  { title: 'Example 1', url: 'https://example.com/1', number: 1 },
-  { title: 'Example 2', url: 'https://example.com/2', number: 2 },
-  { title: 'Example 3', url: 'https://example.com/3', number: 3 },
-  { title: 'Example 4', url: 'https://example.com/4', number: 4 },
-  { title: 'Example 5', url: 'https://example.com/5', number: 5 },
-  { title: 'Example 6', url: 'https://example.com/6', number: 6 },
+        <pre class="is-size-7 is-overflow-x-scroll"><code>{
+"links": [
+  {"title": "Example 1", "url": "https://example.com/1", "number": 1},
+  {"title": "Example 2", "url": "https://example.com/2", "number": 2},
+  {"title": "Example 3", "url": "https://example.com/3", "number": 3},
+  {"title": "Example 4", "url": "https://example.com/4", "number": 4},
+  {"title": "Example 5", "url": "https://example.com/5", "number": 5},
+  {"title": "Example 6", "url": "https://example.com/6", "number": 6},
+  {"title": "Example 7", "url": "https://example.com/7", "number": 7}
 ],
-groups: [
+"grouped": [
+  {"title": "Example 1", "url": "https://example.com/1", "isGroup": false, "number": 1, "links": []},
+  {"title": "Example 2", "url": "https://example.com/2", "isGroup": false, "number": 2, "links": []},
   {
-    name: '',
-    is_ungrouped: true,
-    number: 1,
-    ol: 1,
-    links: [
-      { title: 'Example 1', url: 'https://example.com/1', number: 1, ol: 1 },
-      { title: 'Example 2', url: 'https://example.com/2', number: 2, ol: 2 },
-    ],
+    "title": "Group 1", "url": null, "isGroup": true, "number": 3,
+    "links": [
+      {"title": "Example 3", "url": "https://example.com/3", "isGroup": false, "number": 1, "links": []},
+      {"title": "Example 4", "url": "https://example.com/4", "isGroup": false, "number": 2, "links": []},
+      {"title": "Example 5", "url": "https://example.com/5", "isGroup": false, "number": 3, "links": []}
+    ]
   },
-  {
-    name: 'My Group',
-    is_ungrouped: false,
-    number: 2,
-    ol: 3,
-    links: [
-      { title: 'Example 3', url: 'https://example.com/3', number: 1, ol: 1 },
-      { title: 'Example 4', url: 'https://example.com/4', number: 2, ol: 2 },
-    ],
-  },
-  {
-    name: '',
-    is_ungrouped: true,
-    number: 3,
-    ol: 4,
-    links: [
-      { title: 'Example 5', url: 'https://example.com/5', number: 1, ol: 4 },
-      { title: 'Example 6', url: 'https://example.com/6', number: 2, ol: 5 },
-    ],
-  },
-],
+  {"title": "Example 6", "url": "https://example.com/6", "isGroup": false, "number": 4, "links": []},
+  {"title": "Example 7", "url": "https://example.com/7", "isGroup": false, "number": 5, "links": []}
+]
 }</code></pre>
       </details></div>
         <h2 class="title is-4">Example Templates</h2>
@@ -132,40 +108,35 @@ <h2 class="title is-4">Example Templates</h2>
     <p class="card-header-title">Groups as Ordered List</p>
   </header>
   <div class="card-content">
-    <p>Use <code>{{ol}}</code> for the current 1-based index of nesting.</p>
+    <p>Use <code>{{number}}</code> for the current 1-based index</p>
     <div class="columns">
       <div class="column is-half">
         <p>Template:</p>
-<pre class="is-size-7 is-overflow-scroll-x"><code>{{#groups}}
-{{#is_ungrouped}}
+<pre class="is-size-7 is-overflow-scroll-x"><code>{{#grouped}}
+{{#isGroup}}
 {{#links}}
-{{ol}}. [{{title}}]({{url}})
+    {{number}}. [{{title}}]({{url}})
 {{/links}}
-{{/is_ungrouped}}
-{{^is_ungrouped}}
-{{ol}}. {{name}}
-{{#links}}
-   {{ol}}. [{{title}}]({{url}})
-{{/links}}
-{{/is_ungrouped}}
-{{/groups}}</code></pre>
+{{/isGroup}}
+{{^isGroup}}
+{{number}}. [{{title}}]({{url}})
+{{/isGroup}}
+{{/grouped}}</code></pre>
       </div>
       <div class="column is-half">
         <p>Output:</p>
 <pre class="is-size-7 is-overflow-scroll-x"><code>1. [Example 1](https://example.com/1)
 2. [Example 2](https://example.com/2)
-3. My Group
-   1. [Example 3](https://example.com/3)
-   2. [Example 4](https://example.com/4)
-4. [Example 5](https://example.com/5)
-5. [Example 6](https://example.com/6)
+    1. [Example 3](https://example.com/3)
+    2. [Example 4](https://example.com/4)
+    3. [Example 5](https://example.com/5)
+4. [Example 6](https://example.com/6)
+5. [Example 7](https://example.com/7)
 </code></pre>
       </div>
     </div>
   </div>
 </div>
-
-
       </div>
     </div>
   </div>
diff --git a/src/ui/custom-format.js b/src/ui/custom-format.js
index e9ea2ff..c494666 100644
--- a/src/ui/custom-format.js
+++ b/src/ui/custom-format.js
@@ -113,50 +113,38 @@ class UI {
         { title: 'Example 4', url: 'https://example.com/4', number: 4 },
         { title: 'Example 5', url: 'https://example.com/5', number: 5 },
         { title: 'Example 6', url: 'https://example.com/6', number: 6 },
+        { title: 'Example 7', url: 'https://example.com/7', number: 7 },
       ],
-      groups: [
+      grouped: [
         {
-          name: '',
-          is_ungrouped: true,
-          number: 1,
-          ol: 1,
-          links: [
-            {
-              title: 'Example 1', url: 'https://example.com/1', number: 1, ol: 1,
-            },
-            {
-              title: 'Example 2', url: 'https://example.com/2', number: 2, ol: 2,
-            },
-          ],
+          title: 'Example 1', url: 'https://example.com/1', isGroup: false, number: 1, links: [],
         },
         {
-          name: 'My Group',
-          is_ungrouped: false,
-          number: 2,
-          ol: 3,
-          links: [
-            {
-              title: 'Example 3', url: 'https://example.com/3', number: 1, ol: 1,
-            },
-            {
-              title: 'Example 4', url: 'https://example.com/4', number: 2, ol: 2,
-            },
-          ],
+          title: 'Example 2', url: 'https://example.com/2', isGroup: false, number: 2, links: [],
         },
         {
-          name: '',
-          is_ungrouped: true,
+          title: 'Group 1',
+          url: null,
+          isGroup: true,
           number: 3,
-          ol: 4,
           links: [
             {
-              title: 'Example 5', url: 'https://example.com/5', number: 1, ol: 4,
+              title: 'Example 3', url: 'https://example.com/3', isGroup: false, number: 1, links: [],
+            },
+            {
+              title: 'Example 4', url: 'https://example.com/4', isGroup: false, number: 2, links: [],
             },
             {
-              title: 'Example 6', url: 'https://example.com/6', number: 2, ol: 5,
+              title: 'Example 5', url: 'https://example.com/5', isGroup: false, number: 3, links: [],
             },
           ],
         },
+        {
+          title: 'Example 6', url: 'https://example.com/6', isGroup: false, number: 4, links: [],
+        },
+        {
+          title: 'Example 7', url: 'https://example.com/7', isGroup: false, number: 5, links: [],
+        },
       ],
     };
   }
diff --git a/test/custom-format.test.js b/test/custom-format.test.js
index 7902101..eb618a4 100644
--- a/test/custom-format.test.js
+++ b/test/custom-format.test.js
@@ -22,23 +22,15 @@ describe('custom-format.js', () => {
           { title: 'Example 2', url: 'https://example.com/2', number: 2 },
           { title: 'Example 3', url: 'https://example.com/3', number: 3 },
         ],
-        groups: [
+        grouped: [
           {
-            name: '',
-            is_ungrouped: true,
-            number: 1,
-            ol: 1,
-            links: [
-              {
-                title: 'Example 1', url: 'https://example.com/1', number: 1, ol: 1,
-              },
-              {
-                title: 'Example 2', url: 'https://example.com/2', number: 2, ol: 2,
-              },
-              {
-                title: 'Example 3', url: 'https://example.com/3', number: 3, ol: 3,
-              },
-            ],
+            title: 'Example 1', url: 'https://example.com/1', number: 1, isGroup: false, links: [],
+          },
+          {
+            title: 'Example 2', url: 'https://example.com/2', number: 2, isGroup: false, links: [],
+          },
+          {
+            title: 'Example 3', url: 'https://example.com/3', number: 3, isGroup: false, links: [],
           },
         ],
       });
@@ -71,49 +63,33 @@ describe('custom-format.js', () => {
           { title: 'Example 5', url: 'https://example.com/5', number: 5 },
           { title: 'Example 6', url: 'https://example.com/6', number: 6 },
         ],
-        groups: [
+        grouped: [
           {
-            name: '',
-            is_ungrouped: true,
-            number: 1,
-            ol: 1,
-            links: [
-              {
-                title: 'Example 1', url: 'https://example.com/1', number: 1, ol: 1,
-              },
-              {
-                title: 'Example 2', url: 'https://example.com/2', number: 2, ol: 2,
-              },
-            ],
+            title: 'Example 1', url: 'https://example.com/1', number: 1, isGroup: false, links: [],
           },
           {
-            name: 'My Group',
-            is_ungrouped: false,
-            number: 2,
-            ol: 3,
-            links: [
-              {
-                title: 'Example 3', url: 'https://example.com/3', number: 1, ol: 1,
-              },
-              {
-                title: 'Example 4', url: 'https://example.com/4', number: 2, ol: 2,
-              },
-            ],
+            title: 'Example 2', url: 'https://example.com/2', number: 2, isGroup: false, links: [],
           },
           {
-            name: '',
-            is_ungrouped: true,
+            isGroup: true,
+            title: 'My Group',
+            url: null,
             number: 3,
-            ol: 4,
             links: [
               {
-                title: 'Example 5', url: 'https://example.com/5', number: 1, ol: 4,
+                title: 'Example 3', url: 'https://example.com/3', number: 1, isGroup: false, links: [],
               },
               {
-                title: 'Example 6', url: 'https://example.com/6', number: 2, ol: 5,
+                title: 'Example 4', url: 'https://example.com/4', number: 2, isGroup: false, links: [],
               },
             ],
           },
+          {
+            title: 'Example 5', url: 'https://example.com/5', number: 4, isGroup: false, links: [],
+          },
+          {
+            title: 'Example 6', url: 'https://example.com/6', number: 5, isGroup: false, links: [],
+          },
         ],
       });
     });
@@ -139,32 +115,24 @@ describe('custom-format.js', () => {
           { title: 'Example 3', url: 'https://example.com/3', number: 3 },
           { title: 'Example 4', url: 'https://example.com/4', number: 4 },
         ],
-        groups: [
+        grouped: [
           {
-            name: '',
-            is_ungrouped: true,
-            number: 1,
-            ol: 1,
-            links: [
-              {
-                title: 'Example 1', url: 'https://example.com/1', number: 1, ol: 1,
-              },
-              {
-                title: 'Example 2', url: 'https://example.com/2', number: 2, ol: 2,
-              },
-            ],
+            title: 'Example 1', url: 'https://example.com/1', number: 1, isGroup: false, links: [],
+          },
+          {
+            title: 'Example 2', url: 'https://example.com/2', number: 2, isGroup: false, links: [],
           },
           {
-            name: 'My Group',
-            is_ungrouped: false,
-            number: 2,
-            ol: 3,
+            isGroup: true,
+            title: 'My Group',
+            url: null,
+            number: 3,
             links: [
               {
-                title: 'Example 3', url: 'https://example.com/3', number: 1, ol: 1,
+                title: 'Example 3', url: 'https://example.com/3', number: 1, isGroup: false, links: [],
               },
               {
-                title: 'Example 4', url: 'https://example.com/4', number: 2, ol: 2,
+                title: 'Example 4', url: 'https://example.com/4', number: 2, isGroup: false, links: [],
               },
             ],
           },