[IMP] test_themes: (re)add preview to website (themes) switcher

Commit [1] moved the website switcher from the frontend to the backend
and in doing so re-factored it into an OWL component.

Initially, this refactoring broke the theme preview from the previous
widget. This commit re-introduces those previews.

[1]: https://github.com/odoo/design-themes/commit/163a8b6fae0d6709d61af81550d1ad77dfe311c9

task-2687506

closes odoo/design-themes#573

Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Co-authored-by: Younn Olivier <yol@odoo.com>
Co-authored-by: Romain Derie <rde@odoo.com>

test_themes/static/src/js/navbar.js

@@ -1,33 +0,0 @@
-// TODO: This will be reimplemented following the frontend UI being moved to
-// the backend
-
-// odoo.define('test_themes.website_selector', function (require) {
-// 'use strict';
-
-// const websiteNavbarData = require('website.navbar');
-// const { registry } = require("@web/core/registry");
-
-// const TestThemesWebsiteSelector = websiteNavbarData.WebsiteNavbarActionWidget.extend({
-//     /**
-//      * @override
-//      */
-//     start: function () {
-//         this.$('.js_multi_website_switch[data-toggle]').tooltip({
-//             html: true,
-//             placement: 'left',
-//             delay: {show: 100, hide: 0},
-//         });
-//         return this._super(...arguments);
-//     },
-
-// });
-
-// registry.category("website_navbar_widgets").add("TestThemesWebsiteSelector", {
-//     Widget: TestThemesWebsiteSelector,
-//     selector: '#website_switcher',
-// });
-
-// return {
-//     TestThemesWebsiteSelector: TestThemesWebsiteSelector,
-// };
-// });

test_themes/static/src/js/systray_items/website_switcher.js

@@ -0,0 +1,29 @@
+/** @odoo-module **/
+
+import { patch } from 'web.utils';
+import { useService } from '@web/core/utils/hooks';
+import { WebsiteSwitcherSystray } from '@website/systray_items/website_switcher';
+
+const { onMounted, useState } = owl;
+
+patch(WebsiteSwitcherSystray.prototype, 'test_themes_website_switcher_systray', {
+    setup() {
+        this._super();
+
+        this.orm = useService('orm');
+        this.tooltips = useState({});
+
+        onMounted(async () => {
+            const themesWebsites = await this.orm.call('website', 'get_test_themes_websites_theme_preview');
+            for (const themeId in themesWebsites) {
+                this.tooltips[themeId] = {
+                    tooltipTemplate: 'test_themes.ThemeTooltip',
+                    tooltipPosition: 'left',
+                    tooltipDelay: 100,
+                    tooltipInfo: JSON.stringify({url: themesWebsites[themeId]}),
+                };
+            }
+        });
+    },
+    template: 'test_themes.WebsiteSwitcherSystray',
+});

test_themes/static/src/js/systray_items/website_switcher.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+<t t-name="test_themes.ThemeTooltip" owl="1">
+    <img t-att-src="url" width="150"/>
+</t>
+
+<t t-name="test_themes.WebsiteSwitcherSystray" t-inherit="website.WebsiteSwitcherSystray" t-inherit-mode="extension">
+    <xpath expr="//DropdownItem" position="attributes">
+        <attribute name="dataset">this.tooltips[element.id]</attribute>
+    </xpath>
+</t>
+</templates>