4.0.0-rc21.5

* Added: Button to mark all settings as seen to the main menu, only visible when there are new settings.
* Fixed: Formatting of metadata.
* Fixed: Custom Chat Width and Theater Mode.

src/main.js

@@ -149,7 +149,7 @@ ${typeof x[1] === 'string' ? x[1] : JSON.stringify(x[1], null, 4)}`
 FrankerFaceZ.Logger = Logger;
 
 const VER = FrankerFaceZ.version_info = {
-	major: 4, minor: 0, revision: 0, extra: '-rc21.4',
+	major: 4, minor: 0, revision: 0, extra: '-rc21.5',
 	commit: __git_commit__,
 	build: __webpack_hash__,
 	toString: () =>

src/modules/main_menu/components/main-menu.vue

@@ -60,6 +60,16 @@
 				</header>
 				<div class="tw-full-width tw-full-height tw-overflow-hidden tw-flex tw-flex-nowrap tw-relative">
 					<simplebar classes="ffz-vertical-nav__items tw-full-width tw-flex-grow-1">
+						<header v-if="has_unseen" class="tw-border-b tw-pd-1">
+							<button
+								class="tw-button tw-button--hollow tw-full-width"
+								@click="allRead"
+							>
+								<span class="tw-button__text">
+									{{ t('main-menu.mark-all-seen', 'Mark All Seen') }}
+								</span>
+							</button>
+						</header>
 						<menu-tree
 							:current-item="currentItem"
 							:modal="nav"
@@ -153,6 +163,11 @@ export default {
 	},
 
 	methods: {
+		allRead() {
+			this.markAllSeen(this.nav);
+			this.has_unseen = false;
+		},
+
 		maybeResize(event) {
 			if ( event.target !== this.$refs.header )
 				return;

src/modules/main_menu/components/profile-selector.vue

@@ -4,7 +4,7 @@
 			ref="button"
 			:class="{active: opened}"
 			tabindex="0"
-			class="tw-block tw-border-radius-medium tw-font-size-6 tw-full-width tw-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05"
+			class="tw-c-background-alt tw-block tw-border tw-border-radius-medium tw-font-size-6 tw-full-width tw-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05"
 			@keyup.up.stop.prevent="focusShow"
 			@keyup.left.stop.prevent="focusShow"
 			@keyup.down.stop.prevent="focusShow"

src/modules/main_menu/index.js

@@ -640,7 +640,9 @@ export default class MainMenu extends Module {
 			for(const child of item.contents)
 				child && this.markSeen(child, seen);
 
-		} else if ( ! item.setting )
+		}
+
+		if ( ! item.setting )
 			return;
 
 		if ( ! seen.includes(item.setting) ) {
@@ -657,6 +659,45 @@ export default class MainMenu extends Module {
 			this.settings.provider.set('cfg-seen', seen);
 	}
 
+	markAllSeen(thing, seen) {
+		let had_seen = true;
+		if ( ! seen ) {
+			had_seen = false;
+			seen = this.settings.provider.get('cfg-seen', []);
+		}
+
+		if ( Array.isArray(thing) )
+			for(const page of thing)
+				if ( page )
+					this.markAllSeen(page, seen);
+
+		if ( Array.isArray(thing.items) )
+			for(const item of thing.items)
+				this.markAllSeen(item, seen);
+
+		if ( Array.isArray(thing.contents) )
+			for(const content of thing.contents)
+				this.markAllSeen(content, seen);
+
+		if ( Array.isArray(thing.tabs) )
+			for(const tab of thing.tabs)
+				this.markAllSeen(tab, seen);
+
+		if ( Array.isArray(thing.settings) )
+			for(const setting of thing.settings)
+				if ( setting )
+					this.markAllSeen(setting[1], seen);
+
+		if ( thing.setting && ! seen.includes(thing.setting) )
+			seen.push(thing.setting);
+
+		if ( thing.unseen )
+			thing.unseen = 0;
+
+		if ( ! had_seen )
+			this.settings.provider.set('cfg-seen', seen);
+	}
+
 	getData() {
 		const settings = this.getSettingsTree(),
 			context = this.getContext(),
@@ -664,6 +705,14 @@ export default class MainMenu extends Module {
 
 		this.markSeen(current);
 
+		let has_unseen = false;
+		for(const page of settings)
+			if ( page && page.unseen ) {
+				has_unseen = true;
+				break;
+			}
+
+
 		return {
 			context,
 
@@ -674,9 +723,12 @@ export default class MainMenu extends Module {
 			currentItem: current,
 			nav_keys: settings.keys,
 
+			has_unseen,
+
 			maximized: this.dialog.maximized,
 			exclusive: this.dialog.exclusive,
 
+			markAllSeen: thing => this.markAllSeen(thing),
 			markSeen: item => this.markSeen(item),
 
 			markExpanded: item => {

src/modules/metadata.jsx

@@ -779,12 +779,12 @@ export default class Metadata extends Module {
 						icon = (<span class="tw-stat__icon"><figure class={icon} /></span>);
 
 					el = (<div
-						class="ffz-stat tw-stat"
+						class="tw-inline-flex tw-align-items-center ffz-stat tw-stat"
 						data-key={key}
 						tip_content={tooltip}
 					>
 						{icon}
-						{stat = <span class="ffz-stat-text tw-stat__value" />}
+						{stat = <span class={`${icon ? 'tw-mg-l-05 ' : ''}ffz-stat-text tw-stat__value`} />}
 					</div>);
 
 					if ( def.click )

src/sites/twitch-twilight/modules/chat/index.js

@@ -439,7 +439,7 @@ export default class ChatHook extends Module {
 		this.grabTypes();
 
 		this.chat.context.on('changed:chat.width', this.updateChatCSS, this);
-		this.settings.on('changed:chat.use-width', this.updateChatCSS, this);
+		this.settings.main_context.on('changed:chat.use-width', this.updateChatCSS, this);
 		this.chat.context.on('changed:chat.font-size', this.updateChatCSS, this);
 		this.chat.context.on('changed:chat.font-family', this.updateChatCSS, this);
 		this.chat.context.on('changed:chat.lines.emote-alignment', this.updateChatCSS, this);