Add basic selected tags display to List Page

client/homebrew/pages/basePages/listPage/listPage.jsx

@@ -158,7 +158,12 @@ const ListPage = createClass({
 			}
 		}
 		urlParams.delete('tag');
+		// Add tags to URL in the order they were clicked
 		filterTags.forEach((tag)=>{ urlParams.append('tag', tag); });
+		// Sort tags before updating state
+		filterTags.sort((a, b)=>{
+			return a.indexOf(':') - b.indexOf(':') != 0 ? a.indexOf(':') - b.indexOf(':') : a.toLowerCase().localeCompare(b.toLowerCase());
+		});
 
 		this.setState({
 			filterTags
@@ -187,6 +192,17 @@ const ListPage = createClass({
 		</div>;
 	},
 
+	renderTagsOptions : function(){
+		if(this.state.filterTags?.length == 0) return;
+		console.log('renderTags');
+		return <div className='tags-container'>
+			{_.map(this.state.filterTags, (tag, idx)=>{
+				const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
+				return <span key={idx} className={matches[1]} onClick={()=>{this.updateListFilter('tag', tag);}}>{matches[2]}</span>;
+			})}
+		</div>;
+	},
+
 	renderSortOptions : function(){
 		return <div className='sort-container'>
 			<h6>Sort by :</h6>
@@ -197,9 +213,6 @@ const ListPage = createClass({
 			{/* {this.renderSortOption('Latest', 'latest')} */}
 
 			{this.renderFilterOption()}
-
-
-
 		</div>;
 	},
 
@@ -258,6 +271,7 @@ const ListPage = createClass({
 			<link href='/themes/V3/5ePHB/style.css' rel='stylesheet'/>
 			{this.props.navItems}
 			{this.renderSortOptions()}
+			{this.renderTagsOptions()}
 
 			<div className='content V3'>
 				<div className='page'>

client/homebrew/pages/basePages/listPage/listPage.less

@@ -52,7 +52,7 @@
 			}
 		}
 	}
-	.sort-container{
+	.sort-container {
 		font-family        : 'Open Sans', sans-serif;
 		position           : sticky;
 		top                : 0;
@@ -124,4 +124,71 @@
 
 
 	}
+	.tags-container {
+		font-family        : 'Open Sans', sans-serif;
+		position           : sticky;
+		top                : 0;
+		left               : 0;
+		width              : 100%;
+		height             : 30px;
+		background-color   : #555;
+		border-top         : 1px solid #666;
+		border-bottom         : 1px solid #666;
+		color              : white;
+		text-align         : center;
+		z-index            : 1;
+		display            : flex;
+		justify-content    : center;
+		align-items        : center;
+		column-gap         : 15px;
+		row-gap            : 5px;
+		flex-wrap          : wrap;
+		span {
+			text-transform : uppercase;
+			font-family    : 'Open Sans', sans-serif;
+			font-size      : 11px;
+			font-weight    : bold;
+			border         : 1px solid;
+			border-radius  : 3px;
+			padding        : 3px;
+			cursor         : pointer;
+			&:before {
+				font-family: 'Font Awesome 5 Free';
+				font-size: 12px;
+				margin-right: 3px;
+			}
+			&.type {
+				background-color: #0080003b;
+				color: #008000;
+				border-color: #008000;
+				&:before{
+					content: '\f0ad';
+				}
+			}
+			&.group {
+				background-color: #5050503b;
+				color: #000000;
+				border-color: #000000;
+				&:before{
+					content: '\f500';
+				}
+			}
+			&.meta {
+				background-color: #0000803b;
+				color: #000080;
+				border-color: #000080;
+				&:before{
+					content: '\f05a';
+				}
+			}
+			&.system {
+				background-color: #8000003b;
+				color: #800000;
+				border-color: #800000;
+				&:before{
+					content: '\f518';
+				}
+			}
+		}
+	}
 }