Desktop: Resolves #7934: Add Simple Backup as a default plugin (#9360)

packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginBox.tsx

@@ -60,7 +60,7 @@ const CellRoot = styled.div<{ isCompatible: boolean }>`
 	box-sizing: border-box;
 	background-color: ${props => props.theme.backgroundColor};
 	flex-direction: column;
-	align-items: flex-start;
+	align-items: stretch;
 	padding: 15px;
 	border: 1px solid ${props => props.theme.dividerColor};
 	border-radius: 6px;
@@ -96,12 +96,15 @@ const NeedUpgradeMessage = styled.span`
 	font-size: ${props => props.theme.fontSize}px;
 `;
 
-const DevModeLabel = styled.div`
+const BoxedLabel = styled.div`
 	border: 1px solid ${props => props.theme.color};
 	border-radius: 4px;
 	padding: 4px 6px;
 	font-size: ${props => props.theme.fontSize * 0.75}px;
 	color: ${props => props.theme.color};
+	flex-grow: 0;
+	height: min-content;
+	margin-top: auto;
 `;
 
 const StyledNameAndVersion = styled.div<{ mb: any }>`
@@ -170,7 +173,7 @@ export default function(props: Props) {
 		if (!props.onToggle) return null;
 
 		if (item.devMode) {
-			return <DevModeLabel>DEV</DevModeLabel>;
+			return <BoxedLabel>DEV</BoxedLabel>;
 		}
 
 		return <ToggleButton
@@ -217,6 +220,17 @@ export default function(props: Props) {
 		/>;
 	}
 
+	const renderDefaultPluginLabel = () => {
+		// Built-in plugins can only be disabled
+		if (item.manifest._built_in) {
+			return (
+				<BoxedLabel>{_('Built in')}</BoxedLabel>
+			);
+		}
+
+		return null;
+	};
+
 	function renderFooter() {
 		if (item.devMode) return null;
 
@@ -236,6 +250,7 @@ export default function(props: Props) {
 				{renderInstallButton()}
 				{renderUpdateButton()}
 				<div style={{ display: 'flex', flex: 1 }}/>
+				{renderDefaultPluginLabel()}
 			</CellFooter>
 		);
 	}