feat: disconnected dialog

gmus-web/src/components/ui/cmus/views/disconnected.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { H3 } from '../styled/typography';
+import { HelpDialogContainer } from './help.styles';
+
+export const DisconnectedDialog: React.FC = () => (
+  <HelpDialogContainer>
+    <H3>Disconnected</H3>
+    <p>We will automatically try to reconnect.</p>
+  </HelpDialogContainer>
+);

gmus-web/src/components/ui/cmus/wrapper.tsx

@@ -19,6 +19,7 @@ import { Overlay, View } from './types';
 import { useLibrary } from './utils/library';
 import { ViewClientList } from './views/clients';
 import { CommandView } from './views/command';
+import { DisconnectedDialog } from './views/disconnected';
 import { HelpDialog } from './views/help';
 import { ViewLibrary } from './views/library';
 import { ViewQueue } from './views/queue';
@@ -90,6 +91,11 @@ export const CmusUIProvider: UIProviderComponent = ({
               {stateUI.overlay === Overlay.Help && <HelpDialog />}
             </Styled.Overlay>
           )}
+          {!ready && (
+            <Styled.Overlay>
+              <DisconnectedDialog />
+            </Styled.Overlay>
+          )}
           {stateUI.searchMode && <Search />}
           <PlayerStatus song={currentSong} connecting={connecting} error={error} ready={ready} />
           <CommandView />