feature: change from radix to base-ui

CHANGELOG.md

@@ -11,6 +11,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+- Moved away from using Radix UI to Base UI for all components in the UI stack.
+- Revamp on the whole UI after introducing Base UI.
+
+## [0.5.4] - 2025-10-31
+
 ### Fixed
 
 - Resolve an issue with our build steps that would introduce blank screen on some linux distros using AppImage.
@@ -250,6 +257,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Stabilized login dialog and authentication flow.
 
 <!-- Version links for diff and release pages -->
+[0.5.4]: https://github.com/LovelessCodes/StoryForge/releases/tag/storyforge-v0.5.4
 [0.5.3]: https://github.com/LovelessCodes/StoryForge/releases/tag/storyforge-v0.5.3
 [0.5.2]: https://github.com/LovelessCodes/StoryForge/releases/tag/storyforge-v0.5.2
 [0.5.1]: https://github.com/LovelessCodes/StoryForge/releases/tag/storyforge-v0.5.1

biome.json

@@ -1,5 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.3.1/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.3.3/schema.json",
 	"assist": {
 		"actions": {
 			"source": {

package.json

@@ -1,35 +1,18 @@
 {
 	"dependencies": {
-		"@base-ui-components/react": "^1.0.0-beta.3",
+		"@base-ui-components/react": "^1.0.0-beta.4",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/modifiers": "^9.0.0",
 		"@dnd-kit/sortable": "^10.0.0",
 		"@dnd-kit/utilities": "^3.2.2",
 		"@monaco-editor/react": "^4.7.0",
-		"@radix-ui/react-alert-dialog": "^1.1.15",
-		"@radix-ui/react-avatar": "^1.1.10",
-		"@radix-ui/react-checkbox": "^1.3.3",
-		"@radix-ui/react-context-menu": "^2.2.16",
-		"@radix-ui/react-dialog": "^1.1.15",
-		"@radix-ui/react-dropdown-menu": "^2.1.16",
-		"@radix-ui/react-label": "^2.1.7",
-		"@radix-ui/react-popover": "^1.1.15",
-		"@radix-ui/react-scroll-area": "^1.2.10",
-		"@radix-ui/react-select": "^2.2.6",
-		"@radix-ui/react-separator": "^1.1.7",
-		"@radix-ui/react-slot": "^1.2.3",
-		"@radix-ui/react-switch": "^1.2.6",
-		"@radix-ui/react-tabs": "^1.1.13",
-		"@radix-ui/react-toggle": "^1.1.10",
-		"@radix-ui/react-toggle-group": "^1.1.11",
-		"@radix-ui/react-tooltip": "^1.2.8",
 		"@tailwindcss/vite": "^4.1.16",
-		"@tanstack/react-devtools": "^0.7.9",
+		"@tanstack/react-devtools": "^0.8.0",
 		"@tanstack/react-form": "^1.23.8",
-		"@tanstack/react-query": "^5.90.5",
+		"@tanstack/react-query": "^5.90.6",
 		"@tanstack/react-query-devtools": "^5.90.2",
-		"@tanstack/react-router": "^1.133.32",
-		"@tanstack/react-router-devtools": "^1.133.34",
+		"@tanstack/react-router": "^1.134.9",
+		"@tanstack/react-router-devtools": "^1.134.9",
 		"@tanstack/react-virtual": "^3.13.12",
 		"@tauri-apps/api": "^2.9.0",
 		"@tauri-apps/plugin-dialog": "~2.4.2",
@@ -38,33 +21,32 @@
 		"@tauri-apps/plugin-os": "~2.3.2",
 		"@tauri-apps/plugin-process": "~2.3.1",
 		"@tauri-apps/plugin-shell": "~2.3.3",
-		"@tauri-apps/plugin-updater": "~2",
+		"@tauri-apps/plugin-updater": "~2.9.0",
 		"@tauri-apps/plugin-window-state": "^2.4.1",
-		"@tauri-store/zustand": "^1.0.2",
+		"@tauri-store/zustand": "^1.1.0",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
-		"cmdk": "^1.1.1",
 		"date-fns": "^4.1.0",
 		"input-otp": "^1.4.2",
-		"lucide-react": "^0.548.0",
+		"lucide-react": "^0.552.0",
 		"motion": "^12.23.24",
-		"react": "^19.1.1",
-		"react-dom": "^19.1.1",
+		"react": "^19.2.0",
+		"react-dom": "^19.2.0",
 		"sonner": "^2.0.7",
 		"tailwind-merge": "^3.3.1",
 		"tailwindcss": "^4.1.16",
 		"zod": "^4.1.12",
 		"zustand": "^5.0.8"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "^2.3.1",
-		"@tanstack/devtools-vite": "^0.3.10",
-		"@tanstack/router-plugin": "^1.133.32",
-		"@tauri-apps/cli": "^2.9.1",
+		"@biomejs/biome": "^2.3.3",
+		"@tanstack/devtools-vite": "^0.3.11",
+		"@tanstack/router-plugin": "^1.134.9",
+		"@tauri-apps/cli": "^2.9.2",
 		"@types/react": "^19.2.2",
 		"@types/react-dom": "^19.2.2",
 		"@vitejs/plugin-react": "^5.1.0",
-		"lefthook": "^2.0.1",
+		"lefthook": "^2.0.2",
 		"tw-animate-css": "^1.4.0",
 		"typescript": "~5.9.3",
 		"vite": "^7.1.12",

src/components/auto-completes/author.auto-complete.tsx

@@ -0,0 +1,162 @@
+import { Autocomplete as AutocompletePrimitive } from "@base-ui-components/react/autocomplete";
+import { useQueryClient } from "@tanstack/react-query";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useCallback, useMemo, useRef, useState } from "react";
+import type { Mod } from "@/components/lists/mod.list";
+import {
+	Autocomplete,
+	AutocompleteInput,
+	AutocompleteItem,
+	AutocompleteList,
+	AutocompletePopup,
+} from "@/components/ui/auto-complete";
+import { useModsFilters } from "@/stores/modsFilters";
+
+export const AuthorAutocomplete = (
+	props: React.InputHTMLAttributes<HTMLInputElement>,
+) => {
+	const { contains } = AutocompletePrimitive.useFilter({
+		sensitivity: "base",
+		usage: "search",
+	});
+	const [internalValue, setInternalValue] = useState("");
+	const actualValue = props.value || internalValue;
+	const { searchText, selectedGameVersions } = useModsFilters();
+	const scrollElementRef = useRef<HTMLDivElement>(null);
+
+	const handleValueChange = (value: string) => {
+		setInternalValue(value);
+		props.onChange?.({
+			target: { value },
+		} as React.ChangeEvent<HTMLInputElement>);
+	};
+
+	const queryClient = useQueryClient();
+	const mods = queryClient.getQueryData<Mod[] | undefined>([
+		"mods",
+		{
+			search: searchText,
+			versions: selectedGameVersions,
+		},
+	]);
+	const modAuthors = useMemo(
+		() =>
+			mods?.reduce(
+				(acc, mod) => {
+					// Extract unique authors with how many mods they have
+					if (mod.author) {
+						acc[mod.author] = (acc[mod.author] || 0) + 1;
+					}
+					return acc;
+				},
+				{} as Record<string, number>,
+			),
+		[mods],
+	);
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: Shouldn't recompute on every function change
+	const filteredItems = useMemo(() => {
+		return modAuthors
+			? Object.entries(modAuthors)
+					.filter(([author]) => contains(author, actualValue as string))
+					.sort(([_authorA, countA], [_authorB, countB]) => countB - countA)
+					.map(([author]) => author)
+			: [];
+	}, [modAuthors, actualValue]);
+
+	const shouldRenderPopup = actualValue !== "";
+
+	const virtualizer = useVirtualizer({
+		count: filteredItems.length,
+		enabled: shouldRenderPopup,
+		estimateSize: () => 40,
+		getScrollElement: () => scrollElementRef.current,
+		overscan: 20,
+	});
+
+	const handleScrollElementRef = useCallback(
+		(element: HTMLDivElement) => {
+			scrollElementRef.current = element;
+			if (element) {
+				virtualizer.measure();
+			}
+		},
+		[virtualizer],
+	);
+
+	const totalSize = virtualizer.getTotalSize();
+	const totalSizePx = `${totalSize}px`;
+
+	return (
+		<div className="relative w-48">
+			<Autocomplete
+				autoHighlight
+				items={(modAuthors && Object.keys(modAuthors)) || []}
+				itemToStringValue={(author: unknown) => author as string}
+				onValueChange={handleValueChange}
+				value={actualValue as string}
+				virtualized
+			>
+				<AutocompleteInput
+					aria-label="Select author"
+					className="h-9"
+					placeholder="Select author..."
+					showClear
+					showTrigger
+				/>
+				{shouldRenderPopup && (
+					<AutocompletePopup>
+						<AutocompleteList>
+							{filteredItems.length > 0 && (
+								<div
+									className="h-[min(22rem,var(--total-size))] max-h-[var(--available-height)] overflow-auto overscroll-contain scroll-pt-2"
+									ref={handleScrollElementRef}
+									role="presentation"
+									style={{ "--total-size": totalSizePx } as React.CSSProperties}
+								>
+									<div
+										className="relative w-full"
+										role="presentation"
+										style={{ height: totalSizePx }}
+									>
+										{virtualizer.getVirtualItems().map((virtualItem) => {
+											const author = filteredItems[virtualItem.index];
+											if (!author) return null;
+											if (!modAuthors) return null;
+											const modCount = modAuthors[author];
+											return (
+												<AutocompleteItem
+													aria-posinset={virtualItem.index + 1}
+													aria-setsize={filteredItems.length}
+													className="flex cursor-default py-2 pr-8 pl-4 text-base leading-4 outline-none"
+													index={virtualItem.index}
+													key={virtualItem.key}
+													style={{
+														height: `${virtualItem.size}px`,
+														left: 0,
+														position: "absolute",
+														top: 0,
+														transform: `translateY(${virtualItem.start}px)`,
+														width: "100%",
+													}}
+													value={author}
+												>
+													<div className="flex w-full flex-col">
+														<div className="font-medium">{author}</div>
+														<div className="text-xs text-muted-foreground">
+															{modCount} mod{modCount > 1 ? "s" : ""}
+														</div>
+													</div>
+												</AutocompleteItem>
+											);
+										})}
+									</div>
+								</div>
+							)}
+						</AutocompleteList>
+					</AutocompletePopup>
+				)}
+			</Autocomplete>
+		</div>
+	);
+};

src/components/buttons/update-all.button.tsx

@@ -2,6 +2,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { invoke } from "@tauri-apps/api/core";
 import { useState } from "react";
 import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
 import { useAddModUpdateToInstallation } from "@/hooks/use-add-mod-update-to-installation";
 import { installedModsQueryKey } from "@/hooks/use-installed-mods";
 import {
@@ -11,7 +12,6 @@ import {
 } from "@/hooks/use-mod-updates";
 import type { OutputMod } from "@/routes/install-mods/$id";
 import type { Installation } from "@/stores/installations";
-import { Button } from "../ui/button";
 
 export const UpdateAllButton = ({
 	installation,