Feature/JS-4130: History updates

package.json

@@ -62,7 +62,7 @@
 		"@typescript-eslint/parser": "^6.18.1",
 		"cross-env": "^7.0.2",
 		"css-loader": "^3.6.0",
-		"electron": "^30.0.7",
+		"electron": "^30.0.8",
 		"electron-builder": "^24.13.3",
 		"eslint": "^8.29.0",
 		"eslint-plugin-react": "^7.31.11",
@@ -99,6 +99,7 @@
 		"blueimp-load-image": "^2.31.0",
 		"d3": "^7.0.1",
 		"d3-force": "^3.0.0",
+		"diff": "^5.2.0",
 		"dompurify": "^3.0.6",
 		"electron-dl": "^1.14.0",
 		"electron-json-storage": "^4.5.0",

src/json/text.json

@@ -143,6 +143,7 @@
 	"commonUpdate": "Update",
 	"commonOwner": "Owner",
 	"commonUpdateProgress": "Downloading update... %s/%s",
+	"commonVersionHistory": "Version history",
 	"commonActions": "Actions",
 	"commonAddRelation": "Add Relation",
 	"commonCollection": "Collection",
@@ -296,8 +297,6 @@
 
 	"spellcheckAdd": "Add to dictionary",
 
-	"headerHistoryCurrent": "Current version",
-	"headerHistoryRestore": "Restore version",
 	"headerTooltipPath": "Click to search",
 
 	"headerGraphTooltipSearch": "Search",
@@ -429,6 +428,9 @@
 	"pageMainMembershipTitle": "Retrieving membership",
 	"pageMainMembershipError": "Something went wrong",
 
+	"pageMainHistoryCurrent": "Current version",
+	"pageMainHistoryRestore": "Restore",
+
 	"pageAuthLoginInvalidPhrase": "Invalid Key",
 
 	"pageAuthDeletedAccountDeletionTitle": "This vault is planned for deletion in %s",
@@ -1578,6 +1580,8 @@
 	"toastRelationRemoved": "Relation <b>%s</b> has been removed from your Library",
 	"toastSetDefaultTemplate": "This Template was Set as default",
 
+	"toastFileLimitReached": "Your local storage exceeds syncing limit. Locally stored files won't be synced",
+
 	"textColor-grey": "Grey",
 	"textColor-yellow": "Yellow",
 	"textColor-orange": "Amber",

src/scss/_vars.scss

@@ -16,6 +16,10 @@
 	--color-shape-highlight-light: rgba(79, 79, 79, 0.04);
 	--color-shape-highlight-light-solid: #f8f8f8;
 
+	--color-shape-highlight-add: rgba(93,212,0,0.2);
+	--color-shape-highlight-change: rgba(42,167,238,0.2);
+	--color-shape-highlight-remove: rgba(245,85,34,0.2);
+
 	/* Control */
 
 	--color-control-accent: #252525;

src/scss/block/common.scss

@@ -9,6 +9,12 @@
 		.wrapMenu, .wrapContent { display: none; }
 	}
 
+	.block.diffNone {
+		.wrapMenu {
+			.iconObject { display: block; }
+		}
+	}
+
 	.block {
 		.wrapMenu { width: 48px; text-align: right; position: relative; flex-shrink: 0; z-index: 1; flex-basis: 48px; }
 		.wrapContent { width: calc(100% - 48px); position: relative; flex-grow: 1; }
@@ -19,6 +25,10 @@
 		}
 		.wrapContent > .dropTarget.targetBot { height: 2px; bottom: 0px; }
 
+		.wrapMenu {
+			.iconObject { position: absolute; top: 4px; right: 4px; display: none; }
+		}
+
 		.flex { position: relative; z-index: 2; }
 		.icon.dnd { 
 			width: 12px; height: 100%; background-size: 8px 16px; opacity: 0; cursor: grab; position: absolute; right: 6px; top: 0px;

src/scss/block/text.scss

@@ -54,6 +54,8 @@
 		markupitalic { font-style: italic; }
 		markupstrike { text-decoration: line-through; }
 		markupunderline { border-bottom: 0.05em solid; }
+
+		markupchange { background-color: var(--color-shape-highlight-change); }
 
 		.markers { display: flex; padding: 1px 0px; }
 		.markers {

src/scss/common.scss

@@ -116,6 +116,15 @@ markuphighlight.active { background: orange !important; }
 .dropTarget.targetTop.isOver.top { box-shadow: 0px -2px 0px var(--color-system-accent-100) inset; }
 .dropTarget.targetBot.isOver.bottom { box-shadow: 0px 2px 0px var(--color-system-accent-100) inset; }
 
+/* Diff elements for history */
+.diffAdd, .diffChange, .diffRemove { position: relative; }
+.diffAdd::after, .diffChange::after, .diffRemove::after { content: ""; border-radius: inherit; opacity: 0.5; }
+.diffAdd::after, .diffChange::after	{ position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 10; }
+.diffRemove::after { position: relative; height: 30px; display: block; width: 100%; }
+.diffAdd::after { background-color: var(--color-shape-highlight-add); }
+.diffChange::after { background-color: var(--color-shape-highlight-change); }
+.diffRemove::after { background-color: var(--color-shape-highlight-remove); }
+
 .isSelectionSelected { position: relative; }
 
 .selectionTarget.isSelectionSelected::after, 

src/scss/component/editor.scss

@@ -169,6 +169,62 @@
 }
 
 /* Note */ 
+
 .editorWrapper.isNote {
 	.editorControls { height: 70px; margin-bottom: 8px; }
+}
+
+/* Set, Collection */
+
+.editorWrapper.isSet,
+.editorWrapper.isCollection {
+	.blocks { width: calc(100% - 96px); margin: 0px auto; padding: 0px; user-select: none; }
+	.blocks {
+		.block {
+			.wrapMenu { display: none; }
+			.wrapContent { width: 100%; }
+		}
+		.block.blockDataview { padding: 0px; }
+
+		.editorControls { height: 52px; width: 100%; margin-bottom: 8px; padding: 0px 14px; }
+
+		.headSimple {
+			.side.right { display: none; }
+		}
+	}
+
+	.block.blockCover {
+		.elements { width: calc(100% - 96px); left: 48px; margin: 0px; }
+	}
+}
+
+.editorWrapper.isSet.withIcon, 
+.editorWrapper.isCollection.withIcon {
+	.controlButtons { left: 14px; }
+}
+
+
+.editorWrapper.isSet.withIconAndCover, 
+.editorWrapper.isCollection.withIconAndCover { padding-top: 356px; }
+.editorWrapper.isSet.withIconAndCover, 
+.editorWrapper.isCollection.withIconAndCover {
+	.controlButtons { left: 0px !important; }
+}
+
+.editorWrapper.isSet.withIcon, 
+.editorWrapper.isSet.withIconAndCover, 
+.editorWrapper.isCollection.withIcon,
+.editorWrapper.isCollection.withIconAndCover {
+	.headSimple {
+		.side.left { width: 96px; }
+		.side.center { width: calc(100% - 128px); }
+	}
+	#button-icon { display: none; }
+}
+
+.editorWrapper.isSet.withCover, 
+.editorWrapper.isSet.withIconAndCover, 
+.editorWrapper.isCollection.withCover,
+.editorWrapper.isCollection.withIconAndCover {
+	.editorControls { display: none; }
 }

src/scss/component/header.scss

@@ -52,10 +52,10 @@
 	.icon { -webkit-app-region: no-drag; flex-shrink: 0; }
 
 	.icon { width: 28px; height: 28px; background-size: 20px; border-radius: 6px; }
-	.icon:hover, .icon.hover { background-color: var(--color-shape-tertiary); }
+	.icon:hover, .icon.hover { background-color: var(--color-shape-highlight-medium); }
 
-	.icon.toggle { background-image: url('~img/icon/sidebar/toggle0.svg'); }
-	.icon.toggle:hover { background-image: url('~img/icon/sidebar/toggle1.svg'); }
+	.icon.toggle { background-image: url('~img/icon/widget/toggle0.svg'); }
+	.icon.toggle:hover { background-image: url('~img/icon/widget/toggle1.svg'); }
 	.icon.more { background-image: url('~img/icon/header/more.svg'); }
 	.icon.settings { background-image: url('~img/icon/header/settings.svg'); }
 	.icon.expand { display: none; background-image: url('~img/icon/header/expand.svg'); }
@@ -74,32 +74,14 @@ html:not(.bodyIndexIndex):not(.bodyAuthSelect) {
 	}
 }
 
-.header.mainHistory { height: 38px; width: calc(100% - 254px); background: var(--color-bg-primary); }
+.header.mainHistory { height: 38px; width: calc(100% - 336px); background: var(--color-bg-primary); }
 .header.mainHistory {
-	.side.left, .side.right { width: unset; -webkit-app-region: no-drag; }
-
 	.side.center { overflow: hidden; }
 	.side.center {
 		.txt { @include text-overflow-nw; }
 	}
-
-	.item { 
-		color: var(--color-text-secondary); transition: $transitionAllCommon; height: 20px; line-height: 20px; 
-		display: inline-block; vertical-align: middle; white-space: nowrap; -webkit-app-region: no-drag;
-	}
-	.item {
-		.icon.arrow { width: 20px; height: 20px; background-image: url('~img/arrow/history0.svg'); margin: 0px; vertical-align: top; }
-	}
-	.item.orange { color: var(--color-system-accent-100) !important; font-weight: 500; }
-
-	.item.grey:hover { color: var(--color-text-primary); }
-	.item.orange:hover { color: #f09c0e !important; }
-
-	.item:hover {
-		.icon.arrow { background-image: url('~img/arrow/history1.svg'); }
-	}
 }
-.header.mainHistory.snapLeft { right: 254px; }
+.header.mainHistory.snapLeft { right: 336px; }
 
 .header.isCommon { background: var(--color-bg-primary); height: 38px; }
 .header.isCommon {

src/scss/component/sidebar.scss

@@ -49,8 +49,8 @@
 		> .head {
 			.icon { width: 28px; height: 28px; background-size: 20px; border-radius: 6px; cursor: default; display: none; }
 			.icon:hover { background-color: var(--color-shape-highlight-medium); }
-			.icon.toggle { background-image: url('~img/icon/sidebar/toggle0.svg'); }
-			.icon.toggle:hover { background-image: url('~img/icon/sidebar/toggle1.svg'); }
+			.icon.toggle { background-image: url('~img/icon/widget/toggle0.svg'); }
+			.icon.toggle:hover { background-image: url('~img/icon/widget/toggle1.svg'); }
 		}
 
 		> .body { height: calc(100% - 12px); padding: 0px 12px 12px 12px; position: relative; flex-grow: 1; overflow: hidden; overscroll-behavior: none; }

src/scss/list/widget.scss

@@ -46,8 +46,9 @@
 	> .dropTarget.lastTarget.isOver::before { top: -7px; }
 }
 
+.listWidget.isEditing { padding-bottom: 58px; }
 .listWidget.isEditing {
-	> .buttons { position: fixed; bottom: 0px; left: 0px; padding: 16px; }
+	> .buttons { position: fixed; bottom: 0px; left: 0px; padding: 0px 16px 16px 16px; }
 
 	.widget:not(.isEditable) { opacity: 0.5; }
 	.widget:not(.isEditable) {

src/scss/media/print.scss

@@ -46,7 +46,8 @@ html.printMedia {
 		#editorSize { display: none !important; }
 	}
 
-	.pageMainEdit #bodyWrapper { padding: 0px !important; }
+	#bodyWrapper { padding: 0px !important; }
+
 	.pageMainType, .pageMainRelation {
 		.wrapper { padding: 2cm 0px; }
 		.wrapper {

src/scss/page/common.scss

@@ -6,7 +6,6 @@
 @import "./main/navigation.scss";
 @import "./main/relation.scss";
 @import "./main/set.scss";
-@import "./main/space.scss";
 @import "./main/store.scss";
 @import "./main/type.scss";
 @import "./main/archive.scss";
@@ -16,4 +15,4 @@
 @import "./main/empty.scss";
 @import "./main/import.scss";
 @import "./main/invite.scss";
-@import "./main/membership.scss";
+@import "./main/membership.scss";