From dc34d6c1f68de8e82a2ccb64bf6f7fcabdda36c1 Mon Sep 17 00:00:00 2001
From: gauthier-th <mail@gauthierth.fr>
Date: Mon, 19 Aug 2024 19:48:58 +0200
Subject: [PATCH] fix: move "scanning in background" tip next to the scanning
 section

---
 src/components/Settings/SettingsJellyfin.tsx | 23 +++++++++++++++-----
 src/components/Setup/index.tsx               | 12 +---------
 src/pages/settings/jellyfin.tsx              |  2 +-
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/components/Settings/SettingsJellyfin.tsx b/src/components/Settings/SettingsJellyfin.tsx
index 27a0ad5e7..316dc48ef 100644
--- a/src/components/Settings/SettingsJellyfin.tsx
+++ b/src/components/Settings/SettingsJellyfin.tsx
@@ -62,6 +62,9 @@ const messages = defineMessages('components.Settings', {
   validationUrlTrailingSlash: 'URL must not end in a trailing slash',
   validationUrlBaseLeadingSlash: 'URL base must have a leading slash',
   validationUrlBaseTrailingSlash: 'URL base must not end in a trailing slash',
+  tip: 'Tip',
+  scanbackground:
+    'Scanning will run in the background. You can continue the setup process in the meantime.',
 });
 
 interface Library {
@@ -79,13 +82,13 @@ interface SyncStatus {
 }
 
 interface SettingsJellyfinProps {
-  showAdvancedSettings?: boolean;
+  isSetupSettings?: boolean;
   onComplete?: () => void;
 }
 
 const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
   onComplete,
-  showAdvancedSettings,
+  isSetupSettings,
 }) => {
   const [isSyncing, setIsSyncing] = useState(false);
   const toasts = useToasts();
@@ -447,6 +450,14 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
           </div>
         </div>
       </div>
+      {isSetupSettings && (
+        <div className="text-sm text-gray-500">
+          <span className="mr-2">
+            <Badge>{intl.formatMessage(messages.tip)}</Badge>
+          </span>
+          {intl.formatMessage(messages.scanbackground)}
+        </div>
+      )}
       <div className="mt-10 mb-6">
         <h3 className="heading">
           {intl.formatMessage(
@@ -548,7 +559,7 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
         }) => {
           return (
             <form className="section" onSubmit={handleSubmit}>
-              {showAdvancedSettings && (
+              {!isSetupSettings && (
                 <>
                   <div className="form-row">
                     <label htmlFor="hostname" className="text-label">
@@ -632,7 +643,7 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
                   )}
                 </div>
               </div>
-              {showAdvancedSettings && (
+              {!isSetupSettings && (
                 <>
                   <div className="form-row">
                     <label htmlFor="urlBase" className="text-label">
@@ -699,7 +710,9 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
                     )}
                 </div>
               </div>
-              <div className="actions">
+              <div
+                className={`actions ${isSetupSettings ? 'mt-0 border-0' : ''}`}
+              >
                 <div className="flex justify-end">
                   <span className="ml-3 inline-flex rounded-md shadow-sm">
                     <Button
diff --git a/src/components/Setup/index.tsx b/src/components/Setup/index.tsx
index 2706f57bf..32ff396bf 100644
--- a/src/components/Setup/index.tsx
+++ b/src/components/Setup/index.tsx
@@ -2,7 +2,6 @@ import EmbyLogo from '@app/assets/services/emby.svg';
 import JellyfinLogo from '@app/assets/services/jellyfin.svg';
 import PlexLogo from '@app/assets/services/plex.svg';
 import AppDataWarning from '@app/components/AppDataWarning';
-import Badge from '@app/components/Common/Badge';
 import Button from '@app/components/Common/Button';
 import ImageFader from '@app/components/Common/ImageFader';
 import PageTitle from '@app/components/Common/PageTitle';
@@ -36,9 +35,6 @@ const messages = defineMessages('components.Setup', {
   signin: 'Sign In',
   configuremediaserver: 'Configure Media Server',
   configureservices: 'Configure Services',
-  tip: 'Tip',
-  scanbackground:
-    'Scanning will run in the background. You can continue the setup process in the meantime.',
 });
 
 const Setup = () => {
@@ -225,16 +221,10 @@ const Setup = () => {
                 />
               ) : (
                 <SettingsJellyfin
-                  showAdvancedSettings={false}
+                  isSetupSettings
                   onComplete={() => setMediaServerSettingsComplete(true)}
                 />
               )}
-              <div className="mt-4 text-sm text-gray-500">
-                <span className="mr-2">
-                  <Badge>{intl.formatMessage(messages.tip)}</Badge>
-                </span>
-                {intl.formatMessage(messages.scanbackground)}
-              </div>
               <div className="actions">
                 <div className="flex justify-end">
                   <span className="ml-3 inline-flex rounded-md shadow-sm">
diff --git a/src/pages/settings/jellyfin.tsx b/src/pages/settings/jellyfin.tsx
index 8f1377daf..2490c8635 100644
--- a/src/pages/settings/jellyfin.tsx
+++ b/src/pages/settings/jellyfin.tsx
@@ -8,7 +8,7 @@ const JellyfinSettingsPage: NextPage = () => {
   useRouteGuard(Permission.MANAGE_SETTINGS);
   return (
     <SettingsLayout>
-      <SettingsJellyfin showAdvancedSettings={true} />
+      <SettingsJellyfin />
     </SettingsLayout>
   );
 };