Format files due to update to prettier and eslint (#2667)

apps/landing/src/app/Footer.tsx

@@ -68,7 +68,7 @@ export async function Footer() {
 				</div>
 
 				<div className="col-span-1 flex flex-col space-y-2">
-					<h1 className="mb-1 text-xs font-bold uppercase ">About</h1>
+					<h1 className="mb-1 text-xs font-bold uppercase">About</h1>
 
 					<FooterLink link="/team">Team</FooterLink>
 					<FooterLink link="/docs/product/resources/faq">FAQ</FooterLink>
@@ -104,7 +104,7 @@ export async function Footer() {
 					</div>
 				</div>
 				<div className="col-span-1 flex flex-col space-y-2">
-					<h1 className="mb-1 text-xs font-bold uppercase ">Developers</h1>
+					<h1 className="mb-1 text-xs font-bold uppercase">Developers</h1>
 					<FooterLink link="/docs/product/getting-started/introduction">
 						Documentation
 					</FooterLink>
@@ -122,7 +122,7 @@ export async function Footer() {
 					</div>
 				</div>
 				<div className="col-span-1 flex flex-col space-y-2">
-					<h1 className="mb-1 text-xs font-bold uppercase ">Org</h1>
+					<h1 className="mb-1 text-xs font-bold uppercase">Org</h1>
 					<FooterLink blank link="https://opencollective.com/spacedrive">
 						Open Collective
 					</FooterLink>

apps/landing/src/app/NavBar/MobileDropdown.tsx

@@ -20,7 +20,7 @@ export function MobileDropdown() {
 		<Dropdown.Root
 			button={
 				<Button aria-label="mobile-menu" className="hover:!bg-transparent" size="icon">
-					<DotsThreeVertical weight="bold" className="size-6 " />
+					<DotsThreeVertical weight="bold" className="size-6" />
 				</Button>
 			}
 			className="right-4 top-2 block text-white lg:hidden"

apps/landing/src/app/NavBar/index.tsx

@@ -16,7 +16,7 @@ export function NavBar() {
 					<h3 className="text-xl font-bold text-white">Spacedrive</h3>
 				</Link>
 
-				<div className="m-auto hidden space-x-4 text-white lg:block ">
+				<div className="m-auto hidden space-x-4 text-white lg:block">
 					<NavLink link="/roadmap">Roadmap</NavLink>
 					<NavLink link="/team">Team</NavLink>
 					{/* <NavLink link="/pricing">Pricing</NavLink> */}

apps/landing/src/app/NewBanner.tsx

@@ -17,11 +17,11 @@ export function NewBanner(props: NewBannerProps) {
 			href={href ?? '/'}
 			className={clsx(
 				props.className,
-				'news-banner-border-gradient news-banner-glow animation-delay-1 fade-in-whats-new z-10 mb-5 flex w-fit flex-row rounded-full bg-black/10 px-5 py-2.5 text-xs backdrop-blur-md  transition hover:bg-purple-900/20 sm:w-auto sm:text-base'
+				'news-banner-border-gradient news-banner-glow animation-delay-1 fade-in-whats-new z-10 mb-5 flex w-fit flex-row rounded-full bg-black/10 px-5 py-2.5 text-xs backdrop-blur-md transition hover:bg-purple-900/20 sm:w-auto sm:text-base'
 			)}
 		>
 			<div className="flex items-center gap-2">
-				<Newspaper weight="fill" className="text-white " size={20} />
+				<Newspaper weight="fill" className="text-white" size={20} />
 				<p className="font-regular truncate text-white">{headline}</p>
 			</div>
 			{link && (

apps/landing/src/app/blog/[slug]/page.tsx

@@ -49,12 +49,12 @@ export default function Page({ params }: Props) {
 					<Image
 						src={post.image}
 						alt={post.imageAlt ?? ''}
-						className=" mt-8 rounded-xl will-change-transform fade-in"
+						className="mt-8 rounded-xl will-change-transform fade-in"
 						height={400}
 						width={900}
 					/>
 				</figure>
-				<section className="flex flex-wrap gap-4 rounded-xl px-4 ">
+				<section className="flex flex-wrap gap-4 rounded-xl px-4">
 					<div className="w-full grow">
 						<h1 className="animation-delay-1 m-0 text-2xl leading-snug will-change-transform fade-in sm:text-4xl sm:leading-normal">
 							{post.title}

apps/landing/src/app/docs/Sidebar/Categories.tsx

@@ -28,7 +28,7 @@ export function Doc(props: { slug: string; title?: string; url: string }) {
 				href={props.url}
 				className={clsx(
 					'w-full rounded px-3 py-1 text-[14px] font-normal text-gray-350 no-underline hover:text-gray-50',
-					active && '!font-medium !text-white '
+					active && '!font-medium !text-white'
 				)}
 			>
 				{props.title}

apps/landing/src/app/not-found.tsx

@@ -14,7 +14,7 @@ export default function NotFound() {
 
 	return (
 		<Markdown classNames="flex w-full justify-center">
-			<div className="m-auto flex flex-col items-center ">
+			<div className="m-auto flex flex-col items-center">
 				<div className="h-32" />
 				<SmileyXEyes className="mb-3 size-44" />
 				<h1 className="mb-2 text-center">
@@ -23,7 +23,7 @@ export default function NotFound() {
 				<p>In other words, thats a 404.</p>
 				<div className="flex flex-wrap justify-center">
 					<Button
-						className="mr-3 mt-2 cursor-pointer "
+						className="mr-3 mt-2 cursor-pointer"
 						variant="gray"
 						onClick={() => router.back()}
 					>

apps/landing/src/app/pricing/Cards.tsx

@@ -15,10 +15,7 @@ export function Cards() {
 				<Switch checked={toggle} onCheckedChange={setToggle} size="lg" />
 				<p className="text-sm font-medium text-white">Yearly</p>
 			</div>
-			<div
-				className="fade-in-heading animation-delay-2 mx-auto mb-[200px] mt-[75px] flex
-				 w-full max-w-[1000px] flex-col items-center justify-center gap-10 px-2 md:flex-row"
-			>
+			<div className="fade-in-heading animation-delay-2 mx-auto mb-[200px] mt-[75px] flex w-full max-w-[1000px] flex-col items-center justify-center gap-10 px-2 md:flex-row">
 				<PackageCard
 					features={[
 						'lorem ipsum text',
@@ -90,10 +87,7 @@ const PackageCard = ({ features, name, price, toggle, subTitle }: Props) => {
 			)}
 		>
 			{name === 'Pro' && (
-				<div
-					className="pro-card-border-gradient popular-shadow absolute-horizontal-center top-[-12px]
-				 rounded-[6px] bg-[#0E0D1B] px-5 py-1"
-				>
+				<div className="pro-card-border-gradient popular-shadow absolute-horizontal-center top-[-12px] rounded-[6px] bg-[#0E0D1B] px-5 py-1">
 					<p className="text-[10px] font-medium uppercase text-white">Popular</p>
 				</div>
 			)}

apps/landing/src/app/pricing/page.tsx

@@ -22,10 +22,7 @@ export default function PricingPage() {
 				src="/images/misc/header-gradient.webp"
 			/>
 			<div className="z-5 relative mt-48">
-				<h1
-					className="fade-in-heading mb-3 bg-gradient-to-r from-white from-40% to-indigo-400 to-60% bg-clip-text px-2 text-center text-4xl
-				font-bold leading-tight text-transparent"
-				>
+				<h1 className="fade-in-heading mb-3 bg-gradient-to-r from-white from-40% to-indigo-400 to-60% bg-clip-text px-2 text-center text-4xl font-bold leading-tight text-transparent">
 					Pricing
 				</h1>
 				<p className="animation-delay-1 fade-in-heading text-md leading-2 z-30 mx-auto mb-8 mt-1 max-w-2xl px-2 text-center text-gray-450 lg:text-lg lg:leading-8">

apps/landing/src/app/roadmap/page.tsx

@@ -40,7 +40,7 @@ export default function Page() {
 								)}
 								<h3
 									className={
-										`m-0 hidden text-right lg:block `
+										`m-0 hidden text-right lg:block`
 										// (i === 0 ? '-translate-y-1/4' : '-translate-y-1/2')
 									}
 								>

apps/landing/src/app/team/page.tsx

@@ -15,15 +15,15 @@ export default function Page() {
 		<Markdown articleClassNames="mx-auto mt-32 prose-a:text-white">
 			<div className="team-page relative mx-auto">
 				<div className="relative z-10">
-					<h1 className="fade-in-heading text-5xl leading-tight sm:leading-snug ">
+					<h1 className="fade-in-heading text-5xl leading-tight sm:leading-snug">
 						We believe file management should be{' '}
 						<span className="title-gradient">universal</span>.
 					</h1>
-					<p className="animation-delay-2 fade-in-heading text-white/50 ">
+					<p className="animation-delay-2 fade-in-heading text-white/50">
 						Your priceless personal data shouldn't be stuck in a device ecosystem. It
 						should be OS agnostic, permanent and owned by you.
 					</p>
-					<p className="animation-delay-2 fade-in-heading text-white/50 ">
+					<p className="animation-delay-2 fade-in-heading text-white/50">
 						The data we create daily is our legacy—that will long outlive us. Open
 						source technology is the only way to ensure we retain absolute control over
 						the files that define our lives, at unlimited scale.
@@ -36,7 +36,7 @@ export default function Page() {
 						Read more
 					</Link>
 					<div className="fade-in-heading animation-delay-5">
-						<h2 className="mt-10 text-2xl leading-relaxed sm:mt-20 ">Meet the team</h2>
+						<h2 className="mt-10 text-2xl leading-relaxed sm:mt-20">Meet the team</h2>
 						<div className="my-10 grid grid-cols-2 gap-x-5 gap-y-10 xs:grid-cols-3 sm:grid-cols-4">
 							{teamMembers.map((member) => (
 								<TeamMember key={member.name} {...member} />
@@ -54,13 +54,10 @@ export default function Page() {
 							</Link>{' '}
 							on GitHub.
 						</p>
-						<h2
-							id="investors"
-							className="mb-2 mt-10 text-2xl leading-relaxed sm:mt-20 "
-						>
+						<h2 id="investors" className="mb-2 mt-10 text-2xl leading-relaxed sm:mt-20">
 							Our investors
 						</h2>
-						<p className="text-sm text-gray-400 ">
+						<p className="text-sm text-gray-400">
 							We're backed by some of the greatest leaders in the technology industry.
 						</p>
 						<div className="my-10 grid grid-cols-3 gap-x-5 gap-y-10 sm:grid-cols-5">

apps/landing/src/components/AccessData.tsx

@@ -13,10 +13,7 @@ const AccessData = () => {
 				src="/images/misc/globe.webp"
 			/>
 			<div className="relative">
-				<h1
-					className="bg-gradient-to-r from-white to-violet-400 bg-clip-text text-center
-						 text-[25px] font-bold text-transparent md:text-[30px]"
-				>
+				<h1 className="bg-gradient-to-r from-white to-violet-400 bg-clip-text text-center text-[25px] font-bold text-transparent md:text-[30px]">
 					Access data from anywhere
 				</h1>
 				<p className="mx-auto w-full max-w-[800px] text-center text-sm text-ink-faint md:text-lg">

apps/landing/src/components/BentoBoxes.tsx

@@ -51,10 +51,7 @@ const BentoBoxes = () => {
 		return 50;
 	}, [width]);
 	return (
-		<MagicContainer
-			className="flex h-fit w-full max-w-7xl auto-rows-[420px] flex-col gap-4
-		 lg:grid lg:grid-cols-6"
-		>
+		<MagicContainer className="flex h-fit w-full max-w-7xl auto-rows-[420px] flex-col gap-4 lg:grid lg:grid-cols-6">
 			<BentoBox colSpan={4} className="p-6" bgUrl="images/bento/encrypt-bg.webp">
 				<div className="bento-radial-gradient-fade absolute right-0 top-0 z-20 size-full" />
 				<div className="relative z-20">
@@ -173,8 +170,7 @@ const BentoBoxes = () => {
 					<Link target="_blank" href="https://github.com/spacedriveapp/spacedrive">
 						<Button
 							size="lg"
-							className="contribute-drop-shadow mx-auto mb-4 block cursor-pointer border-0
-							 bg-gradient-to-r from-emerald-400 to-cyan-500 text-sm text-black !transition-all !duration-200"
+							className="contribute-drop-shadow mx-auto mb-4 block cursor-pointer border-0 bg-gradient-to-r from-emerald-400 to-cyan-500 text-sm text-black !transition-all !duration-200"
 						>
 							{`<>`} Contribute
 						</Button>
@@ -196,15 +192,11 @@ const BentoBoxes = () => {
 							'--floatduration': '4s'
 						} as React.CSSProperties
 					}
-					className="floating mx-auto flex
-						h-[300px] w-full max-w-[500px]"
+					className="floating mx-auto flex h-[300px] w-full max-w-[500px]"
 				>
 					<PlatformsArt />
 				</div>
-				<div
-					className="absolute-center h-[120px] w-[300px] bg-gradient-to-r
-					from-fuchsia-500 from-10% to-blue-500 opacity-10 blur-[175px]"
-				/>
+				<div className="absolute-center h-[120px] w-[300px] bg-gradient-to-r from-fuchsia-500 from-10% to-blue-500 opacity-10 blur-[175px]" />
 				<div className="relative z-30">
 					<Heading>Cross platform</Heading>
 					<Text className="mx-auto max-w-[400px]">

apps/landing/src/components/CloudStorage.tsx

@@ -16,7 +16,7 @@ const CloudStorage = () => {
 		<div
 			ref={ref}
 			className={clsx(
-				'relative mt-[200px] w-full max-w-[960px] opacity-0  md:mt-[250px]',
+				'relative mt-[200px] w-full max-w-[960px] opacity-0 md:mt-[250px]',
 				isInView && 'fade-in-heading'
 			)}
 		>
@@ -57,16 +57,10 @@ const CloudStorage = () => {
 					/>
 				</div>
 			</div>
-			<h1
-				className="mt-[50px] bg-gradient-to-r from-white to-blue-400 bg-clip-text text-center text-[30px] font-bold
-						 leading-10 text-transparent"
-			>
+			<h1 className="mt-[50px] bg-gradient-to-r from-white to-blue-400 bg-clip-text text-center text-[30px] font-bold leading-10 text-transparent">
 				Coming soon
 			</h1>
-			<h1
-				className="bg-gradient-to-r from-white to-blue-300 bg-clip-text
-						  text-center text-[20px] text-transparent md:text-[40px] md:leading-[50px]"
-			>
+			<h1 className="bg-gradient-to-r from-white to-blue-300 bg-clip-text text-center text-[20px] text-transparent md:text-[40px] md:leading-[50px]">
 				Combine all storage locations & clouds
 			</h1>
 		</div>
@@ -82,10 +76,7 @@ interface Props {
 
 const CloudCard = ({ logoUrl, title, imageWidth = 70, children }: Props) => {
 	return (
-		<div
-			className="flex w-full flex-col justify-center rounded-md border border-[#161524]
-			 bg-[#080710]/30 py-6 text-center backdrop-blur-sm transition-all duration-200 hover:brightness-125 md:h-[165px] md:basis-[30%]"
-		>
+		<div className="flex w-full flex-col justify-center rounded-md border border-[#161524] bg-[#080710]/30 py-6 text-center backdrop-blur-sm transition-all duration-200 hover:brightness-125 md:h-[165px] md:basis-[30%]">
 			{children}
 			<div className="relative z-10">
 				<Image

apps/landing/src/components/NavBar.tsx

@@ -65,7 +65,7 @@ export default function NavBar() {
 					<h3 className="text-xl font-bold text-white">Spacedrive</h3>
 				</Link>
 
-				<div className="m-auto hidden space-x-4 text-white lg:block ">
+				<div className="m-auto hidden space-x-4 text-white lg:block">
 					<NavLink link="/roadmap">Roadmap</NavLink>
 					<NavLink link="/team">Team</NavLink>
 					{/* <NavLink link="/pricing">Pricing</NavLink> */}
@@ -88,7 +88,7 @@ export default function NavBar() {
 							className="ml-[140px] hover:!bg-transparent"
 							size="icon"
 						>
-							<DotsThreeVertical weight="bold" className="size-6 " />
+							<DotsThreeVertical weight="bold" className="size-6" />
 						</Button>
 					}
 					className="right-4 top-2 block h-6 w-44 text-white lg:hidden"

apps/landing/src/components/NewBanner.tsx

@@ -17,11 +17,11 @@ const NewBanner: React.FC<NewBannerProps> = (props) => {
 			onClick={() => (window.location.href = href)}
 			className={clsx(
 				props.className,
-				'news-banner-border-gradient news-banner-glow animation-delay-1 fade-in-whats-new z-10 mb-5 flex w-fit cursor-pointer flex-row rounded-full bg-black/10 px-5 py-2.5 text-xs backdrop-blur-md  transition hover:bg-purple-900/20 sm:w-auto sm:text-base'
+				'news-banner-border-gradient news-banner-glow animation-delay-1 fade-in-whats-new z-10 mb-5 flex w-fit cursor-pointer flex-row rounded-full bg-black/10 px-5 py-2.5 text-xs backdrop-blur-md transition hover:bg-purple-900/20 sm:w-auto sm:text-base'
 			)}
 		>
 			<div className="flex items-center gap-2">
-				<Newspaper weight="fill" className="text-white " size={20} />
+				<Newspaper weight="fill" className="text-white" size={20} />
 				<p className="font-regular truncate text-white">{headline}</p>
 			</div>
 			<div role="separator" className="h-22 mx-4 w-px bg-zinc-700/70" />

apps/landing/src/components/WormHole.tsx

@@ -6,14 +6,8 @@ import React from 'react';
 
 const WormHole = () => {
 	return (
-		<div
-			className="relative mb-[225px] mt-[240px] flex w-full max-w-[800px] items-center justify-center sm:mb-[220px]
-					 sm:mt-[250px] md:mb-[280px] md:mt-[340px] lg:my-[400px]"
-		>
-			<div
-				className="absolute top-[-150px] w-full max-w-[450px] rotate-[300deg] sm:top-[-200px]
-						 sm:max-w-[500px] md:top-[-200px] lg:top-auto lg:mr-[250px] lg:max-w-full lg:rotate-0"
-			>
+		<div className="relative mb-[225px] mt-[240px] flex w-full max-w-[800px] items-center justify-center sm:mb-[220px] sm:mt-[250px] md:mb-[280px] md:mt-[340px] lg:my-[400px]">
+			<div className="absolute top-[-150px] w-full max-w-[450px] rotate-[300deg] sm:top-[-200px] sm:max-w-[500px] md:top-[-200px] lg:top-auto lg:mr-[250px] lg:max-w-full lg:rotate-0">
 				<div className="absolute left-[200px] top-[50px] z-10 size-full">
 					<Image
 						width={30}
@@ -34,11 +28,7 @@ const WormHole = () => {
 						src="/images/icons/game.svg"
 					/>
 				</div>
-				<div
-					className="absolute top-[-100px] z-10
-				size-full sm:left-[200px]
-				sm:top-[10px]"
-				>
+				<div className="absolute top-[-100px] z-10 size-full sm:left-[200px] sm:top-[10px]">
 					<Image
 						width={40}
 						height={45}
@@ -48,11 +38,7 @@ const WormHole = () => {
 						src="/images/icons/image.svg"
 					/>
 				</div>
-				<div
-					className="absolute left-[120px] top-[-50px]
-				z-10 size-full sm:left-[200px]
-				sm:top-[-10px]"
-				>
+				<div className="absolute left-[120px] top-[-50px] z-10 size-full sm:left-[200px] sm:top-[-10px]">
 					<Image
 						width={40}
 						height={45}
@@ -62,10 +48,7 @@ const WormHole = () => {
 						src="/images/icons/lock.svg"
 					/>
 				</div>
-				<div
-					className="absolute left-[200px] top-[350px] z-10 size-full
-				 lg:left-[200px] lg:top-[300px]"
-				>
+				<div className="absolute left-[200px] top-[350px] z-10 size-full lg:left-[200px] lg:top-[300px]">
 					<Image
 						width={40}
 						height={45}
@@ -105,11 +88,7 @@ const WormHole = () => {
 						src="/images/icons/node.svg"
 					/>
 				</div>
-				<div
-					className="absolute
-					left-[60px] top-[-190px]
-				z-10 size-full sm:left-[50px] sm:top-[50px] lg:left-[200px] lg:top-[490px]"
-				>
+				<div className="absolute left-[60px] top-[-190px] z-10 size-full sm:left-[50px] sm:top-[50px] lg:left-[200px] lg:top-[490px]">
 					<Image
 						width={40}
 						height={45}
@@ -119,10 +98,7 @@ const WormHole = () => {
 						src="/images/icons/texturedmesh.png"
 					/>
 				</div>
-				<div
-					className="absolute left-[120px] top-[50px]
-				 z-10 size-full md:left-[200px] md:top-[350px]"
-				>
+				<div className="absolute left-[120px] top-[50px] z-10 size-full md:left-[200px] md:top-[350px]">
 					<Image
 						width={40}
 						height={45}