Use compliance page logos for favicon and org sidebar

Signed-off-by: Émile Ré <emile@getprobo.com>

packages/hooks/src/index.ts

@@ -5,3 +5,5 @@ export { useList } from "./useList";
 export { useStateWithRef } from "./useStateWithRef";
 export { useCleanup } from "./useCleanup";
 export { useCopy } from "./useCopy";
+export { useFavicon } from "./useFavicon";
+export { useSystemTheme } from "./useSystemTheme";

packages/hooks/src/useFavicon.ts

@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+
+export function useFavicon(faviconUrl?: string | null) {
+  useEffect(() => {
+    if (!faviconUrl) return;
+
+    let favicon: HTMLLinkElement;
+    const existingFavicon = document.getElementById("favicon") as (HTMLLinkElement | null);
+
+    if (existingFavicon) {
+      favicon = existingFavicon
+      favicon.href = faviconUrl;
+    } else {
+      favicon = document.createElement("link");
+      favicon.id = "favicon";
+      favicon.rel = "icon";
+      favicon.href = faviconUrl;
+      document.head.appendChild(favicon);
+    }
+
+    return () => {
+      favicon.href = "/favicons/favicon.ico";
+    }
+  });
+}

packages/hooks/src/useSystemTheme.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+
+export function useSystemTheme(): "light" | "dark" {
+  const getSystemTheme = () => {
+    if (typeof window !== "undefined" && window.matchMedia) {
+      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" as const;
+    }
+    return "light" as const;
+  };
+
+  const [theme, setTheme] = useState<"light" | "dark">(getSystemTheme());
+
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) {
+      return;
+    }
+
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (event: MediaQueryListEvent) => {
+      setTheme(event.matches ? "dark" : "light");
+    };
+
+    mediaQuery.addEventListener("change", handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  }, []);
+
+  return theme;
+};