support acrylic on windows (#28)

* support acrylic on windows * bump app version * fix lint * fix build
atinylittleshell · Jan 14, 2024 · e13d7cb · e13d7cb
1 parent 7d94310
commit e13d7cb
Show file tree

Hide file tree

Showing 15 changed files with 5,445 additions and 4,380 deletions.
diff --git a/apps/app/package.json b/apps/app/package.json
@@ -33,15 +33,15 @@
     "@terminalone/types": "*",
     "copy-webpack-plugin": "^11.0.0",
     "dayjs": "^1.11.7",
-    "electron": "^24.1.2",
+    "electron": "^28.1.3",
     "electron-devtools-installer": "^3.2.0",
     "electron-serve": "^1.1.0",
     "electron-updater": "^5.3.0",
     "fs-extra": "^10.1.0",
     "lodash": "^4.17.21",
     "node-fetch": "^2.6.7",
     "node-loader": "^2.0.0",
-    "node-pty": "^0.10.1",
+    "node-pty": "^1.0.0",
     "os-locale": "^6.0.2",
     "vm": "^0.1.0",
     "webpack": "^5.72.0",

diff --git a/apps/app/src/main.ts b/apps/app/src/main.ts
@@ -22,6 +22,7 @@ async function createWindow() {
     icon: path.join(__dirname, 'public', 'icon.png'),
     backgroundColor: '#000000',
     visualEffectState: 'followWindow',
+    transparent: true,
     width: 800,
     height: 600,
     webPreferences: {

diff --git a/apps/app/src/nativeBridge/modules/configModule.ts b/apps/app/src/nativeBridge/modules/configModule.ts
@@ -65,18 +65,34 @@ export class ConfigModule extends NativeBridgeModule {
         `Loaded config from ${configPath}}: ${JSON.stringify(mod.exports)}`,
       );
 
-      const resolved = resolveConfig(mod.exports, os.platform());
+      const resolved = resolveConfig(mod.exports, os.platform(), os.release());
       this.config = resolved;
 
       this.applyConfig(resolved, mainWindow);
     } catch (err: unknown) {
-      Logger.getInstance().log('error', JSON.stringify(err));
+      const e = err as Error;
+      Logger.getInstance().log(
+        'error',
+        JSON.stringify(
+          {
+            name: e.name,
+            message: e.message,
+            stack: e.stack,
+          },
+          null,
+          2,
+        ),
+      );
     }
   }
 
   private applyConfig(config: ResolvedConfig, mainWindow: BrowserWindow): void {
     if (config.acrylic) {
-      mainWindow.setVibrancy('under-window');
+      if (os.platform() === 'darwin') {
+        mainWindow.setVibrancy('under-window');
+      } else {
+        mainWindow.setBackgroundMaterial('acrylic');
+      }
       mainWindow.setBackgroundColor('#00000000');
     }
   }

diff --git a/apps/terminal/app/page.tsx b/apps/terminal/app/page.tsx
@@ -189,65 +189,62 @@ const Page = () => {
   return (
     <>
       <TitleBar>
-        <div className="flex w-screen">
-          <div className="tabs">
+        <div className="tabs">
+          <a
+            className={`tab tab-lifted items-center ${
+              tabId === 0 ? 'tab-active' : ''
+            }`}
+            style={{
+              backgroundColor:
+                tabId === 0 ? config.colorScheme.background : undefined,
+            }}
+            onClick={() => {
+              setTabId(0);
+            }}
+          >
+            <FiMenu />
+          </a>
+          {userTabs.map((userTab) => (
             <a
+              key={userTab.tabId}
               className={`tab tab-lifted items-center ${
-                tabId === 0 ? 'tab-active' : ''
+                tabId === userTab.tabId ? 'tab-active' : ''
               }`}
               style={{
                 backgroundColor:
-                  tabId === 0 ? config.colorScheme.background : undefined,
+                  tabId === userTab.tabId
+                    ? config.colorScheme.background
+                    : undefined,
+                paddingRight: tabId === userTab.tabId ? 0 : undefined,
               }}
               onClick={() => {
-                setTabId(0);
+                if (tabId === userTab.tabId) {
+                  return;
+                }
+                setTabId(userTab.tabId);
               }}
             >
-              <FiMenu />
+              {userTab.tabId}
+              {userTab.tabId === tabId && (
+                <button
+                  className="btn btn-ghost btn-square btn-xs opacity-50 hover:bg-transparent hover:opacity-100 ml-2"
+                  onClick={() => {
+                    closeTab();
+                  }}
+                >
+                  <FiX />
+                </button>
+              )}
             </a>
-            {userTabs.map((userTab) => (
-              <a
-                key={userTab.tabId}
-                className={`tab tab-lifted items-center ${
-                  tabId === userTab.tabId ? 'tab-active' : ''
-                }`}
-                style={{
-                  backgroundColor:
-                    tabId === userTab.tabId
-                      ? config.colorScheme.background
-                      : undefined,
-                  paddingRight: tabId === userTab.tabId ? 0 : undefined,
-                }}
-                onClick={() => {
-                  if (tabId === userTab.tabId) {
-                    return;
-                  }
-                  setTabId(userTab.tabId);
-                }}
-              >
-                {userTab.tabId}
-                {userTab.tabId === tabId && (
-                  <button
-                    className="btn btn-ghost btn-square btn-xs opacity-50 hover:bg-transparent hover:opacity-100 ml-2"
-                    onClick={() => {
-                      closeTab();
-                    }}
-                  >
-                    <FiX />
-                  </button>
-                )}
-              </a>
-            ))}
-            <a
-              className="tab tab-lifted"
-              onClick={() => {
-                createTab();
-              }}
-            >
-              <FiPlus />
-            </a>
-          </div>
-          <div className="flex-1 tab tab-lifted cursor-default" />
+          ))}
+          <a
+            className="tab tab-lifted"
+            onClick={() => {
+              createTab();
+            }}
+          >
+            <FiPlus />
+          </a>
         </div>
       </TitleBar>
       <div

diff --git a/apps/terminal/components/TitleBar/index.tsx b/apps/terminal/components/TitleBar/index.tsx
@@ -27,14 +27,14 @@ function TitleBar(props: PropsWithChildren) {
       <div className={`flex items-center ${styles['title-bar-buttons']}`}>
         {props.children}
       </div>
-      <div className="flex-1" />
+      <div className={`flex-1 tab tab-lifted ${styles['title-bar-drag']}`} />
       {window.TerminalOne?.platform === 'darwin' ||
       window.TerminalOne?.platform === 'linux' ? null : (
         <div
           className={`flex flex-row text-white ${styles['title-bar-buttons']}`}
         >
           <button
-            className="btn btn-sm btn-ghost btn-square"
+            className="btn btn-sm btn-ghost btn-square tab tab-lifted"
             title="Minimize"
             onClick={() => {
               window.TerminalOne?.win.minimize();
@@ -43,7 +43,7 @@ function TitleBar(props: PropsWithChildren) {
             <FiMinus size="16" />
           </button>
           <button
-            className="btn btn-sm btn-ghost btn-square"
+            className="btn btn-sm btn-ghost btn-square tab tab-lifted"
             title="Maximize"
             onClick={() => {
               if (isMaximized) {
@@ -62,7 +62,7 @@ function TitleBar(props: PropsWithChildren) {
             )}
           </button>
           <button
-            className="btn btn-sm btn-ghost btn-square hover:bg-error"
+            className="btn btn-sm btn-ghost btn-square hover:bg-error tab tab-lifted"
             title="Close"
             onClick={async () => {
               flushSync(() => {

diff --git a/apps/terminal/next.config.js b/apps/terminal/next.config.js
@@ -4,7 +4,6 @@ module.exports = {
   distDir: 'dist',
   transpilePackages: ['@terminalone/ui', '@terminalone/types'],
   experimental: {
-    appDir: true,
     typedRoutes: true,
   },
 };
diff --git a/apps/terminal/tsconfig.json b/apps/terminal/tsconfig.json
@@ -1,5 +1,12 @@
 {
   "extends": "@terminalone/tsconfig/nextjs.json",
+  "compilerOptions": {
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
   "include": [
     "next-env.d.ts",
     "**/*.ts",