feat: Initial clean release of CHM

packages/app-desktop/gui/Sidebar/SyncButton.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { AppState } from '../../app.reducer';
+import CommandService from '@joplin/lib/services/CommandService';
+import { _ } from '@joplin/lib/locale';
+import { type ProgressReport } from '@joplin/lib/Synchronizer';
+
+interface Props {
+	syncStarted: boolean;
+	syncPending: boolean;
+	syncReport: ProgressReport;
+}
+
+const syncCompletedWithoutError = (syncReport: ProgressReport) => {
+	return syncReport.completedTime && (!syncReport.errors || !syncReport.errors.length);
+};
+
+// 侧边栏顶部的同步按钮：只保留图标，状态通过图标本身表达
+const SyncButton: React.FC<Props> = props => {
+	const syncing = props.syncStarted;
+	const nothingToSync = !syncing && !props.syncPending && syncCompletedWithoutError(props.syncReport);
+	const hasErrors = !syncing && !props.syncPending && !!props.syncReport.errors?.length;
+
+	const label = syncing ? _('Cancel') : _('Synchronise');
+	const iconName = hasErrors ? 'fas fa-exclamation-triangle' : nothingToSync ? 'fas fa-check' : 'icon-sync';
+
+	const classes = ['sidebar-header-button', '-sync'];
+	if (syncing) classes.push('-syncing');
+
+	return <button
+		className={classes.join(' ')}
+		title={label}
+		aria-label={label}
+		onClick={() => {
+			void CommandService.instance().execute('synchronize', syncing);
+		}}
+	>
+		<i aria-hidden='true' role='img' className={iconName}/>
+	</button>;
+};
+
+export default connect((state: AppState) => {
+	return {
+		syncStarted: state.syncStarted,
+		syncPending: state.syncPending,
+		syncReport: state.syncReport,
+	};
+})(SyncButton);