bump biome

biome.json

@@ -1,5 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/1.8.2/schema.json",
+	"$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
 	"files": {
 		"ignoreUnknown": true
 	},

package.json

@@ -34,7 +34,7 @@
 		"valibot": "0.35.0"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "^1.8.2",
+		"@biomejs/biome": "^1.8.3",
 		"@next/bundle-analyzer": "15.0.0-canary.44",
 		"@types/node": "^20.14.9",
 		"@types/react": "^18.3.3",

src/app/featured-guilds.tsx

@@ -61,7 +61,7 @@ function FeaturedGuild({ id, icon, name, memberCount, partner, verified }: Featu
 
 			<div className="flex flex-col">
 				<p
-					className="flex max-w-[70%] items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap font-bold text-lg md:max-w-64 sm:max-w-[16rem] lg:text-2xl sm:text-xl"
+					className="flex max-w-[70%] items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap font-bold text-lg sm:max-w-[16rem] sm:text-xl md:max-w-64 lg:text-2xl"
 					title={name}
 				>
 					<Image src={iconSrc} alt={alt} width={20} height={20} className="no-drag size-5 rounded-full" />

src/app/guilds/[guildId]/dashboard-menu.tsx

@@ -88,7 +88,7 @@ export function DashboardMenu({ guild, guilds }: DashboardMenuProps) {
 						"relative flex w-full rounded-lg px-3 py-2 font-bold",
 						guild.premium
 							? "border border-white text-white"
-							: "text-black after:absolute before:absolute after:inset-0 before:inset-1 after:z-10 after:rounded-lg before:rounded-lg after:bg-patreon before:bg-patreon before:blur-lg",
+							: "text-black before:absolute before:inset-1 before:rounded-lg before:bg-patreon before:blur-lg after:absolute after:inset-0 after:z-10 after:rounded-lg after:bg-patreon",
 					)}
 					href="/premium"
 				>

src/app/guilds/[guildId]/emojis/02-update-emoji-list.tsx

@@ -10,7 +10,7 @@ export function UpdateEmojiList() {
 		<div className="w-fit">
 			<TooltipAnchor store={tooltip}>
 				<button
-					className="flex w-fit items-center gap-2 rounded-lg bg-yellow px-2 py-1 font-semibold text-lg text-shadow-regular disabled:cursor-not-allowed disabled:select-none md:text-xl disabled:opacity-50"
+					className="flex w-fit items-center gap-2 rounded-lg bg-yellow px-2 py-1 font-semibold text-lg text-shadow-regular disabled:cursor-not-allowed disabled:select-none disabled:opacity-50 md:text-xl"
 					type="button"
 					disabled
 				>

src/app/guilds/[guildId]/import/being-import-button.tsx

@@ -11,7 +11,7 @@ export function BeginImportButton({ isRateLimited, importOngoing }: BeginImportB
 
 	const btn = (
 		<Confirmation
-			className="flex w-fit items-center justify-between gap-3 rounded-lg bg-green px-2 py-1 font-semibold text-lg text-shadow-regular transition-colors disabled:cursor-not-allowed disabled:bg-green/50 hover:bg-green/90 md:text-xl"
+			className="flex w-fit items-center justify-between gap-3 rounded-lg bg-green px-2 py-1 font-semibold text-lg text-shadow-regular transition-colors hover:bg-green/90 disabled:cursor-not-allowed disabled:bg-green/50 md:text-xl"
 			disabled={disabled}
 			buttonText={
 				<>

src/app/guilds/[guildId]/item-status.tsx

@@ -11,7 +11,7 @@ export function ItemStatus({ description, name, type }: ItemStatusProps) {
 					"bg-darker": type === "success",
 					"before:bg-[#ffe87c]": type === "warning",
 					"before:bg-red": type === "error",
-					"after:absolute before:absolute after:inset-0 before:inset-2 after:rounded-xl before:rounded-xl after:bg-darker before:blur-lg":
+					"before:absolute before:inset-2 before:rounded-xl before:blur-lg after:absolute after:inset-0 after:rounded-xl after:bg-darker":
 						type !== "success",
 				})}
 			>

src/app/guilds/[guildId]/leveling/15-default-rank-card-color.tsx

@@ -67,7 +67,7 @@ export function DefaultRankCardColor({ defaultAccentColour, defaultAccentType }:
 					</PopoverDisclosure>
 
 					<HexColorInput
-						className="w-52 rounded-lg bg-light-gray px-3 py-2 shadow-dim-inner md:w-64 disabled:opacity-50"
+						className="w-52 rounded-lg bg-light-gray px-3 py-2 shadow-dim-inner disabled:opacity-50 md:w-64"
 						color={color}
 						prefixed
 						onChange={setColor}

src/app/guilds/[guildId]/multipliers/create-multiplier-button.tsx

@@ -1,4 +1,6 @@
-"use client";
+import "client-only";
+// The reason for using "client-only" instead of "use client" is because of the function parameter in the component,
+// which triggers a warning since functions are not serializable.
 
 import { Tooltip, TooltipAnchor, useTooltipStore } from "@ariakit/react/tooltip";
 import type { PropsWithChildren } from "react";
@@ -20,7 +22,7 @@ export function CreateMultiplierButton({
 
 	const btn = (
 		<button
-			className="rounded-lg bg-green p-1 transition-colors disabled:cursor-not-allowed [&:not(:disabled)]:hover:bg-green/75 disabled:opacity-50"
+			className="rounded-lg bg-green p-1 transition-colors disabled:cursor-not-allowed disabled:opacity-50 [&:not(:disabled)]:hover:bg-green/75"
 			onClick={handleCreateMultiplier}
 			disabled={isButtonDisabled}
 			type="button"

src/app/levels/[entry]/01-leaderboard-table.tsx

@@ -14,7 +14,7 @@ export function LeaderboardTable({ data, guildId, isManager }: LeaderboardTableP
 			<div className="mb-4 flex gap-2 text-sm">
 				<div className="min-w-14 max-w-[15%]">Rank</div>
 				<div className="w-full">User</div>
-				<div className="hidden min-w-14 max-w-[15%] xs:block">Msgs</div>
+				<div className="xs:block hidden min-w-14 max-w-[15%]">Msgs</div>
 				<div className="hidden min-w-14 max-w-[15%] sm:block">Exp</div>
 				<div className="min-w-14 max-w-[15%]">Level</div>
 			</div>

src/app/levels/[entry]/02-leaderboard-table-row.tsx

@@ -54,7 +54,7 @@ export function LeaderboardTableRow({ guildId, row, isManager }: LeaderboardTabl
 					<p className="max-w-40 sm:max-w-96">{row.user.username}</p>
 				</div>
 
-				<div className="hidden min-w-14 max-w-[15%] text-center xs:block">{formatNumber(row.messageCount)}</div>
+				<div className="xs:block hidden min-w-14 max-w-[15%] text-center">{formatNumber(row.messageCount)}</div>
 
 				<div className="hidden min-w-14 max-w-[15%] text-center sm:block">{formatNumber(row.xp)}</div>
 

src/app/levels/[entry]/page.tsx

@@ -88,7 +88,7 @@ export default async function Leaderboard({ params: { entry }, searchParams }: L
 					<PageSelector amount={levels.length} entry={entry} page={page} />
 				</div>
 
-				<div className="flex w-full flex-col gap-5 px-4 md:w-96 sm:w-80 md:px-0">
+				<div className="flex w-full flex-col gap-5 px-4 sm:w-80 md:w-96 md:px-0">
 					<SidebarSection title="Role Rewards">
 						{roleRewards.length ? (
 							<div className="flex flex-col gap-4">

src/app/page.tsx

@@ -47,7 +47,7 @@ export default async function Homepage() {
 					<StartLevelingButton />
 
 					<Link
-						className="hidden w-72 items-center justify-center gap-5 rounded-lg border border-white px-3 py-2 font-bold text-3xl transition-colors xl:flex hover:bg-white hover:text-black"
+						className="hidden w-72 items-center justify-center gap-5 rounded-lg border border-white px-3 py-2 font-bold text-3xl transition-colors hover:bg-white hover:text-black xl:flex"
 						href="/guilds"
 					>
 						Dashboard
@@ -57,7 +57,7 @@ export default async function Homepage() {
 			</div>
 
 			<div className="flex w-full items-center justify-center border-white/50 border-t border-b">
-				<div className="grid w-full max-w-xl grid-cols-4 place-items-center px-4 py-2 xl:max-w-7xl md:px-8 xl:py-6">
+				<div className="grid w-full max-w-xl grid-cols-4 place-items-center px-4 py-2 md:px-8 xl:max-w-7xl xl:py-6">
 					<div className="flex flex-col xl:flex-row xl:gap-5">
 						<span className="font-extrabold text-2xl text-shadow-regular xl:text-6xl">
 							{formatNumber(guildCount, false)}

src/app/premium/plan.tsx

@@ -50,7 +50,7 @@ export function PremiumPlan({
 
 			<p className="mt-2 text-center text-white/75">{price === 0 ? "Billed never!" : "Billed recurringly"}</p>
 
-			<div className="mt-4 space-y-3 whitespace-normal text-sm text-white/75 tracking-tighter xl:whitespace-nowrap md:text-base">
+			<div className="mt-4 space-y-3 whitespace-normal text-sm text-white/75 tracking-tighter md:text-base xl:whitespace-nowrap">
 				<ul className="space-y-3">
 					{perks.map((perk) => (
 						<li key={perk} className="flex items-center gap-2">
@@ -88,7 +88,7 @@ export function PremiumPlan({
 
 			<DynamicLink
 				className={clsx(
-					"relative z-[1] mt-4 w-fit self-center rounded-lg px-6 py-2 text-center font-bold text-black text-xl before:absolute before:inset-0 before:z-[-1] before:rounded-lg before:bg-gradient-radial-hover before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300",
+					"relative z-[1] mt-4 w-fit self-center rounded-lg px-6 py-2 text-center font-bold text-black text-xl before:absolute before:inset-0 before:z-[-1] before:rounded-lg before:bg-gradient-radial-hover before:opacity-0 before:transition-opacity before:duration-300 hover:before:opacity-100",
 					tier === 1 ? "bg-gradient-lurkr-max" : tier === 2 ? "bg-gradient-lurkr-ultimate" : "bg-gradient-radial",
 					isCurrent ? "pointer-events-none opacity-50" : "cursor-pointer",
 				)}

src/components/Footer.tsx

@@ -13,7 +13,7 @@ export function Footer() {
 					</p>
 				</div>
 
-				<div className="flex flex-col justify-center gap-10 whitespace-nowrap xs:flex-row">
+				<div className="flex xs:flex-row flex-col justify-center gap-10 whitespace-nowrap">
 					<div>
 						<p className="mb-2 font-bold">About Us</p>
 

src/components/Toggle.tsx

@@ -9,7 +9,7 @@ export function Toggle({ id, initialValue, disabled }: ToggleProps) {
 				className="peer sr-only"
 				type="checkbox"
 			/>
-			<div className="peer h-6 w-11 rounded-full border-red-800 bg-red after:absolute after:top-0.5 after:left-[2px] after:size-5 peer-checked:after:translate-x-full after:rounded-full after:border after:border-gray-300 peer-checked:after:border-white after:bg-white peer-checked:bg-green after:transition-all" />
+			<div className="peer h-6 w-11 rounded-full border-red-800 bg-red after:absolute after:top-0.5 after:left-[2px] after:size-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all peer-checked:bg-green peer-checked:after:translate-x-full peer-checked:after:border-white" />
 		</label>
 	);
 }

src/components/dashboard/Radio.tsx

@@ -11,7 +11,7 @@ export function Radio({
 	return (
 		<AriakitRadio
 			className={clsx(
-				"grid size-6 appearance-none place-content-center rounded-full bg-white before:size-[10px] before:scale-100 checked:before:scale-100 before:rounded-full checked:border-8 checked:border-primary checked:before:shadow-[inset_1em_1em_white] before:duration-150 before:ease-in-out",
+				"grid size-6 appearance-none place-content-center rounded-full bg-white before:size-[10px] before:scale-100 before:rounded-full before:duration-150 before:ease-in-out checked:border-8 checked:border-primary checked:before:scale-100 checked:before:shadow-[inset_1em_1em_white]",
 				rightMargin ? "mr-2" : "ml-4",
 			)}
 			{...props}

src/components/dashboard/Slider.tsx

@@ -13,7 +13,7 @@ export function Slider({ defaultValue, id, max, min, step, steps, mobileStepsToH
 			className={clsx(
 				"h-2.5 w-px justify-center bg-white leading-10",
 				// The back and forward with the hidden class is due to the aside menu appearing on the md: breakpoint
-				mobileStepsToHide?.includes(idx) ? "hidden lg:flex xs:flex md:hidden" : "flex",
+				mobileStepsToHide?.includes(idx) ? "xs:flex hidden md:hidden lg:flex" : "flex",
 			)}
 		>
 			{step}
@@ -40,7 +40,7 @@ export function Slider({ defaultValue, id, max, min, step, steps, mobileStepsToH
 		<div className="mb-3 flex max-w-lg items-center gap-4 px-2.5">
 			<div className="flex-1">
 				<input
-					className="h-1.5 w-full cursor-pointer appearance-none rounded-2xl outline-none slider-thumb:size-4 slider-thumb:appearance-none slider-thumb:rounded-full slider-thumb:border-none slider-thumb:bg-primary"
+					className="slider-thumb:size-4 h-1.5 w-full cursor-pointer appearance-none slider-thumb:appearance-none rounded-2xl slider-thumb:rounded-full slider-thumb:border-none slider-thumb:bg-primary outline-none"
 					ref={ref}
 					type="range"
 					min={min}