lytx 0.3.0

package/src/app/components/ui/ReportBuilderMenu.tsx

@@ -0,0 +1,246 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Link } from "./Link";
+
+export type ReportBuilderActionId =
+  | "create-report"
+  | "create-reference"
+  | "ask-ai"
+  | "create-dashboard"
+  | "create-notification";
+
+export type ReportBuilderMenuActiveId = ReportBuilderActionId | `custom-report:${string}`;
+
+export type ReportBuilderMenuItem = {
+  id: string;
+  label: string;
+  href?: string;
+  onSelect?: () => void;
+};
+
+export const defaultReportBuilderMenuItems: ReportBuilderMenuItem[] = [
+  { id: "create-report", label: "Create report" },
+  { id: "create-reference", label: "Create reference" },
+  { id: "ask-ai", label: "Ask AI" },
+  { id: "create-notification", label: "Create notification rule" },
+];
+
+const ReportBuilderItemIcon = ({ itemId }: { itemId: string }) => {
+  if (itemId === "create-report") {
+    return (
+      <svg aria-hidden="true" className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M12 5v14" />
+        <path d="M5 12h14" />
+      </svg>
+    );
+  }
+
+  if (itemId === "create-reference") {
+    return (
+      <svg aria-hidden="true" className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
+        <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5V4.5A2.5 2.5 0 0 1 6.5 2Z" />
+      </svg>
+    );
+  }
+
+  if (itemId === "ask-ai") {
+    return (
+      <svg aria-hidden="true" className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="m12 3 1.9 3.9L18 8.8l-3 2.9.7 4.1-3.7-2-3.7 2 .7-4.1-3-2.9 4.1-1.9L12 3Z" />
+      </svg>
+    );
+  }
+
+  if (itemId === "create-dashboard") {
+    return (
+      <svg aria-hidden="true" className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <rect x="3" y="3" width="7" height="7" rx="1" />
+        <rect x="14" y="3" width="7" height="7" rx="1" />
+        <rect x="14" y="14" width="7" height="7" rx="1" />
+        <rect x="3" y="14" width="7" height="7" rx="1" />
+      </svg>
+    );
+  }
+
+  if (itemId.startsWith("custom-report:")) {
+    return (
+      <svg aria-hidden="true" className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M4 20h16" />
+        <path d="M7 16V9" />
+        <path d="M12 16V5" />
+        <path d="M17 16v-3" />
+      </svg>
+    );
+  }
+
+  return (
+    <svg aria-hidden="true" className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M15 17h5l-1.4-1.4A2 2 0 0 1 18 14.2V11a6 6 0 1 0-12 0v3.2a2 2 0 0 1-.6 1.4L4 17h5" />
+      <path d="M9 17a3 3 0 0 0 6 0" />
+    </svg>
+  );
+};
+
+type ReportBuilderMenuProps = {
+  items?: ReportBuilderMenuItem[];
+  activeItemId?: ReportBuilderMenuActiveId;
+  buttonLabel?: string;
+  onItemSelect?: (item: ReportBuilderMenuItem) => void;
+};
+
+const menuItemBaseClass = "w-full text-left px-3 py-2 text-sm text-(--theme-text-primary) transition-colors flex items-center gap-2";
+
+export function ReportBuilderMenu({
+  items = defaultReportBuilderMenuItems,
+  activeItemId,
+  buttonLabel = "Create report",
+  onItemSelect,
+}: ReportBuilderMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchValue, setSearchValue] = useState("");
+  const menuRef = useRef<HTMLDivElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  const createReportItem = items.find((item) => item.id === "create-report");
+  const filteredItems = items
+    .filter((item) => item.id !== "create-report")
+    .filter((item) => item.label.toLowerCase().includes(searchValue.trim().toLowerCase()));
+  const activeItem = items.find((item) => item.id === activeItemId);
+  const resolvedButtonLabel = activeItem?.label ?? buttonLabel;
+
+  const handleItemSelect = (item: ReportBuilderMenuItem) => {
+    item.onSelect?.();
+    onItemSelect?.(item);
+    setIsOpen(false);
+    setSearchValue("");
+  };
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handlePointerDown = (event: MouseEvent | TouchEvent) => {
+      const target = event.target;
+      if (!(target instanceof Node)) return;
+      if (!menuRef.current?.contains(target)) {
+        setIsOpen(false);
+      }
+    };
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("touchstart", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("touchstart", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const timeoutId = window.setTimeout(() => {
+      searchInputRef.current?.focus();
+    }, 0);
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [isOpen]);
+
+  const renderMenuItem = (item: ReportBuilderMenuItem) => {
+    const isActive = activeItemId === item.id;
+    const itemClass = `${menuItemBaseClass} ${isActive ? "bg-(--theme-bg-secondary)" : "hover:bg-(--theme-bg-secondary)"}`;
+
+    if (item.href) {
+      return (
+        <Link
+          key={item.id}
+          href={item.href}
+          role="menuitem"
+          onClick={() => handleItemSelect(item)}
+          className={itemClass}
+        >
+          <span className="inline-flex h-5 w-5 items-center justify-center rounded text-(--theme-text-secondary)">
+            <ReportBuilderItemIcon itemId={item.id} />
+          </span>
+          <span className="truncate">{item.label}</span>
+        </Link>
+      );
+    }
+
+    return (
+      <button
+        key={item.id}
+        type="button"
+        role="menuitem"
+        onClick={() => handleItemSelect(item)}
+        className={itemClass}
+      >
+        <span className="inline-flex h-5 w-5 items-center justify-center rounded text-(--theme-text-secondary)">
+          <ReportBuilderItemIcon itemId={item.id} />
+        </span>
+        <span className="truncate">{item.label}</span>
+      </button>
+    );
+  };
+
+  return (
+    <div className="relative" ref={menuRef}>
+      <button
+        type="button"
+        onClick={() => setIsOpen((open) => !open)}
+        aria-haspopup="menu"
+        aria-expanded={isOpen}
+        aria-controls="create-report-menu"
+        className="bg-(--theme-bg-secondary) hover:bg-(--theme-bg-tertiary) text-(--theme-text-primary) font-medium h-9 sm:h-auto px-2.5 sm:py-2 sm:px-4 text-sm rounded-md border border-(--theme-border-primary) transition-colors flex items-center gap-1.5 sm:gap-2 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-(--theme-border-secondary)"
+      >
+        <span className="sm:hidden max-w-24 truncate">{resolvedButtonLabel}</span>
+        <span className="hidden sm:inline max-w-48 truncate">{resolvedButtonLabel}</span>
+        <svg aria-hidden="true" className="h-4 w-4 shrink-0 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </button>
+      {isOpen && (
+        <div
+          id="create-report-menu"
+          role="menu"
+          className="absolute right-0 mt-1 w-72 rounded-md border border-(--theme-border-primary) bg-(--theme-bg-primary) shadow-lg z-[70]"
+        >
+          {createReportItem ? (
+            <div className="sticky top-0 z-10 border-b border-(--theme-border-primary) bg-(--theme-bg-primary) py-1">
+              {renderMenuItem(createReportItem)}
+            </div>
+          ) : null}
+
+          <div className="border-b border-(--theme-border-primary) px-3 py-2">
+            <input
+              ref={searchInputRef}
+              type="text"
+              value={searchValue}
+              onChange={(event) => setSearchValue(event.target.value)}
+              placeholder="Search reports..."
+              className="w-full rounded-md border border-(--theme-border-primary) bg-(--theme-bg-secondary) px-2 py-1.5 text-sm text-(--theme-text-primary)"
+              aria-label="Search reports"
+            />
+          </div>
+
+          <div className="max-h-72 overflow-y-auto py-1">
+            {filteredItems.length === 0 ? (
+              <p className="px-3 py-2 text-xs text-(--theme-text-secondary)">No matching reports.</p>
+            ) : (
+              filteredItems.map((item) => renderMenuItem(item))
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/app/components/ui/ThemeToggle.tsx

@@ -0,0 +1,54 @@
+"use client";
+import React from "react";
+import { useTheme } from "@/app/providers/ThemeProvider";
+
+export const ThemeToggle: React.FC = () => {
+  const { theme, toggleTheme, isInitialized } = useTheme();
+
+  if (!isInitialized) {
+    return (
+      <div className="p-2 w-9 h-9 rounded-lg bg-[var(--theme-bg-secondary)] border border-[var(--theme-border-primary)] animate-pulse">
+        <div className="w-5 h-5 bg-[var(--theme-text-secondary)] opacity-30 rounded"></div>
+      </div>
+    );
+  }
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="p-2 rounded-lg bg-[var(--theme-bg-secondary)] hover:bg-[var(--theme-bg-tertiary)] border border-[var(--theme-border-primary)] transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[var(--theme-border-secondary)]"
+      aria-label={`Switch to ${theme === "light" ? "dark" : "light"} mode`}
+      title={`Switch to ${theme === "light" ? "dark" : "light"} mode`}
+    >
+      {theme === "light" ? (
+        <svg
+          className="w-5 h-5 text-[var(--theme-text-primary)]"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+          />
+        </svg>
+      ) : (
+        <svg
+          className="w-5 h-5 text-[var(--theme-text-primary)]"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+          />
+        </svg>
+      )}
+    </button>
+  );
+};

package/src/app/constants.ts

@@ -0,0 +1,6 @@
+/**
+ * Shared constants for the Lytx application
+ */
+
+/** The path to the Lytx tracking script */
+export const LYTX_SCRIPT_PATH = "/lytx.v2.js";

package/src/app/headers.ts

@@ -0,0 +1,33 @@
+import { RouteMiddleware } from "rwsdk/router";
+import { IS_DEV } from "rwsdk/constants";
+
+export const setCommonHeaders =
+    (): RouteMiddleware =>
+        ({ response, rw: { nonce } }) => {
+            const headers = response.headers;
+            if (!IS_DEV) {
+                // Forces browsers to always use HTTPS for a specified time period (2 years)
+                headers.set(
+                    "Strict-Transport-Security",
+                    "max-age=63072000; includeSubDomains; preload",
+                );
+            }
+
+            // Forces browser to use the declared content-type instead of trying to guess/sniff it
+            headers.set("X-Content-Type-Options", "nosniff");
+
+            // Stops browsers from sending the referring webpage URL in HTTP headers
+            headers.set("Referrer-Policy", "no-referrer");
+
+            // Explicitly disables access to specific browser features/APIs
+            headers.set(
+                "Permissions-Policy",
+                "geolocation=(), microphone=(), camera=()",
+            );
+
+            // Defines trusted sources for content loading and script execution:
+            headers.set(
+                "Content-Security-Policy",
+                `default-src 'self'; script-src 'self' 'nonce-${nonce}' https://challenges.cloudflare.com; style-src 'self' 'unsafe-inline'; frame-src https://challenges.cloudflare.com; object-src 'none';`,
+            );
+        };

package/src/app/providers/AuthProvider.tsx

@@ -0,0 +1,189 @@
+"use client";
+import { createContext, useEffect, useRef, useState } from "react";
+import { createAuthClient } from "better-auth/react";
+import { customSessionClient } from "better-auth/client/plugins";
+import type { AuthUserSession } from "@lib/auth";
+import { getLastSiteFromStorage } from "@/app/components/SiteSelector";
+export const authClient = createAuthClient({
+  plugins: [customSessionClient()],
+});
+// type Provider = Params<ReturnType<typeof authClient.signIn.social>>["provider"]
+type UserData = AuthUserSession | null;
+export const emailSignUp = async (
+  email: string,
+  password: string,
+  name: string,
+) => {
+  const result = await authClient.signUp.email({
+    email: email,
+    password: password,
+    name: name,
+    // callbackURL: "/dashboard"
+  });
+
+  if (result.error) {
+    throw new Error(result.error.message || "Sign up failed");
+  }
+};
+
+export const signIn = async (
+  provider: "github" | "google" | "email",
+  emailValues?: { email: string; password: string },
+) => {
+  if (provider === "email" && emailValues) {
+    const { email, password } = emailValues;
+    const result = await authClient.signIn.email({
+      email: email,
+      password: password,
+      callbackURL: "/dashboard",
+    });
+    if (result.error) {
+      throw new Error(result.error.message || "Sign in failed");
+    }
+  } else {
+    await authClient.signIn.social({
+      provider: provider,
+      callbackURL: "/dashboard",
+    });
+  }
+};
+
+export const signOut = async () => {
+  await authClient.signOut();
+  window.location.reload();
+};
+
+export const resendVerificationEmail = async (email: string) => {
+  const response = await fetch("/api/resend-verification-email", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ email, callbackURL: "/dashboard" }),
+  });
+
+  if (!response.ok) {
+    const body = (await response.json().catch(() => null)) as
+      | { error?: string; message?: string }
+      | null;
+    const message = body?.error || body?.message || response.statusText;
+    throw new Error(message);
+  }
+};
+
+export const AuthContext = createContext<{
+  data: UserData;
+  isPending: boolean;
+  error: unknown;
+  refetch: () => void | Promise<void>;
+  current_site: Currentsite;
+  setCurrentSite: (site: Currentsite) => void;
+}>(null as unknown as {
+  data: UserData;
+  isPending: boolean;
+  error: unknown;
+  refetch: () => void | Promise<void>;
+  current_site: Currentsite;
+  setCurrentSite: (site: Currentsite) => void;
+});
+
+export type Currentsite = { name: string, id: number, tag_id: string } | null
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const sessionState = authClient.useSession();
+  const data = sessionState.data as AuthUserSession | null;
+  const { isPending, error, refetch } = sessionState;
+  const refetchFreshSession = async () => {
+    const sessionAtom = authClient.$store.atoms.session;
+    const current = sessionAtom.get();
+    sessionAtom.set({
+      ...current,
+      isPending: current.data === null,
+      isRefetching: true,
+      error: null,
+      refetch: current.refetch,
+    });
+
+    const response = await authClient.$fetch("/get-session", {
+      method: "GET",
+      query: { disableCookieCache: true },
+    });
+
+    if (response.error) {
+      sessionAtom.set({
+        data: null,
+        error: response.error,
+        isPending: false,
+        isRefetching: false,
+        refetch: current.refetch,
+      });
+      return;
+    }
+
+    sessionAtom.set({
+      data: response.data ?? null,
+      error: null,
+      isPending: false,
+      isRefetching: false,
+      refetch: current.refetch,
+    });
+  };
+  //Current Site ID
+  const [current_site, setCurrentSite] = useState<Currentsite>(null);
+
+  const hasInitialized = useRef(false);
+
+  useEffect(() => {
+    if (hasInitialized.current || current_site) return;
+    if (!data?.userSites?.length) return;
+
+    // Priority: localStorage > session.last_site_id > first site
+    let defaultSite = data.userSites[0];
+    
+    // Check localStorage first (most recent selection)
+    const storedSiteId = getLastSiteFromStorage();
+    if (storedSiteId) {
+      const storedSite = data.userSites.find(site => site.site_id === storedSiteId);
+      if (storedSite) {
+        defaultSite = storedSite;
+      }
+    } else if (data.last_site_id) {
+      // Fall back to session data (from database)
+      const lastSite = data.userSites.find(site => site.site_id === data.last_site_id);
+      if (lastSite) {
+        defaultSite = lastSite;
+      }
+    }
+    
+    if (!defaultSite) return;
+
+    hasInitialized.current = true;
+    setCurrentSite({
+      name: defaultSite.name!,
+      id: defaultSite.site_id,
+      tag_id: defaultSite.tag_id,
+    });
+  }, [current_site, data]);
+
+  //WARNING: Only using for dev
+  useEffect(() => {
+    if (import.meta.env.DEV) {
+      console.log("🔥🔥🔥 Effect for current_site has been triggered")
+      if (current_site) console.dir(current_site);
+    }
+    //Fetch to update session in better-auth
+  }, [current_site]);
+
+  return (
+    <AuthContext.Provider
+      value={{
+        data,
+        isPending,
+        error,
+        refetch: refetchFreshSession,
+        current_site,
+        setCurrentSite,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}

package/src/app/providers/ClientProviders.tsx

@@ -0,0 +1,18 @@
+"use client";
+import { ThemeProvider } from "@/app/providers/ThemeProvider";
+import { AuthProvider } from "@/app/providers/AuthProvider";
+import { AppQueryProvider } from "@/app/providers/QueryProvider";
+
+interface ClientProvidersProps {
+  children: React.ReactNode;
+}
+
+export function ClientProviders({ children }: ClientProvidersProps) {
+  return (
+    <ThemeProvider>
+      <AuthProvider>
+        <AppQueryProvider>{children}</AppQueryProvider>
+      </AuthProvider>
+    </ThemeProvider>
+  );
+}

package/src/app/providers/QueryProvider.tsx

@@ -0,0 +1,23 @@
+"use client";
+import React, { useState } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+interface AppQueryProviderProps {
+  children: React.ReactNode;
+}
+
+export function AppQueryProvider({ children }: AppQueryProviderProps) {
+  const [queryClient] = useState(() => new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 0,
+        gcTime: 0,
+      },
+    },
+  }));
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+    </QueryClientProvider>
+  );
+}

package/src/app/providers/ThemeProvider.tsx

@@ -0,0 +1,88 @@
+"use client";
+import React, { createContext, useCallback, useEffect, useState } from "react";
+
+export type Theme = "light" | "dark";
+
+interface ThemeContextType {
+  theme: "light" | "dark";
+  isInitialized: boolean;
+  toggleTheme: () => void;
+}
+
+export const ThemeContext = createContext<ThemeContextType | null>(null);
+
+export const useTheme = () => {
+  const context = React.useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+  // defaultTheme?: Theme;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
+  const [theme, setThemeState] = useState<Theme>("dark");
+  const [isInitialized, setIsInitialized] = useState(false);
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const savedTheme = localStorage.getItem("theme") as Theme;
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light";
+      const initialTheme = savedTheme || systemTheme;
+
+      setThemeState(initialTheme);
+      setIsInitialized(true);
+    }
+  }, []);
+  useEffect(() => {
+    if (isInitialized && typeof window !== "undefined") {
+      const root = document.documentElement;
+
+      // Temporarily enable transitions for theme changes only.
+      root.classList.add("theme-transition");
+      const timeout = window.setTimeout(() => {
+        root.classList.remove("theme-transition");
+      }, 250);
+
+      root.setAttribute("data-theme", theme);
+      localStorage.setItem("theme", theme);
+
+      return () => {
+        window.clearTimeout(timeout);
+        root.classList.remove("theme-transition");
+      };
+    }
+  }, [theme, isInitialized]);
+
+  const toggleTheme = useCallback(() => {
+    setThemeState((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
+  }, []);
+
+  // // Memoize the context value
+  // const contextValue: ThemeContextType = useMemo(
+  //   () => ({
+  //     theme,
+  //     isInitialized,
+  //     toggleTheme,
+  //   }),
+  //   [theme, isInitialized, toggleTheme],
+  // );
+
+  const contextValue = {
+    theme,
+    isInitialized,
+    toggleTheme,
+  };
+
+  return (
+    <ThemeContext.Provider value={contextValue}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};