WIP

src/components/Sidebar/Channels/Channel.tsx

@@ -8,7 +8,7 @@ export interface ChannelProps {
   channel: Protobuf.Channel;
 }
 
-const Channel = (props: ChannelProps): JSX.Element => {
+export const Channel = (props: ChannelProps): JSX.Element => {
   return (
     <Disclosure>
       {({ open }) => (
@@ -112,5 +112,3 @@ const Channel = (props: ChannelProps): JSX.Element => {
     </Disclosure>
   );
 };
-
-export default Channel;

src/components/Sidebar/Channels/ChannelList.tsx

@@ -5,9 +5,9 @@ import { useObservableSuspense } from 'observable-hooks';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 import { channelResource } from '../../../streams';
-import Channel from './Channel';
+import { Channel } from './Channel';
 
-const ChannelList = (): JSX.Element => {
+export const ChannelList = (): JSX.Element => {
   const channelSource = useObservableSuspense(channelResource);
 
   const [channels, setChannels] = React.useState<Protobuf.Channel[]>([]);
@@ -39,5 +39,3 @@ const ChannelList = (): JSX.Element => {
     </>
   );
 };
-
-export default ChannelList;

src/components/Sidebar/Channels/Index.tsx

@@ -1,47 +1,20 @@
 import React from 'react';
 
-import { Disclosure } from '@headlessui/react';
-import {
-  ChevronDownIcon,
-  ChevronRightIcon,
-  HashtagIcon,
-} from '@heroicons/react/outline';
+import { useTranslation } from 'react-i18next';
 
-import { TranslationsContext } from '../../../translations/TranslationsContext';
-import ChannelList from './ChannelList';
+import { HashtagIcon } from '@heroicons/react/outline';
 
-const Channels = (): JSX.Element => {
-  const { translations } = React.useContext(TranslationsContext);
+import { Dropdown } from '../../basic/Dropdown';
+import { ChannelList } from './ChannelList';
+
+export const Channels = (): JSX.Element => {
+  const { t } = useTranslation();
   return (
-    <Disclosure>
-      {({ open }) => (
-        <>
-          <Disclosure.Button className="flex w-full text-lg font-medium justify-between p-3 border-b hover:bg-gray-200 cursor-pointer">
-            <div className="flex">
-              {open ? (
-                <ChevronDownIcon className="my-auto w-5 h-5 mr-2" />
-              ) : (
-                <ChevronRightIcon className="my-auto w-5 h-5 mr-2" />
-              )}
-              <HashtagIcon className="my-auto text-gray-600 mr-2 2-5 h-5" />
-              {translations.device_channels_title}
-            </div>
-          </Disclosure.Button>
-          <Disclosure.Panel>
-            <React.Suspense
-              fallback={
-                <div className="flex border-b border-gray-300">
-                  <div className="m-auto p-3 text-gray-500">Loading...</div>
-                </div>
-              }
-            >
-              <ChannelList />
-            </React.Suspense>
-          </Disclosure.Panel>
-        </>
-      )}
-    </Disclosure>
+    <Dropdown
+      icon={<HashtagIcon className="my-auto text-gray-600 mr-2 w-5 h-5" />}
+      title={t('settings.channel')}
+      content={<ChannelList />}
+      fallbackMessage={'Loading...'}
+    />
   );
 };
-
-export default Channels;