1 files changed, 79 insertions, 0 deletions

diff --git a/src/components/services/tabs/TabBarSortableList.tsx b/src/components/services/tabs/TabBarSortableList.tsx
new file mode 100644
index 000000000..e04f6268d
--- /dev/null
+++ b/src/components/services/tabs/TabBarSortableList.tsx
@@ -0,0 +1,79 @@
+import { Component } from 'react';
+import { observer } from 'mobx-react';
+import { SortableContainer } from 'react-sortable-hoc';
+
+import TabItem from './TabItem';
+import Service from '../../../models/Service';
+
+interface IProps {
+  showMessageBadgeWhenMutedSetting: boolean;
+  showServiceNameSetting: boolean;
+  showMessageBadgesEvenWhenMuted: boolean;
+  services: Service[];
+
+  setActive: (args: { serviceId: string }) => void;
+  openSettings: (args: { path: string }) => void;
+  reload: (args: { serviceId: string }) => void;
+  toggleNotifications: (args: { serviceId: string }) => void;
+  toggleAudio: (args: { serviceId: string }) => void;
+  toggleDarkMode: (args: { serviceId: string }) => void;
+  deleteService: (args: { serviceId: string }) => void;
+  disableService: (args: { serviceId: string }) => void;
+  enableService: (args: { serviceId: string }) => void;
+  hibernateService: (args: { serviceId: string }) => void;
+  wakeUpService: (args: { serviceId: string }) => void;
+}
+
+@observer
+class TabBarSortableList extends Component<IProps> {
+  render() {
+    const {
+      services,
+      setActive,
+      reload,
+      toggleNotifications,
+      toggleAudio,
+      toggleDarkMode,
+      deleteService,
+      disableService,
+      enableService,
+      hibernateService,
+      wakeUpService,
+      openSettings,
+      showMessageBadgeWhenMutedSetting,
+      showServiceNameSetting,
+      showMessageBadgesEvenWhenMuted,
+    } = this.props;
+
+    return (
+      <ul className="tabs">
+        {services.map((service, index) => (
+          <TabItem
+            key={service.id}
+            clickHandler={() => setActive({ serviceId: service.id })}
+            service={service}
+            index={index}
+            shortcutIndex={index + 1}
+            reload={() => reload({ serviceId: service.id })}
+            toggleNotifications={() =>
+              toggleNotifications({ serviceId: service.id })
+            }
+            toggleAudio={() => toggleAudio({ serviceId: service.id })}
+            toggleDarkMode={() => toggleDarkMode({ serviceId: service.id })}
+            deleteService={() => deleteService({ serviceId: service.id })}
+            disableService={() => disableService({ serviceId: service.id })}
+            enableService={() => enableService({ serviceId: service.id })}
+            hibernateService={() => hibernateService({ serviceId: service.id })}
+            wakeUpService={() => wakeUpService({ serviceId: service.id })}
+            openSettings={openSettings}
+            showMessageBadgeWhenMutedSetting={showMessageBadgeWhenMutedSetting}
+            showMessageBadgesEvenWhenMuted={showMessageBadgesEvenWhenMuted}
+            showServiceNameSetting={showServiceNameSetting}
+          />
+        ))}
+      </ul>
+    );
+  }
+}
+
+export default SortableContainer(TabBarSortableList);