feat(frontend): move tmdb access token setting to services menu

packages/frontend/src/components/menu/filters.tsx

@@ -1117,7 +1117,7 @@ function Content() {
               <div className="space-y-4">
                 <SettingsCard
                   title="Title Matching"
-                  description="Any streams which don't specifically match the requested title will be filtered out. You can optionally choose to only apply it to specific request types and addons"
+                  description="Any streams which don't specifically match the requested title will be filtered out. You can optionally choose to only apply it to specific request types and addons. This requires a TMDB Read Access Token to be set in the Services menu."
                 >
                   <Switch
                     label="Enabled"
@@ -1175,37 +1175,6 @@ function Content() {
                     }}
                   />
 
-                  <PasswordInput
-                    label="TMDB Access Token"
-                    help={
-                      <>
-                        <p>
-                          A TMDB access token is required to fetch titles from
-                          the TMDB API. You can get it from your{' '}
-                          <a
-                            href="https://www.themoviedb.org/settings/api"
-                            target="_blank"
-                            className="text-[--brand] hover:underline"
-                            rel="noopener noreferrer"
-                          >
-                            TMDB Account Settings
-                          </a>
-                        </p>
-                        <p></p>
-                      </>
-                    }
-                    disabled={!userData.titleMatching?.enabled}
-                    required={!status?.settings.tmdbApiAvailable}
-                    value={userData.tmdbAccessToken}
-                    placeholder="Enter your TMDB access token"
-                    onValueChange={(value) => {
-                      setUserData((prev) => ({
-                        ...prev,
-                        tmdbAccessToken: value,
-                      }));
-                    }}
-                  />
-
                   <div className="space-y-4">
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                       <Combobox

packages/frontend/src/components/menu/services.tsx

@@ -34,6 +34,7 @@ import { useMenu } from '@/context/menu';
 import { PageControls } from '../shared/page-controls';
 import { SettingsCard } from '../shared/settings-card';
 import { TextInput } from '../ui/text-input';
+import { PasswordInput } from '../ui/password-input';
 
 export function ServicesMenu() {
   return (
@@ -298,9 +299,8 @@ function Content() {
         title="RPDB"
         description="Provide your RPDB API key if you want catalogs of supported types to use posters from RPDB"
       >
-        <TextInput
+        <PasswordInput
           label="RPDB API Key"
-          // help="Get your API Key from "
           help={
             <span>
               Get your API Key from{' '}
@@ -323,6 +323,45 @@ function Content() {
           }}
         />
       </SettingsCard>
+
+      <SettingsCard
+        title="TMDB"
+        description={`Provide your TMDB Read Access Token to use some features of AIOStreams. This instance ${
+          status?.settings.tmdbApiAvailable ? 'has' : 'does not have'
+        } a default TMDB Access token set so you ${
+          status?.settings.tmdbApiAvailable ? 'do not have to' : 'have to'
+        } set one here. It is used for title matching and recommended for precaching to be able to determine when to move to the next season.`}
+      >
+        <PasswordInput
+          label="TMDB Read Access Token"
+          help={
+            <>
+              <p>
+                You can get it from your{' '}
+                <a
+                  href="https://www.themoviedb.org/settings/api"
+                  target="_blank"
+                  className="text-[--brand] hover:underline"
+                  rel="noopener noreferrer"
+                >
+                  TMDB Account Settings
+                </a>
+              </p>
+              <p></p>
+            </>
+          }
+          required={!status?.settings.tmdbApiAvailable}
+          value={userData.tmdbAccessToken}
+          placeholder="Enter your TMDB access token"
+          onValueChange={(value) => {
+            setUserData((prev) => ({
+              ...prev,
+              tmdbAccessToken: value,
+            }));
+          }}
+        />
+      </SettingsCard>
+
       <ServiceModal
         open={modalOpen}
         onOpenChange={setModalOpen}