feat: Add toggle to swap the order of like/dislike buttons (#4221)

src/config/defaults.ts

@@ -29,6 +29,7 @@ export interface DefaultConfig {
     autoResetAppCache: boolean;
     resumeOnStart: boolean;
     likeButtons: string;
+    swapLikeButtonsOrder: boolean;
     proxy: string;
     startingPage: string;
     backgroundMaterial?: 'none' | 'mica' | 'acrylic' | 'tabbed';
@@ -66,6 +67,7 @@ export const defaultConfig: DefaultConfig = {
     autoResetAppCache: false,
     resumeOnStart: true,
     likeButtons: '',
+    swapLikeButtonsOrder: false,
     proxy: '',
     startingPage: '',
     overrideUserAgent: false,

src/i18n/resources/en.json

@@ -154,6 +154,7 @@
                 "default": "Default",
                 "force-show": "Force show",
                 "hide": "Hide",
+                "swap": "Swap like buttons order",
                 "label": "Like buttons"
               },
               "custom-window-title": {

src/menu.ts

@@ -285,6 +285,19 @@ export const mainMenuTemplate = async (
                     config.set('options.likeButtons', 'hide');
                   },
                 },
+                {
+                  label: t(
+                    'main.menu.options.submenu.visual-tweaks.submenu.like-buttons.swap',
+                  ),
+                  type: 'checkbox',
+                  checked: config.get('options.swapLikeButtonsOrder'),
+                  click(item: MenuItem) {
+                    config.setMenuOption(
+                      'options.swapLikeButtonsOrder',
+                      item.checked,
+                    );
+                  },
+                },
               ],
             },
             {

src/renderer.ts

@@ -406,6 +406,18 @@ async function onApiLoaded() {
 
     document.head.appendChild(style);
   }
+
+  // Swap like button order
+  if (window.mainConfig.get('options.swapLikeButtonsOrder')) {
+    const style = document.createElement('style');
+    style.textContent = `
+      #like-button-renderer {
+        display: inline-flex;
+        flex-direction: row-reverse;
+      }`;
+
+    document.head.appendChild(style);
+  }
 }
 
 /**