Add devices module and integrate device management into API; enhance …

…overview with recent items and favorite items features

core/src/api/devices.rs

@@ -0,0 +1,14 @@
+use super::{utils::library, Ctx, R};
+use rspc::alpha::AlphaRouter;
+use serde::Deserialize;
+use specta::Type;
+
+pub(crate) fn mount() -> AlphaRouter<Ctx> {
+	R.router().procedure(
+		"list",
+		R.with2(library())
+			.query(|(node, library), _: ()| async move {
+				Ok(library.db.device().find_many(vec![]).exec().await?)
+			}),
+	)
+}

core/src/api/mod.rs

@@ -26,6 +26,7 @@ use tracing::warn;
 
 mod backups;
 mod cloud;
+pub mod devices;
 mod ephemeral_files;
 mod files;
 mod jobs;
@@ -197,6 +198,7 @@ pub(crate) fn mount() -> Arc<Router> {
 		.merge("search.", search::mount())
 		.merge("library.", libraries::mount())
 		.merge("volumes.", volumes::mount())
+		.merge("devices.", devices::mount())
 		.merge("tags.", tags::mount())
 		.merge("labels.", labels::mount())
 		.merge("locations.", locations::mount())

interface/app/$libraryId/Explorer/View/Grid/SimpleGridItem.tsx

@@ -0,0 +1,47 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { useNavigate } from 'react-router';
+import { useSelector, type ExplorerItem } from '@sd/client';
+import { useOperatingSystem } from '~/hooks';
+import { useRoutingContext } from '~/RoutingContext';
+
+import { useExplorerContext } from '../../Context';
+import { explorerStore, isCut } from '../../store';
+
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+	item: ExplorerItem;
+	children: (state: { selected: boolean; cut: boolean }) => ReactNode;
+}
+
+export const SimpleGridItem = ({ children, item, ...props }: Props) => {
+	const explorer = useExplorerContext();
+	const { currentIndex, maxIndex } = useRoutingContext();
+	const os = useOperatingSystem();
+	const navigate = useNavigate();
+
+	const cutCopyState = useSelector(explorerStore, (s) => s.cutCopyState);
+	const cut = isCut(item, cutCopyState);
+	const selected = explorer.selectedItems.has(item);
+
+	const canGoBack = currentIndex !== 0;
+	const canGoForward = currentIndex !== maxIndex;
+
+	return (
+		<div
+			{...props}
+			className="size-full"
+			onMouseDown={(e) => {
+				e.stopPropagation();
+				if (os === 'browser') return;
+				if (e.buttons === 8 || e.buttons === 3) {
+					if (!canGoBack) return;
+					navigate(-1);
+				} else if (e.buttons === 16 || e.buttons === 4) {
+					if (!canGoForward) return;
+					navigate(1);
+				}
+			}}
+		>
+			{children({ selected, cut })}
+		</div>
+	);
+};

interface/app/$libraryId/Layout/Sidebar/sections/Local/index.tsx

@@ -82,26 +82,27 @@ export default function LocalSection() {
 	// Improved volume tracking
 	const trackVolumeMutation = useLibraryMutation('volumes.track');
 
-	// Mapping of volume paths to location IDs
+	// Mapping of volume paths to location IDs so we can open the location if root
 	const locationIdsForVolumes = useMemo(() => {
 		if (!locations || !volumes) return {};
 
 		return locations.reduce(
 			(acc, location) => {
+				// match location path to volume mount point
 				const matchingVolume = volumes.find((v) =>
 					v.mount_points.some((mp) => mp === location.path)
 				);
 
 				if (matchingVolume && matchingVolume.pub_id && location.path) {
 					acc[location.path] = {
 						locationId: location.id,
-						volumeId: new Uint8Array(matchingVolume.pub_id)
+						volumeFingerprint: matchingVolume.fingerprint
 					};
 				}
 
 				return acc;
 			},
-			{} as Record<string, { locationId: number; volumeId: Uint8Array }>
+			{} as Record<string, { locationId: number; volumeFingerprint: string }>
 		);
 	}, [locations, volumes]);
 
@@ -156,9 +157,9 @@ export default function LocalSection() {
 							onTrack={async () => {
 								if (!isTracked && volume.pub_id) {
 									try {
-										await trackVolumeMutation.mutateAsync({
-											volume_id: Array.from(volume.pub_id) // Convert Uint8Array to number[]
-										});
+										await trackVolumeMutation.mutateAsync(
+											Array.from(volume.pub_id)
+										);
 										toast.success('Volume tracked successfully');
 									} catch (error) {
 										toast.error('Failed to track volume');

interface/app/$libraryId/overview/Layout/HorizontalScroll.tsx

@@ -61,7 +61,7 @@ const HorizontalScroll = ({ children, className }: { children: ReactNode; classN
 	}, rgba(0, 0, 0, 1) ${lastItemVisible ? '95%' : '85%'}, transparent 99%)`;
 
 	return (
-		<div className={clsx(className, 'relative mb-4 flex pl-6')}>
+		<div className={clsx(className, 'relative mb-4')}>
 			<ArrowButton
 				onClick={() => handleArrowOnClick('right')}
 				className={clsx('left-3', scroll === 0 && 'pointer-events-none opacity-0')}
@@ -72,7 +72,7 @@ const HorizontalScroll = ({ children, className }: { children: ReactNode; classN
 				ref={ref}
 				{...events}
 				className={clsx(
-					'no-scrollbar flex gap-2 space-x-px overflow-x-scroll pl-1 pr-[60px]',
+					'no-scrollbar flex gap-2 space-x-px overflow-x-scroll pl-1 pr-[30px]',
 					isContentOverflow ? 'cursor-grab' : 'cursor-default'
 				)}
 				style={{

interface/app/$libraryId/overview/cards/FavoriteItems.tsx

@@ -0,0 +1,27 @@
+import { useLibraryQuery } from '@sd/client';
+
+import { ItemsCard } from './ItemsCard';
+
+const FavoriteItemsCard = () => {
+	const favoriteItemsQuery = useLibraryQuery([
+		'search.objects',
+		{
+			take: 6,
+			orderAndPagination: {
+				orderOnly: { field: 'dateAccessed', value: 'Desc' }
+			},
+			filters: [{ object: { favorite: true } }]
+		}
+	]);
+
+	return (
+		<ItemsCard
+			title="Favorite Items"
+			query={favoriteItemsQuery}
+			buttonText="See all favorites"
+			buttonLink="/explorer?filter=favorites"
+		/>
+	);
+};
+
+export default FavoriteItemsCard;