Fixed the circular imports and things

src-web/components/DialogContext.tsx

@@ -1,80 +1,5 @@
-import React, { createContext, useContext, useMemo, useState } from 'react';
-import { trackEvent } from '../lib/analytics';
-import type { DialogProps } from './core/Dialog';
-import { Dialog } from './core/Dialog';
-
-type DialogEntry = {
-  id: string;
-  render: ({ hide }: { hide: () => void }) => React.ReactNode;
-} & Omit<DialogProps, 'open' | 'children'>;
-
-interface State {
-  dialogs: DialogEntry[];
-  actions: Actions;
-}
-
-interface Actions {
-  show: (d: DialogEntry) => void;
-  toggle: (d: DialogEntry) => void;
-  hide: (id: string) => void;
-}
+import { createContext } from 'react';
+import type { DialogState } from './Dialogs';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const DialogContext = createContext<State>({} as State);
-
-export const DialogProvider = ({ children }: { children: React.ReactNode }) => {
-  const [dialogs, setDialogs] = useState<State['dialogs']>([]);
-  const actions = useMemo<Actions>(
-    () => ({
-      show({ id, ...props }: DialogEntry) {
-        trackEvent('dialog', 'show', { id });
-        setDialogs((a) => [...a.filter((d) => d.id !== id), { id, ...props }]);
-      },
-      toggle({ id, ...props }: DialogEntry) {
-        if (dialogs.some((d) => d.id === id)) this.hide(id);
-        else this.show({ id, ...props });
-      },
-      hide: (id: string) => {
-        setDialogs((a) => a.filter((d) => d.id !== id));
-      },
-    }),
-    [dialogs],
-  );
-
-  const state: State = {
-    dialogs,
-    actions,
-  };
-
-  return <DialogContext.Provider value={state}>{children}</DialogContext.Provider>;
-};
-
-function DialogInstance({ id, render, onClose, ...props }: DialogEntry) {
-  const { actions } = useContext(DialogContext);
-  const children = render({ hide: () => actions.hide(id) });
-  return (
-    <Dialog
-      open
-      onClose={() => {
-        onClose?.();
-        actions.hide(id);
-      }}
-      {...props}
-    >
-      {children}
-    </Dialog>
-  );
-}
-
-export const useDialog = () => useContext(DialogContext).actions;
-
-export function Dialogs() {
-  const { dialogs } = useContext(DialogContext);
-  return (
-    <>
-      {dialogs.map((props: DialogEntry) => (
-        <DialogInstance key={props.id} {...props} />
-      ))}
-    </>
-  );
-}
+export const DialogContext = createContext<DialogState>({} as DialogState);