chore(deps): upgrade all dependencies, toolchains and images (#2825)

fluxer_app/src/features/channel/components/ChannelHeader.tsx

@@ -530,7 +530,7 @@ export const ChannelHeader = observer(
 		if (hasCallableRecipients && !(isDM && isBotDMRecipient)) {
 			desktopLeadingActionCount += 2;
 		}
-		if (showPins && Boolean(channel)) {
+		if (showPins && channel) {
 			desktopLeadingActionCount += 1;
 		}
 		if (hasChannel && isFriendDM && !isGroupDM) {

fluxer_app/src/features/channel/components/ChannelIndexPage.module.css

@@ -177,26 +177,41 @@
 .channelGrid[data-voice-text-split-view='true'] .compactCallWrapper {
 	flex: 0 0 auto;
 	height: clamp(13rem, 42vh, 28rem);
-	height: clamp(13rem, 42svh, 28rem);
 	max-height: 48vh;
-	max-height: 48svh;
+}
+
+@supports (height: 1svh) {
+	.channelGrid[data-voice-text-split-view='true'] .compactCallWrapper {
+		height: clamp(13rem, 42svh, 28rem);
+		max-height: 48svh;
+	}
 }
 
 @media (min-width: 600px) and (orientation: portrait) {
 	.channelGrid[data-voice-text-split-view='true'] .compactCallWrapper {
 		height: clamp(18rem, 44vh, 34rem);
-		height: clamp(18rem, 44svh, 34rem);
 		max-height: 50vh;
-		max-height: 50svh;
+	}
+
+	@supports (height: 1svh) {
+		.channelGrid[data-voice-text-split-view='true'] .compactCallWrapper {
+			height: clamp(18rem, 44svh, 34rem);
+			max-height: 50svh;
+		}
 	}
 }
 
 @media (max-height: 600px) and (orientation: portrait) {
 	.channelGrid[data-voice-text-split-view='true'] .compactCallWrapper {
 		height: clamp(9rem, 36vh, 13rem);
-		height: clamp(9rem, 36svh, 13rem);
 		max-height: 40vh;
-		max-height: 40svh;
+	}
+
+	@supports (height: 1svh) {
+		.channelGrid[data-voice-text-split-view='true'] .compactCallWrapper {
+			height: clamp(9rem, 36svh, 13rem);
+			max-height: 40svh;
+		}
 	}
 }
 

fluxer_app/src/features/channel/components/ChannelMessageStreamUtils.bench.ts

@@ -3,7 +3,7 @@
 import {getUnreadDividerBeforeMessageId} from '@app/features/channel/components/ChannelMessageStreamUtils';
 import type {Message} from '@app/features/messaging/models/MessagingMessage';
 import type {ChannelStreamItem} from '@app/features/messaging/utils/MessageGroupingUtils';
-import {bench, describe} from 'vitest';
+import {test} from 'vitest';
 
 const GROUP_ITEMS = Array.from(
 	{length: 100},
@@ -29,8 +29,8 @@ const GROUPS = Array.from({length: 1_000}, (_value, groupIndex) =>
 	),
 );
 
-describe('ChannelMessageStreamUtils benchmarks', () => {
-	bench('find unread divider id across 1k pending render groups', () => {
+test('ChannelMessageStreamUtils benchmarks', async ({bench}) => {
+	await bench('find unread divider id across 1k pending render groups', () => {
 		let hits = 0;
 		for (const group of GROUPS) {
 			if (getUnreadDividerBeforeMessageId(group) !== null) {
@@ -38,5 +38,5 @@ describe('ChannelMessageStreamUtils benchmarks', () => {
 			}
 		}
 		(globalThis as {__channelMessageStreamBenchSink?: number}).__channelMessageStreamBenchSink = hits;
-	});
+	}).run();
 });

fluxer_app/src/features/channel/components/MessageAttachmentUtils.bench.ts

@@ -2,7 +2,7 @@
 
 import {splitMediaAndFileAttachments} from '@app/features/channel/components/MessageAttachmentUtils';
 import type {MessageAttachment} from '@fluxer/schema/src/domains/message/MessageResponseSchemas';
-import {bench, describe} from 'vitest';
+import {test} from 'vitest';
 
 const CONTENT_TYPES = [
 	'image/png',
@@ -30,8 +30,8 @@ const ATTACHMENTS = Array.from({length: 500}, (_value, index): MessageAttachment
 	};
 });
 
-describe('MessageAttachmentUtils benchmarks', () => {
-	bench('split 500 mixed media and file attachments', () => {
+test('MessageAttachmentUtils benchmarks', async ({bench}) => {
+	await bench('split 500 mixed media and file attachments', () => {
 		splitMediaAndFileAttachments(ATTACHMENTS);
-	});
+	}).run();
 });

fluxer_app/src/features/channel/components/direct_message/DMListHelpers.ts

@@ -21,7 +21,7 @@ export function getDmRouteChannelId(pathname: string): string | null {
 }
 
 export function canInviteInChannel(channel?: Channel | null): channel is Channel {
-	if (!channel || !channel.guildId) {
+	if (!channel?.guildId) {
 		return false;
 	}
 	return InviteUtils.canInviteToChannel(channel.id, channel.guildId);

fluxer_app/src/features/channel/components/embeds/media/EmbedYouTube.tsx

@@ -196,7 +196,7 @@ export const EmbedYouTube: FC<EmbedYouTubeProps> = observer(({embed, width = YOU
 		() => decodeThumbHashDataURL(embed.thumbnail?.placeholder),
 		[embed.thumbnail?.placeholder],
 	);
-	if (!(embed.video && embed.thumbnail && embed.thumbnail.proxy_url)) {
+	if (!(embed.video && embed.thumbnail?.proxy_url)) {
 		return null;
 	}
 	const videoWidth = embed.video.width ?? YOUTUBE_CONFIG.DEFAULT_WIDTH;

fluxer_app/src/features/channel/components/modals/channel_tabs/ChannelPermissionsTab.tsx

@@ -459,7 +459,7 @@ const ChannelPermissionsTab: React.FC<{channelId: string}> = observer(({channelI
 		],
 	);
 	const isSyncedWithParent = useMemo(() => {
-		if (!channel || !channel.parentId || !parentChannel || !parentChannel.isGuildCategory()) return null;
+		if (!channel?.parentId || !parentChannel?.isGuildCategory()) return null;
 		const channelOverwrites = channel.permissionOverwrites || {};
 		const parentOverwrites = parentChannel.permissionOverwrites || {};
 		const channelKeys = Object.keys(channelOverwrites).sort();

fluxer_app/src/features/channel/components/pickers/gif/GifPickerGridData.bench.ts

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 import {buildGifPickerGridData} from '@app/features/channel/components/pickers/gif/GifPickerGridData';
-import {bench, describe} from 'vitest';
+import {test} from 'vitest';
 
 function gif(index: number, width = 200 + (index % 80), height = 120 + (index % 160)) {
 	return {
@@ -49,8 +49,8 @@ const FAVORITE_MEMES = Array.from({length: 100}, (_, index) => ({
 	url: `https://cdn.example.test/meme-${index}.mp4`,
 }));
 
-describe('GifPickerGridData benchmarks', () => {
-	bench('builds 500 GIF result items', () => {
+test('GifPickerGridData benchmarks', async ({bench}) => {
+	await bench('builds 500 GIF result items', () => {
 		buildGifPickerGridData({
 			surface: 'results',
 			loading: false,
@@ -65,9 +65,9 @@ describe('GifPickerGridData benchmarks', () => {
 			favoriteTitle: 'Favorites',
 			trendingTitle: 'Trending',
 		});
-	});
+	}).run();
 
-	bench('builds 500 favorite GIF items', () => {
+	await bench('builds 500 favorite GIF items', () => {
 		buildGifPickerGridData({
 			surface: 'favorites',
 			loading: false,
@@ -82,9 +82,9 @@ describe('GifPickerGridData benchmarks', () => {
 			favoriteTitle: 'Favorites',
 			trendingTitle: 'Trending',
 		});
-	});
+	}).run();
 
-	bench('builds featured categories and preview tiles', () => {
+	await bench('builds featured categories and preview tiles', () => {
 		buildGifPickerGridData({
 			surface: 'featured',
 			loading: false,
@@ -99,5 +99,5 @@ describe('GifPickerGridData benchmarks', () => {
 			favoriteTitle: 'Favorites',
 			trendingTitle: 'Trending',
 		});
-	});
+	}).run();
 });

fluxer_app/src/features/channel/components/pickers/gif/GifPickerLoadingSkeletonGridLayout.bench.ts

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 import {buildGifPickerLoadingSkeletonLayout} from '@app/features/channel/components/pickers/gif/GifPickerLoadingSkeletonGridLayout';
-import {bench, describe} from 'vitest';
+import {test} from 'vitest';
 
 const VIEWPORTS = [
 	{viewportWidth: 360, viewportHeight: 480},
@@ -10,10 +10,10 @@ const VIEWPORTS = [
 	{viewportWidth: 960, viewportHeight: 840},
 ] as const;
 
-describe('GifPickerLoadingSkeletonGridLayout benchmarks', () => {
-	bench('builds deterministic masonry skeleton layouts for common picker sizes', () => {
+test('GifPickerLoadingSkeletonGridLayout benchmarks', async ({bench}) => {
+	await bench('builds deterministic masonry skeleton layouts for common picker sizes', () => {
 		for (const viewport of VIEWPORTS) {
 			buildGifPickerLoadingSkeletonLayout(viewport);
 		}
-	});
+	}).run();
 });

fluxer_app/src/features/channel/components/pickers/gif/GifPickerState.ts

@@ -21,7 +21,7 @@ import type {Gif, GifFeatured} from '@app/features/expressions/commands/GifComma
 import * as GifCommands from '@app/features/expressions/commands/GifCommands';
 import type {DebouncedFunction} from '@app/features/platform/utils/scroll_manager/shared';
 import debounce from 'lodash/debounce';
-import {makeAutoObservable, observable, runInAction} from 'mobx';
+import {makeAutoObservable, observableRef, runInAction} from 'mobx';
 
 const EMPTY_FEATURED: GifFeatured = Object.freeze({categories: [], gifs: []});
 const TRENDING_CACHE_KEY = 'trending';
@@ -83,7 +83,7 @@ export class GifPickerState {
 				suggestDebounced: false,
 				disposed: false,
 				requestSequence: false,
-				snapshot: observable.ref,
+				snapshot: observableRef,
 				categoryResultCache: false,
 				loadingSkeletonTimerId: false,
 				pendingSearchSkeletonMode: false,

fluxer_app/src/features/channel/components/pickers/gif/GifPickerStateMachine.bench.ts

@@ -6,12 +6,12 @@ import {
 	selectGifPickerModel,
 	transitionGifPickerSnapshot,
 } from '@app/features/channel/components/pickers/gif/GifPickerStateMachine';
-import {bench, describe} from 'vitest';
+import {test} from 'vitest';
 
 const SEARCH_TERMS = Array.from({length: 1_000}, (_, index) => `query-${index}`);
 
-describe('GifPickerStateMachine benchmarks', () => {
-	bench('coalesces 1k search term transitions while preserving the visible surface', () => {
+test('GifPickerStateMachine benchmarks', async ({bench}) => {
+	await bench('coalesces 1k search term transitions while preserving the visible surface', () => {
 		let snapshot = createGifPickerSnapshot();
 		snapshot = transitionGifPickerSnapshot(snapshot, {
 			type: 'gifPicker.featuredSucceeded',
@@ -25,9 +25,9 @@ describe('GifPickerStateMachine benchmarks', () => {
 			});
 		}
 		selectGifPickerModel(snapshot);
-	});
+	}).run();
 
-	bench('rejects 1k stale search completions', () => {
+	await bench('rejects 1k stale search completions', () => {
 		let snapshot = createGifPickerSnapshot();
 		for (let index = 0; index < SEARCH_TERMS.length; index += 1) {
 			const term = SEARCH_TERMS[index];
@@ -52,9 +52,9 @@ describe('GifPickerStateMachine benchmarks', () => {
 			});
 		}
 		selectGifPickerModel(snapshot);
-	});
+	}).run();
 
-	bench('commits latest search result after a fast query burst', () => {
+	await bench('commits latest search result after a fast query burst', () => {
 		let snapshot = createGifPickerSnapshot();
 		for (let index = 0; index < SEARCH_TERMS.length; index += 1) {
 			const term = SEARCH_TERMS[index];
@@ -77,9 +77,9 @@ describe('GifPickerStateMachine benchmarks', () => {
 			resultCount: 24,
 		});
 		selectGifPickerModel(snapshot);
-	});
+	}).run();
 
-	bench('rejects 1k stale skeleton timer events before showing the active one', () => {
+	await bench('rejects 1k stale skeleton timer events before showing the active one', () => {
 		const activeRequestId = createGifPickerRequestId(SEARCH_TERMS.length + 1);
 		let snapshot = createGifPickerSnapshot();
 		snapshot = transitionGifPickerSnapshot(snapshot, {
@@ -107,9 +107,9 @@ describe('GifPickerStateMachine benchmarks', () => {
 			term: 'active',
 		});
 		selectGifPickerModel(snapshot);
-	});
+	}).run();
 
-	bench('opens 1k cached category snapshots without entering loading', () => {
+	await bench('opens 1k cached category snapshots without entering loading', () => {
 		let snapshot = createGifPickerSnapshot();
 		for (const term of SEARCH_TERMS) {
 			snapshot = transitionGifPickerSnapshot(snapshot, {
@@ -119,5 +119,5 @@ describe('GifPickerStateMachine benchmarks', () => {
 			});
 		}
 		selectGifPickerModel(snapshot);
-	});
+	}).run();
 });

fluxer_app/src/features/channel/state/ChannelFrecency.ts

@@ -19,7 +19,7 @@ import MediaEngine from '@app/features/voice/engine/MediaEngineFacade';
 import {ME} from '@fluxer/constants/src/AppConstants';
 import {ChannelTypes} from '@fluxer/constants/src/ChannelConstants';
 import {ChannelFrecencyStateSchema} from '@fluxer/schema/src/gen/fluxer/user/preferences/v1/preferences_pb';
-import {comparer, isObservableMap, makeAutoObservable, observable, reaction} from 'mobx';
+import {compareShallow, isObservableMap, makeAutoObservable, observableShallow, reaction} from 'mobx';
 
 const TRACKABLE_ID_PATTERN = /^\d{17,19}$/;
 const FRECENCY_REFRESH_INTERVAL_MS = 3_600_000;
@@ -49,7 +49,7 @@ class ChannelFrecency {
 	usageHistory = new Map<string, ChannelFrecencyEntry>();
 
 	constructor() {
-		makeAutoObservable(this, {usageHistory: observable.shallow}, {autoBind: true});
+		makeAutoObservable(this, {usageHistory: observableShallow}, {autoBind: true});
 		void this.initPersistence();
 	}
 
@@ -72,7 +72,7 @@ class ChannelFrecency {
 		reaction(
 			() => [Navigation.guildId, Navigation.channelId] as const,
 			([guildId, channelId]) => this.recordSelection(guildId, channelId),
-			{equals: comparer.shallow, fireImmediately: true},
+			{equals: compareShallow, fireImmediately: true},
 		);
 		reaction(
 			() => [MediaEngine.guildId, MediaEngine.channelId] as const,
@@ -80,7 +80,7 @@ class ChannelFrecency {
 				if (channelId === null && MediaEngine.localDisconnectReason === 'channelMove') return;
 				this.recordSelection(guildId, channelId);
 			},
-			{equals: comparer.shallow},
+			{equals: compareShallow},
 		);
 	}
 

fluxer_app/src/features/channel/state/ChannelSearch.ts

@@ -14,7 +14,7 @@ import SelectedGuild from '@app/features/navigation/state/SelectedGuild';
 import type {SearchSegment} from '@app/features/search/utils/SearchSegmentManager';
 import type {MessageSearchScope} from '@app/features/search/utils/SearchUtils';
 import {ME} from '@fluxer/constants/src/AppConstants';
-import {makeAutoObservable, observable} from 'mobx';
+import {makeAutoObservable, observableRef, observableShallow} from 'mobx';
 
 type ChannelSearchSortMode = 'newest' | 'oldest' | 'relevant';
 
@@ -38,7 +38,7 @@ class ChannelSearchContext {
 
 	constructor() {
 		makeAutoObservable(this, {
-			machineSnapshot: observable.ref,
+			machineSnapshot: observableRef,
 		});
 	}
 
@@ -52,7 +52,7 @@ class ChannelSearch {
 
 	constructor() {
 		makeAutoObservable<this, 'contexts'>(this, {
-			contexts: observable.shallow,
+			contexts: observableShallow,
 		});
 	}
 

fluxer_app/src/features/channel/state/Channels.ts

@@ -16,7 +16,7 @@ import type {Channel as WireChannel} from '@fluxer/schema/src/domains/channel/Ch
 import type {Message as WireMessage} from '@fluxer/schema/src/domains/message/MessageResponseSchemas';
 import type {UserPartial} from '@fluxer/schema/src/domains/user/UserResponseSchemas';
 import * as SnowflakeUtils from '@fluxer/snowflake/src/SnowflakeUtils';
-import {action, makeAutoObservable, observable} from 'mobx';
+import {makeAutoObservable, observableRef, observableShallow} from 'mobx';
 
 const EMPTY_CHANNELS: ReadonlyArray<Channel> = Object.freeze([]);
 const sortDMs = (a: Channel, b: Channel) => {
@@ -58,7 +58,7 @@ class Channels {
 	constructor() {
 		makeAutoObservable<this, 'channelsByGuildId' | 'privateChannelList'>(
 			this,
-			{channelsByGuildId: observable.shallow, privateChannelList: observable.ref},
+			{channelsByGuildId: observableShallow, privateChannelList: observableRef},
 			{autoBind: true},
 		);
 	}
@@ -98,7 +98,6 @@ class Channels {
 		return this.privateChannelList;
 	}
 
-	@action
 	removeChannelOptimistically(channelId: string): void {
 		if (this.optimisticChannelBackups.has(channelId)) {
 			return;
@@ -111,7 +110,6 @@ class Channels {
 		this.deleteChannelRecord(channelId);
 	}
 
-	@action
 	rollbackChannelDeletion(channelId: string): void {
 		const channel = this.optimisticChannelBackups.get(channelId);
 		if (!channel) {
@@ -121,18 +119,15 @@ class Channels {
 		this.optimisticChannelBackups.delete(channelId);
 	}
 
-	@action
 	clearOptimisticallyRemovedChannel(channelId: string): void {
 		this.optimisticChannelBackups.delete(channelId);
 	}
 
-	@action
 	private removeChannel(channelId: string): void {
 		this.clearOptimisticallyRemovedChannel(channelId);
 		this.deleteChannelRecord(channelId);
 	}
 
-	@action
 	private deleteChannelRecord(channelId: string): void {
 		const channel = this.channelsById.get(channelId);
 		this.channelsById.delete(channelId);
@@ -142,7 +137,6 @@ class Channels {
 		ChannelDisplayName.removeChannel(channelId);
 	}
 
-	@action
 	private setChannel(channel: Channel | WireChannel): void {
 		const record = channel instanceof Channel ? channel : new Channel(channel);
 		const existing = this.channelsById.get(record.id);
@@ -154,7 +148,6 @@ class Channels {
 		ChannelDisplayName.syncChannel(record);
 	}
 
-	@action
 	private indexChannel(previous: Channel | undefined, next: Channel): void {
 		if (previous && previous.guildId === next.guildId && isPrivateChannel(previous) === isPrivateChannel(next)) {
 			this.replaceChannelInIndex(previous, next);
@@ -166,7 +159,6 @@ class Channels {
 		this.addChannelToIndex(next);
 	}
 
-	@action
 	private addChannelToIndex(channel: Channel): void {
 		if (channel.guildId) {
 			const list = this.channelsByGuildId.get(channel.guildId) ?? EMPTY_CHANNELS;
@@ -178,7 +170,6 @@ class Channels {
 		}
 	}
 
-	@action
 	private removeChannelFromIndex(channel: Channel): void {
 		if (channel.guildId) {
 			const list = this.channelsByGuildId.get(channel.guildId);
@@ -204,7 +195,6 @@ class Channels {
 		}
 	}
 
-	@action
 	private replaceChannelInIndex(previous: Channel, next: Channel): void {
 		if (next.guildId) {
 			const list = this.channelsByGuildId.get(next.guildId);
@@ -234,7 +224,6 @@ class Channels {
 		this.privateChannelList = updated;
 	}
 
-	@action
 	handleGatewayReady({channels}: {channels: ReadonlyArray<WireChannel>}): void {
 		this.channelsById.clear();
 		this.channelsByGuildId.clear();
@@ -270,7 +259,6 @@ class Channels {
 		this.setChannel(personalNotesChannel);
 	}
 
-	@action
 	handleGuildCreate(guild: GuildReadyData): void {
 		if (guild.unavailable) {
 			return;
@@ -287,7 +275,6 @@ class Channels {
 		}
 	}
 
-	@action
 	handleGuildDelete({guildId}: {guildId: string}): void {
 		const guildChannels = this.getGuildChannels(guildId);
 		if (guildChannels.length === 0) return;
@@ -298,12 +285,10 @@ class Channels {
 		}
 	}
 
-	@action
 	handleChannelCreate({channel}: {channel: WireChannel}): void {
 		this.setChannel(channel);
 	}
 
-	@action
 	handlePassiveLastMessageUpdates({guildId, channels}: {guildId: string; channels: Record<string, string>}): boolean {
 		let changed = false;
 		for (const [channelId, lastMessageId] of Object.entries(channels)) {
@@ -325,14 +310,12 @@ class Channels {
 		return changed;
 	}
 
-	@action
 	handleChannelUpdateBulk({channels}: {channels: Array<WireChannel>}): void {
 		for (const channel of channels) {
 			this.setChannel(channel);
 		}
 	}
 
-	@action
 	handleChannelPinsUpdate({channelId, lastPinTimestamp}: {channelId: string; lastPinTimestamp: string}): void {
 		const channel = this.channelsById.get(channelId);
 		if (!channel) {
@@ -346,7 +329,6 @@ class Channels {
 		);
 	}
 
-	@action
 	handleChannelRecipientAdd({channelId, user}: {channelId: string; user: UserPartial}): void {
 		const channel = this.channelsById.get(channelId);
 		if (!channel) {
@@ -361,7 +343,6 @@ class Channels {
 		);
 	}
 
-	@action
 	handleChannelRecipientRemove({channelId, user}: {channelId: string; user: UserPartial}): void {
 		const channel = this.channelsById.get(channelId);
 		if (!channel) {
@@ -385,7 +366,6 @@ class Channels {
 		);
 	}
 
-	@action
 	handleChannelDelete({channel}: {channel: WireChannel}): void {
 		this.removeChannel(channel.id);
 		const history = RouterUtils.getHistory();
@@ -408,7 +388,6 @@ class Channels {
 		}
 	}
 
-	@action
 	handleMessageCreate({message}: {message: WireMessage}): void {
 		const channel = this.channelsById.get(message.channel_id);
 		if (!channel) {
@@ -428,7 +407,6 @@ class Channels {
 		);
 	}
 
-	@action
 	handleGuildRoleDelete({guildId, roleId}: {guildId: string; roleId: string}): void {
 		const guildChannels = this.getGuildChannels(guildId);
 		if (guildChannels.length === 0) return;

fluxer_app/src/features/channel/utils/ChannelTopicModalUtils.ts

@@ -8,7 +8,7 @@ export interface ChannelTopicModalProps {
 
 export function getChannelTopicInfo(channelId: string) {
 	const channel = Channels.getChannel(channelId);
-	if (!channel || !channel.topic) return null;
+	if (!channel?.topic) return null;
 	return {
 		channel,
 		topic: channel.topic,