feat: revamp login screen

Update the login screen for better usability, especially with OpenID
Connect and Plex login, allowing one-click login and removing the
accordion layout. Additionally, ensures that media server login is
hidden when disabled in the settings.

package.json

@@ -85,6 +85,7 @@
     "react-spring": "9.7.1",
     "react-tailwindcss-datepicker-sct": "1.3.4",
     "react-toast-notifications": "2.5.1",
+    "react-transition-group": "^4.4.5",
     "react-truncate-markup": "5.1.2",
     "react-use-clipboard": "1.0.9",
     "reflect-metadata": "0.1.13",
@@ -94,6 +95,7 @@
     "sqlite3": "5.1.4",
     "swagger-ui-express": "4.6.2",
     "swr": "2.2.5",
+    "tailwind-merge": "^2.6.0",
     "typeorm": "0.3.11",
     "undici": "^6.20.1",
     "web-push": "3.5.0",

server/lib/settings/index.ts

@@ -586,6 +586,7 @@ class Settings {
       hideAvailable: this.data.main.hideAvailable,
       localLogin: this.data.main.localLogin,
       mediaServerLogin: this.data.main.mediaServerLogin,
+      jellyfinExternalHost: this.data.jellyfin.externalHostname,
       jellyfinForgotPasswordUrl: this.data.jellyfin.jellyfinForgotPasswordUrl,
       movie4kEnabled: this.data.radarr.some(
         (radarr) => radarr.is4k && radarr.isDefault

src/components/Common/Button/index.tsx

@@ -1,5 +1,6 @@
 import type { ForwardedRef } from 'react';
 import React from 'react';
+import { twMerge } from 'tailwind-merge';
 
 export type ButtonType =
   | 'default'
@@ -97,7 +98,7 @@ function Button<P extends ElementTypes = 'button'>(
   if (as === 'a') {
     return (
       <a
-        className={buttonStyle.join(' ')}
+        className={twMerge(buttonStyle)}
         {...(props as React.ComponentProps<'a'>)}
         ref={ref as ForwardedRef<HTMLAnchorElement>}
       >
@@ -107,7 +108,7 @@ function Button<P extends ElementTypes = 'button'>(
   } else {
     return (
       <button
-        className={buttonStyle.join(' ')}
+        className={twMerge(buttonStyle)}
         {...(props as React.ComponentProps<'button'>)}
         ref={ref as ForwardedRef<HTMLButtonElement>}
       >

src/components/Common/LabeledCheckbox/index.tsx

@@ -1,4 +1,5 @@
 import { Field } from 'formik';
+import { twMerge } from 'tailwind-merge';
 
 interface LabeledCheckboxProps {
   id: string;
@@ -19,7 +20,7 @@ const LabeledCheckbox: React.FC<LabeledCheckboxProps> = ({
 }) => {
   return (
     <>
-      <div className={`relative flex items-start ${className}`}>
+      <div className={twMerge('relative flex items-start', className)}>
         <div className="flex h-6 items-center">
           <Field type="checkbox" id={id} name={id} onChange={onChange} />
         </div>