FEATURE (storages): Add manual for Cloudflare R2

Author: RostislavDugin

README.md

@@ -28,7 +28,7 @@
 ### 🗄️ **Multiple Storage Destinations**
 
 - **Local storage**: Keep backups on your VPS/server
-- **Cloud storage**: S3, Google Drive, Dropbox, and more (coming soon)
+- **Cloud storage**: S3, Cloudflare R2, Google Drive, Dropbox, and more (coming soon)
 - **Secure**: All data stays under your control
 
 ### 📱 **Smart Notifications**

backend/internal/features/storages/repository.go

@@ -82,6 +82,7 @@ func (r *StorageRepository) FindByUserID(userID uuid.UUID) ([]*Storage, error) {
 		Preload("LocalStorage").
 		Preload("S3Storage").
 		Where("user_id = ?", userID).
+		Order("name ASC").
 		Find(&storages).Error; err != nil {
 		return nil, err
 	}

backend/internal/features/storages/storages/s3/model.go

@@ -113,9 +113,6 @@ func (s *S3Storage) Validate() error {
 	if s.S3Bucket == "" {
 		return errors.New("S3 bucket is required")
 	}
-	if s.S3Region == "" {
-		return errors.New("S3 region is required")
-	}
 	if s.S3AccessKey == "" {
 		return errors.New("S3 access key is required")
 	}

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

@@ -120,7 +120,6 @@ export function EditStorageComponent({
     if (storage.type === StorageType.S3) {
       return (
         storage.s3Storage?.s3Bucket &&
-        storage.s3Storage?.s3Region &&
         storage.s3Storage?.s3AccessKey &&
         storage.s3Storage?.s3SecretKey
       );

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

@@ -12,6 +12,16 @@ interface Props {
 export function EditS3StorageComponent({ storage, setStorage, setIsUnsaved }: Props) {
   return (
     <>
+      <div className="mb-2 flex items-center">
+        <div className="min-w-[110px]" />
+
+        <div className="text-xs text-blue-600">
+          <a href="https://postgresus.com/cloudflare-r2-storage" target="_blank" rel="noreferrer">
+            How to use with Cloudflare R2?
+          </a>
+        </div>
+      </div>
+
       <div className="mb-1 flex items-center">
         <div className="min-w-[110px]">S3 Bucket</div>
         <Input