feat: Add <Open in Desktop App> button in header (#267)

* fix: quicksell panel renders on top of the item info

* feat: open in desktop app

* chore: remove extra blank line

Author: nolddor

_locales/en/messages.json

@@ -601,6 +601,9 @@
 		"message": "Hide \"Install Steam\" button in header",
 		"description": "\"Install Steam\" should match what the button on Steam itself in the header says: https://store.steampowered.com/"
 	},
+	"options_enhancement_open_desktop_app_button": {
+		"message": "Add a \"Open in Desktop App\" button in header"
+	},
 	"options_enhancement_hide_mobile_app_button": {
 		"message": "Hide \"Open in Steam\" banner"
 	},
@@ -665,7 +668,9 @@
 	"options_builtin_achievements_csrating": {
 		"message": "Display CS rating history on CS2 achievements page"
 	},
-
+	"open_desktop_app": {
+		"message": "Open in Desktop App"
+	},
 	"boostercreator_available_at_date": {
 		"message": "You will not be able to create another Booster Pack for this game until $available_date$.",
 		"description": "\"Booster Pack\" should match how Steam itself names it at: https://steamcommunity.com/tradingcards/boostercreator/",

options/options.html

@@ -266,6 +266,10 @@ <h3 data-msg="options_header_enhancements"></h3>
 			<input type="checkbox" class="option-check" data-option="enhancement-hide-install-button" checked>
 			<div data-msg="options_enhancement_hide_install_button"></div>
 		</label>
+		<label class="checkbox">
+			<input type="checkbox" class="option-check" data-option="enhancement-open-desktop-app-button">
+			<div data-msg="options_enhancement_open_desktop_app_button"></div>
+		</label>
 		<label class="checkbox">
 			<input type="checkbox" class="option-check" data-option="enhancement-hide-mobile-app-button">
 			<div data-msg="options_enhancement_hide_mobile_app_button"></div>

scripts/global.js

@@ -21,7 +21,11 @@ document.title === 'We Broke It' )
 }
 else
 {
-	GetOption( { 'enhancement-hide-install-button': true, 'enhancement-no-linkfilter': false }, ( items ) =>
+	GetOption( {
+		'enhancement-hide-install-button': true,
+		'enhancement-open-desktop-app-button': false,
+		'enhancement-no-linkfilter': false
+	}, ( items ) =>
 	{
 		if( items[ 'enhancement-hide-install-button' ] )
 		{
@@ -35,6 +39,20 @@ else
 			}
 		}
 
+		if( items[ 'enhancement-open-desktop-app-button' ] )
+		{
+			const installSteamBtn = document.querySelector( '.header_installsteam_btn' );
+
+			if( installSteamBtn )
+			{
+				const button = document.createElement( 'a' );
+				button.className = 'steamdb_open_desktop_app';
+				button.href = 'steam://openurl/' + window.location;
+				button.textContent = _t( 'open_desktop_app' );
+				installSteamBtn.insertAdjacentElement( 'afterend', button );
+			}
+		}
+
 		if( items[ 'enhancement-no-linkfilter' ] )
 		{
 			/** @type {NodeListOf<HTMLAnchorElement>} */

styles/global.css

@@ -49,3 +49,19 @@
 .steamdb_trade_error_explained:hover {
 	text-decoration: underline;
 }
+
+.steamdb_open_desktop_app {
+	display: inline-block;
+	padding: 0 9px;
+	margin-left: 4px;
+	background-color: #5c7e10;
+	color: #e5e4dc;
+
+	&:hover {
+		background-color: #6c9018;
+		color: #fff;
+		transition-property: background;
+		transition-duration: 250ms;
+		cursor: pointer;
+	}
+}