FEATURE (storage): Add storages warning

frontend/src/features/storages/ui/StoragesComponent.tsx

@@ -1,6 +1,8 @@
+import { ExclamationCircleOutlined } from '@ant-design/icons';
 import { Button, Modal, Spin } from 'antd';
 import { useEffect, useState } from 'react';
 
+import { IS_CLOUD } from '../../../constants';
 import { storageApi } from '../../../entity/storages';
 import type { Storage } from '../../../entity/storages';
 import type { UserProfile } from '../../../entity/users';
@@ -100,6 +102,31 @@ export const StoragesComponent = ({
           >
             {storages.length >= 5 && isCanManageStorages && addStorageButton}
 
+            {!IS_CLOUD && (
+              <div className="mb-3 rounded bg-yellow-50 p-3 shadow dark:bg-yellow-900/30">
+                <div className="mb-1 flex items-center gap-1.5 text-sm font-bold text-yellow-700 dark:text-yellow-400">
+                  <ExclamationCircleOutlined />
+                  Self-hosted notice
+                </div>
+
+                <div className="text-sm !text-yellow-600 dark:!text-yellow-500">
+                  Do not forget to backup the storage itself as it contains all your backups.
+                  <br /> Or you can use cloud{"'"}s build-in{' '}
+                  <u>unlimited storage with double reservation</u>. We care about security,
+                  maintainance and 24x7 uptime
+                </div>
+
+                <a
+                  href="https://databasus.com/cloud"
+                  target="_blank"
+                  rel="noreferrer"
+                  className="mt-2 block w-full rounded-md !bg-green-600 px-4 py-1.5 text-center text-sm font-medium !text-white transition-colors hover:!bg-green-700 dark:!bg-green-700 dark:hover:!bg-green-800"
+                >
+                  Use cloud storage from $9
+                </a>
+              </div>
+            )}
+
             {storages.map((storage) => (
               <StorageCardComponent
                 key={storage.id}

frontend/src/features/storages/ui/edit/EditStorageComponent.tsx

@@ -1,4 +1,4 @@
-import { InfoCircleOutlined } from '@ant-design/icons';
+import { ExclamationCircleOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import { Button, Input, Select, Switch, Tooltip } from 'antd';
 import { useEffect, useState } from 'react';
 
@@ -14,6 +14,7 @@ import { ToastHelper } from '../../../../shared/toast';
 import { EditAzureBlobStorageComponent } from './storages/EditAzureBlobStorageComponent';
 import { EditFTPStorageComponent } from './storages/EditFTPStorageComponent';
 import { EditGoogleDriveStorageComponent } from './storages/EditGoogleDriveStorageComponent';
+import { EditLocalStorageComponent } from './storages/EditLocalStorageComponent';
 import { EditNASStorageComponent } from './storages/EditNASStorageComponent';
 import { EditRcloneStorageComponent } from './storages/EditRcloneStorageComponent';
 import { EditS3StorageComponent } from './storages/EditS3StorageComponent';
@@ -486,6 +487,35 @@ export function EditStorageComponent({
             }}
           />
         )}
+
+        {storage?.type === StorageType.LOCAL && <EditLocalStorageComponent />}
+      </div>
+
+      <div>
+        {!IS_CLOUD && (
+          <div className="mb-3 rounded bg-yellow-50 p-3 shadow dark:bg-yellow-900/30">
+            <div className="mb-1 flex items-center gap-1.5 text-sm font-bold text-yellow-700 dark:text-yellow-400">
+              <ExclamationCircleOutlined />
+              Self-hosted notice
+            </div>
+
+            <div className="text-sm !text-yellow-600 dark:!text-yellow-500">
+              Do not forget to backup the storage itself as it contains all your backups.
+              <br /> Or you can use cloud{"'"}s build-in{' '}
+              <u>unlimited storage with double reservation</u>. We care about security, maintainance
+              and 24x7 uptime for you
+            </div>
+
+            <a
+              href="https://databasus.com/cloud"
+              target="_blank"
+              rel="noreferrer"
+              className="mt-2 block w-full rounded-md !bg-green-600 px-4 py-1.5 text-center text-sm font-medium !text-white transition-colors hover:!bg-green-700 dark:!bg-green-700 dark:hover:!bg-green-800"
+            >
+              Use cloud storage from $9
+            </a>
+          </div>
+        )}
       </div>
 
       <div className="mt-3 flex">

frontend/src/features/storages/ui/edit/storages/EditLocalStorageComponent.tsx

@@ -0,0 +1,14 @@
+import { ExclamationCircleOutlined } from '@ant-design/icons';
+
+export function EditLocalStorageComponent() {
+  return (
+    <>
+      <div className="max-w-[360px] text-yellow-600 dark:text-yellow-400">
+        <ExclamationCircleOutlined /> Be careful: with local storage you may run out of ROM memory.
+        It is recommended to use S3 or unlimited storages
+      </div>
+
+      <div className="mb-5" />
+    </>
+  );
+}