💄 Library redesign follow-up and fixes

packages/browser/src/components/library/createOrUpdate/sections/BasicLibraryInformation.tsx

@@ -1,4 +1,4 @@
-import { Heading, IconButton, Input, Text, TextArea } from '@stump/components'
+import { IconButton, Input, TextArea } from '@stump/components'
 import { useLocaleContext } from '@stump/i18n'
 import { Folder } from 'lucide-react'
 import { useFormContext, useFormState } from 'react-hook-form'
@@ -10,7 +10,6 @@ import { CreateOrUpdateLibrarySchema } from '../schema'
 
 const LOCALE_KEY = 'createOrUpdateLibraryForm'
 const getKey = (key: string) => `${LOCALE_KEY}.fields.${key}`
-const getSectionKey = (key: string) => `${LOCALE_KEY}.sections.${key}`
 
 type Props = {
 	onSetShowDirectoryPicker: (value: boolean) => void
@@ -30,15 +29,6 @@ export default function BasicLibraryInformation({ onSetShowDirectoryPicker }: Pr
 
 	return (
 		<div className="flex flex-grow flex-col gap-6">
-			{isCreatingLibrary && (
-				<div>
-					<Heading size="sm">{t(getSectionKey('heading'))}</Heading>
-					<Text size="sm" variant="muted">
-						{t(getSectionKey('description'))}
-					</Text>
-				</div>
-			)}
-
 			<div className="flex flex-col flex-wrap gap-y-6 md:flex-row md:gap-x-6 md:gap-y-0">
 				<Input
 					variant="primary"

packages/browser/src/scenes/library/tabs/settings/LibrarySettingsRouter.tsx

@@ -12,6 +12,7 @@ const ThumbnailSettingsScene = React.lazy(
 	() => import('./options/thumbnails/ThumbnailSettingsScene'),
 )
 const ScannerBehaviorScene = React.lazy(() => import('./options/ScannerBehaviorScene'))
+const LibraryAnalysisScene = React.lazy(() => import('./options/analysis'))
 
 const AccessControlScene = React.lazy(() => import('./danger/accessControl'))
 const DeletionScene = React.lazy(() => import('./danger/deletion'))
@@ -58,17 +59,13 @@ export default function LibrarySettingsRouter() {
 				<Route path="" element={<Navigate to="basics" replace />} />
 				<Route path="basics" element={<BasicSettingsScene />} />
 
-				<Route path="options/*">
-					<Route path="" element={<Navigate to="scanning" replace />} />
-					<Route path="scanning" element={<ScannerBehaviorScene />} />
-					<Route path="thumbnails" element={<ThumbnailSettingsScene />} />
-				</Route>
+				<Route path="scanning" element={<ScannerBehaviorScene />} />
+				<Route path="thumbnails" element={<ThumbnailSettingsScene />} />
+				<Route path="analysis" element={<LibraryAnalysisScene />} />
 
-				<Route path="danger/*">
-					<Route path="" element={<Navigate to="access-control" replace />} />
-					<Route path="access-control" element={<AccessControlScene />} />
-					<Route path="delete" element={<DeletionScene />} />
-				</Route>
+				<Route path="" element={<Navigate to="access-control" replace />} />
+				<Route path="access-control" element={<AccessControlScene />} />
+				<Route path="delete" element={<DeletionScene />} />
 			</Routes>
 		</LibraryManagementContext.Provider>
 	)

packages/browser/src/scenes/library/tabs/settings/options/analysis/AnalyzeMedia.tsx

@@ -0,0 +1,37 @@
+import { libraryApi } from '@stump/api'
+import { Alert, Button, Heading, Text } from '@stump/components'
+import { useLocaleContext } from '@stump/i18n'
+import React, { useCallback } from 'react'
+
+import { useLibraryContext } from '@/scenes/library/context'
+
+export default function AnalyzeMedia() {
+	const { library } = useLibraryContext()
+	const { t } = useLocaleContext()
+
+	const handleAnalyze = useCallback(() => libraryApi.startMediaAnalysis(library.id), [library.id])
+
+	return (
+		<div className="flex flex-col gap-6">
+			<div>
+				<Heading size="sm">{t(getKey('heading'))}</Heading>
+				<Text size="sm" variant="muted">
+					{t(getKey('description'))}
+				</Text>
+			</div>
+
+			<Alert level="info" icon="info">
+				<Alert.Content>{t(getKey('disclaimer'))}</Alert.Content>
+			</Alert>
+
+			<div>
+				<Button size="md" variant="primary" onClick={handleAnalyze}>
+					Analyze books
+				</Button>
+			</div>
+		</div>
+	)
+}
+
+const LOCALE_KEY = 'librarySettingsScene.options/analysis.sections.analyzeBooks'
+const getKey = (key: string) => `${LOCALE_KEY}.${key}`

packages/browser/src/scenes/library/tabs/settings/options/analysis/LibraryAnalysisScene.tsx

@@ -0,0 +1,16 @@
+import { Alert } from '@stump/components'
+import React from 'react'
+
+import AnalyzeMedia from './AnalyzeMedia'
+
+export default function LibraryAnalysisScene() {
+	return (
+		<div className="flex flex-col gap-12">
+			<Alert level="warning" icon="warning">
+				<Alert.Content>This page has limited functionality and is a work in progress</Alert.Content>
+			</Alert>
+
+			<AnalyzeMedia />
+		</div>
+	)
+}

packages/browser/src/scenes/library/tabs/settings/options/analysis/index.ts

@@ -0,0 +1 @@
+export { default } from './LibraryAnalysisScene'

packages/browser/src/scenes/library/tabs/settings/RegenerateThumbnails.tsx → packages/browser/src/scenes/library/tabs/settings/options/thumbnails/RegenerateThumbnails.tsx

@@ -1,11 +1,18 @@
+import { libraryApi, libraryQueryKeys } from '@stump/api'
+import { useMutation } from '@stump/client'
 import { Button, DropdownMenu, Label, Text } from '@stump/components'
 import { AlertTriangle, ChevronDown, ImagePlus } from 'lucide-react'
 import React from 'react'
 
-type Props = {
-	onRegenerate(force: boolean): void
-}
-export default function RegenerateThumbnails({ onRegenerate }: Props) {
+import { useLibraryContext } from '@/scenes/library/context'
+
+export default function RegenerateThumbnails() {
+	const { library } = useLibraryContext()
+	const { mutate } = useMutation(
+		[libraryQueryKeys.regenerateThumbnails, library.id],
+		(force: boolean) => libraryApi.regenerateThumbnails(library.id, force),
+	)
+
 	const iconStyle = 'mr-2 h-4 w-4'
 
 	return (
@@ -31,12 +38,12 @@ export default function RegenerateThumbnails({ onRegenerate }: Props) {
 								{
 									label: 'Create missing only',
 									leftIcon: <ImagePlus className={iconStyle} />,
-									onClick: () => onRegenerate(false),
+									onClick: () => mutate(false),
 								},
 								{
 									label: 'Force recreate all',
 									leftIcon: <AlertTriangle className={iconStyle} />,
-									onClick: () => onRegenerate(true),
+									onClick: () => mutate(true),
 								},
 							],
 						},

packages/browser/src/scenes/library/tabs/settings/options/thumbnails/ThumbnailManagementSection.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 
 import DeleteLibraryThumbnails from './DeleteLibraryThumbnails'
 import LibraryThumbnailSelector from './LibraryThumbnailSelector'
+import RegenerateThumbnails from './RegenerateThumbnails'
 
 export default function ThumbnailManagementSection() {
 	const { t } = useLocaleContext()
@@ -18,6 +19,7 @@ export default function ThumbnailManagementSection() {
 			</div>
 
 			<LibraryThumbnailSelector />
+			<RegenerateThumbnails />
 			<DeleteLibraryThumbnails />
 		</div>
 	)

packages/browser/src/scenes/library/tabs/settings/routes.ts

@@ -1,4 +1,4 @@
-import { Image, NotebookTabs, PackageX, ScanSearch, ShieldCheck } from 'lucide-react'
+import { FlaskRound, Image, NotebookTabs, PackageX, ScanSearch, ShieldCheck } from 'lucide-react'
 
 import { RouteGroup } from '@/hooks/useRouteGroups'
 
@@ -25,14 +25,21 @@ export const routeGroups: RouteGroup[] = [
 				label: 'Scanning',
 				localeKey: 'options/scanning',
 				permission: 'library:manage',
-				to: 'settings/options/scanning',
+				to: 'settings/scanning',
 			},
 			{
 				icon: Image,
 				label: 'Thumbnails',
 				localeKey: 'options/thumbnails',
 				permission: 'library:manage',
-				to: 'settings/options/thumbnails',
+				to: 'settings/thumbnails',
+			},
+			{
+				icon: FlaskRound,
+				label: 'Analysis',
+				localeKey: 'options/analysis',
+				permission: 'library:manage',
+				to: 'settings/analysis',
 			},
 		],
 		label: 'Options',
@@ -45,14 +52,14 @@ export const routeGroups: RouteGroup[] = [
 				label: 'Access Control',
 				localeKey: 'danger-zone/access-control',
 				permission: 'library:manage',
-				to: 'settings/danger/access-control',
+				to: 'settings/access-control',
 			},
 			{
 				icon: PackageX,
 				label: 'Delete',
 				localeKey: 'danger-zone/delete',
 				permission: 'library:delete',
-				to: 'settings/danger/delete',
+				to: 'settings/delete',
 			},
 		],
 		label: 'Danger Zone',

packages/i18n/src/locales/en.json

@@ -129,12 +129,6 @@
 		}
 	},
 	"createOrUpdateLibraryForm": {
-		"sections": {
-			"basics": {
-				"heading": "Basic information",
-				"description": "The details of this library, including its name, path, and description"
-			}
-		},
 		"fields": {
 			"name": {
 				"label": "Name",
@@ -337,7 +331,8 @@
 				"scanning": "Scanning",
 				"thumbnails": "Thumbnails",
 				"ignore-rules": "Ignore Rules",
-				"label": "File Options"
+				"analysis": "Analysis",
+				"label": "Options"
 			},
 			"danger-zone": {
 				"access-control": "Access Control",
@@ -368,6 +363,28 @@
 				}
 			}
 		},
+		"options/analysis": {
+			"title": "Analysis",
+			"description": "Analyze the contents of this library to identify potential issues or improvements",
+			"sections": {
+				"analyzeBooks": {
+					"heading": "Analyze books",
+					"description": "Analyze the books in this library to attach additional metadata in the database, such as page dimensions for image-based books",
+					"disclaimer": "This process is resource-intensive and may take a while to complete",
+					"analyzeButton": "Analyze books"
+				},
+				"missingFiles": {
+					"heading": "Missing files",
+					"description": "Files that are referenced in the database but cannot be located on disk",
+					"noMissingFiles": "There are no missing files in this library"
+				},
+				"duplicateFiles": {
+					"heading": "Duplicate files",
+					"description": "Files that are potentially duplicated on disk",
+					"noDuplicateFiles": "There are no duplicate files detected for this library"
+				}
+			}
+		},
 		"danger-zone/access-control": {
 			"title": "Access Control",
 			"description": "Control who can access the content in this library",