[ENG-1570] Add location button function overview (#1996)

* Make add location button work

* Update settings.json

* Update settings.json

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

@@ -1,16 +1,25 @@
 // import { X } from '@phosphor-icons/react';
-import { Button } from '@sd/ui';
 import { Icon, IconName } from '~/components';
 
-interface NewCardProps {
-	icons: IconName[];
-	text: string;
-	buttonText?: string;
-}
+type NewCardProps =
+	| {
+			icons: IconName[];
+			text: string;
+			button?: () => JSX.Element;
+			buttonText?: never;
+			buttonHandler?: never;
+	  }
+	| {
+			icons: IconName[];
+			text: string;
+			buttonText: string;
+			buttonHandler: () => void;
+			button?: never;
+	  };
 
 const maskImage = `linear-gradient(90deg, transparent 0.1%, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 35%, transparent 99%)`;
 
-const NewCard = ({ icons, text, buttonText }: NewCardProps) => {
+const NewCard = ({ icons, text, buttonText, buttonHandler, button }: NewCardProps) => {
 	return (
 		<div className="flex h-[170px] w-[280px] shrink-0 flex-col justify-between rounded border border-dashed border-app-line p-4">
 			<div className="flex flex-row items-start justify-between">
@@ -27,14 +36,19 @@ const NewCard = ({ icons, text, buttonText }: NewCardProps) => {
 						</div>
 					))}
 				</div>
-				{/* <Button size="icon" variant="outline">
-					<X weight="bold" className="h-3 w-3 opacity-50" />
-				</Button> */}
 			</div>
 			<span className="text-sm text-ink-dull">{text}</span>
-			<Button disabled={!buttonText} variant="outline">
-				{buttonText ? buttonText : 'Coming Soon'}
-			</Button>
+			{button ? (
+				button()
+			) : (
+				<button
+					onClick={buttonHandler}
+					disabled={!buttonText}
+					className="text-sm font-medium text-ink-dull"
+				>
+					{buttonText ? buttonText : 'Coming Soon'}
+				</button>
+			)}
 		</div>
 	);
 };

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

@@ -1,9 +1,10 @@
-import { useBridgeQuery, useCache, useLibraryQuery, useNodes } from '@sd/client';
+import { useBridgeQuery, useCache, useLibraryContext, useLibraryQuery, useNodes } from '@sd/client';
 import { useRouteTitle } from '~/hooks/useRouteTitle';
 import { hardwareModelToIcon } from '~/util/hardware';
 
 import { SearchContextProvider, useSearch } from '../search';
 import SearchBar from '../search/SearchBar';
+import { AddLocationButton } from '../settings/library/locations/AddLocationButton';
 import { TopBarPortal } from '../TopBar/Portal';
 import FileKindStatistics from './FileKindStats';
 import OverviewSection from './Layout/Section';
@@ -13,7 +14,7 @@ import StatisticItem from './StatCard';
 
 export const Component = () => {
 	useRouteTitle('Overview');
-
+	const libraryId = useLibraryContext().library.uuid;
 	const locationsQuery = useLibraryQuery(['locations.list'], { keepPreviousData: true });
 	useNodes(locationsQuery.data?.nodes);
 	const locations = useCache(locationsQuery.data?.items) ?? [];
@@ -147,7 +148,7 @@ export const Component = () => {
 							<NewCard
 								icons={['HDD', 'Folder', 'Globe', 'SD']}
 								text="Connect a local path, volume or network location to Spacedrive."
-								buttonText="Add a Location"
+								button={() => <AddLocationButton variant="outline" />}
 							/>
 						)}
 					</OverviewSection>

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

@@ -1,7 +1,7 @@
 import { FolderSimplePlus } from '@phosphor-icons/react';
 import clsx from 'clsx';
 import { motion } from 'framer-motion';
-import { useRef, useState } from 'react';
+import { ComponentProps, useRef, useState } from 'react';
 import { useLibraryContext } from '@sd/client';
 import { Button, dialogManager, type ButtonProps } from '@sd/ui';
 import { useCallbackToWatchResize } from '~/hooks';
@@ -13,9 +13,16 @@ import { openDirectoryPickerDialog } from './openDirectoryPickerDialog';
 interface AddLocationButton extends ButtonProps {
 	path?: string;
 	onClick?: () => void;
+	buttonVariant?: ComponentProps<typeof Button>['variant'];
 }
 
-export const AddLocationButton = ({ path, className, onClick, ...props }: AddLocationButton) => {
+export const AddLocationButton = ({
+	path,
+	className,
+	onClick,
+	buttonVariant = 'dotted',
+	...props
+}: AddLocationButton) => {
 	const platform = usePlatform();
 	const libraryId = useLibraryContext().library.uuid;
 
@@ -53,7 +60,7 @@ export const AddLocationButton = ({ path, className, onClick, ...props }: AddLoc
 	return (
 		<>
 			<Button
-				variant="dotted"
+				variant={buttonVariant}
 				className={clsx('w-full', className)}
 				onClick={async () => {
 					await locationDialogHandler();