feat: polish on windows

packages/ark/src/components/note/preview/video.tsx

@@ -5,7 +5,6 @@ import {
 	MediaPlayButton,
 	MediaTimeDisplay,
 	MediaTimeRange,
-	MediaVolumeRange,
 } from "media-chrome/dist/react";
 
 export function VideoPreview({ url }: { url: string }) {
@@ -24,7 +23,6 @@ export function VideoPreview({ url }: { url: string }) {
 					<MediaTimeRange />
 					<MediaTimeDisplay showDuration />
 					<MediaMuteButton />
-					<MediaVolumeRange />
 				</MediaControlBar>
 			</MediaController>
 		</div>

packages/ark/src/components/user/followButton.tsx

@@ -13,6 +13,7 @@ export function UserFollowButton({
 	const [followed, setFollowed] = useState(false);
 
 	const toggleFollow = async () => {
+		setLoading(true);
 		if (!followed) {
 			const add = await ark.createContact(target);
 			if (add) setFollowed(true);
@@ -20,6 +21,7 @@ export function UserFollowButton({
 			const remove = await ark.deleteContact(target);
 			if (remove) setFollowed(false);
 		}
+		setLoading(false);
 	};
 
 	useEffect(() => {
@@ -37,7 +39,12 @@ export function UserFollowButton({
 	}, []);
 
 	return (
-		<button type="button" onClick={toggleFollow} className={cn("", className)}>
+		<button
+			type="button"
+			disabled={loading}
+			onClick={toggleFollow}
+			className={cn("", className)}
+		>
 			{loading ? (
 				<LoaderIcon className="size-4 animate-spin" />
 			) : followed ? (

packages/ark/src/components/user/name.tsx

@@ -8,7 +8,7 @@ export function UserName({ className }: { className?: string }) {
 		return (
 			<div
 				className={cn(
-					"h-4 w-20 bg-black/20 dark:bg-white/20 rounded animate-pulse",
+					"h-4 w-20 self-center bg-black/20 dark:bg-white/20 rounded animate-pulse",
 					className,
 				)}
 			/>