feat(iterm2): support badge

CyanSalt · Mar 9, 2022 · b21e1c6 · b21e1c6
1 parent b52a6db
commit b21e1c6
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 10 deletions.
diff --git a/addons/iterm2/src/renderer/firework-slot.vue → addons/iterm2/src/renderer/badge-slot.vue b/addons/iterm2/src/renderer/firework-slot.vue → addons/iterm2/src/renderer/badge-slot.vue
@@ -1,12 +1,14 @@
 <script lang="ts" setup>
+import { removeFirework, useBadge, useFireworks } from './badge'
 import FireworkOverlay from './firework-overlay.vue'
-import { removeFirework, useFireworks } from './fireworks'
 
+const badge = useBadge()
 const fireworks = useFireworks()
 </script>
 
 <template>
-  <div class="firework-slot">
+  <div class="badge-slot">
+    <div v-if="badge" class="badge">{{ badge }}</div>
     <FireworkOverlay
       v-for="item in fireworks"
       :key="item.id"
@@ -17,8 +19,17 @@ const fireworks = useFireworks()
 </template>
 
 <style lang="scss" scoped>
-.firework-slot {
+.badge-slot {
   position: fixed;
   pointer-events: none;
 }
+.badge {
+  position: fixed;
+  top: 76px;
+  right: 8px;
+  color: rgb(var(--theme-red) / 0.5);
+  font-weight: bold;
+  font-size: 48px;
+  -webkit-text-stroke: 1px rgb(var(--theme-background));
+}
 </style>
diff --git a/addons/iterm2/src/renderer/fireworks.ts → addons/iterm2/src/renderer/badge.ts b/addons/iterm2/src/renderer/fireworks.ts → addons/iterm2/src/renderer/badge.ts
@@ -16,6 +16,12 @@ export function useFireworks() {
   return $$(fireworks)
 }
 
+const badge = $ref('')
+
+export function useBadge() {
+  return $$(badge)
+}
+
 export function addFirework(position: Firework['position']) {
   fireworks.push({
     position,

diff --git a/addons/iterm2/src/renderer/index.ts b/addons/iterm2/src/renderer/index.ts
@@ -1,14 +1,14 @@
 import * as path from 'path'
 import * as commas from 'commas:api/renderer'
-import FireworkSlot from './firework-slot.vue'
+import BadgeSlot from './badge-slot.vue'
 import { ITerm2Addon } from './xterm'
 import './style.scss'
 
 commas.ui.addCSSFile(path.join(__dirname, '../../dist/renderer/style.css'))
 
 commas.workspace.registerXtermAddon('iterm2', tab => new ITerm2Addon(tab), true)
 
-commas.context.provide('@ui-slot', FireworkSlot)
+commas.context.provide('@ui-slot', BadgeSlot)
 
 const currentTerminal = $(commas.workspace.useCurrentTerminal())
 

diff --git a/addons/iterm2/src/renderer/style.scss b/addons/iterm2/src/renderer/style.scss
@@ -4,7 +4,7 @@
   margin-left: calc(0px - var(--width) * 5 / 6);
   border-top: calc(var(--height) / 3) solid transparent;
   border-bottom: calc(var(--height) / 3) solid transparent;
-  border-left: calc(var(--width) * 2 / 3) solid rgb(var(--design-blue));
+  border-left: calc(var(--width) * 2 / 3) solid rgb(var(--theme-blue));
 }
 @keyframes fade-out {
   from {
@@ -15,10 +15,10 @@
   }
 }
 .terminal-mark-highlight-line {
-  background: rgb(var(--design-magenta) / 0.5);
+  background: rgb(var(--theme-magenta) / 0.5);
   animation: fade-out 1s;
 }
 .terminal-cursor-highlight-line {
-  border: 1px solid rgb(var(--design-blue));
-  background: rgb(var(--design-blue) / 0.5);
+  border: 1px solid rgb(var(--theme-blue));
+  background: rgb(var(--theme-blue) / 0.5);
 }
diff --git a/addons/iterm2/src/renderer/xterm.ts b/addons/iterm2/src/renderer/xterm.ts
@@ -4,7 +4,7 @@ import { findLast } from 'lodash-es'
 import { nextTick } from 'vue'
 import type { IDisposable, IMarker, ITerminalAddon, Terminal } from 'xterm'
 import type { TerminalTab, XtermBufferPosition, XtermLink } from '../../../../typings/terminal'
-import { addFirework } from './fireworks'
+import { addFirework, useBadge } from './badge'
 import { calculateDOM, loadingElement, parseITerm2EscapeSequence } from './utils'
 
 export class ITerm2Addon implements ITerminalAddon {
@@ -23,6 +23,7 @@ export class ITerm2Addon implements ITerminalAddon {
 
   activate(xterm: Terminal) {
     const settings = $(commas.remote.useSettings())
+    let badge = $(useBadge())
     // iTerm2 escape codes
     this.disposables.push(
       xterm.parser.registerOscHandler(1337, async data => {
@@ -151,6 +152,12 @@ export class ITerm2Addon implements ITerminalAddon {
             decoration.onRender(() => {
               decoration.element!.style.background = `url('${url}') no-repeat center/${sequence.args.preserveAspectRatio === '0' ? '100%' : 'contain'}`
             })
+            break
+          }
+          case 'SetBadgeFormat': {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            badge = Buffer.from(sequence.positional, 'base64').toString()
+            break
           }
         }
         return true