✨ Support immersive head styles for mac alone

src-tauri/src/app/window.rs

@@ -33,6 +33,12 @@ pub fn get_window(app: &mut App, config: PakeConfig, _data_dir: PathBuf) -> Wind
         //This is necessary to allow for file injection by external developers for customization purposes.
         .initialization_script(include_str!("../inject/custom.js"));
 
+    // For dynamic display of header styles
+    if window_config.transparent {
+        let transparent_script = "window.pakeWindowTitleTransparent = true;";
+        window_builder = window_builder.initialization_script(transparent_script);
+    }
+
     #[cfg(target_os = "macos")]
     {
         let title_bar_style = if window_config.transparent {
@@ -48,5 +54,7 @@ pub fn get_window(app: &mut App, config: PakeConfig, _data_dir: PathBuf) -> Wind
         window_builder = window_builder.data_directory(_data_dir);
     }
 
-    window_builder.build().unwrap()
+    let window = window_builder.build().expect("Failed to build window");
+
+    window
 }

src-tauri/src/inject/style.js

@@ -1,5 +1,6 @@
 window.addEventListener('DOMContentLoaded', _event => {
-  const css = `
+  // Customize and transform existing functions
+  const contentCSS = `
     #page #footer-wrapper,
     .drawing-board .toolbar .toolbar-action,
     .c-swiper-container,
@@ -33,29 +34,14 @@ window.addEventListener('DOMContentLoaded', _event => {
       opacity: 1;
     }
 
-    #layout > ytmusic-nav-bar{
-      padding: 6px 16px 0 72px;
-    }
-
     html::-webkit-scrollbar {
       display: none !important;
     }
 
-    #__next header.HeaderBar_header__jn5ju{
-      padding-top: 16px;
-    }
-
     #__next .ChatPageSidebar_menuFooter__E1KTY,#__next > div.PageWithSidebarLayout_centeringDiv___L9br > div > aside > div > menu > section:nth-child(6) {
       display: none;
     }
 
-    #page .main_header, .cb-layout-basic--navbar,
-    #app .splitpanes.splitpanes--horizontal.no-splitter header,
-    .fui-FluentProvider .fui-Button[data-testid="HomeButton"],
-    #__next > div.PageWithSidebarLayout_centeringDiv___L9br > aside .ChatPageSidebar_logo__9PIXq {
-      padding-top: 20px;
-    }
-
     #__next > div.overflow-hidden.w-full.h-full  .min-h-\\[20px\\].items-start.gap-4.whitespace-pre-wrap.break-words {
       word-break: break-all;
     }
@@ -88,14 +74,6 @@ window.addEventListener('DOMContentLoaded', _event => {
       display: none;
     }
 
-    #__next .overflow-hidden>.overflow-x-hidden .scrollbar-trigger > nav {
-      padding-top: 30px;
-    }
-
-    #__next>div>div>.flex.h-screen.w-full.flex-col.items-center {
-      padding-top: 20px;
-    }
-
     #__next .absolute .px-3.pt-2.pb-3.text-center {
       visibility: hidden;
       padding-bottom: 4px;
@@ -110,48 +88,10 @@ window.addEventListener('DOMContentLoaded', _event => {
       width: 100%;
     }
 
-    #tabs-sidebar--tabpanel-0 > div.tw-flex.tw-items-center.tw-mb-\\[12px\\].tw-mt-\\[14px\\].tw-px-4 {
-      padding-top: 15px;
-    }
-
-    #tabs-sidebar--tabpanel-1 > div > div.tw-p-\\[16px\\].tw-flex.tw-flex-col.tw-gap-1\\.5{
-      padding-top: 30px;
-    }
-
-    #tabs-sidebar--tabpanel-2 > div > h2 {
-      padding-top: 20px;
-      height: 70px;
-    }
-
-    .lark > .dashboard-sidebar, .lark > .dashboard-sidebar > .sidebar-user-info , .lark > .dashboard-sidebar .index-module_wrapper_F-Wbq{
-      padding-top:15px;
-    }
-
-    .lark > .main-wrapper [data-testid="aside"] {
-      top: 15px;
-    }
-
     .panel.give_me .nav_view {
       top: 164px !important;
     }
 
-    .columns .column #header,
-    .main > div > div.panel.give_me > div.header {
-      padding-top: 30px;
-    }
-
-    ytd-masthead>#container.style-scope.ytd-masthead {
-      padding-top: 12px;
-    }
-
-    #background.ytd-masthead {
-      height: 68px;
-    }
-
-    .wrap.h1body-exist.max-container > div.menu-tocs > div.menu-btn{
-      top: 28px;
-    }
-
     #Wrapper{
       background-color: #F8F8F8 !important;
       background-image:none !important;
@@ -161,20 +101,6 @@ window.addEventListener('DOMContentLoaded', _event => {
       border-bottom: none;
     }
 
-    .container-with-note #home, .container-with-note #switcher{
-      top: 30px;
-    }
-
-    .geist-page nav.dashboard_nav__PRmJv,
-    #app > div.layout > div.header-container.showSearchBoxOrHeaderFixed > header > a {
-      padding-top:10px;
-    }
-
-    .geist-page .submenu button{
-      margin-top:24px;
-    }
-
-
     #react-root [data-testid="placementTracking"] article,
     #react-root a[href*="quick_promote_web"],
     #react-root [data-testid="AppTabBar_Explore_Link"],
@@ -343,20 +269,94 @@ window.addEventListener('DOMContentLoaded', _event => {
       }
     }
 
-    @media (max-width:767px){
-      #__next .overflow-hidden.w-full .max-w-full>.sticky.top-0 {
-        padding-top: 20px;
-      }
-
-      #__next > div.overflow-hidden.w-full.h-full  main.relative.h-full.w-full.flex-1 > .flex-1.overflow-hidden .h-32.md\\:h-48.flex-shrink-0{
-        height: 0px;
-      }
-    }
-
     #__next .prose ol li p {
       margin: 0;
       display: inline;
     }
+  `;
+  const contentStyleElement = document.createElement('style');
+  contentStyleElement.innerHTML = contentCSS;
+  document.head.appendChild(contentStyleElement);
+
+  // Top spacing adapts to head-hiding scenarios
+  const topPaddingCSS = `
+    #layout > ytmusic-nav-bar{
+      padding-top: 20px;
+    }
+
+    .columns .column #header,
+    .main > div > div.panel.give_me > div.header {
+      padding-top: 30px;
+    }
+
+    ytd-masthead>#container.style-scope.ytd-masthead {
+      padding-top: 12px;
+    }
+
+    #__next header.HeaderBar_header__jn5ju{
+      padding-top: 16px;
+    }
+
+    .geist-page nav.dashboard_nav__PRmJv,
+    #app > div.layout > div.header-container.showSearchBoxOrHeaderFixed > header > a {
+      padding-top:10px;
+    }
+
+    .geist-page .submenu button{
+      margin-top:24px;
+    }
+
+    .container-with-note #home, .container-with-note #switcher{
+      top: 30px;
+    }
+
+    #__next .overflow-hidden>.overflow-x-hidden .scrollbar-trigger > nav {
+      padding-top: 30px;
+    }
+
+    #__next>div>div>.flex.h-screen.w-full.flex-col.items-center {
+      padding-top: 20px;
+    }
+
+    #__next .sticky.left-0.right-0.top-0.z-20.bg-black{
+      padding-top: 0px;
+    }
+
+    #page .main_header, .cb-layout-basic--navbar,
+    #app .splitpanes.splitpanes--horizontal.no-splitter header,
+    .fui-FluentProvider .fui-Button[data-testid="HomeButton"],
+    #__next > div.PageWithSidebarLayout_centeringDiv___L9br > aside .ChatPageSidebar_logo__9PIXq {
+      padding-top: 20px;
+    }
+
+    #tabs-sidebar--tabpanel-0 > div.tw-flex.tw-items-center.tw-mb-\\[12px\\].tw-mt-\\[14px\\].tw-px-4 {
+      padding-top: 15px;
+    }
+
+    #tabs-sidebar--tabpanel-1 > div > div.tw-p-\\[16px\\].tw-flex.tw-flex-col.tw-gap-1\\.5{
+      padding-top: 30px;
+    }
+
+    #tabs-sidebar--tabpanel-2 > div > h2 {
+      padding-top: 20px;
+      height: 70px;
+    }
+
+    .lark > .dashboard-sidebar, .lark > .dashboard-sidebar > .sidebar-user-info , .lark > .dashboard-sidebar .index-module_wrapper_F-Wbq{
+      padding-top:15px;
+    }
+
+    .lark > .main-wrapper [data-testid="aside"] {
+      top: 15px;
+    }
+
+    #background.ytd-masthead {
+      height: 68px;
+    }
+
+    .wrap.h1body-exist.max-container > div.menu-tocs > div.menu-btn{
+      top: 28px;
+    }
 
     #pack-top-dom:active {
       cursor: grabbing;
@@ -375,8 +375,21 @@ window.addEventListener('DOMContentLoaded', _event => {
       -webkit-user-select: none;
       z-index: 90000;
     }
+
+    @media (max-width:767px){
+      #__next .overflow-hidden.w-full .max-w-full>.sticky.top-0 {
+        padding-top: 20px;
+      }
+
+      #__next > div.overflow-hidden.w-full.h-full  main.relative.h-full.w-full.flex-1 > .flex-1.overflow-hidden .h-32.md\\:h-48.flex-shrink-0{
+        height: 0px;
+      }
+    }
   `;
-  const styleElement = document.createElement('style');
+  const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
-  styleElement.innerHTML = css;
+  if(window.pakeWindowTitleTransparent && isMac){
-  document.head.appendChild(styleElement);
+    const topPaddingStyleElement = document.createElement('style');
+    topPaddingStyleElement.innerHTML = topPaddingCSS;
+    document.head.appendChild(topPaddingStyleElement);
+  }
 });