just another normal everyday feature, nothing to see here

src/ui/components/TopBar.css

@@ -25,4 +25,30 @@
 #version {
   margin: 0px 6px;
   color: #434343;
+}
+
+#unassumingButton {
+  font-weight: bold;
+  margin: 0px 6px;
+  color: #141414;
+
+  transition: color 0.2s ease-in-out;
+}
+
+#unassumingButton:hover {
+  color: #434343;
+}
+
+#unassumingButton.spin {
+  color: #fff;
+  animation: spin 0.5s ease-in-out;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }

src/ui/components/TopBar.tsx

@@ -10,6 +10,7 @@ import gameBtn from '../../resources/icons/game.svg'
 import Tr from '../../utils/language'
 
 import './TopBar.css'
+import { getConfig, setConfigOption } from '../../utils/configuration'
 
 interface IProps {
   optFunc: () => void;
@@ -19,13 +20,21 @@ interface IProps {
 
 interface IState {
   version: string;
+  clicks: number;
+  intv: NodeJS.Timeout | null;
 }
 
 export default class TopBar extends React.Component<IProps, IState> {
   constructor(props: IProps) {
     super(props)
 
-    this.state = { version: '0.0.0' }
+    this.state = {
+      version: '0.0.0',
+      clicks: 0,
+      intv: null
+    }
+
+    this.activateClick = this.activateClick.bind(this)
   }
 
   async componentDidMount() {
@@ -41,6 +50,36 @@ export default class TopBar extends React.Component<IProps, IState> {
     appWindow.minimize()
   }
 
+  async activateClick() {
+    const config = await getConfig()
+
+    // They already got it, no need to reactivate
+    if (config.swag_mode) return
+
+    if (this.state.clicks === 2) {
+      setTimeout(() => {
+        // Gotta clear it so it goes back to regular colors
+        this.setState({
+          clicks: 0
+        })
+      }, 600)
+  
+      // Activate... SWAG MODE
+      await setConfigOption('swag_mode', true)
+
+      return
+    }
+
+    if (this.state.clicks < 3) {
+      this.setState({
+        clicks: this.state.clicks + 1,
+        intv: setTimeout(() => this.setState({ clicks: 0 }), 1500)
+      })
+
+      return
+    }
+  }
+
   render() {
     return (
       <div className="TopBar" id="topBarContainer" data-tauri-drag-region>
@@ -50,6 +89,16 @@ export default class TopBar extends React.Component<IProps, IState> {
           </span>
           <span data-tauri-drag-region id="version">{this.state?.version}</span>
         </div>
+        {
+          /**
+           * HEY YOU
+           * 
+           * If you're looking at the source code to find the swag mode thing, that's okay! If you're not, move along...
+           * Just do me a favor and don't go telling everyone about how you found it. If you are just helping someone who
+           * for some reason needs it, that's fine, but not EVERYONE needs it, which is why it exists in the first place.
+           */
+        }
+        <div id="unassumingButton" className={this.state.clicks === 2 ? 'spin' : ''} onClick={this.activateClick}>?</div>
         <div className="TopBtns" id="topBarButtonContainer">
           <div id="closeBtn" onClick={this.handleClose} className='TopButton'>
             <img src={closeIcon} alt="close" />

src/utils/configuration.ts

@@ -43,6 +43,7 @@ export interface Configuration {
   theme: string
   https_enabled: boolean
   debug_enabled: boolean
+  swag_mode?: boolean
 }
 
 export async function setConfigOption(key: string, value: any): Promise<void> {