favorites drag and drop

packages/special-pages/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "special-pages",
+  "private": "true",
+  "version": "1.0.0",
+  "description": "A collection of HTML/CSS/JS pages that can be loaded into privileged environments, like about: pages",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "build": "node index.mjs",
+    "build.dev": "node index.mjs --env development",
+    "test": "npm run test.unit && playwright test --grep-invert '@screenshots'",
+    "test.screenshots": "npm run test.unit && playwright test --grep '@screenshots'",
+    "test.windows": "npm run test -- --project windows",
+    "test.macos": "npm run test -- --project macos",
+    "test.ios": "npm run test -- --project ios",
+    "test.android": "npm run test -- --project android",
+    "test.headed": "npm run test -- --headed",
+    "test.ui": "npm run test -- --ui",
+    "test.unit": "node --test unit-test/* pages/duckplayer/unit-tests/* ",
+    "pretest": "npm run build.dev",
+    "pretest.headed": "npm run build.dev",
+    "test-int-x": "npm run test",
+    "test-int": "npm run test",
+    "serve": "http-server -c-1 --port 3210 ../../",
+    "watch": "chokidar pages shared --initial -c 'npm run build.dev'"
+  },
+  "license": "ISC",
+  "devDependencies": {
+    "@duckduckgo/messaging": "*",
+    "@playwright/test": "^1.40.1",
+    "http-server": "^14.1.1",
+    "web-resource-inliner": "^6.0.1"
+  },
+  "dependencies": {
+    "@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",
+    "preact": "^10.24.2",
+    "classnames": "^2.3.2"
+  }
+}

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" }
 }
 
 /**

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

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

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"
+    }
+  ]
+}

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

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

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"
+    }
+  ]
+}

special-pages/messages/new-tab/favorites_move.notify.json

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

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"
+    }
+  ]
+}

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"
+    }
+  ]
+}

special-pages/messages/new-tab/favorites_openContextMenu.notify.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "Favorites Open Context Menu Action",
+  "type": "object",
+  "required": [
+    "id"
+  ],
+  "properties": {
+    "id": {
+      "description": "Entity ID",
+      "type": "string"
+    }
+  }
+}

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"
+    }
+  ]
+}

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" }
+  }
+}

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"
+          }
+        }
+      }
+    }
+  }
+}

special-pages/package.json

@@ -19,7 +19,7 @@
     "test.android": "npm run test-int -- --project android",
     "test.headed": "npm run test-int -- --headed",
     "test.ui": "npm run test-int -- --ui",
-    "serve": "http-server -c-1 --port 3210 ../../",
+    "serve": "http-server -c-1 --port 3210 ../build/integration/pages",
     "watch": "chokidar pages shared --initial -c 'npm run build.dev'"
   },
   "license": "ISC",
@@ -34,6 +34,8 @@
     "preact": "^10.24.3",
     "classnames": "^2.3.2",
     "@formkit/auto-animate": "^0.8.0",
-    "@rive-app/canvas-single": "^2.21.5"
+    "@rive-app/canvas-single": "^2.21.5",
+    "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3"
   }
 }

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}

special-pages/pages/new-tab/app/components/Components.module.css

@@ -25,6 +25,12 @@ body[data-display="components"] {
 }
 
 .itemInfo {
+    display: flex;
+    flex-direction: column;
+    gap: .5em;
+}
+
+.itemLinks {
     display: flex;
     align-items: center;
     gap: 1em;