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/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/favorites_setOrder.notify.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/types/favorites-config.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "FavoritesConfig",
+  "type": "object",
+  "required": ["expansion"],
+  "properties": {
+    "expansion": {"$ref":  "./expansion.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.19.3",
-    "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",
+    "classnames": "^2.3.2",
+    "preact": "^10.19.3"
   }
 }

packages/special-pages/pages/new-tab/app/components/App.module.css

@@ -8,6 +8,8 @@ body {
     font-size: var(--body-font-size);
     font-weight: var(--body-font-weight);
     line-height: var(--body-line-height);
+    padding-left: var(--sp-6);
+    padding-right: var(--sp-6);
 }
 
 .layout {

packages/special-pages/pages/new-tab/app/components/Chevron.js

@@ -0,0 +1,11 @@
+import { h } from 'preact'
+
+export function Chevron () {
+    return (
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13.5 10L8 4.5L2.5 10" stroke="currentColor" stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"/>
+        </svg>
+    )
+}