[ENG-640, ENG-695, ENG-705, ENG-693] Categories arrow buttons + others (#851)

* Overview categories arrow buttons

* Hide indexer rules in location + category arrow buttons

* Added masking on left and right of categories

* Expose lock_app_theme function to frontend

* Allow lockAppTheme to reset back to auto theme

* Fixes, progress bar color, useTheme update, shrink-0 for arrow button

* Only show fadeout if scrolled, onboarding css tweaks

* Framer hook unstable, motion divs to handle last category entry is much better

* Fix color picker closing

* Remove ref that is no longer needed

* Fix swift theme updating

* cleanup

* Overview categories arrow buttons and fixes

Added masking on left and right of categories

[HOTFIX] Remove placeholder nodes (#913)

Update LibrarySection.tsx

[ENG-694] Remove Spacedrop (#914)

* goodbye Spacedrop

* fix startup error escaping

* fix error fallback being cringe with long error

* backwards compatibility for early adopters

[ENG-697] Fix rename library (#916)

* random stuff

* How have we had a deadlock for 2 months lol

[ENG-701] Add explorer top bar options to tags (#918)

Add top bar options

[ENG-679] Reserve ids for built in indexer rules (#909)

* indexer rules pub ids

* should work?

* better migrator

* errors

* debugging

* maybe?

* double migrate

* please

* maybe fix?

* update lockfile

* SD_ACCEPT_DATA_LOSS message

* put tracing back

* dumb

* fix system indexer rule ui

fix(interface): quick preview not closing with SPACE (#921)

Co-authored-by: Utku <74243531+utkubakir@users.noreply.github.com>

[ENG-700] Add empty notice to tags (#922)

Add empty notice to tags

[ENG-707] Fix list item bg color (#924)

Fix list item bg color

[ENG-706] Add deselect explorer view items (#923)

Add deselect

Expose lock_app_theme function to frontend

Allow lockAppTheme to reset back to auto theme

Fixes, progress bar color, useTheme update, shrink-0 for arrow button

Only show fadeout if scrolled, onboarding css tweaks

Framer hook unstable, motion divs to handle last category entry is much better

Fix color picker closing

Remove ref that is no longer needed

Fix swift theme updating

* cleanup

* Update pnpm-lock.yaml

* fix types & upgrade typescript version to 5.0.4

* fix folder icon

* remove rust comment

* remove mask

* masking tweak

---------

Co-authored-by: Vítor Vasconcellos <vasconcellos.dev@gmail.com>
Co-authored-by: nikec <nikec.job@gmail.com>
Co-authored-by: Utku Bakir <74243531+utkubakir@users.noreply.github.com>

.editorconfig

@@ -82,3 +82,9 @@ indent_style = space
 [*.{ps1,psd1,psm1}]
 indent_size = 4
 indent_style = space
+
+# Swift
+# https://github.com/apple/swift-format/blob/main/Documentation/Configuration.md#example
+[*.swift]
+indent_size = 2
+indent_style = space

apps/desktop/crates/macos/src-swift/window.swift

@@ -2,66 +2,76 @@ import AppKit
 
 @objc
 public enum AppThemeType: Int {
-    case light = 0;
+  case auto = -1
-    case dark = 1;
+  case light = 0
+  case dark = 1
 }
 
 @_cdecl("lock_app_theme")
 public func lockAppTheme(themeType: AppThemeType) {
-    var theme: NSAppearance;
+  var theme: NSAppearance?
-    
+  switch themeType {
-    switch themeType {
+  case .auto:
-    case .dark:
+    theme = nil
-        theme = NSAppearance(named: .darkAqua)!;
+  case .dark:
-    case .light:
+    theme = NSAppearance(named: .darkAqua)!
-        theme = NSAppearance(named: .aqua)!;
+  case .light:
+    theme = NSAppearance(named: .aqua)!
+  }
+
+  DispatchQueue.main.async {
+    NSApp.appearance = theme
+
+    // Trigger a repaint of the window
+    if let window = NSApplication.shared.mainWindow {
+      window.invalidateShadow()
+      window.displayIfNeeded()
     }
-    
+  }
-    NSApp.appearance = theme;
 }
 
 @_cdecl("blur_window_background")
 public func blurWindowBackground(window: NSWindow) {
-    let windowContent = window.contentView!;
+  let windowContent = window.contentView!
-    let blurryView = NSVisualEffectView();
+  let blurryView = NSVisualEffectView()
 
-    blurryView.material = .sidebar;
+  blurryView.material = .sidebar
-    blurryView.state = .followsWindowActiveState;
+  blurryView.state = .followsWindowActiveState
-    blurryView.blendingMode = .behindWindow;
+  blurryView.blendingMode = .behindWindow
-    blurryView.wantsLayer = true;
+  blurryView.wantsLayer = true
 
-    window.contentView = blurryView;
+  window.contentView = blurryView
-    blurryView.addSubview(windowContent);
+  blurryView.addSubview(windowContent)
 }
 
 func setInvisibleToolbar(windowPtr: NSWindow, hasToolbar: Bool) {
-    let window = windowPtr;
+  let window = windowPtr
-    
+
-    if !hasToolbar {
+  if !hasToolbar {
-        window.toolbar = nil;
+    window.toolbar = nil
-        return;
+    return
-    }
+  }
-    
+
-    let toolbar = NSToolbar(identifier: "window_invisible_toolbar");
+  let toolbar = NSToolbar(identifier: "window_invisible_toolbar")
-    
+
-    toolbar.showsBaselineSeparator = false;
+  toolbar.showsBaselineSeparator = false
-    window.toolbar = toolbar;
+  window.toolbar = toolbar
 }
 
 @_cdecl("set_titlebar_style")
 public func setTitlebarStyle(window: NSWindow, transparent: Bool, large: Bool) {
-    var styleMask = window.styleMask;
+  var styleMask = window.styleMask
-    
+
-    if transparent && large {
+  if transparent && large {
-        styleMask.insert(.unifiedTitleAndToolbar);
+    styleMask.insert(.unifiedTitleAndToolbar)
-    }
+  }
-    
+
-    window.styleMask = styleMask;
+  window.styleMask = styleMask
-    
+
-    if large {
+  if large {
-        setInvisibleToolbar(windowPtr: window, hasToolbar: true);
+    setInvisibleToolbar(windowPtr: window, hasToolbar: true)
-    }
+  }
-    
+
-    window.titleVisibility = transparent ? .hidden : .visible;
+  window.titleVisibility = transparent ? .hidden : .visible
-    window.titlebarAppearsTransparent = transparent;
+  window.titlebarAppearsTransparent = transparent
 }

apps/desktop/package.json

@@ -37,7 +37,7 @@
 		"react-devtools": "^4.27.2",
 		"sass": "^1.55.0",
 		"semver": "^7.5.0",
-		"typescript": "^4.8.4",
+		"typescript": "^5.0.4",
 		"vite": "^4.0.4",
 		"vite-plugin-svgr": "^2.2.1",
 		"vite-tsconfig-paths": "^4.0.3"

apps/desktop/src-tauri/src/main.rs

@@ -17,6 +17,8 @@ use tracing::{debug, error};
 #[cfg(target_os = "linux")]
 mod app_linux;
 
+mod theme;
+
 mod file;
 mod menu;
 
@@ -161,7 +163,8 @@ async fn main() -> tauri::Result<()> {
 			open_logs_dir,
 			file::open_file_path,
 			file::get_file_path_open_with_apps,
-			file::open_file_path_with
+			file::open_file_path_with,
+			theme::lock_app_theme
 		])
 		.build(tauri::generate_context!())?;
 

apps/desktop/src-tauri/src/theme.rs

@@ -0,0 +1,19 @@
+use serde::Deserialize;
+use specta::Type;
+
+#[derive(Type, Deserialize, Clone, Copy, Debug)]
+pub enum AppThemeType {
+	Auto = -1,
+	Light = 0,
+	Dark = 1,
+}
+
+#[tauri::command(async)]
+#[specta::specta]
+pub async fn lock_app_theme(theme_type: AppThemeType) {
+	#[cfg(target_os = "macos")]
+	unsafe {
+		sd_desktop_macos::lock_app_theme(theme_type as isize);
+	}
+	// println!("Lock theme, type: {theme_type:?}")
+}

apps/desktop/src/App.tsx

@@ -20,6 +20,7 @@ import '@sd/ui/style';
 import {
 	appReady,
 	getFilePathOpenWithApps,
+	lockAppTheme,
 	openFilePath,
 	openFilePathWith,
 	openLogsDir
@@ -80,7 +81,8 @@ const platform: Platform = {
 	openLogsDir,
 	openFilePath,
 	getFilePathOpenWithApps,
-	openFilePathWith
+	openFilePathWith,
+	lockAppTheme
 };
 
 const queryClient = new QueryClient();

apps/desktop/src/commands.ts

@@ -34,5 +34,10 @@ export function openFilePathWith(library: string, id: number, withUrl: string) {
     return invoke()<null>("open_file_path_with", { library,id,withUrl })
 }
 
+export function lockAppTheme(themeType: AppThemeType) {
+    return invoke()<null>("lock_app_theme", { themeType })
+}
+
 export type OpenWithApplication = { name: string; url: string }
 export type OpenFilePathResult = { t: "NoLibrary" } | { t: "NoFile" } | { t: "OpenError"; c: string } | { t: "AllGood" }
+export type AppThemeType = "Auto" | "Light" | "Dark"

apps/landing/src/env.ts

@@ -28,4 +28,4 @@ export const env = createEnv({
 	// In dev or in eslint disable checking.
 	// Kinda sucks for in dev but you don't need the whole setup to change the docs.
 	skipValidation: process.env.VERCEL !== '1'
-});
+});

apps/storybook/package.json

@@ -28,7 +28,7 @@
 		"prop-types": "^15.8.1",
 		"storybook": "^7.0.5",
 		"tailwindcss": "^3.3.2",
-		"typescript": "^4.9.3",
+		"typescript": "^5.0.4",
 		"vite": "^4.2.0"
 	}
 }

apps/web/package.json

@@ -29,7 +29,7 @@
 		"autoprefixer": "^10.4.12",
 		"postcss": "^8.4.17",
 		"rollup-plugin-visualizer": "^5.9.0",
-		"typescript": "^4.8.4",
+		"typescript": "^5.0.4",
 		"vite": "^4.0.4",
 		"vite-plugin-html": "^3.2.0",
 		"vite-plugin-svgr": "^2.2.1",

interface/app/$libraryId/overview/Categories.tsx

@@ -1,4 +1,8 @@
 import { getIcon } from '@sd/assets/util';
+import clsx from 'clsx';
+import { motion } from 'framer-motion';
+import { ArrowLeft, ArrowRight } from 'phosphor-react';
+import { useEffect, useRef, useState } from 'react';
 import { Category, useLibraryQuery } from '@sd/client';
 import { useIsDark } from '~/hooks';
 import CategoryButton from './CategoryButton';
@@ -27,24 +31,91 @@ const CategoryList = [
 export const Categories = (props: { selected: Category; onSelectedChanged(c: Category): void }) => {
 	const categories = useLibraryQuery(['categories.list']);
 	const isDark = useIsDark();
+	const [scroll, setScroll] = useState(0);
+	const ref = useRef<HTMLDivElement>(null);
+	const [lastCategoryVisible, setLastCategoryVisible] = useState(false);
+
+	useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const handler = () => {
+			setScroll(element.scrollLeft);
+		};
+		element.addEventListener('scroll', handler);
+		return () => {
+			element.removeEventListener('scroll', handler);
+		};
+	}, []);
+
+	const handleArrowOnClick = (direction: 'right' | 'left') => {
+		const element = ref.current;
+		if (!element) return;
+
+		element.scrollTo({
+			left: direction === 'left' ? element.scrollLeft + 200 : element.scrollLeft - 200,
+			behavior: 'smooth'
+		});
+	};
+
+	const lastCategoryVisibleHandler = (index: number) => {
+		index === CategoryList.length - 1 && setLastCategoryVisible((prev) => !prev);
+	};
 
 	return (
-		<div className="no-scrollbar sticky top-0 z-10 mt-2 flex space-x-[1px] overflow-x-scroll bg-app/90 px-5 py-1.5 backdrop-blur">
+		<div className="sticky top-0 z-10 flex mt-2 bg-app/90 backdrop-blur">
-			{categories.data &&
+			<div
-				CategoryList.map((category) => {
+				onClick={() => handleArrowOnClick('right')}
-					const iconString = IconForCategory[category] || 'Document';
+				className={clsx(
-
+					scroll > 0
-					return (
+						? 'cursor-pointer bg-app/50 opacity-100 hover:opacity-95'
-						<CategoryButton
+						: 'pointer-events-none',
-							key={category}
+					'sticky left-[43px] z-40 mt-4 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-app-line bg-app p-2 opacity-0 backdrop-blur-md transition-all duration-200'
-							category={category}
+				)}
-							icon={getIcon(iconString, isDark)}
+			>
-							items={categories.data[category]}
+				<ArrowLeft weight="bold" className="w-4 h-4 text-ink" />
-							selected={props.selected === category}
+			</div>
-							onClick={() => props.onSelectedChanged(category)}
+			<div
-						/>
+				ref={ref}
-					);
+				className="no-scrollbar flex space-x-[1px] overflow-x-scroll py-1.5 pl-0 pr-[60px]"
-				})}
+				style={{
+					maskImage: `linear-gradient(90deg, transparent 0.1%, rgba(0, 0, 0, 1) ${
+						scroll > 0 ? '10%' : '0%'
+					}, rgba(0, 0, 0, 1) ${lastCategoryVisible ? '95%' : '90%'}, transparent 95%)`
+				}}
+			>
+				{categories.data &&
+					CategoryList.map((category, index) => {
+						const iconString = IconForCategory[category] || 'Document';
+						return (
+							<motion.div
+								onViewportEnter={() => lastCategoryVisibleHandler(index)}
+								onViewportLeave={() => lastCategoryVisibleHandler(index)}
+								viewport={{ root: ref, margin: '0 -120px 0 0' }}
+								className="min-w-fit"
+								key={category}
+							>
+								<CategoryButton
+									category={category}
+									icon={getIcon(iconString, isDark)}
+									items={categories.data[category]}
+									selected={props.selected === category}
+									onClick={() => props.onSelectedChanged(category)}
+								/>
+							</motion.div>
+						);
+					})}
+			</div>
+			<div
+				onClick={() => handleArrowOnClick('left')}
+				className={clsx(
+					lastCategoryVisible
+						? 'pointer-events-none opacity-0 hover:opacity-0'
+						: 'hover:opacity-95',
+					'sticky right-[45px] z-40 mt-4 flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full border border-app-line bg-app/50 p-2 backdrop-blur-md transition-all duration-200'
+				)}
+			>
+				<ArrowRight weight="bold" className="w-4 h-4 text-ink" />
+			</div>
 		</div>
 	);
 };

interface/app/$libraryId/settings/Setting.tsx

@@ -1,18 +1,28 @@
 import clsx from 'clsx';
+import { Info } from 'phosphor-react';
 import { PropsWithChildren } from 'react';
+import { Tooltip } from '@sd/ui';
 
 interface Props {
 	title: string;
 	description?: string;
 	mini?: boolean;
 	className?: string;
+	toolTipLabel?: string | boolean;
 }
 
 export default ({ mini, ...props }: PropsWithChildren<Props>) => {
 	return (
 		<div className="relative flex flex-row">
 			<div className={clsx('flex w-full flex-col', !mini && 'pb-6', props.className)}>
-				<h3 className="mb-1 text-sm font-medium text-ink">{props.title}</h3>
+				<div className="mb-1 flex items-center gap-1">
+					<h3 className="text-sm font-medium text-ink">{props.title}</h3>
+					{props.toolTipLabel && (
+						<Tooltip label={props.toolTipLabel as string}>
+							<Info size={15} />
+						</Tooltip>
+					)}
+				</div>
 				{!!props.description && (
 					<p className="mb-2 text-sm text-gray-400 ">{props.description}</p>
 				)}

interface/app/$libraryId/settings/client/appearance.tsx

@@ -1,11 +1,12 @@
 import clsx from 'clsx';
-import { ArrowClockwise, CheckCircle } from 'phosphor-react';
+import { useMotionValueEvent, useScroll } from 'framer-motion';
-import { useEffect } from 'react';
+import { CheckCircle } from 'phosphor-react';
+import { useEffect, useRef } from 'react';
 import { useState } from 'react';
 import { getThemeStore, useThemeStore } from '@sd/client';
 import { Themes } from '@sd/client';
-import { Button, Divider, Slider, forms } from '@sd/ui';
+import { Button, Slider, forms } from '@sd/ui';
-import { InfoText } from '@sd/ui/src/forms';
+import { usePlatform } from '~/util/Platform';
 import { Heading } from '../Layout';
 import Setting from '../Setting';
 
@@ -56,10 +57,20 @@ const themes: Theme[] = [
 ];
 
 export const Component = () => {
+	const { lockAppTheme } = usePlatform();
 	const themeStore = useThemeStore();
 	const [selectedTheme, setSelectedTheme] = useState<Theme['themeValue']>(
 		themeStore.syncThemeWithSystem === true ? 'system' : themeStore.theme
 	);
+	const themesRef = useRef<HTMLDivElement>(null);
+	const [themeScroll, setThemeScroll] = useState(0);
+	const { scrollX } = useScroll({
+		container: themesRef
+	});
+	useMotionValueEvent(scrollX, 'change', (latest) => {
+		setThemeScroll(latest);
+	});
+
 	const form = useZodForm({
 		schema
 	});
@@ -70,12 +81,15 @@ export const Component = () => {
 
 	useEffect(() => {
 		const subscription = form.watch(() => onSubmit());
-		return () => subscription.unsubscribe();
+		return () => {
+			subscription.unsubscribe();
+		};
 	}, [form, onSubmit]);
 
 	const themeSelectHandler = (theme: Theme['themeValue']) => {
 		setSelectedTheme(theme);
 		if (theme === 'system') {
+			lockAppTheme?.('Auto');
 			getThemeStore().syncThemeWithSystem = true;
 		} else if (theme === 'vanilla') {
 			getThemeStore().syncThemeWithSystem = false;
@@ -96,7 +110,6 @@ export const Component = () => {
 			document.documentElement.style.setProperty('--dark-hue', hue.toString());
 		}
 	};
-
 	return (
 		<>
 			<Form form={form} onSubmit={onSubmit}>
@@ -106,19 +119,12 @@ export const Component = () => {
 					rightArea={
 						<div>
 							<Button
-								disabled={
+								disabled={themeStore.hueValue === 235}
-									themeStore.theme === 'dark' && themeStore.hueValue === 235
+								variant={themeStore.hueValue === 235 ? 'outline' : 'accent'}
-								}
-								variant={
-									themeStore.theme === 'dark' && themeStore.hueValue === 235
-										? 'outline'
-										: 'accent'
-								}
 								size="sm"
 								className="flex items-center gap-1"
 								onClick={() => {
 									hueSliderHandler(235);
-									themeSelectHandler('dark');
 								}}
 							>
 								Reset
@@ -126,14 +132,22 @@ export const Component = () => {
 						</div>
 					}
 				/>
-				<div className="mb-14 mt-8 flex h-[90px] w-full flex-wrap gap-5">
+				<div
+					style={{
+						maskImage: `linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, ${
+							themeScroll > 0 ? '2%' : '200' //Only show fade if scrolled
+						}) 0%, rgba(0, 0, 0, 1) 85%, transparent 100%)`
+					}}
+					ref={themesRef}
+					className="explorer-scroll relative mb-5 mt-8 flex h-[150px] gap-5 overflow-x-scroll pr-[20px] md:w-[300px] lg:w-full"
+				>
 					{themes.map((theme, i) => {
 						return (
 							<div
 								onClick={() => themeSelectHandler(theme.themeValue)}
 								className={clsx(
 									selectedTheme !== theme.themeValue && 'opacity-70',
-									'transition-all duration-200 hover:translate-y-[-3.5px]'
+									'h-[100px] transition-all duration-200  hover:translate-y-[3.5px] lg:first:ml-0 '
 								)}
 								key={i}
 							>
@@ -152,7 +166,15 @@ export const Component = () => {
 						);
 					})}
 				</div>
-				<Setting mini title="Theme hue value" description="Change the hue of the theme">
+				<Setting
+					mini
+					title="Theme hue value"
+					toolTipLabel={
+						themeStore.theme === 'vanilla' &&
+						'Hue color changes visible in dark mode only'
+					}
+					description="Change the hue of the theme"
+				>
 					<div className="mr-3 w-full max-w-[200px] justify-between gap-5">
 						<div className="w-full">
 							<Slider
@@ -169,11 +191,7 @@ export const Component = () => {
 						</div>
 					</div>
 				</Setting>
-				{themeStore.theme === 'vanilla' && (
+
-					<p className="mb-3 text-xs text-red-700">
-						Hue color changes visible in dark mode only
-					</p>
-				)}
 				<Setting
 					mini
 					title="UI Animations"
@@ -204,7 +222,7 @@ function Theme(props: ThemeProps) {
 					props.border,
 					props.textColor,
 					props.className,
-					'relative h-full w-[150px] overflow-hidden rounded-lg'
+					'relative h-[90px] w-[150px] overflow-hidden rounded-lg'
 				)}
 			>
 				<div
@@ -224,7 +242,7 @@ function Theme(props: ThemeProps) {
 					/>
 				)}
 			</div>
-			<p className="mt-3 text-center text-sm">{props.themeName}</p>
+			<p className="my-3 text-center text-sm">{props.themeName}</p>
 		</div>
 	);
 }
@@ -232,15 +250,11 @@ function Theme(props: ThemeProps) {
 function SystemTheme(props: ThemeProps) {
 	return (
 		<div className="h-full w-[150px]">
-			<div className="relative flex h-full">
+			<div className="relative flex h-[90px]">
 				<div className="relative h-full w-[50%] grow overflow-hidden rounded-l-lg bg-black">
 					<Theme className="rounded-r-none" {...themes[1]!} />
 				</div>
-				<div
+				<div className={clsx('relative h-full w-[50%] grow overflow-hidden rounded-r-lg')}>
-					className={clsx(
-						'relative h-full w-[50%] grow overflow-hidden rounded-r-lg'
-					)}
-				>
 					<Theme className="rounded-l-none" {...themes[0]!} />
 				</div>
 				{props.isSelected && (

interface/app/$libraryId/settings/library/locations/AddLocationDialog.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
-import { useCallback, useEffect, useMemo } from 'react';
+import { CaretDown } from 'phosphor-react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Controller, get } from 'react-hook-form';
 import { useDebouncedCallback } from 'use-debounce';
 import {
@@ -65,6 +66,7 @@ export const AddLocationDialog = ({
 	const relinkLocation = useLibraryMutation('locations.relink');
 	const listIndexerRules = useLibraryQuery(['locations.indexer_rules.list']);
 	const addLocationToLibrary = useLibraryMutation('locations.addLibrary');
+	const [toggleSettings, setToggleSettings] = useState(false);
 
 	// This is required because indexRules is undefined on first render
 	const indexerRulesIds = useMemo(
@@ -147,6 +149,7 @@ export const AddLocationDialog = ({
 		[form]
 	);
 
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useCallbackToWatchForm(
 		useDebouncedCallback(async (values, { name }) => {
 			if (name === 'path') {
@@ -222,19 +225,37 @@ export const AddLocationDialog = ({
 
 			<input type="hidden" {...form.register('method')} />
 
-			<Controller
+			<div className="rounded-md border border-app-line bg-app-darkBox">
-				name="indexerRulesIds"
+				<div
-				render={({ field }) => (
+					onClick={() => setToggleSettings((t) => !t)}
-					<IndexerRuleEditor
+					className="flex items-center justify-between px-3 py-2"
-						field={field}
+				>
-						label="File indexing rules:"
+					<p className="text-sm">Advanced settings</p>
-						className="relative flex flex-col"
+					<CaretDown
-						rulesContainerClass="grid grid-cols-2 gap-1"
+						className={clsx(
-						ruleButtonClass="w-full"
+							toggleSettings && 'rotate-180',
+							'transition-all duration-200'
+						)}
 					/>
+				</div>
+				{toggleSettings && (
+					<div className="rounded-b-md border-t border-app-line bg-app-box p-3 pt-2">
+						<Controller
+							name="indexerRulesIds"
+							render={({ field }) => (
+								<IndexerRuleEditor
+									field={field}
+									label="File indexing rules:"
+									className="relative flex flex-col"
+									rulesContainerClass="grid grid-cols-2 gap-1"
+									ruleButtonClass="w-full"
+								/>
+							)}
+							control={form.control}
+						/>
+					</div>
 				)}
-				control={form.control}
+			</div>
-			/>
 		</Dialog>
 	);
 };

interface/app/$libraryId/settings/library/locations/ListItem.tsx

@@ -29,7 +29,7 @@ export default ({ location }: Props) => {
 				navigate(`${location.id}`);
 			}}
 		>
-			<Folder size={40} className="mr-3" />
+			<Folder className="mr-3 h-10 w-10 self-center" />
 			<div className="grid min-w-[110px] grid-cols-1">
 				<h1 className="pt-0.5 text-sm font-semibold">{location.name}</h1>
 				<p className="mt-0.5 select-text truncate  text-sm text-ink-dull">

interface/app/onboarding/Layout.tsx

@@ -53,7 +53,7 @@ export const Component = () => {
 			)}
 		>
 			<DragRegion className="z-50 h-9" />
-			<div className="-mt-5 flex grow flex-col p-10">
+			<div className="-mt-5 flex grow flex-col gap-8 p-10">
 				<div className="flex grow flex-col items-center justify-center">
 					<Outlet />
 				</div>

interface/app/onboarding/alpha.tsx

@@ -10,40 +10,46 @@ export default function OnboardingAlpha() {
 	const platform = usePlatform();
 	return (
 		<OnboardingContainer>
-			<img src={AlphaBg} alt="Alpha Background" className="absolute top-[120px] z-0" />
+			<div className="relative w-screen text-center">
-			<div className="z-1 relative mx-auto mt-14 w-full max-w-[450px] text-center">
+				<img
-				<div className="mb-5 flex w-full items-center justify-center gap-2">
+					src={AlphaBg}
-					<img src={AppLogo} alt="Spacedrive" className="h-8 w-8" />
+					alt="Alpha Background"
-					<h1 className="text-[25px] font-semibold">Spacedrive</h1>
+					className="absolute top-[-50px] z-0 w-full"
-				</div>
+				/>
-				<h1 className="text-[40px] font-bold">Alpha Release</h1>
+				<div className="relative z-10 flex flex-col gap-5">
-				<p className="mt-3 text-sm text-ink-faint">
+					<div className="mb-5 flex w-full items-center justify-center gap-2">
-					We are delighted to announce the release of Spacedrive's alpha version,
+						<img src={AppLogo} alt="Spacedrive" className="h-8 w-8" />
-					showcasing exciting new features. As with any initial release, this version may
+						<h1 className="text-[25px] font-semibold">Spacedrive</h1>
-					contain some bugs. We cannot guarantee that your data will stay intact. We
+					</div>
-					kindly request your assistance in reporting any issues you encounter on our
+					<h1 className="text-[40px] font-bold">Alpha Release</h1>
-					Discord channel. Your valuable feedback will greatly contribute to enhancing the
+					<p className="mx-auto w-full max-w-[450px] text-sm text-ink-faint">
-					user experience.
+						We are delighted to announce the release of Spacedrive's alpha version,
-				</p>
+						showcasing exciting new features. As with any initial release, this version
-				<div className="mt-10 flex w-full items-center justify-center gap-2">
+						may contain some bugs. We cannot guarantee that your data will stay intact.
-					<Button
+						We kindly request your assistance in reporting any issues you encounter on
-						onClick={() => {
+						our Discord channel. Your valuable feedback will greatly contribute to
-							platform.openLink('https://discord.gg/3QWVWJ7');
+						enhancing the user experience.
-						}}
+					</p>
-						className="flex gap-2"
+					<div className="mt-0 flex w-full items-center justify-center gap-2">
-						variant="gray"
+						<Button
-					>
+							onClick={() => {
-						<Discord className="h-5 w-5 fill-white" />
+								platform.openLink('https://discord.gg/ukRnWSnAbG');
-						Join Discord
+							}}
-					</Button>
+							className="flex gap-2"
-					<Button
+							variant="gray"
-						onClick={() => {
+						>
-							navigate('/onboarding/start', { replace: true });
+							<Discord className="h-5 w-5 fill-white" />
-						}}
+							Join Discord
-						variant="accent"
+						</Button>
-					>
+						<Button
-						Continue
+							onClick={() => {
-					</Button>
+								navigate('/onboarding/start', { replace: true });
+							}}
+							variant="accent"
+						>
+							Continue
+						</Button>
+					</div>
 				</div>
 			</div>
 		</OnboardingContainer>

interface/hooks/useTheme.ts

@@ -1,13 +1,16 @@
 import { useThemeStore, getThemeStore } from '@sd/client';
 import { useEffect } from 'react';
+import { usePlatform } from '..';
 
 export function useTheme() {
   const themeStore = useThemeStore();
+  const { lockAppTheme } = usePlatform();
   const systemTheme = window.matchMedia('(prefers-color-scheme: dark)');
 
   useEffect(() => {
     const handleThemeChange = () => {
       if (themeStore.syncThemeWithSystem) {
+		lockAppTheme?.('Auto');
         if (systemTheme.matches) {
           document.documentElement.classList.remove('vanilla-theme');
 		  document.documentElement.style.setProperty('--dark-hue', getThemeStore().hueValue.toString());
@@ -21,20 +24,21 @@ export function useTheme() {
         if (themeStore.theme === 'dark') {
           document.documentElement.classList.remove('vanilla-theme');
 		  document.documentElement.style.setProperty('--dark-hue', getThemeStore().hueValue.toString());
+		  lockAppTheme?.('Dark');
         } else if (themeStore.theme === 'vanilla') {
           document.documentElement.classList.add('vanilla-theme');
 		  document.documentElement.style.setProperty('--light-hue', getThemeStore().hueValue.toString());
-
+		  lockAppTheme?.('Light');
         }
       }
     };
 
-    handleThemeChange();
+	handleThemeChange();
 
     systemTheme.addEventListener('change', handleThemeChange);
 
     return () => {
       systemTheme.removeEventListener('change', handleThemeChange);
     };
-  }, [themeStore, systemTheme]);
+  }, [themeStore, lockAppTheme, systemTheme]);
 }

interface/util/Platform.tsx

@@ -26,6 +26,7 @@ export type Platform = {
 	openFilePath?(library: string, id: number): any;
 	getFilePathOpenWithApps?(library: string, id: number): any;
 	openFilePathWith?(library: string, id: number, appUrl: string): any;
+	lockAppTheme?(themeType: 'Auto' | 'Light' | 'Dark'): any;
 };
 
 // Keep this private and use through helpers below

package.json

@@ -31,19 +31,19 @@
 		}
 	},
 	"devDependencies": {
-		"@babel/plugin-syntax-import-assertions": "^7.20.0",
+		"@babel/plugin-syntax-import-assertions": "^7.22.5",
 		"@cspell/dict-rust": "^2.0.1",
 		"@cspell/dict-typescript": "^2.0.2",
-		"@storybook/react-vite": "^7.0.5",
+		"@storybook/react-vite": "^7.0.20",
 		"@trivago/prettier-plugin-sort-imports": "^4.1.1",
-		"cspell": "^6.12.0",
+		"cspell": "^6.31.1",
-		"prettier": "^2.8.7",
+		"prettier": "^2.8.8",
-		"prettier-plugin-tailwindcss": "^0.2.6",
+		"prettier-plugin-tailwindcss": "^0.2.8",
 		"rimraf": "^4.4.1",
-		"turbo": "^1.9.9",
+		"turbo": "^1.10.2",
 		"turbo-ignore": "^0.3.0",
-		"typescript": "^4.9.4",
+		"typescript": "^5.0.4",
-		"vite": "^4.3.8"
+		"vite": "^4.3.9"
 	},
 	"overrides": {
 		"vite-plugin-svgr": "https://github.com/spacedriveapp/vite-plugin-svgr#cb4195b69849429cdb18d1f12381676bf9196a84",

packages/client/package.json

@@ -29,7 +29,7 @@
 		"@types/react": "^18.0.21",
 		"scripts": "*",
 		"tsconfig": "*",
-		"typescript": "^4.8.4"
+		"typescript": "^5.0.4"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0"

packages/ui/package.json

@@ -24,9 +24,9 @@
 		"@hookform/resolvers": "^3.1.0",
 		"@radix-ui/react-checkbox": "^1.0.3",
 		"@radix-ui/react-context-menu": "^1.0.0",
-		"@radix-ui/react-dialog": "^1.0.0",
+		"@radix-ui/react-dialog": "^1.0.4",
 		"@radix-ui/react-dropdown-menu": "^1.0.0",
-		"@radix-ui/react-popover": "^1.0.3",
+		"@radix-ui/react-popover": "^1.0.6",
 		"@radix-ui/react-radio-group": "^1.1.0",
 		"@radix-ui/react-select": "^1.1.2",
 		"@radix-ui/react-switch": "^1.0.1",

packages/ui/src/ProgressBar.tsx

@@ -12,7 +12,7 @@ export const ProgressBar = memo((props: ProgressBarProps) => {
 	return (
 		<ProgressPrimitive.Root
 			value={percentage}
-			className="h-1 w-[94%] overflow-hidden rounded-full bg-gray-200 dark:bg-gray-500"
+			className="h-1 w-[94%] overflow-hidden rounded-full bg-app-darkBox"
 		>
 			<ProgressPrimitive.Indicator
 				style={{ width: `${percentage}%` }}

packages/ui/src/Tooltip.tsx

@@ -22,9 +22,9 @@ export const Tooltip = ({
 				<TooltipPrimitive.Portal>
 					<TooltipPrimitive.Content
 						side={position}
-						className="z-50 mb-[2px] max-w-[200px] rounded bg-gray-300 px-2 py-1 text-center text-xs dark:!bg-gray-900 dark:text-gray-100"
+						className="z-50 mb-[2px] max-w-[200px] rounded bg-app-darkBox px-2 py-1 text-center text-xs text-ink"
 					>
-						<TooltipPrimitive.Arrow className="fill-gray-300 dark:!fill-gray-900" />
+						<TooltipPrimitive.Arrow className="fill-app-darkBox" />
 						{label}
 					</TooltipPrimitive.Content>
 				</TooltipPrimitive.Portal>

packages/ui/src/forms/Form.tsx

@@ -1,7 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { animated, useTransition } from '@react-spring/web';
 import { VariantProps, cva } from 'class-variance-authority';
-import clsx from 'clsx';
+import { Warning } from 'phosphor-react';
 import { ComponentProps } from 'react';
 import {
 	FieldErrors,
@@ -69,13 +69,13 @@ export const useZodForm = <S extends z.ZodSchema = z.ZodObject<Record<string, ne
 };
 
 export const errorStyles = cva(
-	'inline-block whitespace-pre-wrap rounded border border-red-400/40 bg-red-400/40 text-white',
+	'flex justify-center gap-3 whitespace-pre-wrap rounded border border-red-500/40 bg-red-800/40 px-3 py-2 text-white',
 	{
 		variants: {
 			variant: {
 				none: '',
-				default: 'px-1 text-xs',
+				default: 'w-full text-xs',
-				large: 'w-full px-3 py-2 text-center text-sm font-semibold'
+				large: 'text-left text-xs font-semibold'
 			}
 		},
 		defaultVariants: {
@@ -106,9 +106,10 @@ export const ErrorMessage = ({ name, variant, className }: ErrorMessageProps) =>
 			{transitions((styles, error) => {
 				const message = error?.message;
 				return typeof message === 'string' ? (
-					<animated.span style={styles} className={errorStyles({ variant, className })}>
+					<animated.div style={styles} className={errorStyles({ variant, className })}>
-						{message}
+						<Warning size={15} />
-					</animated.span>
+						<p className="w-[95%]">{message}</p>
+					</animated.div>
 				) : null;
 			})}
 		</>