[ENG-1355] Telemetry docs (#1746)

* add privacy info to docs

* add "More info" button to onboarding privacy page

* add `infoUrl` option to `Setting` component to add relevant info

* Update privacy.tsx

* Update privacy.tsx

* urls

---------

Co-authored-by: ameer2468 <33054370+ameer2468@users.noreply.github.com>

docs/product/resources/privacy.mdx

@@ -1 +1,9 @@
 # Privacy
+
+We use [Plausible](https://plausible.io/) as our analytics host, due to their privacy-focused approach. This can be verified by reading what kind of data they collect, where their servers are hosted, which hosting providers they use, etc - all can be found [here](https://plausible.io/privacy-focused-web-analytics). They primarily use Hetzner-hosted servers for their infrastructure, which means all data collected falls under the EU's pretty strict privacy laws!
+
+We do have a "bare minimum" category of telemetry, and this is purely `ping` requests - this lets us know how many active users we have. A single ping request is sent every 4 minutes and 30 seconds, to ensure that we're not fighting with Plausible's 5 minute "user timeout" duration (so active users are always considered active). This equates to 320 rather small network requests over the course of a 24-hour period, and we are always looking for ways to better streamline this implementation.
+
+Optional telemetry consists of `pageview` events, as well as when a location, library, tag or anything similar was added/deleted/etc (a full list as of 2023-11-06 can be found [here](https://github.com/spacedriveapp/spacedrive/blob/a3f2ca10b6a260eec6ac1176f238732f9c37dd54/packages/client/src/hooks/usePlausible.tsx#L98-L107)). Page view events do _not_ contain any PII, and every UUID is removed before we ever receive any data - locations are sorted by the location ID, and that is an integer (we remove this also). A typical path that we receive looks like: `/:libraryId/location/:id/`. We can only see what page in the app you're viewing, and we remove anything that could possibly be used to identify users before it ever leaves their device. You may find a demo [here](https://plausible.io/plausible.io), which hopefully provides a bit of insight into the data that we receive.
+
+We additionally receive information about: whether or not the app is in debug mode, which core version the app is using, which commit hash is being used (in case the version doesn't help), which platform is being used, etc.

interface/app/$libraryId/settings/Setting.tsx

@@ -2,6 +2,7 @@ import { Info } from '@phosphor-icons/react';
 import clsx from 'clsx';
 import { PropsWithChildren } from 'react';
 import { Tooltip } from '@sd/ui';
+import { usePlatform } from '~/util/Platform';
 
 interface Props {
 	title: string;
@@ -9,9 +10,12 @@ interface Props {
 	mini?: boolean;
 	className?: string;
 	toolTipLabel?: string | boolean;
+	infoUrl?: string;
 }
 
 export default ({ mini, ...props }: PropsWithChildren<Props>) => {
+	const platform = usePlatform();
+
 	if (typeof props.description === 'string')
 		props.description = <p className="mb-2 text-sm text-gray-400">{props.description}</p>;
 
@@ -22,7 +26,10 @@ export default ({ mini, ...props }: PropsWithChildren<Props>) => {
 					<h3 className="text-sm font-medium text-ink">{props.title}</h3>
 					{props.toolTipLabel && (
 						<Tooltip label={props.toolTipLabel as string}>
-							<Info size={15} />
+							<Info
+								onClick={() => props.infoUrl && platform.openLink(props.infoUrl)}
+								size={15}
+							/>
 						</Tooltip>
 					)}
 				</div>

interface/app/$libraryId/settings/client/privacy.tsx

@@ -12,13 +12,14 @@ export const Component = () => {
 			<Heading title="Privacy" description="" />
 			<Setting
 				mini
+				toolTipLabel="Learn more about telemetry"
+				infoUrl="https://www.spacedrive.com/docs/product/resources/privacy"
 				title="Share Additional Telemetry and Usage Data"
 				description="Toggle ON to provide developers with detailed usage and telemetry data to enhance the app. Toggle OFF to send only basic data: your activity status, app version, core version, and platform (e.g., mobile, web, or desktop)."
 			>
 				<Switch
 					checked={fullTelemetry}
 					onClick={() => (telemetryStore.shareFullTelemetry = !fullTelemetry)}
-					className="m-2 ml-4"
 					size="md"
 				/>
 			</Setting>

interface/app/onboarding/privacy.tsx

@@ -1,10 +1,13 @@
+import { Info, Question } from '@phosphor-icons/react';
 import { Button, Form, RadioGroupField } from '@sd/ui';
+import { usePlatform } from '~/util/Platform';
 
 import { OnboardingContainer, OnboardingDescription, OnboardingTitle } from './components';
 import { shareTelemetry, useOnboardingContext } from './context';
 
 export default function OnboardingPrivacy() {
 	const { forms, submit } = useOnboardingContext();
+	const platform = usePlatform();
 
 	const form = forms.useForm('privacy');
 
@@ -20,7 +23,7 @@ export default function OnboardingPrivacy() {
 					Spacedrive is built for privacy, that's why we're open source and local first.
 					So we'll make it very clear what data is shared with us.
 				</OnboardingDescription>
-				<div className="m-4">
+				<div className="m-6">
 					<RadioGroupField.Root {...form.register('shareTelemetry')}>
 						{shareTelemetry.options.map(({ value, heading, description }) => (
 							<RadioGroupField.Item key={value} value={value}>
@@ -29,8 +32,21 @@ export default function OnboardingPrivacy() {
 							</RadioGroupField.Item>
 						))}
 					</RadioGroupField.Root>
+					<Button
+						size="sm"
+						className="mx-auto mt-5 flex items-center justify-center gap-1 text-center"
+						variant="gray"
+						onClick={() => {
+							platform.openLink(
+								'https://www.spacedrive.com/docs/product/resources/privacy'
+							);
+						}}
+					>
+						<Info size={13} />
+						More info
+					</Button>
 				</div>
-				<Button type="submit" className="text-center" variant="accent" size="sm">
+				<Button type="submit" className="mt-5 text-center" variant="accent" size="sm">
 					Continue
 				</Button>
 			</OnboardingContainer>