Misc UI fixes (#725)

* Misc UI fixes
 - Solve React dev warning due to not using ref in a fowardRef
 - Show title in alertDialog

* Partial revert "Misc UI fixes"

* Remove console.log from 'OptionsPanel.tsx'
- Replace invalidateQuery with refresh for `locations.list` in `AddLocationDialog`

* Format `Select.tsx`
 - Update turbo to fix https://github.com/vercel/turbo/issues/3598

interface/app/$libraryId/Explorer/OptionsPanel.tsx

@@ -40,7 +40,6 @@ export default () => {
 				<Slider
 					onValueChange={(value) => {
 						getExplorerStore().gridItemSize = value[0] || 100;
-						console.log({ value: value, gridItemSize: explorerStore.gridItemSize });
 					}}
 					defaultValue={[explorerStore.gridItemSize]}
 					max={200}
@@ -87,7 +86,6 @@ export default () => {
 						label="Show Object size"
 						name="showBytesInGridView"
 						onCheckedChange={(value) => {
-							console.log(value);
 							if (typeof value === 'boolean') {
 								getExplorerStore().showBytesInGridView = value;
 							}

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

@@ -1,6 +1,5 @@
 import { ErrorMessage } from '@hookform/error-message';
 import { RSPCError } from '@rspc/client';
-import { useQueryClient } from '@tanstack/react-query';
 import { useEffect, useMemo, useState } from 'react';
 import { Controller } from 'react-hook-form';
 import { useLibraryMutation, useLibraryQuery } from '@sd/client';
@@ -44,7 +43,7 @@ export const openDirectoryPickerDialog = async (platform: Platform): Promise<nul
 export const AddLocationDialog = ({ path, ...dialogProps }: Props) => {
 	const dialog = useDialog(dialogProps);
 	const platform = usePlatform();
-	const queryClient = useQueryClient();
+	const listLocations = useLibraryQuery(['locations.list']);
 	const createLocation = useLibraryMutation('locations.create');
 	const relinkLocation = useLibraryMutation('locations.relink');
 	const listIndexerRules = useLibraryQuery(['locations.indexer_rules.list']);
@@ -146,10 +145,9 @@ export const AddLocationDialog = ({ path, ...dialogProps }: Props) => {
 					: ''
 			}
 			onSubmit={(event) =>
-				onLocationSubmit(event).then(
-					() => queryClient.invalidateQueries(['library.list']),
-					onLocationSubmitError
-				)
+				onLocationSubmit(event).then(async () => {
+					await listLocations.refetch();
+				}, onLocationSubmitError)
 			}
 			ctaLabel="Add"
 		>

interface/components/AlertDialog.tsx

@@ -16,6 +16,7 @@ const AlertDialog = (props: Props) => {
 	// maybe a copy-to-clipboard button would be beneficial too
 	return (
 		<Dialog
+			title={props.title}
 			form={form}
 			onSubmit={form.handleSubmit(() => {})}
 			dialog={dialog}

package.json

@@ -38,7 +38,7 @@
 		"prettier": "^2.8.7",
 		"prettier-plugin-tailwindcss": "^0.2.6",
 		"rimraf": "^4.3",
-		"turbo": "^1.5.5",
+		"turbo": "^1.9.3",
 		"turbo-ignore": "^0.3.0",
 		"typescript": "^4.9.4"
 	},

packages/ui/src/Select.tsx

@@ -7,7 +7,7 @@ import { PropsWithChildren } from 'react';
 
 export const selectStyles = cva(
 	[
-		'rounded-md border text-sm flex pl-3 pr-[10px] items-center justify-between',
+		'flex items-center justify-between rounded-md border pl-3 pr-[10px] text-sm',
 		'shadow-sm outline-none transition-all focus:ring-2',
 		'radix-placeholder:text-ink-faint'
 	],