Move plugins to settings page

src/components/generic/Loading.tsx

@@ -1,9 +0,0 @@
-import type React from 'react';
-
-export const Loading = (): JSX.Element => {
-  return (
-    <div className="absolute top-0 bottom-0 left-0 right-0 z-10 flex rounded-md backdrop-filter backdrop-blur-sm">
-      <div className="m-auto text-lg font-medium text-gray-400">Loading</div>
-    </div>
-  );
-};

src/components/generic/Sidebar.tsx

@@ -37,7 +37,7 @@ export const Sidebar = ({
         </div>
       </div>
       {children ?? (
-        <div className="flex flex-grow bg-gray-100 dark:bg-primaryDark">
+        <div className="flex flex-grow bg-gray-50 dark:bg-primaryDark">
           <div className="m-auto text-lg font-medium">Please select item</div>
         </div>
       )}

src/components/generic/form/Form.tsx

@@ -0,0 +1,22 @@
+import type React from 'react';
+
+import { Loading } from '@meshtastic/components';
+
+export interface FormProps {
+  loading?: boolean;
+  children: React.ReactNode;
+}
+
+export const Form = ({ loading, children }: FormProps): JSX.Element => {
+  return (
+    <form
+      onSubmit={(e): void => {
+        e.preventDefault();
+      }}
+      className="relative flex-grow gap-3 p-2"
+    >
+      {loading && <Loading />}
+      {children}
+    </form>
+  );
+};