ntp: favorites drag and drop

special-pages/package.json

@@ -34,6 +34,8 @@
     "preact": "^10.24.3",
     "classnames": "^2.5.1",
     "@formkit/auto-animate": "^0.8.2",
-    "@rive-app/canvas-single": "^2.23.3"
+    "@rive-app/canvas-single": "^2.23.3",
+    "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3"
   }
 }

special-pages/pages/new-tab/app/components/Examples.jsx

@@ -3,6 +3,9 @@ import { PrivacyStatsMockProvider } from '../privacy-stats/mocks/PrivacyStatsMoc
 import { Body, Heading, PrivacyStatsConsumer } from '../privacy-stats/PrivacyStats.js'
 import { RemoteMessagingFramework } from '../remote-messaging-framework/RemoteMessagingFramework.js'
 import { stats } from '../privacy-stats/mocks/stats.js'
+import { MockFavoritesProvider } from "../favorites/mocks/MockFavoritesProvider.js";
+import { favorites } from "../favorites/mocks/favorites.data.js";
+import { FavoritesConsumer } from "../favorites/Favorites.js";
 import { noop } from '../utils.js'
 import { VisibilityMenu } from '../customizer/VisibilityMenu.js'
 import { CustomizerButton } from '../customizer/Customizer.js'
@@ -83,6 +86,57 @@ export const mainExamples = {
                 dismiss={() => {}}
             />
         )
+    },
+    'favorites.many': {
+        factory: () => (
+            <MockFavoritesProvider data={favorites.many}><FavoritesConsumer /></MockFavoritesProvider>
+        )
+    },
+    'favorites.few.7': {
+        factory: () => (
+            <MockFavoritesProvider data={{favorites: favorites.many.favorites.slice(0, 7)}}><FavoritesConsumer /></MockFavoritesProvider>
+        )
+    },
+    'favorites.few.7.no-animation': {
+        factory: () => (
+            <MockFavoritesProvider
+                data={{favorites: favorites.many.favorites.slice(0, 7)}}
+                config={{expansion: "expanded", animation: { kind: "none" }}}
+            ><FavoritesConsumer /></MockFavoritesProvider>
+        )
+    },
+    'favorites.few.6': {
+        factory: () => (
+            <MockFavoritesProvider data={{favorites: favorites.many.favorites.slice(0, 6)}}><FavoritesConsumer /></MockFavoritesProvider>
+        )
+    },
+    'favorites.few.12': {
+        factory: () => (
+            <MockFavoritesProvider data={{favorites: favorites.many.favorites.slice(0, 12)}}><FavoritesConsumer /></MockFavoritesProvider>
+        )
+    },
+    'favorites.multi': {
+        factory: () => (
+            <div>
+                <MockFavoritesProvider data={favorites.many}><FavoritesConsumer /></MockFavoritesProvider>
+                <br/>
+                <MockFavoritesProvider data={favorites.two}><FavoritesConsumer /></MockFavoritesProvider>
+                <br/>
+                <MockFavoritesProvider data={favorites.single}><FavoritesConsumer /></MockFavoritesProvider>
+                <br/>
+                <MockFavoritesProvider data={favorites.none}><FavoritesConsumer /></MockFavoritesProvider>
+            </div>
+        )
+    },
+    'favorites.single': {
+        factory: () => (
+            <MockFavoritesProvider data={favorites.single}><FavoritesConsumer /></MockFavoritesProvider>
+        )
+    },
+    'favorites.none': {
+        factory: () => (
+            <MockFavoritesProvider data={favorites.none}><FavoritesConsumer /></MockFavoritesProvider>
+        )
     }
 }
 

special-pages/pages/new-tab/app/docs.js

@@ -7,3 +7,4 @@
  *
  * @module NewTab Services
  */
+export * from './favorites/favorites.service.js'

special-pages/pages/new-tab/app/favorites/Color.js

@@ -0,0 +1,33 @@
+// Constant array of colors for empty favicon backgrounds
+const EMPTY_FAVICON_TEXT_BACKGROUND_COLOR_BRUSHES = [
+    '#94B3AF', '#727998', '#645468', '#4D5F7F',
+    '#855DB6', '#5E5ADB', '#678FFF', '#6BB4EF',
+    '#4A9BAE', '#66C4C6', '#55D388', '#99DB7A',
+    '#ECCC7B', '#E7A538', '#DD6B4C', '#D65D62'
+]
+
+// DJB hashing algorithm to get a consistent color index from URL host
+function getDJBHash (str) {
+    let hash = 5381
+    for (let i = 0; i < str.length; i++) {
+        hash = (hash << 5) + hash + str.charCodeAt(i)
+    }
+    return hash
+}
+
+// Extracts the host part of the URL
+function getHost (url) {
+    try {
+        const urlObj = new URL(url)
+        return urlObj.hostname.replace(/^www\./, '')
+    } catch (e) {
+        return '?'
+    }
+}
+
+// Main function: Converts a URL to a color from the predefined array
+export function urlToColor (url) {
+    const host = getHost(url)
+    const index = Math.abs(getDJBHash(host) % EMPTY_FAVICON_TEXT_BACKGROUND_COLOR_BRUSHES.length)
+    return EMPTY_FAVICON_TEXT_BACKGROUND_COLOR_BRUSHES[index]
+}