feat(electron): app tabs dnd (#7684)

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/T2klNLEk0wxLh4NRDzhk/cd84e155-9f2e-4d12-a933-8673eb6bc6cb.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/T2klNLEk0wxLh4NRDzhk/cd84e155-9f2e-4d12-a933-8673eb6bc6cb.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/cd84e155-9f2e-4d12-a933-8673eb6bc6cb.mp4">Kapture 2024-07-31 at 19.39.30.mp4</video>

fix AF-1149
fix PD-1513
fix PD-1515

packages/frontend/electron/renderer/global.css

@@ -0,0 +1,25 @@
+button,
+input,
+select,
+textarea
+/* [role='button']  */ {
+  -webkit-app-region: no-drag;
+}
+
+#webpack-dev-server-client-overlay {
+  -webkit-app-region: no-drag;
+}
+
+html:is([data-active='false'], [data-dragging='true']) * {
+  -webkit-app-region: no-drag !important;
+}
+
+html[data-active='false'] {
+  opacity: 0;
+  transition: opacity 0.2s 0.1s;
+}
+
+html[data-active='true']:has([data-blur-background='true']) {
+  opacity: 1;
+  transition: opacity 0.2s;
+}

packages/frontend/electron/renderer/index.tsx

@@ -1,5 +1,6 @@
 import './polyfill/dispose';
 import '@affine/core/bootstrap/preload';
+import './global.css';
 
 import { appConfigProxy } from '@affine/core/hooks/use-app-config-storage';
 import { performanceLogger } from '@affine/core/shared';
@@ -96,6 +97,12 @@ function main() {
     }, 50);
     window.addEventListener('resize', handleResize);
     performanceMainLogger.info('setup done');
+    window.addEventListener('dragstart', () => {
+      document.documentElement.dataset.dragging = 'true';
+    });
+    window.addEventListener('dragend', () => {
+      document.documentElement.dataset.dragging = 'false';
+    });
   }
 
   mountApp();

packages/frontend/electron/renderer/shell/index.tsx

@@ -2,6 +2,7 @@ import 'setimmediate';
 import '@affine/component/theme/global.css';
 import '@affine/component/theme/theme.css';
 import '@affine/core/bootstrap/preload';
+import '../global.css';
 
 import { ThemeProvider } from '@affine/component/theme-provider';
 import { configureAppTabsHeaderModule } from '@affine/core/modules/app-tabs-header';