state

Author: izadoesdev

apps/dashboard/app/(main)/websites/[id]/_components/tabs/settings-tab.tsx

@@ -11,6 +11,7 @@ import {
 	FileCodeIcon,
 	WarningCircleIcon,
 } from '@phosphor-icons/react';
+import { useAtom } from 'jotai';
 import { useCallback, useEffect, useState } from 'react';
 import { codeToHtml } from 'shiki';
 import { toast } from 'sonner';
@@ -26,14 +27,16 @@ import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { trpc } from '@/lib/trpc';
+import {
+	toggleTrackingOptionAtom,
+	trackingOptionsAtom,
+} from '@/stores/jotai/filterAtoms';
 import {
 	generateNpmCode,
 	generateNpmComponentCode,
 	generateScriptTag,
 } from '../utils/code-generators';
 
-import { RECOMMENDED_DEFAULTS } from '../utils/tracking-defaults';
-import { toggleTrackingOption } from '../utils/tracking-helpers';
 import type { TrackingOptions, WebsiteDataTabProps } from '../utils/types';
 
 const CodeBlock = ({
@@ -91,25 +94,29 @@ const CodeBlock = ({
 			)}
 			<div className="relative">
 				<div
-					className='overflow-hidden rounded-lg border border-sidebar-border bg-sidebar/40 p-6 text-sm leading-relaxed [&_pre]:!bg-transparent [&_code]:!bg-transparent [&_*]:!font-mono'
+					className="[&_pre]:!bg-transparent [&_code]:!bg-transparent [&_*]:!font-mono overflow-hidden rounded-lg border border-sidebar-border bg-sidebar/40 p-6 text-sm leading-relaxed"
 					// biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki generates safe HTML
 					dangerouslySetInnerHTML={{ __html: highlightedCode }}
-					style={{ 
-						fontSize: '14px', 
-						lineHeight: '1.6', 
-						fontFamily: 'var(--font-geist-mono), ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
+					style={{
+						fontSize: '14px',
+						lineHeight: '1.6',
+						fontFamily:
+							'var(--font-geist-mono), ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
 					}}
 				/>
 				<Button
-					className='absolute top-2 right-2 h-6 w-6 rounded hover:bg-background/50 border-0 shadow-none transition-colors duration-200'
+					className="absolute top-2 right-2 h-6 w-6 rounded border-0 shadow-none transition-colors duration-200 hover:bg-background/50"
 					onClick={onCopy}
 					size="icon"
 					variant="ghost"
 				>
 					{copied ? (
 						<CheckIcon className="h-3.5 w-3.5 text-green-500" weight="bold" />
 					) : (
-						<ClipboardIcon className="h-3.5 w-3.5 text-muted-foreground hover:text-foreground" weight="regular" />
+						<ClipboardIcon
+							className="h-3.5 w-3.5 text-muted-foreground hover:text-foreground"
+							weight="regular"
+						/>
 					)}
 				</Button>
 			</div>
@@ -122,8 +129,7 @@ export function WebsiteTrackingSetupTab({ websiteId }: WebsiteDataTabProps) {
 	const [installMethod, setInstallMethod] = useState<'script' | 'npm'>(
 		'script'
 	);
-	const [trackingOptions, setTrackingOptions] =
-		useState<TrackingOptions>(RECOMMENDED_DEFAULTS);
+	const [trackingOptions] = useAtom(trackingOptionsAtom);
 
 	const trackingCode = generateScriptTag(websiteId, trackingOptions);
 	const npmCode = generateNpmCode(websiteId, trackingOptions);
@@ -135,8 +141,9 @@ export function WebsiteTrackingSetupTab({ websiteId }: WebsiteDataTabProps) {
 		setTimeout(() => setCopiedBlockId(null), 2000);
 	};
 
+	const [, toggleTrackingOptionAction] = useAtom(toggleTrackingOptionAtom);
 	const handleToggleOption = (option: keyof TrackingOptions) => {
-		setTrackingOptions((prev) => toggleTrackingOption(prev, option));
+		toggleTrackingOptionAction(option);
 	};
 
 	const utils = trpc.useUtils();
@@ -173,23 +180,29 @@ export function WebsiteTrackingSetupTab({ websiteId }: WebsiteDataTabProps) {
 				<div className="flex items-center justify-between p-4">
 					<div className="flex items-center gap-3">
 						<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/15 dark:bg-primary/20">
-							<WarningCircleIcon className="h-4 w-4 text-primary" weight="duotone" />
+							<WarningCircleIcon
+								className="h-4 w-4 text-primary"
+								weight="duotone"
+							/>
 						</div>
 						<div className="flex flex-col gap-0.5">
 							<span className="font-medium text-sm">Tracking Not Setup</span>
-							<span className="text-muted-foreground text-xs font-normal">
+							<span className="font-normal text-muted-foreground text-xs">
 								Install the tracking script to start collecting data
 							</span>
 						</div>
 					</div>
 					<Button
 						aria-label="Refresh tracking status"
-						className="h-7 w-7 rounded-md hover:bg-background/20 border-0 shadow-none hover:shadow-sm transition-all duration-200"
+						className="h-7 w-7 rounded-md border-0 shadow-none transition-all duration-200 hover:bg-background/20 hover:shadow-sm"
 						onClick={handleRefresh}
 						size="icon"
 						variant="ghost"
 					>
-						<ArrowClockwiseIcon className="h-3.5 w-3.5 text-primary/70 hover:text-primary" weight="fill" />
+						<ArrowClockwiseIcon
+							className="h-3.5 w-3.5 text-primary/70 hover:text-primary"
+							weight="fill"
+						/>
 					</Button>
 				</div>
 			</Card>

apps/dashboard/app/(main)/websites/[id]/_components/tabs/tracking-setup-tab.tsx

@@ -85,12 +85,7 @@ function WebsiteDetailsPage() {
 
 	const { dateRange } = useDateFilters();
 
-	const {
-		data,
-		isLoading,
-		isError,
-		refetch: refetchWebsiteData,
-	} = useWebsite(id as string);
+	const { data, isLoading, isError } = useWebsite(id as string);
 
 	const { isTrackingSetup } = useTrackingSetup(id as string);
 
@@ -120,7 +115,6 @@ function WebsiteDetailsPage() {
 				websiteId: id as string,
 				dateRange,
 				websiteData: data,
-				onWebsiteUpdated: refetchWebsiteData,
 			};
 
 			const tabProps: FullTabProps = {
@@ -161,7 +155,6 @@ function WebsiteDetailsPage() {
 			data,
 			isRefreshing,
 			setIsRefreshing,
-			refetchWebsiteData,
 			selectedFilters,
 			addFilter,
 		]

apps/dashboard/app/(main)/websites/[id]/page.tsx

@@ -28,6 +28,13 @@ import { Input } from '@/components/ui/input';
 import type { CreateWebsiteData, Website } from '@/hooks/use-websites';
 import { useCreateWebsite, useUpdateWebsite } from '@/hooks/use-websites';
 
+interface UpdateWebsiteInput {
+	id: string;
+	name: string;
+	domain?: string;
+	isPublic?: boolean;
+}
+
 const domainRegex =
 	/^(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,63}$/;
 const wwwRegex = /^www\./;
@@ -78,6 +85,38 @@ export function WebsiteDialog({
 		}
 	}, [website, form]);
 
+	const getErrorMessage = (error: unknown, isEditingMode: boolean): string => {
+		const defaultMessage = `Failed to ${isEditingMode ? 'update' : 'create'} website.`;
+
+		// Type guard for TRPC error
+		const trpcError = error as {
+			data?: { code?: string };
+			message?: string;
+		};
+
+		if (trpcError?.data?.code) {
+			switch (trpcError.data.code) {
+				case 'CONFLICT':
+					return 'A website with this domain already exists.';
+				case 'FORBIDDEN':
+					return (
+						trpcError.message ||
+						'You do not have permission to perform this action.'
+					);
+				case 'UNAUTHORIZED':
+					return 'You must be logged in to perform this action.';
+				case 'BAD_REQUEST':
+					return (
+						trpcError.message || 'Invalid request. Please check your input.'
+					);
+				default:
+					return trpcError.message || defaultMessage;
+			}
+		}
+
+		return trpcError?.message || defaultMessage;
+	};
+
 	const handleSubmit = form.handleSubmit(async (formData) => {
 		const submissionData: CreateWebsiteData = {
 			name: formData.name,
@@ -87,10 +126,12 @@ export function WebsiteDialog({
 
 		try {
 			if (isEditing) {
-				const result = await updateWebsiteMutation.mutateAsync({
+				const updateData: UpdateWebsiteInput = {
 					id: website.id,
 					name: formData.name,
-				});
+					domain: formData.domain,
+				};
+				const result = await updateWebsiteMutation.mutateAsync(updateData);
 				if (onSave) {
 					onSave(result);
 				}
@@ -103,33 +144,8 @@ export function WebsiteDialog({
 				toast.success('Website created successfully!');
 			}
 			onOpenChange(false);
-		} catch (error: any) {
-			let message = `Failed to ${isEditing ? 'update' : 'create'} website.`;
-
-			if (error?.data?.code) {
-				switch (error.data.code) {
-					case 'CONFLICT':
-						message = 'A website with this domain already exists.';
-						break;
-					case 'FORBIDDEN':
-						message =
-							error.message ||
-							'You do not have permission to perform this action.';
-						break;
-					case 'UNAUTHORIZED':
-						message = 'You must be logged in to perform this action.';
-						break;
-					case 'BAD_REQUEST':
-						message =
-							error.message || 'Invalid request. Please check your input.';
-						break;
-					default:
-						message = error.message || message;
-				}
-			} else if (error?.message) {
-				message = error.message;
-			}
-
+		} catch (error: unknown) {
+			const message = getErrorMessage(error, isEditing);
 			toast.error(message);
 		}
 	});

apps/dashboard/components/website-dialog.tsx

@@ -95,6 +95,35 @@ export function useUpdateWebsite() {
 	});
 }
 
+export function useTogglePublicWebsite() {
+	const utils = trpc.useUtils();
+	return trpc.websites.togglePublic.useMutation({
+		onSuccess: (updatedWebsite) => {
+			const getByIdKey = { id: updatedWebsite.id };
+			const listKey = {
+				organizationId: updatedWebsite.organizationId ?? undefined,
+			};
+
+			utils.websites.listWithCharts.setData(listKey, (old) => {
+				if (!old) {
+					return old;
+				}
+				return {
+					...old,
+					websites: old.websites.map((website) =>
+						website.id === updatedWebsite.id ? updatedWebsite : website
+					),
+				};
+			});
+
+			utils.websites.getById.setData(getByIdKey, updatedWebsite);
+		},
+		onError: (error) => {
+			console.error('Failed to toggle website privacy:', error);
+		},
+	});
+}
+
 export function useDeleteWebsite() {
 	const utils = trpc.useUtils();
 	return trpc.websites.delete.useMutation({

apps/dashboard/hooks/use-websites.ts

@@ -1,6 +1,13 @@
 import type { DynamicQueryFilter } from '@databuddy/shared';
 import dayjs from 'dayjs';
 import { atom } from 'jotai';
+import { RECOMMENDED_DEFAULTS } from '../../app/(main)/websites/[id]/_components/utils/tracking-defaults';
+import {
+	enableAllAdvancedTracking,
+	enableAllBasicTracking,
+	enableAllOptimization,
+} from '../../app/(main)/websites/[id]/_components/utils/tracking-helpers';
+import type { TrackingOptions } from '../../app/(main)/websites/[id]/_components/utils/types';
 // Consider adding nanoid for unique ID generation for complex filters
 // import { nanoid } from 'nanoid';
 
@@ -324,3 +331,65 @@ export const removeDynamicFilterAtom = atom(
 export const clearDynamicFiltersAtom = atom(null, (_get, set) => {
 	set(dynamicQueryFiltersAtom, []);
 });
+
+// --- Tracking Options ---
+/**
+ * Atom for website tracking options configuration.
+ * Shared across settings and tracking setup tabs.
+ */
+export const trackingOptionsAtom = atom<TrackingOptions>(RECOMMENDED_DEFAULTS);
+
+/**
+ * Action atom for updating tracking options.
+ */
+export const setTrackingOptionsAtom = atom(
+	null,
+	(_get, set, newOptions: TrackingOptions) => {
+		set(trackingOptionsAtom, newOptions);
+	}
+);
+
+/**
+ * Action atom for toggling a specific tracking option.
+ */
+export const toggleTrackingOptionAtom = atom(
+	null,
+	(get, set, option: keyof TrackingOptions) => {
+		const current = get(trackingOptionsAtom);
+		set(trackingOptionsAtom, {
+			...current,
+			[option]: !current[option],
+		});
+	}
+);
+
+/**
+ * Action atom for resetting tracking options to defaults.
+ */
+export const resetTrackingOptionsAtom = atom(null, (_get, set) => {
+	set(trackingOptionsAtom, RECOMMENDED_DEFAULTS);
+});
+
+/**
+ * Action atom for enabling all basic tracking options.
+ */
+export const enableAllBasicTrackingAtom = atom(null, (get, set) => {
+	const current = get(trackingOptionsAtom);
+	set(trackingOptionsAtom, enableAllBasicTracking(current));
+});
+
+/**
+ * Action atom for enabling all advanced tracking options.
+ */
+export const enableAllAdvancedTrackingAtom = atom(null, (get, set) => {
+	const current = get(trackingOptionsAtom);
+	set(trackingOptionsAtom, enableAllAdvancedTracking(current));
+});
+
+/**
+ * Action atom for enabling all optimization options.
+ */
+export const enableAllOptimizationAtom = atom(null, (get, set) => {
+	const current = get(trackingOptionsAtom);
+	set(trackingOptionsAtom, enableAllOptimization(current));
+});