fix: prettier config and prettier run to sort imports; add intellij f…

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    "@trivago/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss"
+  ]
+}

src/ErrorBoundary.tsx

@@ -31,7 +31,7 @@ class ErrorBoundary extends Component<PropsWithChildren<Props>, State> {
     if (this.state.hasError) {
       const { t } = this.props;
       return (
-        <main className="flex h-screen w-screen flex-col items-center justify-center gap-5 p-10 transition-colors bg-gray-700 text-white">
+        <main className="flex h-screen w-screen flex-col items-center justify-center gap-5 bg-gray-700 p-10 text-white transition-colors">
           <h1 className="text-xl font-bold">{t("login.error")} 😓</h1>
           <section>
             <p className="rounded bg-red-500 p-2 text-center text-white">

src/components/AmountInput.tsx

@@ -76,7 +76,7 @@ const AmountInput: FC<Props> = ({
           disabled={disabled}
         />
         <span
-          className="ml-6 flex w-4/12 items-center justify-center rounded p-1 shadow-md bg-gray-600"
+          className="ml-6 flex w-4/12 items-center justify-center rounded bg-gray-600 p-1 shadow-md"
           onClick={toggleHandler}
         >
           {unit}
@@ -85,9 +85,7 @@ const AmountInput: FC<Props> = ({
       </div>
 
       <p
-        className={`
-        text-left text-sm text-red-500
-        ${errorMessage ? "" : "invisible"}`}
+        className={`text-left text-sm text-red-500 ${errorMessage ? "" : "invisible"}`}
       >
         {errorMessage?.message || "error"}
       </p>

src/components/AppStatusItem.tsx

@@ -19,7 +19,7 @@ export const AppStatusItem: FC<Props> = ({ app }) => {
     return (
       <span
         onClick={() => navigate(`/apps/${id}`)}
-        className="flex w-full cursor-pointer items-center justify-center py-4 opacity-80 text-white hover:text-yellow-500 md:flex-col lg:flex-row"
+        className="flex w-full cursor-pointer items-center justify-center py-4 text-white opacity-80 hover:text-yellow-500 md:flex-col lg:flex-row"
       >
         {/* Icon */}
         <AppIcon appId={id} className="h-19 inline w-10" />
@@ -34,7 +34,7 @@ export const AppStatusItem: FC<Props> = ({ app }) => {
       href={getHrefFromApp(app)}
       target={"_blank"}
       rel={"noopener noreferrer"}
-      className="flex w-full cursor-pointer items-center justify-center py-4 opacity-80 text-white hover:text-yellow-500 md:flex-col lg:flex-row"
+      className="flex w-full cursor-pointer items-center justify-center py-4 text-white opacity-80 hover:text-yellow-500 md:flex-col lg:flex-row"
     >
       {/* Icon */}
       <AppIcon appId={id} className="h-19 inline w-10" />

src/components/CapsLockWarning.tsx

@@ -6,7 +6,7 @@ const CapsLockWarning = () => {
   const { t } = useTranslation();
   return (
     <Alert as="p" color="warning">
-      <ExclamationTriangleIcon className="size-4 inline" />
+      <ExclamationTriangleIcon className="inline size-4" />
       &nbsp;
       {t("login.caps_lock")}
     </Alert>

src/components/InputField.tsx

@@ -30,11 +30,7 @@ const InputField = forwardRef(
           <input
             {...rest}
             autoFocus={autoFocus}
-            className={`
-               ${errorMessage ? "input-error" : "input-underline"}
-               ${textAlign === "right" || type === "number" ? "text-right" : ""}
-               ${inputRightAddon || inputRightElement ? "w-7/12" : ""}
-               `}
+            className={` ${errorMessage ? "input-error" : "input-underline"} ${textAlign === "right" || type === "number" ? "text-right" : ""} ${inputRightAddon || inputRightElement ? "w-7/12" : ""} `}
             id={name}
             name={name}
             onChange={onChange}
@@ -52,9 +48,7 @@ const InputField = forwardRef(
         </div>
 
         <p
-          className={`
-        text-left text-sm text-red-500
-        ${errorMessage ? "" : "invisible"}`}
+          className={`text-left text-sm text-red-500 ${errorMessage ? "" : "invisible"}`}
         >
           {errorMessage?.message || "error"}
         </p>

src/layouts/BottomNav.tsx

@@ -18,7 +18,7 @@ const BottomNav: FC = () => {
   const { t } = useTranslation();
 
   return (
-    <footer className="fixed bottom-0 z-10 flex h-16 w-full flex-wrap items-center justify-evenly border-t-2 shadow-inner transition-colors bg-gray-800 lg:hidden">
+    <footer className="fixed bottom-0 z-10 flex h-16 w-full flex-wrap items-center justify-evenly border-t-2 bg-gray-800 shadow-inner transition-colors lg:hidden">
       <NavLink to="/home" className={(props) => createClassName(props)}>
         <HomeIcon className={navIconClasses} />
         <span className={navLabelClasses}>{t("navigation.home")}</span>

src/layouts/DropdownMenu.tsx

@@ -16,7 +16,7 @@ const DropdownMenu = forwardRef<HTMLDivElement>((_, ref) => {
   return (
     <div
       ref={ref}
-      className="absolute right-5 top-14 z-10 flex w-56 rounded-lg border shadow-lg  border-gray-300 bg-gray-800"
+      className="absolute right-5 top-14 z-10 flex w-56 rounded-lg border border-gray-300 bg-gray-800 shadow-lg"
     >
       <div className="flex w-full flex-col items-center justify-center text-center">
         <div className="w-full py-4">

src/layouts/Header.tsx

@@ -35,7 +35,7 @@ export default function Header() {
   };
 
   return (
-    <header className="fixed top-0 z-50 mx-auto flex h-16 w-full items-center justify-between border-b border-gray-300 px-8 shadow-md transition-colors bg-gray-800 text-gray-300">
+    <header className="fixed top-0 z-50 mx-auto flex h-16 w-full items-center justify-between border-b border-gray-300 bg-gray-800 px-8 text-gray-300 shadow-md transition-colors">
       <NavLink to="/">
         <RaspiBlitzMobileLogo className="h-8 w-8 text-white md:hidden" />
         <RaspiBlitzLogoDark className="hidden h-8 md:block" />

src/layouts/ModalDialog.tsx

@@ -43,7 +43,7 @@ const ModalDialog: FC<PropsWithChildren<Props>> = ({
 
   return (
     <ModalBackground>
-      <div className="xl:max-w-screen-sm flex h-screen max-h-full w-screen flex-col overflow-y-auto rounded-lg pb-8 text-center shadow-xl bg-gray-800 text-white md:h-auto md:w-4/5 lg:w-1/2 xl:mx-5 xl:w-2/5">
+      <div className="flex h-screen max-h-full w-screen flex-col overflow-y-auto rounded-lg bg-gray-800 pb-8 text-center text-white shadow-xl md:h-auto md:w-4/5 lg:w-1/2 xl:mx-5 xl:w-2/5 xl:max-w-screen-sm">
         <div className="flex pr-2 pt-1">
           <button
             onClick={closeModal}

src/layouts/PageLoadingScreen.tsx

@@ -5,7 +5,7 @@ import { FC } from "react";
 const PageLoadingScreen: FC = () => {
   return (
     <main
-      className={`content-container page-container p-5 transition-colors bg-gray-700 text-white lg:pb-8 lg:pr-8 lg:pt-8`}
+      className={`content-container page-container bg-gray-700 p-5 text-white transition-colors lg:pb-8 lg:pr-8 lg:pt-8`}
     >
       <section className="content-container flex items-center justify-center">
         <LoadingSpinner color="text-yellow-500" />

src/layouts/SetupContainer.tsx

@@ -13,25 +13,25 @@ export default function SetupContainer({
   children,
 }: PropsWithChildren<Props>) {
   return (
-    <main className="flex min-h-screen h-full w-screen flex-col items-center justify-center bg-primary-900 transition-colors text-white">
-      <div className="fixed md:right-16 top-16 md:top-8 flex h-8 w-48 md:w-96 md:flex-row flex-col-reverse gap-6 md:gap-4 justify-center items-center">
+    <main className="flex h-full min-h-screen w-screen flex-col items-center justify-center bg-primary-900 text-white transition-colors">
+      <div className="fixed top-16 flex h-8 w-48 flex-col-reverse items-center justify-center gap-6 md:right-16 md:top-8 md:w-96 md:flex-row md:gap-4">
         <Button
           as="a"
           href="https://docs.raspiblitz.org/"
           target="_blank"
           rel="noreferrer"
           color="primary"
           variant="ghost"
-          className="p-4 w-full"
-          startContent={<BookOpenIcon className="w-5 h-5" />}
+          className="w-full p-4"
+          startContent={<BookOpenIcon className="h-5 w-5" />}
         >
           Documentation
         </Button>
         <I18nSelect />
       </div>
 
       {currentStep !== null && (
-        <div className="fixed mb-4 top-24 flex items-center justify-around w-1/3">
+        <div className="fixed top-24 mb-4 flex w-1/3 items-center justify-around">
           <Stepper currentStep={currentStep} />
         </div>
       )}

src/layouts/SideDrawer.tsx

@@ -25,7 +25,7 @@ export const SideDrawer: FC = () => {
   const { t } = useTranslation();
 
   return (
-    <nav className="content-container sidebar fixed hidden w-full flex-col justify-between overflow-y-auto px-2 pb-16 pt-8 shadow-md transition-colors bg-gray-800 lg:flex lg:w-64">
+    <nav className="content-container sidebar fixed hidden w-full flex-col justify-between overflow-y-auto bg-gray-800 px-2 pb-16 pt-8 shadow-md transition-colors lg:flex lg:w-64">
       <div className="flex flex-col items-center justify-center">
         <NavLink to="/home" className={(props) => createClassName(props)}>
           <HomeIcon className={navIconClasses} />

src/layouts/SkeletonLoadingScreen.tsx

@@ -4,8 +4,8 @@ import LoadingSpinner from "@/components/LoadingSpinner/LoadingSpinner";
 export default function SkeletonLoadingScreen() {
   return (
     <>
-      <header className="fixed top-0 z-10 mx-auto flex h-16 w-full items-center justify-between border-b border-gray-300 px-8 shadow-md transition-colors bg-gray-800 text-gray-300"></header>
-      <nav className="content-container fixed mb-16 hidden w-full flex-col justify-between px-2 pt-8 shadow-lg transition-colors bg-gray-800 md:flex md:w-2/12"></nav>
+      <header className="fixed top-0 z-10 mx-auto flex h-16 w-full items-center justify-between border-b border-gray-300 bg-gray-800 px-8 text-gray-300 shadow-md transition-colors"></header>
+      <nav className="content-container fixed mb-16 hidden w-full flex-col justify-between bg-gray-800 px-2 pt-8 shadow-lg transition-colors md:flex md:w-2/12"></nav>
       <main className="content-container page-container flex items-center justify-center bg-gray-700">
         <LoadingSpinner color="text-yellow-500" />
       </main>

src/pages/Apps/AppCard.tsx

@@ -58,7 +58,7 @@ export const AppCard: FC<Props> = ({
   };
 
   return (
-    <article className="bd-card transition-colors bg-gray-800">
+    <article className="bd-card bg-gray-800 transition-colors">
       <div className="relative mt-2 flex h-4/6 w-full flex-row items-center">
         {installed && (
           <>

src/pages/Apps/AppCardAlby.tsx

@@ -67,7 +67,7 @@ export const AppCardAlby: FC = () => {
   };
 
   return (
-    <article className="bd-card transition-colors bg-gray-800">
+    <article className="bd-card bg-gray-800 transition-colors">
       <div className="relative mt-2 flex h-4/6 w-full flex-row items-center">
         {/* Icon */}
         <div className="mt-4 flex w-1/4 items-center justify-center p-2">

src/pages/Apps/customApps/Electrs.tsx

@@ -62,7 +62,7 @@ const Electrs = () => {
   }
 
   return (
-    <main className="page-container content-container w-full bg-gray-700 text-white flex flex-col items-center">
+    <main className="page-container content-container flex w-full flex-col items-center bg-gray-700 text-white">
       {/* Back Button */}
       <section className="w-full px-5 py-9 text-gray-200">
         <Button
@@ -97,7 +97,7 @@ const Electrs = () => {
                 <Tab key="local" title="Local Connection">
                   <span>{t("appInfo.electrs.connectLocal")}: </span>
                   {QRAddressLocal ? (
-                    <div className="flex flex-col justify-center items-center mt-4 gap-4">
+                    <div className="mt-4 flex flex-col items-center justify-center gap-4">
                       <QRCodeSVG
                         value={QRAddressLocal}
                         size={256}
@@ -114,19 +114,19 @@ const Electrs = () => {
                       >{`${localIP}:${portSSL}:s`}</Snippet>
                     </div>
                   ) : (
-                    <span className="text-center mt-4">
+                    <span className="mt-4 text-center">
                       {t("appInfo.electrs.not_available")}
                     </span>
                   )}
                 </Tab>
                 <Tab key="tor" title="Tor">
                   <span>{t("appInfo.electrs.connectTor")}:</span>
                   {QRAddressTor ? (
-                    <div className="flex flex-col justify-center items-center mt-4 gap-4">
+                    <div className="mt-4 flex flex-col items-center justify-center gap-4">
                       <QRCodeSVG
                         value={QRAddressTor}
                         size={256}
-                        className="border-2 border-white "
+                        className="border-2 border-white"
                       />
                       <Snippet
                         classNames={{
@@ -139,7 +139,7 @@ const Electrs = () => {
                       >{`${TORaddress}:${portSSL}:s`}</Snippet>
                     </div>
                   ) : (
-                    <span className="text-center mt-4">
+                    <span className="mt-4 text-center">
                       {t("appInfo.electrs.not_available")}
                     </span>
                   )}

src/pages/Apps/index.tsx

@@ -39,7 +39,7 @@ export const Apps: FC = () => {
   }
 
   return (
-    <main className="content-container page-container p-5 transition-colors bg-gray-700 text-white lg:pb-8 lg:pr-8 lg:pt-8">
+    <main className="content-container page-container bg-gray-700 p-5 text-white transition-colors lg:pb-8 lg:pr-8 lg:pt-8">
       <>
         <AppList
           apps={installedApps}

src/pages/Home/ListChannelModal/Channel.tsx

@@ -45,7 +45,7 @@ const Channel: FC<Props> = ({
   };
 
   return (
-    <li className="p-3 shadow-inner bg-gray-700 hover:bg-gray-600">
+    <li className="bg-gray-700 p-3 shadow-inner hover:bg-gray-600">
       <div
         className="flex justify-between border-b border-gray-500 pb-2"
         onClick={clickHandler}

src/pages/Home/TransactionCard/SingleTransaction.tsx

@@ -50,7 +50,7 @@ export const SingleTransaction: FC<Props> = ({ transaction, onClick }) => {
 
   return (
     <li
-      className="flex h-24 cursor-pointer flex-col justify-center border-b px-0 py-2 text-center border-gray-400 hover:bg-gray-700 md:px-4"
+      className="flex h-24 cursor-pointer flex-col justify-center border-b border-gray-400 px-0 py-2 text-center hover:bg-gray-700 md:px-4"
       onClick={onClick}
     >
       <div className="flex w-full items-center justify-center">

src/pages/Home/index.tsx

@@ -226,7 +226,7 @@ const Home: FC = () => {
     <>
       {modalComponent()}
       <main
-        className={`content-container page-container grid h-full grid-cols-1 grid-rows-1 gap-5 p-5 transition-colors bg-gray-700 text-white md:grid-cols-2 lg:gap-8 lg:pb-8 lg:pr-8 lg:pt-8 xl:grid-cols-4`}
+        className={`content-container page-container grid h-full grid-cols-1 grid-rows-1 gap-5 bg-gray-700 p-5 text-white transition-colors md:grid-cols-2 lg:gap-8 lg:pb-8 lg:pr-8 lg:pt-8 xl:grid-cols-4`}
       >
         {!btcOnlyMode && (
           <article className="col-span-2 row-span-2 md:col-span-1 xl:col-span-2">

src/pages/Login/index.tsx

@@ -67,7 +67,7 @@ const Login: FC = () => {
   };
 
   return (
-    <main className="flex h-screen w-screen flex-col items-center justify-center transition-colors bg-gray-700">
+    <main className="flex h-screen w-screen flex-col items-center justify-center bg-gray-700 transition-colors">
       <div className="fixed right-16 top-4 flex h-8 w-48 items-center justify-around">
         <I18nSelect />
       </div>

src/pages/Settings/ActionBox.tsx

@@ -22,8 +22,8 @@ const ActionBox: FC<PropsWithChildren<Props>> = ({
   return (
     <>
       {showChild && children}
-      <div className="box-border w-full transition-colors text-white">
-        <article className="relative rounded p-5 shadow-xl bg-gray-800">
+      <div className="box-border w-full text-white transition-colors">
+        <article className="relative rounded bg-gray-800 p-5 shadow-xl">
           <div className="flex justify-between">
             <h4 className="flex w-1/2 items-center font-bold xl:w-2/3">
               {name}

src/pages/Settings/DebugLogBox.tsx

@@ -39,8 +39,8 @@ const DebugLogBox: FC = () => {
   };
 
   return (
-    <div className="box-border w-full transition-colors text-white">
-      <article className="relative rounded p-5 shadow-xl bg-gray-800">
+    <div className="box-border w-full text-white transition-colors">
+      <article className="relative rounded bg-gray-800 p-5 shadow-xl">
         <div className="flex justify-between">
           <h4 className="flex w-1/2 items-center font-bold xl:w-2/3">
             {t("settings.generate_debug")}