lytx 0.3.0

package/src/app/components/SiteSelector.tsx

@@ -0,0 +1,126 @@
+import { useContext } from "react";
+import { AuthContext } from "@/app/providers/AuthProvider";
+
+const LAST_SITE_KEY = "lytx_last_site_id";
+
+/** Save to localStorage for immediate access on next page load */
+function saveLastSiteToStorage(site_id: number): void {
+  try {
+    localStorage.setItem(LAST_SITE_KEY, String(site_id));
+  } catch {
+    // localStorage might not be available
+  }
+}
+
+/** Get last site from localStorage */
+export function getLastSiteFromStorage(): number | null {
+  try {
+    const stored = localStorage.getItem(LAST_SITE_KEY);
+    return stored ? parseInt(stored, 10) : null;
+  } catch {
+    return null;
+  }
+}
+
+/** Persist to database for cross-device sync */
+async function updateLastSiteInDB(site_id: number): Promise<void> {
+  try {
+    const response = await fetch("/api/user/update-last-site", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ site_id }),
+    });
+    if (!response.ok) {
+      console.error("Failed to update last site:", await response.text());
+    }
+  } catch (error) {
+    console.error("Error updating last site:", error);
+  }
+}
+
+type SiteSelectorProps = {
+  callBack?: (opts: { name: string; id: number; tag_id: string }) => void;
+  initialSites?: Array<{ site_id: number; name: string; tag_id: string }>;
+  initialSiteId?: number | null;
+  wrapperClassName?: string;
+  selectClassName?: string;
+};
+export const SiteSelector: React.FC<SiteSelectorProps> = ({
+  initialSites = [],
+  initialSiteId = null,
+  wrapperClassName,
+  selectClassName,
+}) => {
+  const {
+    data: session,
+    current_site,
+    setCurrentSite,
+  } = useContext(AuthContext);
+
+  const sites = session?.userSites && session.userSites.length > 0
+    ? session.userSites.map((site) => ({
+      site_id: site.site_id,
+      name: site.name || `Site ${site.site_id}`,
+      tag_id: site.tag_id,
+    }))
+    : initialSites;
+
+  const selectedSiteName = current_site?.name
+    ?? sites.find((site) => site.site_id === initialSiteId)?.name
+    ?? sites[0]?.name
+    ?? "";
+
+  const combinedWrapperClassName = ["relative inline-block", wrapperClassName]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div className={combinedWrapperClassName}>
+      <select
+        value={selectedSiteName}
+        onChange={(e) => {
+          const selectedSite = sites.find(
+            (site) => site.name === e.target.value,
+          );
+          if (selectedSite) {
+            setCurrentSite({
+              name: selectedSite.name,
+              id: selectedSite.site_id,
+              tag_id: selectedSite.tag_id,
+            });
+            // Save to localStorage for immediate access on page reload
+            saveLastSiteToStorage(selectedSite.site_id);
+            // Persist to database for cross-device sync (fire and forget)
+            updateLastSiteInDB(selectedSite.site_id);
+          }
+        }}
+        className={`appearance-none bg-[var(--theme-input-bg)] pl-4 pr-10 py-2 text-sm text-left text-[var(--theme-text-primary)] rounded-lg border border-[var(--theme-input-border)] focus:border-[var(--theme-border-primary)] focus:outline-none transition-colors ${selectClassName ?? ""}`}
+      >
+        {sites.length > 0
+          ? sites.map((site) => (
+              <option key={site.site_id} value={site.name} className="text-left">
+                {site.name}
+              </option>
+            ))
+          : ""}
+      </select>
+      <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-[var(--theme-text-secondary)]">
+        <svg
+          aria-hidden="true"
+          className="h-4 w-4"
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5 7.5L10 12.5L15 7.5"
+            stroke="currentColor"
+            strokeWidth="1.8"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </span>
+    </div>
+  );
+};

package/src/app/components/SiteTag.tsx

@@ -0,0 +1,42 @@
+import { LYTX_SCRIPT_PATH } from "@/app/constants";
+
+export type SiteTagProps = {
+  tag_id: string;
+  domain: string;
+  lytx_domain?: string;
+};
+
+export const SiteTag: React.FC<SiteTagProps> = ({
+  tag_id,
+  domain,
+  lytx_domain,
+}) => {
+  // Infer the Lytx domain from the current host if not provided
+  if (!lytx_domain) {
+    lytx_domain = typeof window !== "undefined" 
+      ? window.location.host 
+      : "localhost:5173";
+  }
+
+  return (
+    <code className="text-sm">
+      <span style={{ color: "#6c7086" }}>&lt;</span>
+      <span style={{ color: "#f38ba8", fontWeight: "600" }}>script</span>
+      <span style={{ color: "#6c7086" }}> </span>
+      <span style={{ color: "#a6e3a1" }}>defer</span>
+      <span style={{ color: "#6c7086" }}> </span>
+      <span style={{ color: "#a6e3a1" }}>data-domain</span>
+      <span style={{ color: "#6c7086" }}>=</span>
+      <span style={{ color: "#fab387" }}>"{domain}"</span>
+      <span style={{ color: "#6c7086" }}> </span>
+      <span style={{ color: "#a6e3a1" }}>src</span>
+      <span style={{ color: "#6c7086" }}>=</span>
+      <span style={{ color: "#fab387" }}>
+        "https://{lytx_domain}{LYTX_SCRIPT_PATH}?account={tag_id}"
+      </span>
+      <span style={{ color: "#6c7086" }}>&gt;&lt;/</span>
+      <span style={{ color: "#f38ba8", fontWeight: "600" }}>script</span>
+      <span style={{ color: "#6c7086" }}>&gt;</span>
+    </code>
+  );
+};

package/src/app/components/SiteTagInstallCard.tsx

@@ -0,0 +1,241 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Highlight, themes } from "prism-react-renderer";
+import { Button } from "@/app/components/ui/Button";
+import { LYTX_SCRIPT_PATH } from "@/app/constants";
+
+type SiteTagInstallCardProps = {
+  site: {
+    site_id?: number;
+    name?: string | null;
+    domain?: string | null;
+    tag_id: string;
+    createdAt?: string | Date | null;
+  };
+  className?: string;
+};
+
+function CodeBlock({
+  code,
+  language,
+  id,
+}: {
+  code: string;
+  language: string;
+  id: string;
+}) {
+  return (
+    <div
+      id={id}
+      className="bg-[var(--theme-input-bg)] border border-[var(--theme-input-border)] rounded-md overflow-hidden"
+    >
+      <Highlight theme={themes.vsDark} code={code} language={language}>
+        {({ className: highlightClassName, style, tokens, getLineProps, getTokenProps }) => (
+          <pre
+            className={`${highlightClassName} p-4 text-sm overflow-x-auto`}
+            style={style}
+          >
+            {tokens.map((line, i) => (
+              <div key={i} {...getLineProps({ line })}>
+                {line.map((token, key) => (
+                  <span key={key} {...getTokenProps({ token })} />
+                ))}
+              </div>
+            ))}
+          </pre>
+        )}
+      </Highlight>
+    </div>
+  );
+}
+
+export function SiteTagInstallCard({ site, className }: SiteTagInstallCardProps) {
+  const [activeInstallTab, setActiveInstallTab] = useState("html");
+  const [lytxDomain, setLytxDomain] = useState("https://lytx.io");
+
+  useEffect(() => {
+    setLytxDomain(window.location.origin);
+  }, []);
+  const containerClassName = className
+    ? `border border-[var(--theme-border-primary)] rounded-lg bg-[var(--theme-bg-secondary)] p-4 sm:p-6 ${className}`
+    : "border border-[var(--theme-border-primary)] rounded-lg bg-[var(--theme-bg-secondary)] p-4 sm:p-6";
+
+  const getCodeForTab = (tab: string) => {
+    switch (tab) {
+      case "html":
+        return `<script defer \n src="${lytxDomain}${LYTX_SCRIPT_PATH}?account=${site.tag_id}"\n></script>`;
+      case "rwsdk":
+        return `// In your Document.tsx\nexport const Document = ({ children }) => (\n  <html>\n    <head>{/* ... */}</head>\n    <body>\n      <div id="root">{children}</div>\n      <script>import("/src/client.tsx")</script>\n      <script\n        defer\n        src="${lytxDomain}${LYTX_SCRIPT_PATH}?account=${site.tag_id}"\n      ></script>\n    </body>\n  </html>\n);`;
+      case "sveltekit":
+        return `<!-- In your src/app.html -->\n<script\n  defer\n  src="${lytxDomain}${LYTX_SCRIPT_PATH}?account=${site.tag_id}"\n></script>\n\n<!-- Or in your +layout.svelte -->\n<svelte:head>\n  <script\n    defer\n    src="${lytxDomain}${LYTX_SCRIPT_PATH}?account=${site.tag_id}"\n  ></script>\n</svelte:head>`;
+      case "solid":
+        return `// In your root.tsx or index.html\nimport { Script } from "@solidjs/meta";\n\nexport default function Root() {\n  return (\n    <Html>\n      <Head>\n        <Script\n          defer\n          src="${lytxDomain}${LYTX_SCRIPT_PATH}?account=${site.tag_id}"\n        />\n      </Head>\n      <Body>\n        {/* Your app content */}\n      </Body>\n    </Html>\n  );\n}`;
+      case "nextjs":
+        return `// In your _document.tsx or layout.tsx (App Router)\nimport Script from 'next/script';\n\nexport default function RootLayout({ children }) {\n  return (\n    <html>\n      <head>\n        <Script\n          defer\n          src="${lytxDomain}${LYTX_SCRIPT_PATH}?account=${site.tag_id}"\n          strategy="beforeInteractive"\n        />\n      </head>\n      <body>{children}</body>\n    </html>\n  );\n}`;
+      case "nuxt":
+        return `// In your nuxt.config.ts\nexport default defineNuxtConfig({\n  app: {\n    head: {\n      script: [\n        {\n          src: '${lytxDomain}${LYTX_SCRIPT_PATH}?account=${site.tag_id}',\n          defer: true\n        }\n      ]\n    }\n  }\n});\n\n// Or use useHead() in a component/page\nuseHead({\n  script: [\n    {\n      src: '${lytxDomain}${LYTX_SCRIPT_PATH}?account=${site.tag_id}',\n      defer: true\n    }\n  ]\n});`;
+      default:
+        return "";
+    }
+  };
+
+  return (
+    <div className={containerClassName}>
+      <div className="mb-4 flex items-start justify-between">
+        <div className="flex-1">
+          <div className="mb-2 flex flex-wrap items-center gap-2 sm:gap-3">
+            <h3 className="text-lg font-medium text-[var(--theme-text-primary)]">
+              {site.name || "Selected Site"}
+            </h3>
+            <span className="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
+              active
+            </span>
+          </div>
+          <div className="text-sm text-[var(--theme-text-secondary)] space-y-1">
+            <p>
+              <span className="font-medium">Domain:</span>{" "}
+              {site.domain || "—"}
+            </p>
+            <p>
+              <span className="font-medium">Tag ID:</span>{" "}
+              <code className="break-all rounded bg-[var(--theme-input-bg)] px-2 py-1 text-xs">
+                {site.tag_id}
+              </code>
+            </p>
+            <p>
+              <span className="font-medium">Created:</span>{" "}
+              {site.createdAt ? new Date(site.createdAt).toLocaleDateString() : "N/A"}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="border-t border-[var(--theme-border-primary)] pt-4">
+        <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <label className="text-sm font-medium text-[var(--theme-text-primary)]">
+            Installation Instructions
+          </label>
+          <Button
+            variant="primary"
+            size="sm"
+            className="w-full sm:w-auto"
+            onClick={() => {
+              const code = getCodeForTab(activeInstallTab);
+              if (code) {
+                navigator.clipboard.writeText(code);
+                alert("Code copied to clipboard!");
+              }
+            }}
+          >
+            Copy Code
+          </Button>
+        </div>
+
+        <div className="mb-4 overflow-x-auto rounded-lg bg-[var(--theme-bg-secondary)] p-1">
+          <div className="flex min-w-max space-x-1">
+            {[
+              { id: "html", label: "HTML" },
+              { id: "rwsdk", label: "RWSDK" },
+              { id: "sveltekit", label: "SvelteKit" },
+              { id: "solid", label: "Solid" },
+              { id: "nextjs", label: "Next.js" },
+              { id: "nuxt", label: "Nuxt" },
+            ].map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => setActiveInstallTab(tab.id)}
+                className={`whitespace-nowrap rounded-md px-3 py-2 text-xs font-medium transition-colors ${activeInstallTab === tab.id
+                  ? "bg-[var(--theme-bg-primary)] text-[var(--theme-text-primary)] shadow-sm"
+                  : "text-[var(--theme-text-secondary)] hover:text-[var(--theme-text-primary)]"
+                  }`}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          {activeInstallTab === "html" && (
+            <div>
+              <CodeBlock
+                id="install-content-html"
+                language="html"
+                code={`<script\n  defer\n  src="${lytxDomain}${LYTX_SCRIPT_PATH}?account=${site.tag_id}"\n></script>`}
+              />
+              <p className="text-xs text-[var(--theme-text-secondary)] mt-2">
+                Copy and paste this script into the &lt;head&gt; section of your HTML.
+              </p>
+            </div>
+          )}
+
+          {activeInstallTab === "rwsdk" && (
+            <div>
+              <CodeBlock
+                id="install-content-rwsdk"
+                language="tsx"
+                code={`// In your Document.tsx\nexport const Document = ({ children }) => (\n  <html>\n    <head>{/* ... */}</head>\n    <body>\n      <div id="root">{children}</div>\n      <script>import("/src/client.tsx")</script>\n      <script\n        defer\n        src="${lytxDomain}${LYTX_SCRIPT_PATH}?account=${site.tag_id}"\n      ></script>\n    </body>\n  </html>\n);`}
+              />
+              <p className="text-xs text-[var(--theme-text-secondary)] mt-2">
+                Add this to your Document.tsx or root layout component.
+              </p>
+            </div>
+          )}
+
+          {activeInstallTab === "sveltekit" && (
+            <div>
+              <CodeBlock
+                id="install-content-sveltekit"
+                language="html"
+                code={`<!-- In your src/app.html -->\n<script\n  defer\n  src="${lytxDomain}${LYTX_SCRIPT_PATH}?account=${site.tag_id}"\n></script>\n\n<!-- Or in your +layout.svelte -->\n<svelte:head>\n  <script\n    defer\n    src="${lytxDomain}${LYTX_SCRIPT_PATH}?account=${site.tag_id}"\n  ></script>\n</svelte:head>`}
+              />
+              <p className="text-xs text-[var(--theme-text-secondary)] mt-2">
+                Add the script to your SvelteKit app.html or layout.
+              </p>
+            </div>
+          )}
+
+          {activeInstallTab === "solid" && (
+            <div>
+              <CodeBlock
+                id="install-content-solid"
+                language="tsx"
+                code={`// In your root.tsx or index.html\nimport { Script } from "@solidjs/meta";\n\nexport default function Root() {\n  return (\n    <Html>\n      <Head>\n        <Script\n          defer\n          src="${lytxDomain}${LYTX_SCRIPT_PATH}?account=${site.tag_id}"\n        />\n      </Head>\n      <Body>\n        {/* Your app content */}\n      </Body>\n    </Html>\n  );\n}`}
+              />
+              <p className="text-xs text-[var(--theme-text-secondary)] mt-2">
+                Place the script tag in your Solid root layout.
+              </p>
+            </div>
+          )}
+
+          {activeInstallTab === "nextjs" && (
+            <div>
+              <CodeBlock
+                id="install-content-nextjs"
+                language="tsx"
+                code={`// In your _document.tsx or layout.tsx (App Router)\nimport Script from 'next/script';\n\nexport default function RootLayout({ children }) {\n  return (\n    <html>\n      <head>\n        <Script\n          defer\n          src="${lytxDomain}${LYTX_SCRIPT_PATH}?account=${site.tag_id}"\n          strategy="beforeInteractive"\n        />\n      </head>\n      <body>{children}</body>\n    </html>\n  );\n}`}
+              />
+              <p className="text-xs text-[var(--theme-text-secondary)] mt-2">
+                Add the script to your Next.js document or root layout.
+              </p>
+            </div>
+          )}
+
+          {activeInstallTab === "nuxt" && (
+            <div>
+              <CodeBlock
+                id="install-content-nuxt"
+                language="ts"
+                code={`// In your nuxt.config.ts\nexport default defineNuxtConfig({\n  app: {\n    head: {\n      script: [\n        {\n          src: '${lytxDomain}${LYTX_SCRIPT_PATH}?account=${site.tag_id}',\n          defer: true\n        }\n      ]\n    }\n  }\n});\n\n// Or use useHead() in a component/page\nuseHead({\n  script: [\n    {\n      src: '${lytxDomain}${LYTX_SCRIPT_PATH}?account=${site.tag_id}',\n      defer: true\n    }\n  ]\n});`}
+              />
+              <p className="text-xs text-[var(--theme-text-secondary)] mt-2">
+                Configure the script in nuxt.config.ts or useHead.
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}