feat: responsive header, search boxes (#10)

src/hooks/useMediaQuery.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+export function useMediaQuery(query: string) {
+  const [value, setValue] = React.useState(false)
+
+  React.useEffect(() => {
+    function onChange(event: MediaQueryListEvent) {
+      setValue(event.matches)
+    }
+
+    const result = matchMedia(query)
+    result.addEventListener("change", onChange)
+    setValue(result.matches)
+
+    return () => result.removeEventListener("change", onChange)
+  }, [query])
+
+  return value
+}

src/hooks/useNotfication.tsx

@@ -33,7 +33,8 @@ export const NotificationProvider: React.FC<NotificationProviderProps> = ({ chil
             (async () => {
                 try {
                     const n = await getNotification();
-                    setNotifier(n);
+                    const nData = n.map(({ id, name }) => ({ id, name }));
+                    setNotifier(nData);
                 } catch (error) {
                     setNotifier(undefined);
                 }

src/hooks/useServer.tsx

@@ -33,7 +33,8 @@ export const ServerProvider: React.FC<ServerProviderProps> = ({ children, withSe
             (async () => {
                 try {
                     const s = await getServers();
-                    setServer(s);
+                    const serverData = s.map(({ id, name }) => ({ id, name }));
+                    setServer(serverData);
                 } catch (error) {
                     setServer(undefined);
                 }