Feature/JS-7329: Remote storage update

src/json/constant.ts

@@ -104,25 +104,26 @@ export default {
 	},
 
 	subId: {
-		search:			 'search',
-		profile:		 'profile',
-		deleted:		 'deleted',
-		type:			 'type',
-		typeStore:		 'typeStore',
-		relation:		 'relation',
-		relationStore:	 'relationStore',
-		option:			 'option',
-		store:			 'store',
-		archive:		 'archive',
-		sidebar:		 'sidebar',
-		space:			 'space',
-		fileManager:	 'fileManager',
-		participant:	 'participant',
-		subSpace:		 'subSpace',
-		allObject:		 'allObject',
-		library: 		 'library',
-		chatSpace:		 'lastMessage',
-		template:		 'template',
+		search:			 		'search',
+		profile:		 		'profile',
+		deleted:		 		'deleted',
+		type:			 		'type',
+		typeStore:		 		'typeStore',
+		relation:		 		'relation',
+		relationStore:	 		'relationStore',
+		option:			 		'option',
+		store:			 		'store',
+		archive:		 		'archive',
+		sidebar:		 		'sidebar',
+		space:			 		'space',
+		participant:	 		'participant',
+		subSpace:		 		'subSpace',
+		allObject:		 		'allObject',
+		library: 		 		'library',
+		chatSpace:		 		'lastMessage',
+		template:		 		'template',
+		fileManagerSynced: 		'fileManagerSynced',
+		fileManagerNotSynced: 	'fileManagerNotSynced'
 	},
 
 	typeKey: {

src/json/relation.ts

@@ -178,7 +178,8 @@ export default {
 	syncStatus: [
 		'syncStatus',
 		'syncDate',
-		'syncError'
+		'syncError',
+		'fileSyncStatus'
 	],
 
 	pageCover: 'pageCover',

src/json/text.json

@@ -219,7 +219,10 @@
 	"commonUnmute": "Unmute",
 	"commonDropFiles": "Drag and drop your files here",
 	"commonObjectEmpty": "It's empty here.",
+	"commonSynced": "Synced",
+	"commonNotSynced": "Not synced",
 	"commonNewVersion": "Version <span class='hl'>%s</span> is out now",
+	"commonUpgrade": "✦ Upgrade",
 
 	"pluralDay": "day|days",
 	"pluralObject": "Object|Objects",
@@ -245,6 +248,7 @@
 	"pluralVideo": "Video|Videos",
 	"pluralAudio": "Audio|Audios",
 	"pluralFile": "File|Files",
+	"pluralLCFile": "file|files",
 	"pluralPdf": "Pdf|Pdfs",
 	"pluralBookmark": "Bookmark|Bookmarks",
 	"pluralAttachment": "Attachment|Attachments",
@@ -570,7 +574,8 @@
 
 	"pageSettingsSpaceGeneral": "General",
 	"pageSettingsSpaceRemoteStorage": "Remote Storage",
-	"pageSettingsSpaceCleanupSpaceFiles": "Clean up space files",
+	"pageSettingsSpaceSyncedFiles": "Synced files",
+	"pageSettingsSpaceNotSyncedFiles": "Not synced files",
 	"pageSettingsSpaceIntegrations": "Integrations",
 	"pageSettingsSpaceManageContent": "Content Model",
 
@@ -896,8 +901,8 @@
 
 	"popupSettingsSpaceIndexCollaborationTitle": "Collaboration",
 	"popupSettingsSpaceIndexManageSpaceTitle": "Space Preferences",
-	"popupSettingsSpaceIndexRemoteStorageUpgrade": "✦ Upgrade",
 	"popupSettingsSpaceIndexStorageText": "You can store up to %s of your files on our encrypted backup node for free. If you reach the limit, files will be stored only locally.",
+	"popupSettingsSpaceIndexStorageIsFullText": "Some files couldn't be synced because your storage is full. Upgrade your plan or remove files to free up space.",
 	"popupSettingsSpaceIndexStorageManageFiles": "Manage files",
 	"popupSettingsSpaceIndexHomepageDescription": "Select an Object to show when you login",
 	"popupSettingsSpaceIndexImport": "Import to Space",
@@ -1828,7 +1833,6 @@
 	"menuSyncStatusInfoNetworkMessageOffline": "No connection",
 
 	"menuSyncStatusInfoSelfTitle": "Self Host",
-	"menuSyncStatusInfoSelfMessageSynced": "Synced",
 	"menuSyncStatusInfoSelfMessageSyncing": "Syncing...",
 	"menuSyncStatusInfoSelfMessageError": "Error",
 	"menuSyncStatusInfoLocalOnlyTitle": "Local Only",
@@ -1839,6 +1843,10 @@
 	"menuSyncStatusEmptyLocal": "Your Vault is currently in local-only mode, so your data isn't being synced to Anytype nodes.",
 	"menuSyncStatusEmpty": "There are no objects to show",
 
+	"menuSyncStatusIncentiveBannerTitle": "Files not synced",
+	"menuSyncStatusIncentiveBannerLabel": "%s %s couldn’t be synced because you’re run out of space. Please upgrade or clean up your storage.",
+	"menuSyncStatusIncentiveBannerReviewFiles": "Review Files",
+
 	"menuPublishTitle": "Publish to web",
 	"menuPublishInfoTooltip": "Published object will be uploaded to our publishing server and will be accessible via the URL as a static, unencrypted HTML page. Linked objects will not be published.<br/>Currently, not all blocks are supported for publishing, such as Queries, Collections and Properties. Default limit is 10MB per object for free plans and 100MB for paid plans.",
 	"menuPublishLabelJoinSpace": "Join Space Button",
@@ -1849,7 +1857,6 @@
 	"menuPublishButtonCopy": "Copy Web Link",
 	"menuPublishLabelOffline": "No internet connection",
 	"menuPublishBecomeMemberText": "Become a member to get a domain and increase publishing limits",
-	"menuPublishUpgrade": "✦ Upgrade",
 
 	"previewEdit": "Edit Link",
 

src/scss/component/sidebar/common.scss

@@ -9,7 +9,7 @@
 .sidebarAnimation { transition: width $transitionSidebarTime linear; }
 
 #sidebarToggle, 
-#sidebarSync { position: fixed; top: 12px; z-index: 22; -webkit-app-region: no-drag; transition: none; }
+#sidebarSync { position: fixed; top: 12px; z-index: 25; -webkit-app-region: no-drag; transition: none; }
 
 #sidebarToggle { backdrop-filter: blur(20px); left: 84px; background-image: url('~img/icon/widget/toggle0.svg'); }
 #sidebarToggle.sidebarAnimation, #sidebarSync.sidebarAnimation { transition: left $transitionSidebarTime linear; }

src/scss/component/sidebar/settings.scss

@@ -54,6 +54,7 @@
 
                 .caption { color: var(--color-text-secondary); text-align: right; @include text-overflow-nw; }
                 .caption.join { font-weight: 500; padding: 2px 8px; border-radius: 4px; @include text-small; background: var(--color-control-accent); color: var(--color-bg-primary); }
+                .caption.alert { width: 20px; height: 20px; line-height: 20px; text-align: center; background-color: var(--color-red); color: var(--color-control-bg); border-radius: 50%; }
             }
 
             .item.isTypeOrRelation { padding-left: 26px; }

src/scss/menu/syncStatus.scss

@@ -46,6 +46,14 @@
 			}
 		}
 
+		.incentiveBanner { margin: 10px 16px 0px 16px; padding: 12px 16px 16px 16px; border-radius: 8px; background: linear-gradient(180deg, #FEE7E0 30%, #FFF6F3 100%); }
+		.incentiveBanner {
+			.buttons { padding-top: 12px; display: flex; gap: 8px; }
+			.buttons {
+				.button { width: 50%; }
+			}
+		}
+
 		.items { height: 100%; }
 		.items {
 			.sectionName { padding: 4px 8px; }

src/scss/page/main/settings.scss

@@ -457,7 +457,8 @@
             }
         }
 
-		.fileManagerWrapper { flex-grow: 1; display: flex; flex-direction: column; }
+		.fileManagerWrapper { flex-grow: 1; display: flex; flex-direction: column; margin-bottom: 24px; }
+        .fileManagerWrapper:last-child { margin-bottom: 0px; }
 		.fileManagerWrapper {
 			.title { flex-shrink: 0; }
 

src/ts/component/list/objectManager.tsx

@@ -14,6 +14,7 @@ interface Props {
 	textEmpty?: string;
 	filters?: I.Filter[];
 	sorts?: I.Sort[];
+	keys?: string[];
 	rowHeight?: number;
 	sources?: string[];
 	collectionId?: string;
@@ -74,6 +75,7 @@ const ObjectManager = observer(forwardRef<ObjectManagerRefProps, Props>(({
 	textEmpty = '',
 	filters = [],
 	sorts = [],
+	keys = [],
 	rowHeight = 0,
 	sources = [],
 	collectionId = '',
@@ -203,6 +205,7 @@ const ObjectManager = observer(forwardRef<ObjectManagerRefProps, Props>(({
 		U.Subscription.subscribe({
 			subId,
 			sorts,
+			keys,
 			filters: fl,
 			ignoreArchived,
 			ignoreHidden,
@@ -482,4 +485,4 @@ const ObjectManager = observer(forwardRef<ObjectManagerRefProps, Props>(({
 	);
 }));
 
-export default ObjectManager;
+export default ObjectManager;

src/ts/component/menu/publish.tsx

@@ -150,14 +150,11 @@ const MenuPublish = observer(forwardRef<I.MenuRef, I.Menu>((props, ref) => {
 	};
 
 	const onUpgrade = () => {
-		U.Object.openRoute(
-			{ id: 'membership', layout: I.ObjectLayout.Settings },
-			{ onRouteChange: () => { S.Popup.open('membership', { data: { tier: I.TierType.Builder }}) } },
-		);
+		Action.membershipUpgrade();
 		analytics.event('ClickUpgradePlanTooltip', { type: 'publish' });
 	};
 
-	const setSlugHander = v => setSlug(U.Common.slug(v));
+	const setSlugHandler = v => setSlug(U.Common.slug(v));
 
 	let buttons = [];
 
@@ -173,7 +170,7 @@ const MenuPublish = observer(forwardRef<I.MenuRef, I.Menu>((props, ref) => {
 	};
 
 	useEffect(() => {
-		setSlugHander(object.name);
+		setSlugHandler(object.name);
 
 		if (isOnline) {
 			loadStatus();
@@ -202,7 +199,7 @@ const MenuPublish = observer(forwardRef<I.MenuRef, I.Menu>((props, ref) => {
                 ref={inputRef}
                 value={slug}
                 focusOnMount={true} 
-				onChange={(e, v) => setSlugHander(v)}
+				onChange={(e, v) => setSlugHandler(v)}
 				maxLength={300}
 			/>
 			<div className="urlWrapper">
@@ -233,7 +230,7 @@ const MenuPublish = observer(forwardRef<I.MenuRef, I.Menu>((props, ref) => {
 			{!tier?.namesCount ? (
 				<div className="incentiveBanner">
 					<Label text={translate('menuPublishBecomeMemberText')} />
-					<Button text={translate('menuPublishUpgrade')} onClick={onUpgrade} />
+					<Button text={translate('commonUpgrade')} onClick={onUpgrade} />
 				</div>
 			) : ''}
 

src/ts/component/menu/syncStatus.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import $ from 'jquery';
 import { observer } from 'mobx-react';
 import { AutoSizer, CellMeasurer, InfiniteLoader, List, CellMeasurerCache } from 'react-virtualized';
-import { Title, Icon, IconObject, ObjectName, EmptySearch } from 'Component';
+import { Title, Icon, IconObject, ObjectName, EmptySearch, Label, Button } from 'Component';
 import { I, S, U, J, Action, translate, analytics, Onboarding } from 'Lib';
 
 interface State {
@@ -39,6 +39,9 @@ const MenuSyncStatus = observer(class MenuSyncStatus extends React.Component<I.M
 
 	render () {
 		const { isLoading } = this.state;
+		const { notSyncedCounter } = S.Auth.getSyncStatus();
+		const isOwner = U.Space.isMyOwner();
+		const canWrite = U.Space.canMyParticipantWrite();
 		const items = this.getItems();
 		const icons = this.getIcons();
 		const emptyText = U.Data.isLocalNetwork() ? translate('menuSyncStatusEmptyLocal') : translate('menuSyncStatusEmpty');
@@ -133,6 +136,17 @@ const MenuSyncStatus = observer(class MenuSyncStatus extends React.Component<I.M
 					<EmptySearch text={emptyText} />
 				) : ''}
 
+				{notSyncedCounter && canWrite ? (
+					<div className="incentiveBanner">
+						<Title text={translate('menuSyncStatusIncentiveBannerTitle')} />
+						<Label text={U.Common.sprintf(translate('menuSyncStatusIncentiveBannerLabel'), notSyncedCounter, U.Common.plural(notSyncedCounter, translate('pluralLCFile')))} />
+						<div className="buttons">
+							<Button onClick={() => this.onIncentiveButtonClick('storage')} className="c28" text={translate('menuSyncStatusIncentiveBannerReviewFiles')} color="blank" />
+							{isOwner ? <Button onClick={() => this.onIncentiveButtonClick('upgrade')} className="c28" text={translate('commonUpgrade')} /> : ''}
+						</div>
+					</div>
+				) : ''}
+
 				{this.cache && items.length ? (
 					<div className="items">
 						<InfiniteLoader
@@ -275,6 +289,20 @@ const MenuSyncStatus = observer(class MenuSyncStatus extends React.Component<I.M
 		};
 	};
 
+	onIncentiveButtonClick (id: string) {
+		switch (id) {
+			case 'storage': {
+				U.Object.openAuto({ id: 'spaceStorageManager', layout: I.ObjectLayout.Settings });
+				break;
+			};
+
+			case 'upgrade': {
+				Action.membershipUpgrade();
+				break;
+			};
+		};
+	};
+
 	load () {
 		if (U.Data.isLocalNetwork()) {
 			return;
@@ -284,6 +312,7 @@ const MenuSyncStatus = observer(class MenuSyncStatus extends React.Component<I.M
 			{ relationKey: 'resolvedLayout', condition: I.FilterCondition.NotIn, value: U.Object.getSystemLayouts() },
 		];
 		const sorts = [
+			{ relationKey: 'fileSyncStatus', type: I.SortType.Custom, customOrder: [ I.FileSyncStatus.NotSynced, I.FileSyncStatus.Synced ] },
 			{ relationKey: 'syncStatus', type: I.SortType.Custom, customOrder: [ I.SyncStatusObject.Syncing, I.SyncStatusObject.Queued, I.SyncStatusObject.Synced ] },
 			{ relationKey: 'syncDate', type: I.SortType.Desc, includeTime: true },
 		];
@@ -435,7 +464,7 @@ const MenuSyncStatus = observer(class MenuSyncStatus extends React.Component<I.M
 					};
 
 					case I.SyncStatusSpace.Synced: {
-						message = translate('menuSyncStatusInfoSelfMessageSynced');
+						message = translate('commonSynced');
 						break;
 					};
 
@@ -512,4 +541,4 @@ const MenuSyncStatus = observer(class MenuSyncStatus extends React.Component<I.M
 
 });
 
-export default MenuSyncStatus;
+export default MenuSyncStatus;