Add filesystem scan trigger and version badge features

Implements optional filesystem scan triggering for Plex and Audiobookshelf after file organization, with new settings in the admin UI, setup wizard, and API. Updates documentation to reflect scan trigger options and improved file organization/cleanup logic. Refactors dropdown menus to use smart positioning and portals for better UX. Adds a version API route and a VersionBadge component to display build info in the header. Updates Docker build to inject version metadata.

src/app/admin/components/RequestActionsDropdown.tsx

@@ -8,7 +8,9 @@
 'use client';
 
 import { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { InteractiveTorrentSearchModal } from '@/components/requests/InteractiveTorrentSearchModal';
+import { useSmartDropdownPosition } from '@/hooks/useSmartDropdownPosition';
 
 export interface RequestActionsDropdownProps {
   request: {
@@ -37,7 +39,7 @@ export function RequestActionsDropdown({
 }: RequestActionsDropdownProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [showInteractiveSearch, setShowInteractiveSearch] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
+  const { containerRef, dropdownRef, positionAbove, style } = useSmartDropdownPosition(isOpen);
 
   // Determine available actions based on status
   const canSearch = ['pending', 'failed', 'awaiting_search'].includes(request.status);
@@ -104,27 +106,13 @@ export function RequestActionsDropdown({
     }
   };
 
-  return (
-    <div className="relative" ref={dropdownRef}>
-      {/* Three-dot menu button */}
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        disabled={isLoading}
-        className="inline-flex items-center justify-center w-8 h-8 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-        title="Actions"
-      >
-        <svg
-          className="w-5 h-5 text-gray-600 dark:text-gray-400"
-          fill="currentColor"
-          viewBox="0 0 20 20"
-        >
-          <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
-        </svg>
-      </button>
-
-      {/* Dropdown menu */}
-      {isOpen && (
-        <div className="absolute right-0 mt-2 w-56 rounded-lg shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-50">
+  // Dropdown menu content (rendered via portal)
+  const dropdownMenu = isOpen && style && (
+    <div
+      ref={dropdownRef}
+      style={style}
+      className="w-56 rounded-lg shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-50 max-h-[calc(100vh-2rem)] overflow-y-auto"
+    >
           <div className="py-1" role="menu">
             {/* Manual Search */}
             {canSearch && (
@@ -284,7 +272,30 @@ export function RequestActionsDropdown({
             )}
           </div>
         </div>
-      )}
+  );
+
+  return (
+    <>
+      {/* Three-dot menu button */}
+      <div className="relative" ref={containerRef}>
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          disabled={isLoading}
+          className="inline-flex items-center justify-center w-8 h-8 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          title="Actions"
+        >
+          <svg
+            className="w-5 h-5 text-gray-600 dark:text-gray-400"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Dropdown menu (rendered via portal) */}
+      {typeof window !== 'undefined' && dropdownMenu && createPortal(dropdownMenu, document.body)}
 
       {/* Interactive Search Modal */}
       <InteractiveTorrentSearchModal
@@ -296,6 +307,6 @@ export function RequestActionsDropdown({
           author: request.author,
         }}
       />
-    </div>
+    </>
   );
 }

src/app/admin/settings/page.tsx

@@ -38,11 +38,13 @@ interface Settings {
     url: string;
     token: string;
     libraryId: string;
+    triggerScanAfterImport: boolean;
   };
   audiobookshelf: {
     serverUrl: string;
     apiToken: string;
     libraryId: string;
+    triggerScanAfterImport: boolean;
   };
   oidc: {
     enabled: boolean;
@@ -1193,6 +1195,32 @@ export default function AdminSettings() {
                   )}
                 </div>
 
+                <div className="space-y-2">
+                  <label className="flex items-start gap-3 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={settings.plex.triggerScanAfterImport}
+                      onChange={(e) => {
+                        setSettings({
+                          ...settings,
+                          plex: { ...settings.plex, triggerScanAfterImport: e.target.checked },
+                        });
+                      }}
+                      className="mt-1 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800"
+                    />
+                    <div className="flex-1">
+                      <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                        Trigger library scan after import
+                      </span>
+                      <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+                        Automatically triggers Plex to scan its filesystem after organizing downloaded files.
+                        Only enable this if you have Plex's filesystem watcher (automatic scanning) disabled.
+                        Most users should leave this disabled and rely on Plex's built-in automatic detection.
+                      </p>
+                    </div>
+                  </label>
+                </div>
+
                 <div className="border-t border-gray-200 dark:border-gray-700 pt-6">
                   <Button
                     onClick={testPlexConnection}
@@ -1302,6 +1330,32 @@ export default function AdminSettings() {
                   )}
                 </div>
 
+                <div className="space-y-2">
+                  <label className="flex items-start gap-3 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={settings.audiobookshelf.triggerScanAfterImport}
+                      onChange={(e) => {
+                        setSettings({
+                          ...settings,
+                          audiobookshelf: { ...settings.audiobookshelf, triggerScanAfterImport: e.target.checked },
+                        });
+                      }}
+                      className="mt-1 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800"
+                    />
+                    <div className="flex-1">
+                      <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                        Trigger library scan after import
+                      </span>
+                      <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+                        Automatically triggers Audiobookshelf to scan its filesystem after organizing downloaded files.
+                        Only enable this if you have Audiobookshelf's filesystem watcher (automatic scanning) disabled.
+                        Most users should leave this disabled and rely on Audiobookshelf's built-in automatic detection.
+                      </p>
+                    </div>
+                  </label>
+                </div>
+
                 <div className="border-t border-gray-200 dark:border-gray-700 pt-6">
                   <Button
                     onClick={testABSConnection}