Update typescript requirement from ^4.7.3 to ^4.8.4

Updates the requirements on [typescript](https://github.com/Microsoft/TypeScript) to permit the latest version.
- [Release notes](https://github.com/Microsoft/TypeScript/releases)
- [Commits](https://github.com/Microsoft/TypeScript/compare/v4.7.3...v4.8.4)

---
updated-dependencies:
- dependency-name: typescript
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>

.github/dependabot.yml

@@ -1,9 +1,13 @@
 version: 2
 updates:
-- package-ecosystem: npm
-  directory: "/"
-  schedule:
-    interval: daily
-    time: "13:00"
-  open-pull-requests-limit: 99
-  versioning-strategy: increase
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "daily"
+  - package-ecosystem: npm
+    directory: "/"
+    schedule:
+      interval: daily
+      time: "13:00"
+    open-pull-requests-limit: 99
+    versioning-strategy: increase

.github/workflows/dev.yml

@@ -19,11 +19,14 @@ jobs:
             - name: Checkout code
               uses: actions/checkout@v2
 
+            - name: Install pnpm
+              run: npm i -g pnpm
+
             - name: Install Node dependencies
-              run: npm install
+              run: pnpm install
 
             - name: Install Electron-Builder
-              run: npm install -g electron-builder
+              run: pnpm install -g electron-builder
 
             - name: Replace the version number
               run: cat src/utils.ts | sed -e 's/[[:digit:]]\.[[:digit:]]\.[[:digit:]]/DEV/g' | tee src/utils.ts > /dev/null
@@ -53,11 +56,14 @@ jobs:
             - name: Checkout code
               uses: actions/checkout@v2
 
+            - name: Install pnpm
+              run: npm i -g pnpm
+
             - name: Install Node dependencies
-              run: npm install
-              
+              run: pnpm install
+
             - name: Install Electron-Builder
-              run: npm install -g electron-builder
+              run: pnpm install -g electron-builder
 
             - name: Replace the version number
               run: cat src/utils.ts | sed -e 's/[[:digit:]]\.[[:digit:]]\.[[:digit:]]/DEV/g' | tee src/utils.ts > /dev/null
@@ -84,11 +90,14 @@ jobs:
             - name: Checkout code
               uses: actions/checkout@v2
 
+            - name: Install pnpm
+              run: npm i -g pnpm
+
             - name: Install Node dependencies
-              run: npm install
-              
+              run: pnpm install
+
             - name: Install Electron-Builder
-              run: npm install -g electron-builder
+              run: pnpm install -g electron-builder
 
             - name: Replace the version number
               run: (Get-Content src/utils.ts) -replace "\d\.\d\.\d", "DEV" | Out-File src/utils.ts

.github/workflows/stable.yml

@@ -19,11 +19,14 @@ jobs:
             - name: Checkout code
               uses: actions/checkout@v2
 
+            - name: Install pnpm
+              run: npm i -g pnpm
+
             - name: Install Node dependencies
-              run: npm install
+              run: pnpm install
 
             - name: Install Electron-Builder
-              run: npm install -g electron-builder
+              run: pnpm install -g electron-builder
 
             - name: Build
               run: npm run build && electron-builder --linux && electron-builder --arm64 --linux && electron-builder --armv7l --linux
@@ -51,11 +54,14 @@ jobs:
             - name: Checkout code
               uses: actions/checkout@v2
 
+            - name: Install pnpm
+              run: npm i -g pnpm
+
             - name: Install Node dependencies
-              run: npm install
-              
+              run: pnpm install
+
             - name: Install Electron-Builder
-              run: npm install -g electron-builder
+              run: pnpm install -g electron-builder
 
             - name: Build
               run: npm run build && electron-builder --macos
@@ -83,11 +89,14 @@ jobs:
             - name: Checkout code
               uses: actions/checkout@v2
 
+            - name: Install pnpm
+              run: npm i -g pnpm
+
             - name: Install Node dependencies
-              run: npm install
-              
+              run: pnpm install
+
             - name: Install Electron-Builder
-              run: npm install -g electron-builder
+              run: pnpm install -g electron-builder
 
             - name: Build
               run: npm run build && electron-builder --windows

.github/workflows/winget.yml

@@ -7,7 +7,7 @@ jobs:
   publish:
     runs-on: windows-latest # Action can only be run on windows
     steps:
-      - uses: vedantmgoyal2009/winget-releaser@latest
+      - uses: vedantmgoyal2009/winget-releaser@v1
         with:
           identifier: ArmCord.ArmCord
           token: ${{ secrets.WINGET_TOKEN }}

README.md

@@ -64,9 +64,9 @@ ArmCord is also available in [Pi-Apps](https://github.com/Botspot/pi-apps).
 
 
 ### Compiling:
- Alternatively you can run ArmCord from source (NodeJS and npm required):    
+ Alternatively you can run ArmCord from source (NodeJS and pnpm required):    
  1. Clone ArmCord repo: `git clone https://github.com/ArmCord/ArmCord.git`    
- 2. Run `npm install` to install dependencies   
+ 2. Run `pnpm install` to install dependencies   
  3. Build with `npm run build`   
  4. Compile/Package with `npm run package`    
 

assets/lang/fr-FR.json

@@ -32,7 +32,7 @@
     "settings-channel-desc4": "public test build. Receives features earlier than stable but is a bit older than Canary.",
     "settings-altPaste": "Alternative Paste",
     "settings-storageFolder": "Open storage folder",
-    "settings-theme-desc2": "this is how ArmCord looks when you first launch it. It includes recreation of Discord's\n                custom titlebar and ArmCord specific styles injected into Discord.",
+    "settings-theme-desc2": "voilà à quoi ressemble ArmCord quand vous le lancez pour la première fois. Cela inclu une reconstitution de la barre de titre de Discord, ainsi que le style spécifique de ArmCord administré sur Discord",
     "settings-theme-desc3": "uses native titlebar of OS you're currently running (e.g Windows 7/10). Functions more\n                similar to actual Discord app on Linux.",
     "settings-csp-desc": "ArmCord CSP is our system that manages loading custom content loading into the Discord app. Stuff like\n                client mods and themes depend on it. Disable if you want to get rid of mods and custom styles.",
     "settings-tray-desc": "When disabled, ArmCord will close like any other window when closed, otherwise it'll sit back and relax\n                in your system tray for later.",

assets/lang/ko-KR.json

@@ -1,57 +1,57 @@
 {
-    "loading_screen_start": "Starting ArmCord…",
-    "loading_screen_offline": "You appear to be offline. Please connect to the Internet and try again.",
-    "setup_question1_answer1": "Express Setup",
-    "settings-channel-desc4": "public test build. Receives features earlier than stable but is a bit older than Canary.",
-    "settings-mod-desc3": "light, secure, and easy to use, with out of the box experience. Features a built-in\n                store for plugins.",
-    "settings-mod-desc4": "heavily work in progress, doesn't have a working UI.",
-    "settings-prfmMode": "Performance mode is an experimental function that may either increase responsiveness and performance of\n                ArmCord or... decrease it. Please try every option and see which fits you the best.",
-    "setup_question1": "Select what kind of setup you want to perform:",
-    "setup_question1_answer2": "Full Setup",
-    "setup_offline": "You appear to be offline. Please connect to the internet and restart ArmCord.",
-    "loading_screen_update": "A new version of ArmCord is available. Please update to the latest version.",
-    "setup_question2": "Choose your Discord channel/instance:",
-    "setup_question3": "Should ArmCord handle client mods installation?",
-    "yes": "Yes",
-    "no": "No",
-    "next": "Next",
-    "setup_question4": "Select a client mod you want to install:",
-    "setup_question4_clientmodnotice": "Why not all of them? Having many client mods at the same time can cause issues. If you really want to do it though, check our Discord.",
-    "settings-theme": "ArmCord theme",
-    "settings-theme-desc1": "ArmCord \"themes\" manage apps behaviour and looks.",
-    "settings-theme-desc2": "this is how ArmCord looks when you first launch it. It includes recreation of Discord's\n                custom titlebar and ArmCord specific styles injected into Discord.",
-    "settings-theme-desc3": "uses native titlebar of OS you're currently running (e.g Windows 7/10). Functions more\n                similar to actual Discord app on Linux.",
-    "settings-theme-default": "Default",
-    "settings-theme-native": "Native",
-    "settings-csp-desc": "ArmCord CSP is our system that manages loading custom content loading into the Discord app. Stuff like\n                client mods and themes depend on it. Disable if you want to get rid of mods and custom styles.",
-    "settings-tray": "Minimize to tray",
-    "settings-tray-desc": "When disabled, ArmCord will close like any other window when closed, otherwise it'll sit back and relax\n                in your system tray for later.",
-    "settings-patches": "Automatic Patches",
-    "settings-patches-desk": "Fetches automatic patches that are distributed if release turns out to have bugs after release. Usually\n                you don't have to keep this enabled, unless notified in support Discord.",
-    "settings-mobileMode": "Mobile mode",
-    "settings-channel-desc3": "this is alpha test release of Discord. By using it you gain access to the newest\n                    features and fixes.",
-    "settings-channel-desc5": "unofficial instance of Discord that takes you back to 2016! Only client mod\n                    available to run alongside with it is Cordwood. It's run by community, so you take all the risk by\n                    using it.",
-    "settings-invitewebsocket": "Invite Websocket",
-    "settings-mobileMode-desc": "If you're on a device with touch-screen this feature is for you! It activates Discord's hidden mobile\n                mode meant for phones and tablets. Only major feature missing is voice chat support. This is ideal for\n                users on PinePhone and similar.",
-    "settings-channel": "Discord channel",
-    "settings-channel-desc1": "You can use this setting to change current instance of Discord:",
-    "settings-channel-desc2": "you're probably most familiar with this one. It's the one you see in default Discord\n                    client!",
-    "settings-invitewebsocket-desc": "When enabled ArmCord will support Discord.gg links which means that if you open an invite link in your\n                browser, ArmCord will automatically accept the invite. Can be unresponsive at times.",
-    "settings-altPaste": "Alternative Paste",
-    "settings-altPaste-desc": "If you're on Gnome on Linux or just simply can't paste images copied from other messages, then this is\n                for you. This enables alternative module for pasting images. Only enable this when you're experiencing\n                issues.",
-    "settings-mod": "Client mod",
-    "settings-mod-desc1": "Client mods are programs that allow you customize your Discord experience. They can change appearance of\n                the client, modify behaviours or add new features!",
-    "settings-mod-desc2": "focuses on making the Discord plugin development experience easier. Minimal and\n                lightweight.",
-    "settings-prfmMode-performance": "Performance",
-    "settings-prfmMode-battery": "Battery",
-    "settings-trayIcon": "Tray icon",
-    "settings-trayIcon-desc": "Set the icon which will appear in tray menu.",
-    "settings-advanced": "️Advanced user zone",
-    "settings-pluginsFolder": "Open plugins folder",
-    "settings-themesFolder": "Open themes folder",
-    "settings-storageFolder": "Open storage folder",
-    "settings-none": "None",
-    "settings-save": "Save Settings",
-    "settings-restart": "Restart App",
-    "settings-updater": "Check for updates"
+    "loading_screen_start": "ArmCod 시작 중…",
+    "loading_screen_offline": "오프라인 상태인 것 같습니다. 인터넷에 연결하고 다시 시도하세요.",
+    "setup_question1_answer1": "빠른 설정",
+    "settings-channel-desc4": "공개 테스트 빌드입니다. 안정적인 기능보다 먼저 기능을 수신하지만 Canary보다 약간 오래되었습니다.",
+    "settings-mod-desc3": "가볍고 안전하며 사용이 간편하며 즉시 사용할 수 있습니다. 플러그인을 위한 내장\n                저장소가 있습니다.",
+    "settings-mod-desc4": "많은 작업이 진행 중이며 작동하는 UI가 없습니다.",
+    "settings-prfmMode": "성능 모드는 ArmCord의 응답성과 성능을 높이거나 낮출 수 있는\n                실험적인 기능입니다. 모든 옵션을 시도하고 가장 적합한 옵션을 찾으세요.",
+    "setup_question1": "수행할 설정 유형 선택:",
+    "setup_question1_answer2": "전체 설정",
+    "setup_offline": "오프라인 상태인 것 같습니다. 인터넷에 연결하고 ArmCord를 다시 시작하세요.",
+    "loading_screen_update": "ArmCord의 새 버전을 사용할 수 있습니다. 최신 버전으로 업데이트하세요.",
+    "setup_question2": "디스코드 채널/인스턴스를 선택:",
+    "setup_question3": "ArmCord가 클라이언트 모드 설치를 처리해야 하나요?",
+    "yes": "예",
+    "no": "아니오",
+    "next": "다음",
+    "setup_question4": "설치하려는 클라이언트 모드 선택:",
+    "setup_question4_clientmodnotice": "왜 그것들 모두가 아닌 것인가요? 동시에 많은 클라이언트 모드를 사용하면 문제가 발생할 수 있습니다. 그래도 정말로 하고 싶다면 디스코드를 확인하세요.",
+    "settings-theme": "ArmCord 테마",
+    "settings-theme-desc1": "ArmCord \"테마\"는 앱 동작과 모양을 관리합니다.",
+    "settings-theme-desc2": "ArmCord를 처음 실행할 때의 모습입니다. 여기에는 디스코드의 레크리에이션 포함\n                디스코드에 삽입된 사용자 정의 제목 표시줄 및 ArmCord 특정 스타일입니다.",
+    "settings-theme-desc3": "현재 실행 중인 OS의 기본 제목 표시줄을 사용합니다 (예: 윈도우즈 7/10). 더 많은 기능\n                리눅스의 실제 디스코드 앱과 유사합니다.",
+    "settings-theme-default": "기본값",
+    "settings-theme-native": "실제",
+    "settings-csp-desc": "ArmCord CSP는 디스코드 앱에 불러오는 맞춤형 콘텐츠 로드를 관리하는 시스템입니다. 이런\n                클라이언트 모드 및 테마는 이에 따라 다릅니다. 모드 및 사용자 정의 스타일을 제거하려면 비활성화하세요.",
+    "settings-tray": "트레이로 최소화",
+    "settings-tray-desc": "비활성화되면, ArmCord는 닫힐 때 다른 창처럼 닫히고, 그렇지 않으면 편안하게 앉아 휴식을 취하고\n                나중을 위해 시스템 트레이에 저장합니다.",
+    "settings-patches": "자동 패치",
+    "settings-patches-desk": "개정 후에 버그가 있는 것으로 판명되면 배포되는 자동 패치를 가져옵니다. 대개\n                지원 디스코드에서 알림을 받지 않는 한 이 기능을 계속 활성화할 필요는 없습니다.",
+    "settings-mobileMode": "모바일 모드",
+    "settings-channel-desc3": "이것은 디스코드의 알파 테스트 릴리스입니다. 그것을 사용하면 최신 정보\n                    기능 및 수정 사항에 접속할 수 있습니다.",
+    "settings-channel-desc5": "2016년으로 돌아가는 Discord의 비공식 인스턴스입니다! 클라이언트 모드만\n                    함께 실행할 수 있는 것은 Cordwood입니다. 커뮤니티에서 운영하므로 이를 사용함으로써\n                    모든 위험을 감수해야 합니다.",
+    "settings-invitewebsocket": "웹소켓 초대",
+    "settings-mobileMode-desc": "터치 스크린이 있는 장치를 사용하는 경우 이 기능이 적합합니다! 디스코드의 숨겨진 모바일을 활성화하며\n                휴대전화와 태블릿을 위한 모드입니다. 이것은\n                PinePhone 및 이와 유사한 사용자에게 이상적입니다.",
+    "settings-channel": "디스코드 채널",
+    "settings-channel-desc1": "이 설정을 사용하여 디스코드의 현재 인스턴스를 변경할 수 있음:",
+    "settings-channel-desc2": "당신은 아마도 이것을 가장 잘 알고 있을 것입니다. 기본 디스코드 클라이언트에서\n                    볼 수 있는 것입니다!",
+    "settings-invitewebsocket-desc": "활성화되면 ArmCord는 Discord.gg 링크를 지원하므로 초대 링크를\n                브라우저에서 열면, ArmCod는 자동으로 초대를 수락합니다. 때때로 응답하지 않을 수 있습니다.",
+    "settings-altPaste": "대체 붙여넣기",
+    "settings-altPaste-desc": "리눅스의 그놈을 사용 중이거나 단순히 다른 메시지에서 복사한 이미지를 붙여넣을 수 없다면 이것은\n                당신을 위한 것입니다. 문제가 발생한 경우에만 이 기능을\n                활성화하세요.",
+    "settings-mod": "클라이언트 모드",
+    "settings-mod-desc1": "클라이언트 모드는 디스코드 경험을 사용자 지정할 수 있는 프로그램입니다. 클라이언트의 모양을 변경하거나 동작을 수정하거나\n                새로운 기능을 추가할 수 있습니다!",
+    "settings-mod-desc2": "디스코드 플러그인 개발 경험을 더 쉽게 만드는 데 중점을 둡니다. 최소화 및\n                경량화.",
+    "settings-prfmMode-performance": "성능",
+    "settings-prfmMode-battery": "배터리",
+    "settings-trayIcon": "트레이 아이콘",
+    "settings-trayIcon-desc": "트레이 메뉴에 나타날 아이콘을 설정합니다.",
+    "settings-advanced": "고급 사용자 영역",
+    "settings-pluginsFolder": "플러그인 폴더 열기",
+    "settings-themesFolder": "테마 폴더 열기",
+    "settings-storageFolder": "저장소 폴더 열기",
+    "settings-none": "없음",
+    "settings-save": "설정 저장",
+    "settings-restart": "앱 다시 시작",
+    "settings-updater": "업데이트 확인"
 }

assets/lang/ru-RU.json

@@ -18,10 +18,10 @@
     "settings-theme-native": "Нативная",
     "settings-tray": "Свернуть в область уведомлений",
     "settings-patches": "Автоматические патчи",
-    "settings-channel": "Канал Discord:",
+    "settings-channel": "Канал Discord",
     "settings-invitewebsocket": "Пригласить Websocket",
-    "settings-mod": "Клиентский мод:",
-    "settings-prfmMode": "Режим производительности:",
+    "settings-mod": "Клиентский мод",
+    "settings-prfmMode": "Режим производительности - это экспериментальная функция, которая может либо увеличить отзывчивость и производительность\n                ArmCord, либо... снизить их. Пожалуйста, попробуйте все варианты и посмотрите, какой подходит вам больше всего.",
     "settings-prfmMode-performance": "Производительность",
     "settings-prfmMode-battery": "Батарея",
     "settings-none": "Ничего",
@@ -32,26 +32,26 @@
     "settings-tray-desc": "Если отключено, ArmCord будет закрываться как любое другое окно, в противном случае он будет сидеть и отдыхать\n                в системном трее для последующего использования.",
     "settings-patches-desk": "Подбирает автоматические исправления, которые распространяются, если после выпуска релиза обнаруживаются ошибки. Обычно\n                вам не нужно держать эту функцию включенной, если только вас не уведомят об этом в Discord.",
     "settings-channel-desc1": "Вы можете использовать эту настройку для изменения текущего экземпляра Discord:",
-    "settings-pluginsFolder": "Open plugins folder",
-    "settings-themesFolder": "Open themes folder",
-    "settings-storageFolder": "Open storage folder",
+    "settings-pluginsFolder": "Открыть папку плагинов",
+    "settings-themesFolder": "Открыть папку тем",
+    "settings-storageFolder": "Откройте папку хранения",
     "settings-channel-desc2": "вы, вероятно, наиболее знакомы с этой. Именно его вы видите в стандартном клиенте Discord\n                    клиент!",
     "settings-channel-desc3": "это альфа-тестовый выпуск Discord. Используя его, вы получаете доступ к новейшим\n                    функциям и исправлениям.",
-    "settings-theme-desc1": "\"Темы\" ArmCord управляет поведение приложений и внешним видом.",
+    "settings-theme-desc1": "\"Темы\" ArmCord управляют поведением и внешним видом приложений.",
     "settings-theme-desc2": "Вот так выглядит ArmCord при первом запуске. Он включает в себя воссоздание\n                кастомизируемого заголовка Discord и стилей ArmCord, внедрённых в Discord.",
     "settings-theme-desc3": "использует встроенный заголовок окна текущей ОС, которая у вас запущена (например, Windows 7/10). Функционирует как\n                в актуальном приложении Discord на Linux.",
     "settings-mobileMode-desc": "Если вы пользуетесь устройством с сенсорным экраном, эта функция для вас! Она активирует скрытый мобильный\n                режим, предназначенный для телефонов и планшетов. Единственная недостающая функция - поддержка голосового чата. Это идеально подходит для\n                пользователей PinePhone и подобных устройств.",
     "settings-channel-desc4": "публичная тестовая сборка. Получает функции раньше, чем стабильная, но немного старше Canary.",
-    "settings-channel-desc5": "unofficial instance of Discord that takes you back to 2016! None of the client mods\n                    bundled with ArmCord work with it. It's run by community, so you take all the risk by using it.",
-    "settings-invitewebsocket-desc": "When enabled ArmCord will support Discord.gg links which means that if you open an invite link in your\n                browser, ArmCord will automatically accept the invite. Can be unresponsive at times.",
-    "settings-altPaste": "Alternative Paste",
-    "settings-altPaste-desc": "If you're on Gnome on Linux or just simply can't paste images copied from other messages, then this is\n                for you. This enables alternative module for pasting images. Only enable this when you're experiencing\n                issues.",
-    "settings-mod-desc1": "Client mods are programs that allow you customize your Discord experience. They can change appearance of\n                the client, modify behaviours or add new features!",
-    "settings-mod-desc2": "focuses on making the Discord plugin development experience easier. Minimal and\n                lightweight.",
-    "settings-mod-desc3": "light, secure, and easy to use, with out of the box experience. Features a built-in\n                store for plugins.",
-    "settings-mod-desc4": "heavily work in progress, doesn't have a working UI.",
-    "settings-trayIcon": "Tray icon",
-    "settings-trayIcon-desc": "Set the icon which will appear in tray menu.",
-    "settings-advanced": "️Advanced user zone",
-    "settings-restart": "Restart App"
+    "settings-channel-desc5": "Неофициальная версия Discord, которая вернет вас в 2016 год! Единственный клиентский мод\n                    доступный для запуска вместе с ним - это Cordwood. Он управляется сообществом, поэтому вы берете на себя весь риск, используя\n                    используя его.",
+    "settings-invitewebsocket-desc": "Когда эта функция включена, ArmCord будет поддерживать ссылки Discord.gg, что означает, что если вы откроете ссылку приглашения в вашем\n                браузере, ArmCord автоматически примет приглашение. Иногда может не реагировать на приглашения.",
+    "settings-altPaste": "Альтернативная вставка",
+    "settings-altPaste-desc": "Если вы работаете под Gnome в Linux или просто не можете вставить изображения, скопированные из других сообщений, то это для вас\n                для вас. Это включает альтернативный модуль для вставки изображений. Включайте его только в том случае, если у вас возникли\n                проблемы.",
+    "settings-mod-desc1": "Клиентские моды - это программы, которые позволяют вам настроить работу с Discord. Они могут изменять внешний вид\n                клиента, изменять поведение или добавлять новые возможности!",
+    "settings-mod-desc2": "фокусируется на упрощении разработки плагинов для Discord. Минимальный и\n                легкий.",
+    "settings-mod-desc3": "Легкий, надежный и простой в использовании, с опытом работы \"из коробки\". Имеет встроенный\n                магазин для плагинов.",
+    "settings-mod-desc4": "сильно запущен, не имеет рабочего пользовательского интерфейса.",
+    "settings-trayIcon": "Иконка панели задач",
+    "settings-trayIcon-desc": "Установите значок, который будет отображаться в меню трея.",
+    "settings-advanced": "️ Расширенная пользовательская зона",
+    "settings-restart": "Перезапустить приложение"
 }

package.json

@@ -35,9 +35,10 @@
     "electron-builder": "^23.0.3",
     "husky": "^8.0.1",
     "prettier": "^2.7.0",
-    "typescript": "^4.7.3"
+    "typescript": "^4.8.4"
   },
   "dependencies": {
+    "@pyke/vibe": "^0.3.0",
     "electron-context-menu": "github:ArmCord/electron-context-menu",
     "os-locale": "^6.0.2",
     "v8-compile-cache": "^2.3.0",

src/main.ts

@@ -5,7 +5,7 @@ import {getConfig, checkIfConfigExists, injectElectronFlags} from "./utils";
 import "./extensions/mods";
 import "./extensions/plugin";
 import "./tray";
-import {createCustomWindow, createNativeWindow} from "./window";
+import {createCustomWindow, createNativeWindow, createTransparentWindow} from "./window";
 import path from "path";
 export var iconPath: string;
 export var settings: any;
@@ -40,6 +40,9 @@ app.whenReady().then(async () => {
             case "native":
                 createNativeWindow();
                 break;
+            case "transparent":
+                createTransparentWindow();
+                break;
             case "basic":
                 createNativeWindow();
                 break;

src/tray.ts

@@ -20,9 +20,8 @@ app.whenReady().then(async () => {
         }
     };
 
-    if (process.platform == "darwin" && trayPath.getSize().height > 22) 
-        trayPath = trayPath.resize({height: 22});
-    
+    if (process.platform == "darwin" && trayPath.getSize().height > 22) trayPath = trayPath.resize({height: 22});
+
     if ((await getConfig("windowStyle")) == "basic") {
         var clientName = (await getConfig("clientName")) ?? "ArmCord";
         tray = new Tray(trayPath);
@@ -32,13 +31,13 @@ app.whenReady().then(async () => {
                     {
                         label: `Finish the setup first!`,
                         enabled: false
-                    }, {
+                    },
+                    {
                         label: `Quit ${clientName}`,
                         click: async function () {
                             fs.unlink(await getConfigLocation(), (err) => {
-                                if (err) 
-                                    throw err;
-                                
+                                if (err) throw err;
+
                                 console.log('Closed during setup. "settings.json" was deleted');
                                 app.quit();
                             });
@@ -52,7 +51,8 @@ app.whenReady().then(async () => {
                         click: function () {
                             mainWindow.show();
                         }
-                    }, {
+                    },
+                    {
                         label: `Quit ${clientName}`,
                         click: function () {
                             let [width, height] = mainWindow.getSize();
@@ -74,13 +74,13 @@ app.whenReady().then(async () => {
                 {
                     label: `Finish the setup first!`,
                     enabled: false
-                }, {
+                },
+                {
                     label: `Quit ${clientName}`,
                     click: async function () {
                         fs.unlink(await getConfigLocation(), (err) => {
-                            if (err) 
-                                throw err;
-                            
+                            if (err) throw err;
+
                             console.log('Closed during setup. "settings.json" was deleted');
                             app.quit();
                         });
@@ -109,15 +109,18 @@ app.whenReady().then(async () => {
                     click: function () {
                         createSettingsWindow();
                     }
-                }, {
+                },
+                {
                     label: "Support Discord Server",
                     click: function () {
                         mainWindow.show();
                         mainWindow.loadURL("https://discord.gg/TnhxcqynZ2");
                     }
-                }, {
+                },
+                {
                     type: "separator"
-                }, {
+                },
+                {
                     label: `Quit ${clientName}`,
                     click: function () {
                         app.quit();
@@ -126,7 +129,8 @@ app.whenReady().then(async () => {
             ]);
             tray.setContextMenu(contextMenu);
         }
-    } tray.setToolTip(clientName);
+    }
+    tray.setToolTip(clientName);
     tray.on("click", function () {
         mainWindow.show();
     });

src/utils.ts

@@ -1,8 +1,10 @@
 import * as fs from "fs";
 import {app, dialog} from "electron";
 import path from "path";
+import vibe from "@pyke/vibe";
 export var firstRun: boolean;
 export var contentPath: string;
+export var transparency: boolean;
 //utility functions that are used all over the codebase or just too obscure to be put in the file used in
 export function addStyle(styleString: string) {
     const style = document.createElement("style");
@@ -118,6 +120,11 @@ export async function injectElectronFlags() {
         default:
             console.log("No performance modes set");
     }
+    if ((await getConfig("windowStyle")) == "transparent") {
+        console.log("Transparent mode enabled");
+        vibe.setup(app);
+        transparency = true;
+    }
 }
 export async function setLang(language: string) {
     const langConfigFile = path.join(app.getPath("userData"), "/storage/") + "lang.json";

src/window.ts

@@ -4,7 +4,16 @@
 // I'm sorry for this mess but I'm not sure how to fix it.
 import {BrowserWindow, shell, app, dialog, nativeImage} from "electron";
 import path from "path";
-import {checkIfConfigIsBroken, firstRun, getConfig, contentPath, setConfig, setLang, setWindowState} from "./utils";
+import {
+    checkIfConfigIsBroken,
+    firstRun,
+    getConfig,
+    contentPath,
+    setConfig,
+    setLang,
+    setWindowState,
+    transparency
+} from "./utils";
 import {registerIpc} from "./ipc";
 import {setMenu} from "./menu";
 import * as fs from "fs";
@@ -12,6 +21,7 @@ import startServer from "./socket";
 import contextMenu from "electron-context-menu";
 import os from "os";
 import {tray} from "./tray";
+import vibe from "@pyke/vibe";
 import {iconPath} from "./main";
 export let mainWindow: BrowserWindow;
 export let inviteWindow: BrowserWindow;
@@ -41,6 +51,11 @@ contextMenu({
     ]
 });
 async function doAfterDefiningTheWindow() {
+    if (transparency) {
+        vibe.applyEffect(mainWindow, "acrylic");
+        vibe.setDarkMode(mainWindow);
+        mainWindow.show();
+    }
     var ignoreProtocolWarning = await getConfig("ignoreProtocolWarning");
     await checkIfConfigIsBroken();
     registerIpc();
@@ -54,18 +69,18 @@ async function doAfterDefiningTheWindow() {
         }
         mainWindow.webContents.userAgent = `Mozilla/5.0 (X11; ${osType} ${os.arch()}) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36`; //fake useragent for screenshare to work
     }
-    const gotTheLock = app.requestSingleInstanceLock()
+    const gotTheLock = app.requestSingleInstanceLock();
 
     if (!gotTheLock) {
-    app.quit()
+        app.quit();
     } else {
-    app.on('second-instance', (event, commandLine, workingDirectory) => {
-        // i love stack overflow
-        if (mainWindow) {
-        mainWindow.restore()
-        mainWindow.focus()
-        }
-    })
+        app.on("second-instance", (event, commandLine, workingDirectory) => {
+            // i love stack overflow
+            if (mainWindow) {
+                mainWindow.restore();
+                mainWindow.focus();
+            }
+        });
     }
     mainWindow.webContents.setWindowOpenHandler(({url}) => {
         if (url.startsWith("https:" || url.startsWith("http:") || url.startsWith("mailto:"))) {
@@ -252,7 +267,25 @@ export function createNativeWindow() {
     });
     doAfterDefiningTheWindow();
 }
-
+export function createTransparentWindow() {
+    mainWindow = new BrowserWindow({
+        width: 300,
+        height: 350,
+        title: "ArmCord",
+        darkTheme: true,
+        icon: iconPath,
+        frame: true,
+        backgroundColor: "#00000000",
+        show: false,
+        autoHideMenuBar: true,
+        webPreferences: {
+            sandbox: false,
+            preload: path.join(__dirname, "preload/preload.js"),
+            spellcheck: true
+        }
+    });
+    doAfterDefiningTheWindow();
+}
 export function createInviteWindow() {
     inviteWindow = new BrowserWindow({
         width: 800,