UI Overhaul (#3)

* WIP

* WIP

* WIP

* WIP

* Draw improvements, disabled user zooming

* Update status indicator

* Add dynamic channel name with icon

* Add more settings

* WIP

* WIP

src/hooks/breakpoint.ts

@@ -0,0 +1,21 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import useBreakpointHook from 'use-breakpoint';
+
+const BREAKPOINTS = {
+  sm: 640,
+  // => @media (min-width: 640px) { ... }
+
+  md: 768,
+  // => @media (min-width: 768px) { ... }
+
+  lg: 1024,
+  // => @media (min-width: 1024px) { ... }
+
+  xl: 1280,
+  // => @media (min-width: 1280px) { ... }
+
+  '2xl': 1536,
+  // => @media (min-width: 1536px) { ... }
+};
+export const useBreakpoint = () => useBreakpointHook(BREAKPOINTS);

src/hooks/redux.ts

@@ -1,7 +1,9 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import type { TypedUseSelectorHook } from 'react-redux';
 import { useDispatch, useSelector } from 'react-redux';
 
-import type { AppDispatch, RootState } from '../store';
+import type { AppDispatch, RootState } from '@core/store';
 
 export const useAppDispatch = () => useDispatch<AppDispatch>();
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;