Function BackgroundConfig

apps/desktop/src/routes/editor/ConfigSidebar.tsx:1617–2725

(props: {
	scrollRef: HTMLDivElement;
	brandColorSwatches: OrganizationBrandColorSwatch[];
})

}

function BackgroundConfig(props: {
	scrollRef: HTMLDivElement;
	brandColorSwatches: OrganizationBrandColorSwatch[];
}) {
	const { project, setProject, editorInstance, projectHistory } =
		useEditorContext();
	const isNoneBackground = () =>
		project.background.padding === 0 && project.background.rounding === 0;
	const initialCurrentDesktopBackgroundPath = () => {
		const source = project.background.source;
		if (source.type !== "wallpaper" || !source.path) return null;
		return isCurrentDesktopBackgroundPath(source.path) ? source.path : null;
	};
	const [currentDesktopBackgroundPath, setCurrentDesktopBackgroundPath] =
		createSignal<string | null>(initialCurrentDesktopBackgroundPath());

	const [backgroundTab, setBackgroundTab] =
		createSignal<keyof typeof BACKGROUND_THEMES>("macOS");
	const projectBackgroundSourceTab = createMemo<BackgroundSourceTab>(() => {
		const source = project.background.source;
		if (
			source.type === "wallpaper" &&
			isCurrentDesktopBackgroundPath(source.path)
		) {
			return "desktop";
		}

		return source.type;
	});
	const [backgroundSourceTab, setBackgroundSourceTab] =
		createSignal<BackgroundSourceTab>(
			isNoneBackground() ? "none" : projectBackgroundSourceTab(),
		);

	// "None" is a sticky selection: nudging the padding/rounding sliders must not
	// swap the panel back to the underlying source tab (that reflow moves the very
	// slider being dragged), so only re-sync when the user isn't sitting on "None".
	createEffect(
		on(projectBackgroundSourceTab, (tab) => {
			if (backgroundSourceTab() !== "none") setBackgroundSourceTab(tab);
		}),
	);

	const [wallpapers] = createResource(async () => {
		// Only load visible wallpapers initially
		const visibleWallpaperPaths = WALLPAPER_NAMES.map(async (id) => {
			try {
				const path = await resolveResource(`assets/backgrounds/${id}.jpg`);
				return { id, path };
			} catch (_err) {
				return { id, path: null };
			}
		});

		// Load initial batch
		const initialPaths = await Promise.all(visibleWallpaperPaths);

		return initialPaths.flatMap(({ id, path }) => {