refactor: more css purging

src/pages/settings/account.tsx

@@ -0,0 +1,52 @@
+import { StreamState } from "@/const";
+import { Layer1Button } from "@/element/buttons";
+import Copy from "@/element/copy";
+import { StatePill } from "@/element/state-pill";
+import { useLogin } from "@/hooks/login";
+import { Login } from "@/login";
+import { hexToBech32 } from "@snort/shared";
+import { FormattedMessage } from "react-intl";
+
+export default function AccountSettingsTab() {
+  const login = useLogin();
+  return (
+    <>
+      <h1>
+        <FormattedMessage defaultMessage="Account" id="TwyMau" />
+      </h1>
+      {login?.pubkey && (
+        <div className="public-key">
+          <p>
+            <FormattedMessage defaultMessage="Logged in as" id="DZKuuP" />
+          </p>
+          <Copy text={hexToBech32("npub", login.pubkey)} />
+        </div>
+      )}
+      {login?.privateKey && (
+        <div className="private-key">
+          <p>
+            <FormattedMessage defaultMessage="Private key" id="Bep/gA" />
+          </p>
+          <Layer1Button>
+            <FormattedMessage defaultMessage="Copy" id="4l6vz1" />
+          </Layer1Button>
+        </div>
+      )}
+      <h1>
+        <FormattedMessage defaultMessage="Theme" id="Pe0ogR" />
+      </h1>
+      <div>
+        <StatePill state={StreamState.Live} />
+      </div>
+      <div className="flex gap-2">
+        {["#7F006A", "#E206BF", "#7406E2", "#3F06E2", "#393939", "#ff563f", "#ff8d2b", "#34d2fe"].map(a => (
+          <div
+            className={`w-4 h-4 pointer${login?.color === a ? " border" : ""}`}
+            title={a}
+            style={{ backgroundColor: a }}
+            onClick={() => Login.setColor(a)}></div>
+        ))}
+      </div>
+    </>
+  );
+}

src/pages/settings/index.tsx

@@ -0,0 +1,37 @@
+import { Layer1Button } from "@/element/buttons";
+import { FormattedMessage } from "react-intl";
+import { Outlet, useNavigate } from "react-router-dom";
+
+const Tabs = [
+  {
+    name: <FormattedMessage defaultMessage="Account" id="TwyMau" />,
+    path: "",
+  } as const,
+  {
+    name: <FormattedMessage defaultMessage="Stream" id="uYw2LD" />,
+    path: "stream",
+  } as const,
+];
+export default function SettingsPage() {
+  const naviage = useNavigate();
+
+  return (
+    <div className="rounded-2xl p-3 md:w-[700px] mx-auto w-full">
+      <div className="flex flex-col gap-2">
+        <h1>
+          <FormattedMessage defaultMessage="Settings" id="D3idYv" />
+        </h1>
+        <div className="flex flex-col gap-2">
+          <div className="flex gap-2">
+            {Tabs.map(t => (
+              <Layer1Button onClick={() => naviage(t.path)}>{t.name}</Layer1Button>
+            ))}
+          </div>
+          <div className="p-5 bg-layer-1 rounded-3xl flex flex-col gap-3">
+            <Outlet />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/settings/stream.tsx

@@ -0,0 +1,24 @@
+import { NostrProviderDialog } from "@/element/nostr-provider-dialog";
+import { useStreamProvider } from "@/hooks/stream-provider";
+import { NostrStreamProvider } from "@/providers";
+import { unwrap } from "@snort/shared";
+import { FormattedMessage } from "react-intl";
+
+export function StreamSettingsTab() {
+  const providers = useStreamProvider();
+  return (
+    <>
+      <h1>
+        <FormattedMessage defaultMessage="Stream" id="uYw2LD" />
+      </h1>
+      <div className="flex flex-col gap-4">
+        <NostrProviderDialog
+          provider={unwrap(providers.find(a => a.name === "zap.stream")) as NostrStreamProvider}
+          showEndpoints={true}
+          showEditor={false}
+          showForwards={true}
+        />
+      </div>
+    </>
+  );
+}