4.0.0-rc21.6

* Added: Setting to remove rounding applied to avatars.
* Fixed: New settings not being marked as seen when you see them.
* Fixed: Position of the FFZ Control Center icon in the navigation bar.
* Fixed: Position of the Whisper button when in theater mode with a custom Chat Width.
* Fixed: Hiding Recommended Channels from the Following Directory.
* Fixed: Rendering of badges in slot zero.

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.5',
+	major: 4, minor: 0, revision: 0, extra: '-rc21.6',
 	commit: __git_commit__,
 	build: __webpack_hash__,
 	toString: () =>

src/modules/chat/badges.jsx

@@ -406,7 +406,7 @@ export default class Badges extends Module {
 			}
 
 		for(const badge of badges)
-			if ( badge && badge.id ) {
+			if ( badge && badge.id != null ) {
 				if ( hidden_badges[badge.id] )
 					continue;
 
@@ -440,7 +440,7 @@ export default class Badges extends Module {
 
 					style = old_badge.props.style;
 
-				} else if ( ! slot )
+				} else if ( slot == null )
 					continue;
 
 				else {

src/modules/main_menu/index.js

@@ -642,9 +642,7 @@ export default class MainMenu extends Module {
 
 		}
 
-		if ( ! item.setting )
-			return;
-
+		if ( item.setting ) {
 			if ( ! seen.includes(item.setting) ) {
 				seen.push(item.setting);
 
@@ -654,6 +652,7 @@ export default class MainMenu extends Module {
 					i = i.parent;
 				}
 			}
+		}
 
 		if ( ! had_seen )
 			this.settings.provider.set('cfg-seen', seen);

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

@@ -216,6 +216,18 @@ export default class CSSTweaks extends Module {
 			},
 			changed: val => this.toggle('hide-bits', !val)
 		});
+
+		// Other?
+
+		this.settings.add('channel.round-avatars', {
+			default: true,
+			ui: {
+				path: 'Channel > Appearance >> General',
+				title: 'Allow avatar images to be rounded.',
+				component: 'setting-check-box'
+			},
+			changed: val => this.toggle('square-avatars', !val)
+		});
 	}
 
 	onEnable() {
@@ -230,6 +242,8 @@ export default class CSSTweaks extends Module {
 		this.toggleHide('prime-offers', !this.settings.get('layout.prime-offers'));
 		this.toggleHide('top-discover', !this.settings.get('layout.discover'));
 
+		this.toggle('square-avatars', ! this.settings.get('channel.round-avatars'));
+
 		const recs = this.settings.get('layout.side-nav.show-rec-channels');
 		this.toggleHide('side-rec-channels', recs === 0);
 		this.toggleHide('side-closed-rec-channels', recs === 2);

src/sites/twitch-twilight/modules/css_tweaks/styles/chat-width.scss

@@ -1,4 +1,4 @@
-body .whispers--theatre-mode.whispers--right-column-expanded {
+body .whispers--theatre-mode.whispers--right-column-expanded-beside {
 	right: var(--ffz-chat-width);
 }
 

src/sites/twitch-twilight/modules/css_tweaks/styles/square-avatars.scss

@@ -0,0 +1,4 @@
+.tw-root--theme-dark .tw-avatar .tw-border-radius-rounded,
+.tw-avatar .tw-border-radius-rounded {
+	border-radius: 0 !important;
+}

src/sites/twitch-twilight/modules/directory/index.jsx

@@ -54,7 +54,7 @@ export default class Directory extends SiteModule {
 
 		this.DirectoryShelf = this.fine.define(
 			'directory-shelf',
-			n => n.onEmptyShelfRender && n.shouldRenderShelf,
+			n => n.getShelfTitle && n.props && n.props.shelf,
 			DIR_ROUTES
 		);
 

src/sites/twitch-twilight/modules/menu_button.jsx

@@ -101,12 +101,18 @@ export default class MenuButton extends SiteModule {
 	}
 
 	updateButton(inst) {
-		const root = this.fine.getChildNode(inst),
-			container = root && root.querySelector('.top-nav__menu');
+		const root = this.fine.getChildNode(inst);
+		let container = root && root.querySelector('.top-nav__menu');
 
 		if ( ! container )
 			return;
 
+		const user_stuff = container.querySelector(':scope > .tw-justify-content-end:last-child');
+		if ( user_stuff )
+			container = user_stuff;
+		else
+			container = container.lastElementChild;
+
 		let btn, el = container.querySelector('.ffz-top-nav');
 		if ( el )
 			el.remove();
@@ -160,10 +166,6 @@ export default class MenuButton extends SiteModule {
 			</button>)}
 		</div>);
 
-		const user_menu = container.querySelector('.top-nav__nav-items-container:last-child');
-		if ( user_menu )
-			container.insertBefore(el, user_menu);
-		else
 		container.insertBefore(el, container.lastElementChild);
 	}