From c8ee3edba79b1a7c36a39784bdcd8b72db20877f Mon Sep 17 00:00:00 2001
From: Deluan <deluan@navidrome.org>
Date: Tue, 24 Jun 2025 22:09:40 -0400
Subject: [PATCH] feat(missingfiles): add library filter and display in
 MissingFilesList component

Signed-off-by: Deluan <deluan@navidrome.org>
---
 ui/src/i18n/en.json                 |  1 +
 ui/src/missing/MissingFilesList.jsx | 25 +++++++++++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/ui/src/i18n/en.json b/ui/src/i18n/en.json
index 4fd1bc371..2f5c7b6ec 100644
--- a/ui/src/i18n/en.json
+++ b/ui/src/i18n/en.json
@@ -254,6 +254,7 @@
       "fields": {
         "path": "Path",
         "size": "Size",
+        "libraryName": "Library",
         "updatedAt": "Disappeared on"
       },
       "actions": {
diff --git a/ui/src/missing/MissingFilesList.jsx b/ui/src/missing/MissingFilesList.jsx
index 74711eed0..87d9f629f 100644
--- a/ui/src/missing/MissingFilesList.jsx
+++ b/ui/src/missing/MissingFilesList.jsx
@@ -5,10 +5,15 @@ import {
   TextField,
   downloadCSV,
   Pagination,
+  Filter,
+  ReferenceInput,
+  useTranslate,
+  SelectInput,
 } from 'react-admin'
 import jsonExport from 'jsonexport/dist'
 import DeleteMissingFilesButton from './DeleteMissingFilesButton.jsx'
 import MissingListActions from './MissingListActions.jsx'
+import React from 'react'
 
 const exporter = (files) => {
   const filesToExport = files.map((file) => {
@@ -20,6 +25,24 @@ const exporter = (files) => {
   })
 }
 
+const MissingFilesFilter = (props) => {
+  const translate = useTranslate()
+  return (
+    <Filter {...props} variant={'outlined'}>
+      <ReferenceInput
+        label={translate('resources.missing.fields.libraryName')}
+        source="library_id"
+        reference="library"
+        sort={{ field: 'name', order: 'ASC' }}
+        filterToQuery={(searchText) => ({ name: [searchText] })}
+        alwaysOn
+      >
+        <SelectInput emptyText="-- All --" optionText="name" />
+      </ReferenceInput>
+    </Filter>
+  )
+}
+
 const BulkActionButtons = (props) => (
   <>
     <DeleteMissingFilesButton {...props} />
@@ -38,11 +61,13 @@ const MissingFilesList = (props) => {
       sort={{ field: 'updated_at', order: 'DESC' }}
       exporter={exporter}
       actions={<MissingListActions />}
+      filters={<MissingFilesFilter />}
       bulkActionButtons={<BulkActionButtons />}
       perPage={50}
       pagination={<MissingPagination />}
     >
       <Datagrid>
+        <TextField source={'libraryName'} />
         <TextField source={'path'} />
         <SizeField source={'size'} />
         <DateField source={'updatedAt'} showTime />