PublicMetaDB UI tweaks, fix Tailwind 4 broken dropdowns

cedya77 · cedya77 · commit 438155ebf87f · 2026-04-12T22:16:07.000Z
- Move watch tracking toggle to General Settings
- Rename checkin logs to watch tracking
- Remove watch tracking card from PMDB integration dialog
- Fix select/dropdown/tooltip CSS var syntax for Tailwind 4
diff --git a/addon/lib/subtitleHandler.js b/addon/lib/subtitleHandler.js
@@ -560,7 +560,7 @@ async function checkinSimkl(parsedId, config) {
         return;
       }
 
-      logger.debug(`[Simkl Checkin] Checking in movie (${buildIdSummary(ids)})`);
+      logger.debug(`[Simkl Checkin] Tracking movie (${buildIdSummary(ids)})`);
       await checkinMovie(ids, accessToken);
       return;
     }
@@ -605,7 +605,7 @@ async function checkinTrakt(parsedId, config) {
         return;
       }
 
-      logger.debug(`[Trakt Checkin] Checking in movie (${buildIdSummary(ids)})`);
+      logger.debug(`[Trakt Checkin] Tracking movie (${buildIdSummary(ids)})`);
       await checkinMovie(ids, accessToken);
       return;
     }
@@ -638,35 +638,35 @@ async function checkinPublicMetaDB(parsedId, config) {
     const apiKey = config.apiKeys?.publicmetadb;
 
     if (!apiKey) {
-      logger.debug('[PublicMetaDB Checkin] Skipping - missing API key');
+      logger.debug('[PublicMetaDB Watch Tracking] Skipping - missing API key');
       return;
     }
 
     if (parsedId.type === 'movie') {
       const ids = normalizeIdsForMovie(parsedId);
       if (!ids) {
-        logger.debug(`[PublicMetaDB Checkin] No valid identifiers for movie provider ${parsedId.provider}`);
+        logger.debug(`[PublicMetaDB Watch Tracking] No valid identifiers for movie provider ${parsedId.provider}`);
         return;
       }
-      logger.debug(`[PublicMetaDB Checkin] Checking in movie (${buildIdSummary(ids)})`);
+      logger.debug(`[PublicMetaDB Watch Tracking] Tracking movie (${buildIdSummary(ids)})`);
       await checkinMovie(ids, apiKey);
       return;
     }
 
     if (parsedId.type === 'series') {
       const resolution = await resolveSeriesIds(parsedId, config);
       if (!resolution) {
-        logger.debug(`[PublicMetaDB Checkin] Unable to resolve identifiers for series provider ${parsedId.provider}`);
+        logger.debug(`[PublicMetaDB Watch Tracking] Unable to resolve identifiers for series provider ${parsedId.provider}`);
         return;
       }
-      logger.debug(`[PublicMetaDB Checkin] Checking in episode (${buildIdSummary(resolution.ids)}) S${resolution.season}E${resolution.episode}`);
+      logger.debug(`[PublicMetaDB Watch Tracking] Tracking episode (${buildIdSummary(resolution.ids)}) S${resolution.season}E${resolution.episode}`);
       await checkinEpisode(resolution.ids, resolution.season, resolution.episode, apiKey);
       return;
     }
 
-    logger.debug(`[PublicMetaDB Checkin] Unsupported content type: ${parsedId.type}`);
+    logger.debug(`[PublicMetaDB Watch Tracking] Unsupported content type: ${parsedId.type}`);
   } catch (error) {
-    logger.error(`[PublicMetaDB Checkin] Unexpected tracking error: ${error.message}`, {
+    logger.error(`[PublicMetaDB Watch Tracking] Unexpected tracking error: ${error.message}`, {
       stack: error.stack
     });
   }
diff --git a/addon/utils/publicmetadbUtils.ts b/addon/utils/publicmetadbUtils.ts
@@ -330,15 +330,15 @@ async function checkinMovie(ids: Record<string, any>, apiKey: string): Promise<b
       tmdbId = resolved?.tmdbId ? parseInt(resolved.tmdbId, 10) : null;
     }
     if (!tmdbId) {
-      logger.debug(`[Checkin] Could not resolve TMDB ID for movie: ${JSON.stringify(ids)}`);
+      logger.debug(`[Watch Tracking] Could not resolve TMDB ID for movie: ${JSON.stringify(ids)}`);
       return false;
     }
 
     await markWatched(apiKey, tmdbId, 'movie');
-    logger.info(`[Checkin] Movie marked as watched: tmdb:${tmdbId}`);
+    logger.info(`[Watch Tracking] Movie marked as watched: tmdb:${tmdbId}`);
     return true;
   } catch (err: any) {
-    logger.error(`[Checkin] Movie check-in failed: ${err.message}`);
+    logger.error(`[Watch Tracking] Movie check-in failed: ${err.message}`);
     return false;
   }
 }
@@ -356,15 +356,15 @@ async function checkinEpisode(
       tmdbId = resolved?.tmdbId ? parseInt(resolved.tmdbId, 10) : null;
     }
     if (!tmdbId) {
-      logger.debug(`[Checkin] Could not resolve TMDB ID for series: ${JSON.stringify(ids)}`);
+      logger.debug(`[Watch Tracking] Could not resolve TMDB ID for series: ${JSON.stringify(ids)}`);
       return false;
     }
 
     await markWatched(apiKey, tmdbId, 'tv', season, episode);
-    logger.info(`[Checkin] Episode marked as watched: tmdb:${tmdbId} S${season}E${episode}`);
+    logger.info(`[Watch Tracking] Episode marked as watched: tmdb:${tmdbId} S${season}E${episode}`);
     return true;
   } catch (err: any) {
-    logger.error(`[Checkin] Episode check-in failed: ${err.message}`);
+    logger.error(`[Watch Tracking] Episode check-in failed: ${err.message}`);
     return false;
   }
 }
diff --git a/configure/src/components/sections/GeneralSettings.tsx b/configure/src/components/sections/GeneralSettings.tsx
@@ -306,6 +306,10 @@ export function GeneralSettings() {
     setConfig(prevConfig => ({ ...prevConfig, traktWatchTracking: checked }));
   };
 
+  const handlePublicMetaDBTrackingChange = (checked: boolean) => {
+    setConfig(prevConfig => ({ ...prevConfig, publicmetadbWatchTracking: checked }));
+  };
+
   const handleEnableRatingPostersForLibraryChange = (checked: boolean) => {
     setConfig(prevConfig => ({ ...prevConfig, enableRatingPostersForLibrary: checked }));
   };
@@ -503,6 +507,19 @@ export function GeneralSettings() {
             onCheckedChange={handleTraktTrackingChange}
           />
         </div>
+        <div className="flex items-center justify-between p-4 rounded-lg border border-transparent hover:border-border hover:bg-accent transition-colors">
+          <div>
+            <Label htmlFor="publicmetadb-watch-tracking" className="text-lg font-medium">PublicMetaDB Watch Tracking</Label>
+            <p className="text-sm text-muted-foreground">
+              Automatically log plays to your PublicMetaDB account when you watch content (requires API key in Integrations & API Keys).
+            </p>
+          </div>
+          <Switch
+            id="publicmetadb-watch-tracking"
+            checked={!!config.publicmetadbWatchTracking}
+            onCheckedChange={handlePublicMetaDBTrackingChange}
+          />
+        </div>
         <div className="flex items-center justify-between p-4 rounded-lg border border-transparent hover:border-border hover:bg-accent transition-colors">
           <div>
             <Label htmlFor="enable-rating-posters-for-library" className="text-lg font-medium">Keep Rating Posters for Library Items</Label>
diff --git a/configure/src/components/sections/PublicMetaDBIntegration.tsx b/configure/src/components/sections/PublicMetaDBIntegration.tsx
@@ -402,32 +402,6 @@ export function PublicMetaDBIntegration({ isOpen, onClose }: PublicMetaDBIntegra
             </Card>
           )}
 
-          {/* Watch Tracking */}
-          {isValid && (
-            <Card>
-              <CardHeader>
-                <CardTitle>Watch Tracking</CardTitle>
-                <CardDescription>
-                  Automatically log plays to your PublicMetaDB account when you watch content
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="flex items-center justify-between p-3 border rounded-lg">
-                  <div className="space-y-0.5">
-                    <Label htmlFor="pmdb-tracking" className="text-sm font-medium">Mark as Watched</Label>
-                    <p className="text-xs text-muted-foreground">Automatically log plays when you watch content</p>
-                  </div>
-                  <Switch
-                    id="pmdb-tracking"
-                    checked={config.publicmetadbWatchTracking}
-                    onCheckedChange={(checked) =>
-                      setConfig(prev => ({ ...prev, publicmetadbWatchTracking: checked }))
-                    }
-                  />
-                </div>
-              </CardContent>
-            </Card>
-          )}
         </div>
 
         <DialogFooter className="sm:justify-between">
diff --git a/configure/src/components/ui/dropdown-menu.tsx b/configure/src/components/ui/dropdown-menu.tsx
@@ -17,7 +17,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin)",
         className
       )}
       {...props}
diff --git a/configure/src/components/ui/select.tsx b/configure/src/components/ui/select.tsx
@@ -71,7 +71,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+        "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-select-content-transform-origin)",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
diff --git a/configure/src/components/ui/tooltip.tsx b/configure/src/components/ui/tooltip.tsx
@@ -93,7 +93,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-tooltip-content-transform-origin)",
       className
     )}
     {...props}

Original file line number	Diff line number	Diff line change
`@@ -560,7 +560,7 @@ async function checkinSimkl(parsedId, config) {`
`560`	`560`	`return;`
`561`	`561`	`}`
`562`	`562`
`563`		- logger.debug(`[Simkl Checkin] Checking in movie (${buildIdSummary(ids)})`);
	`563`	+ logger.debug(`[Simkl Checkin] Tracking movie (${buildIdSummary(ids)})`);
`564`	`564`	`await checkinMovie(ids, accessToken);`
`565`	`565`	`return;`
`566`	`566`	`}`
`@@ -605,7 +605,7 @@ async function checkinTrakt(parsedId, config) {`
`605`	`605`	`return;`
`606`	`606`	`}`
`607`	`607`
`608`		- logger.debug(`[Trakt Checkin] Checking in movie (${buildIdSummary(ids)})`);
	`608`	+ logger.debug(`[Trakt Checkin] Tracking movie (${buildIdSummary(ids)})`);
`609`	`609`	`await checkinMovie(ids, accessToken);`
`610`	`610`	`return;`
`611`	`611`	`}`
`@@ -638,35 +638,35 @@ async function checkinPublicMetaDB(parsedId, config) {`
`638`	`638`	`const apiKey = config.apiKeys?.publicmetadb;`
`639`	`639`
`640`	`640`	`if (!apiKey) {`
`641`		`- logger.debug('[PublicMetaDB Checkin] Skipping - missing API key');`
	`641`	`+ logger.debug('[PublicMetaDB Watch Tracking] Skipping - missing API key');`
`642`	`642`	`return;`
`643`	`643`	`}`
`644`	`644`
`645`	`645`	`if (parsedId.type === 'movie') {`
`646`	`646`	`const ids = normalizeIdsForMovie(parsedId);`
`647`	`647`	`if (!ids) {`
`648`		- logger.debug(`[PublicMetaDB Checkin] No valid identifiers for movie provider ${parsedId.provider}`);
	`648`	+ logger.debug(`[PublicMetaDB Watch Tracking] No valid identifiers for movie provider ${parsedId.provider}`);
`649`	`649`	`return;`
`650`	`650`	`}`
`651`		- logger.debug(`[PublicMetaDB Checkin] Checking in movie (${buildIdSummary(ids)})`);
	`651`	+ logger.debug(`[PublicMetaDB Watch Tracking] Tracking movie (${buildIdSummary(ids)})`);
`652`	`652`	`await checkinMovie(ids, apiKey);`
`653`	`653`	`return;`
`654`	`654`	`}`
`655`	`655`
`656`	`656`	`if (parsedId.type === 'series') {`
`657`	`657`	`const resolution = await resolveSeriesIds(parsedId, config);`
`658`	`658`	`if (!resolution) {`
`659`		- logger.debug(`[PublicMetaDB Checkin] Unable to resolve identifiers for series provider ${parsedId.provider}`);
	`659`	+ logger.debug(`[PublicMetaDB Watch Tracking] Unable to resolve identifiers for series provider ${parsedId.provider}`);
`660`	`660`	`return;`
`661`	`661`	`}`
`662`		- logger.debug(`[PublicMetaDB Checkin] Checking in episode (${buildIdSummary(resolution.ids)}) S${resolution.season}E${resolution.episode}`);
	`662`	+ logger.debug(`[PublicMetaDB Watch Tracking] Tracking episode (${buildIdSummary(resolution.ids)}) S${resolution.season}E${resolution.episode}`);
`663`	`663`	`await checkinEpisode(resolution.ids, resolution.season, resolution.episode, apiKey);`
`664`	`664`	`return;`
`665`	`665`	`}`
`666`	`666`
`667`		- logger.debug(`[PublicMetaDB Checkin] Unsupported content type: ${parsedId.type}`);
	`667`	+ logger.debug(`[PublicMetaDB Watch Tracking] Unsupported content type: ${parsedId.type}`);
`668`	`668`	`} catch (error) {`
`669`		- logger.error(`[PublicMetaDB Checkin] Unexpected tracking error: ${error.message}`, {
	`669`	+ logger.error(`[PublicMetaDB Watch Tracking] Unexpected tracking error: ${error.message}`, {
`670`	`670`	`stack: error.stack`
`671`	`671`	`});`
`672`	`672`	`}`
Original file line number	Diff line number	Diff line change
`@@ -330,15 +330,15 @@ async function checkinMovie(ids: Record<string, any>, apiKey: string): Promise<b`
`330`	`330`	`tmdbId = resolved?.tmdbId ? parseInt(resolved.tmdbId, 10) : null;`
`331`	`331`	`}`
`332`	`332`	`if (!tmdbId) {`
`333`		- logger.debug(`[Checkin] Could not resolve TMDB ID for movie: ${JSON.stringify(ids)}`);
	`333`	+ logger.debug(`[Watch Tracking] Could not resolve TMDB ID for movie: ${JSON.stringify(ids)}`);
`334`	`334`	`return false;`
`335`	`335`	`}`
`336`	`336`
`337`	`337`	`await markWatched(apiKey, tmdbId, 'movie');`
`338`		- logger.info(`[Checkin] Movie marked as watched: tmdb:${tmdbId}`);
	`338`	+ logger.info(`[Watch Tracking] Movie marked as watched: tmdb:${tmdbId}`);
`339`	`339`	`return true;`
`340`	`340`	`} catch (err: any) {`
`341`		- logger.error(`[Checkin] Movie check-in failed: ${err.message}`);
	`341`	+ logger.error(`[Watch Tracking] Movie check-in failed: ${err.message}`);
`342`	`342`	`return false;`
`343`	`343`	`}`
`344`	`344`	`}`
`@@ -356,15 +356,15 @@ async function checkinEpisode(`
`356`	`356`	`tmdbId = resolved?.tmdbId ? parseInt(resolved.tmdbId, 10) : null;`
`357`	`357`	`}`
`358`	`358`	`if (!tmdbId) {`
`359`		- logger.debug(`[Checkin] Could not resolve TMDB ID for series: ${JSON.stringify(ids)}`);
	`359`	+ logger.debug(`[Watch Tracking] Could not resolve TMDB ID for series: ${JSON.stringify(ids)}`);
`360`	`360`	`return false;`
`361`	`361`	`}`
`362`	`362`
`363`	`363`	`await markWatched(apiKey, tmdbId, 'tv', season, episode);`
`364`		- logger.info(`[Checkin] Episode marked as watched: tmdb:${tmdbId} S${season}E${episode}`);
	`364`	+ logger.info(`[Watch Tracking] Episode marked as watched: tmdb:${tmdbId} S${season}E${episode}`);
`365`	`365`	`return true;`
`366`	`366`	`} catch (err: any) {`
`367`		- logger.error(`[Checkin] Episode check-in failed: ${err.message}`);
	`367`	+ logger.error(`[Watch Tracking] Episode check-in failed: ${err.message}`);
`368`	`368`	`return false;`
`369`	`369`	`}`
`370`	`370`	`}`