From 6bf3b8147d5d2fdc1d6ccf32b9e7c06dfde52ba7 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Wed, 19 Nov 2025 14:47:17 +0200
Subject: [PATCH] refactor(ActionsGroup): simplify

---
 src/components/ActionsGroup/ActionsGroup.tsx  | 26 ++++++++++++-------
 src/components/ActionsGroup/index.ts          |  4 +--
 src/components/MetaPreview/MetaPreview.js     |  2 +-
 .../MetaPreview/Ratings/Ratings.tsx           |  9 ++++---
 src/components/index.ts                       |  2 ++
 5 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/components/ActionsGroup/ActionsGroup.tsx b/src/components/ActionsGroup/ActionsGroup.tsx
index 244786c2f..8c7393fcc 100644
--- a/src/components/ActionsGroup/ActionsGroup.tsx
+++ b/src/components/ActionsGroup/ActionsGroup.tsx
@@ -3,8 +3,8 @@
 import classNames from 'classnames';
 import React from 'react';
 import Icon from '@stremio/stremio-icons/react';
-import styles from './ActionsGroup.less';
 import { Tooltip } from 'stremio/common/Tooltips';
+import styles from './ActionsGroup.less';
 
 type Item = {
     icon: string;
@@ -23,15 +23,21 @@ type Props = {
 const ActionsGroup = ({ items, className }: Props) => {
     return (
         <div className={classNames(styles['group-container'], className)}>
-            {items.map((item, index) => (
-                <div key={index}
-                    className={classNames(styles['icon-container'], item.className, { [styles['disabled']]: item.disabled })}
-                    onClick={item.onClick}
-                >
-                    {item.label && <Tooltip label={item.label} position={'top'} />}
-                    <Icon name={item.icon} className={styles['icon']} />
-                </div>
-            ))}
+            {
+                items.map((item, index) => (
+                    <div
+                        key={index}
+                        className={classNames(styles['icon-container'], item.className, { [styles['disabled']]: item.disabled })}
+                        onClick={item.onClick}
+                    >
+                        {
+                            item.label &&
+                                <Tooltip label={item.label} position={'top'} />
+                        }
+                        <Icon name={item.icon} className={styles['icon']} />
+                    </div>
+                ))
+            }
         </div>
     );
 };
diff --git a/src/components/ActionsGroup/index.ts b/src/components/ActionsGroup/index.ts
index 2e83d4f64..4dea1b83a 100644
--- a/src/components/ActionsGroup/index.ts
+++ b/src/components/ActionsGroup/index.ts
@@ -1,6 +1,6 @@
-// Copyright (C) 2017-2023 Smart code 203358507
+// Copyright (C) 2017-2025 Smart code 203358507
 
 import ActionsGroup from './ActionsGroup';
 
-export { ActionsGroup };
+export default ActionsGroup;
 
diff --git a/src/components/MetaPreview/MetaPreview.js b/src/components/MetaPreview/MetaPreview.js
index 60f4e0681..5fa7d8ff0 100644
--- a/src/components/MetaPreview/MetaPreview.js
+++ b/src/components/MetaPreview/MetaPreview.js
@@ -8,7 +8,7 @@ const { useTranslation } = require('react-i18next');
 const { default: Icon } = require('@stremio/stremio-icons/react');
 const { default: Button } = require('stremio/components/Button');
 const { default: Image } = require('stremio/components/Image');
-const { ActionsGroup } = require('stremio/components/ActionsGroup');
+const { default: ActionsGroup } = require('stremio/components/ActionsGroup');
 const ModalDialog = require('stremio/components/ModalDialog');
 const SharePrompt = require('stremio/components/SharePrompt');
 const CONSTANTS = require('stremio/common/CONSTANTS');
diff --git a/src/components/MetaPreview/Ratings/Ratings.tsx b/src/components/MetaPreview/Ratings/Ratings.tsx
index 28de12b26..329ee4945 100644
--- a/src/components/MetaPreview/Ratings/Ratings.tsx
+++ b/src/components/MetaPreview/Ratings/Ratings.tsx
@@ -2,7 +2,7 @@
 
 import React, { useMemo } from 'react';
 import useRating from './useRating';
-import { ActionsGroup } from 'stremio/components/ActionsGroup';
+import { ActionsGroup } from 'stremio/components';
 
 type Props = {
     metaId?: string;
@@ -13,6 +13,7 @@ type Props = {
 const Ratings = ({ ratingInfo, className }: Props) => {
     const { onLiked, onLoved, liked, loved } = useRating(ratingInfo);
     const disabled = useMemo(() => ratingInfo?.type !== 'Ready', [ratingInfo]);
+
     const items = useMemo(() => [
         {
             icon: liked ? 'thumbs-up' : 'thumbs-up-outline',
@@ -24,9 +25,11 @@ const Ratings = ({ ratingInfo, className }: Props) => {
             disabled,
             onClick: onLoved,
         },
-    ], [liked, loved, disabled, onLiked, onLoved]);
+    ], [liked, loved, disabled]);
 
-    return <ActionsGroup items={items} className={className} />;
+    return (
+        <ActionsGroup items={items} className={className} />
+    );
 };
 
 export default Ratings;
diff --git a/src/components/index.ts b/src/components/index.ts
index a47c2c709..75400b0dd 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -30,6 +30,7 @@ import TextInput from './TextInput';
 import Toggle from './Toggle';
 import Transition from './Transition';
 import Video from './Video';
+import ActionsGroup from './ActionsGroup';
 
 export {
     AddonDetailsModal,
@@ -65,4 +66,5 @@ export {
     Toggle,
     Transition,
     Video,
+    ActionsGroup
 };