favorites drag and drop

package.json

@@ -54,6 +54,7 @@
     "packages/messaging"
   ],
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "immutable-json-patch": "^5.1.3",
     "parse-address": "^1.1.2",
     "seedrandom": "^3.0.5",
@@ -67,8 +68,8 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.7",
     "@types/chrome": "^0.0.248",
-    "@types/node": "^20.16.10",
     "@types/jasmine": "^5.1.4",
+    "@types/node": "^20.16.10",
     "@typescript-eslint/eslint-plugin": "^6.9.1",
     "config-builder": "github:duckduckgo/privacy-configuration#main",
     "esbuild": "^0.19.5",

packages/special-pages/messages/new-tab/examples/stats.js

@@ -14,7 +14,8 @@ const privacyStatsData = {
  * @type {import("../../../types/new-tab").StatsConfig}
  */
 const minimumConfig = {
-    expansion: "expanded"
+    expansion: "expanded",
+    animation: { kind: "none" }
 }
 
 /**

packages/special-pages/messages/new-tab/favorites_action.notify.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "allOf": [
+    {
+      "$ref": "types/favorites-data.json"
+    },
+    {
+      "$ref": "types/favorites-action.json"
+    }
+  ]
+}

packages/special-pages/messages/new-tab/favorites_getConfig.request.json

@@ -0,0 +1,3 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/special-pages/messages/new-tab/favorites_getConfig.response.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "allOf": [
+    {
+      "$ref": "./types/favorites-config.json"
+    }
+  ]
+}

packages/special-pages/messages/new-tab/favorites_getData.request.json

@@ -0,0 +1,3 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/special-pages/messages/new-tab/favorites_getData.response.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "allOf": [
+    {
+      "$ref": "types/favorites-data.json"
+    }
+  ]
+}

packages/special-pages/messages/new-tab/favorites_onConfigUpdate.subscribe.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "allOf": [
+    {
+      "$ref": "./types/favorites-config.json"
+    }
+  ]
+}

packages/special-pages/messages/new-tab/favorites_onDataUpdate.subscribe.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "allOf": [
+    {
+      "$ref": "types/favorites-data.json"
+    }
+  ]
+}

packages/special-pages/messages/new-tab/favorites_setConfig.notify.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "allOf": [
+    {
+      "$ref": "./types/favorites-config.json"
+    }
+  ]
+}

packages/special-pages/messages/new-tab/types/favorites-action.json

@@ -0,0 +1,51 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "required": [
+    "action"
+  ],
+  "properties": {
+    "action": {
+      "oneOf": [
+        {
+          "title": "Favorites Move Action",
+          "type": "object",
+          "required": [
+            "kind",
+            "id",
+            "targetIndex"
+          ],
+          "properties": {
+            "kind": {
+              "type": "string",
+              "const": "move"
+            },
+            "id": {
+              "description": "Entity ID",
+              "type": "string"
+            },
+            "targetIndex": {
+              "description": "zero-indexed target",
+              "type": "number"
+            }
+          }
+        },
+        {
+          "title": "Favorites Context Menu Action",
+          "type": "object",
+          "required": ["id", "kind"],
+          "properties": {
+            "kind": {
+              "type": "string",
+              "const": "contextMenu"
+            },
+            "id": {
+              "description": "Entity ID",
+              "type": "string"
+            }
+          }
+        }
+      ]
+    }
+  }
+}

packages/special-pages/messages/new-tab/types/favorites-config.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "FavoritesConfig",
+  "type": "object",
+  "required": ["expansion"],
+  "properties": {
+    "expansion": { "$ref":  "./expansion.json" },
+    "animation": { "$ref":  "./animation.json" }
+  }
+}

packages/special-pages/messages/new-tab/types/favorites-data.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "Favorites Data",
+  "type": "object",
+  "required": ["favorites"],
+  "properties": {
+    "favorites": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "title": "Favorite",
+        "required": ["data", "id", "title", "favicon"],
+        "properties": {
+          "data": {
+            "type": "string"
+          },
+          "id": {
+            "type": "string"
+          },
+          "title": {
+            "type": "string"
+          },
+          "favicon": {
+            "type": "string"
+          }
+        }
+      }
+    }
+  }
+}

packages/special-pages/package.json

@@ -32,9 +32,11 @@
     "web-resource-inliner": "^6.0.1"
   },
   "dependencies": {
-    "preact": "^10.24.2",
-    "classnames": "^2.3.2",
+    "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@formkit/auto-animate": "^0.8.0",
-    "@rive-app/canvas-single": "^2.21.5"
+    "@rive-app/canvas-single": "^2.21.5",
+    "preact": "^10.24.2",
+    "classnames": "^2.3.2"
   }
 }

packages/special-pages/pages/new-tab/app/components/Components.jsx

@@ -67,16 +67,17 @@ function Stage({ entries }) {
                 return (
                     <Fragment>
                         <div class={styles.itemInfo}>
-                            <code>{id}</code>{" "}
-                            <a href={without.toString()} hidden={current.length === 0}>Remove</a>
-                            <div>
-                                <a href={selected.toString()}
-                                   class={styles.itemLink}
-                                   title="show this component only">select</a>{" "}
+                            <div class={styles.itemLinks}>
+                                <code>{id}</code>
                                 <a href={next.toString()}
                                    target="_blank"
+                                   title="open in new tab">Open 🔗</a>{" "}
+                                <a href={without.toString()} hidden={current.length === 0}>Remove</a>
+                            </div>
+                            <div class={styles.itemLinks}>
+                                <a href={selected.toString()}
                                    class={styles.itemLink}
-                                   title="isolate this component">isolate</a>{" "}
+                                   title="show this component only">select</a>{" "}
                                 <a href={e2e.toString()}
                                    target="_blank"
                                    class={styles.itemLink}