Desktop: Clickable tags in Tag Bar (#5956)

packages/app-desktop/gui/TagItem.jsx

@@ -1,14 +1,15 @@
 const React = require('react');
 const { connect } = require('react-redux');
 const { themeStyle } = require('@joplin/lib/theme');
+const CommandService = require('@joplin/lib/services/CommandService').default;
 
 class TagItemComponent extends React.Component {
 	render() {
 		const theme = themeStyle(this.props.themeId);
 		const style = Object.assign({}, theme.tagStyle);
-		const title = this.props.title;
+		const { title, id } = this.props;
 
-		return <span style={style}>{title}</span>;
+		return <button style={style} onClick={() => CommandService.instance().execute('openTag', id)}>{title}</button>;
 	}
 }
 

packages/app-desktop/gui/TagList.tsx

@@ -42,6 +42,7 @@ function TagList(props: Props) {
 		for (let i = 0; i < tags.length; i++) {
 			const props = {
 				title: tags[i].title,
+				id: tags[i].id,
 				key: tags[i].id,
 			};
 			output.push(<TagItem {...props} />);

packages/lib/theme.ts

@@ -227,6 +227,7 @@ function addExtraStyles(style: any) {
 		justifyContent: 'center',
 		marginRight: 8,
 		borderRadius: 100,
+		borderWidth: 0,
 	};
 
 	style.toolbarStyle = {