fix: use smooth corners

CyanSalt · CyanSalt · commit 0d1a1d910958 · 2025-07-07T15:41:10.000+08:00
diff --git a/addons/addon-manager/src/renderer/AddonManagerPane.vue b/addons/addon-manager/src/renderer/AddonManagerPane.vue
@@ -133,7 +133,7 @@ onMounted(() => {
               </span>
               <SwitchControl
                 :model-value="enabled"
-                @update:model-value="toggle(addon, $event)"
+                @update:model-value="toggle(addon, $event!)"
               />
             </div>
             <div class="addon-description">{{ manifest.description ?? '' }}</div>
@@ -170,6 +170,7 @@ onMounted(() => {
   font-size: 24px;
   background: var(--design-highlight-background);
   border-radius: 8px;
+  -electron-corner-smoothing: 60%;
 }
 .addon-info {
   flex: 1;
diff --git a/addons/camera/src/renderer/RecorderPane.vue b/addons/camera/src/renderer/RecorderPane.vue
@@ -224,6 +224,7 @@ watchEffect((onInvalidate) => {
     color: rgb(var(--system-accent));
     background: currentColor;
     border-radius: 4px;
+    -electron-corner-smoothing: 60%;
   }
   &:disabled::-webkit-slider-thumb {
     filter: grayscale(1);
@@ -232,6 +233,7 @@ watchEffect((onInvalidate) => {
     height: 4px;
     background: var(--design-input-background);
     border-radius: 4px;
+    -electron-corner-smoothing: 60%;
   }
 }
 </style>
diff --git a/addons/explorer/src/renderer/FileExplorer.vue b/addons/explorer/src/renderer/FileExplorer.vue
@@ -331,6 +331,7 @@ function openContextMenu(event: MouseEvent, file?: FileEntity) {
   text-decoration: none;
   border-radius: 4px;
   transition: transform 0.2s;
+  -electron-corner-smoothing: 60%;
   &:hover {
     background: var(--design-highlight-background);
   }
diff --git a/addons/launcher/src/renderer/LauncherList.vue b/addons/launcher/src/renderer/LauncherList.vue
@@ -394,6 +394,7 @@ function openLauncherMenu(launcher: Launcher, tab: TerminalTab | undefined, even
   opacity: 0.5;
   transition: opacity 0.2s, color 0.2s, transform 0.2s;
   cursor: pointer;
+  -electron-corner-smoothing: 60%;
   view-transition-name: launcher-folder;
   &:hover {
     background: var(--design-highlight-background);
@@ -414,6 +415,7 @@ function openLauncherMenu(launcher: Launcher, tab: TerminalTab | undefined, even
     height: var(--min-tab-height);
     line-height: var(--min-tab-height);
     border-radius: 8px;
+    -electron-corner-smoothing: 60%;
     &.is-dropping-active {
       outline: 2px solid rgb(var(--system-accent));
     }
diff --git a/addons/settings/src/renderer/SettingsLine.vue b/addons/settings/src/renderer/SettingsLine.vue
@@ -300,6 +300,7 @@ function pickFont(event: InputEvent) {
   text-transform: uppercase;
   background: rgb(var(--theme-red));
   border-radius: 1em;
+  -electron-corner-smoothing: 60%;
 }
 .item-key {
   flex: none;
diff --git a/addons/theme/src/renderer/ThemeCard.vue b/addons/theme/src/renderer/ThemeCard.vue
@@ -64,6 +64,7 @@ const { theme } = defineProps<{
 
 .theme-card {
   border-radius: 4px;
+  -electron-corner-smoothing: 60%;
 }
 .card-content {
   display: flex;
@@ -73,6 +74,7 @@ const { theme } = defineProps<{
   background: var(--design-highlight-background);
   border-radius: inherit;
   box-shadow: var(--design-element-shadow);
+  -electron-corner-smoothing: 60%;
 }
 .card-header {
   display: flex;
@@ -99,6 +101,7 @@ const { theme } = defineProps<{
   color: transparent;
   background: currentColor;
   border-radius: 2px;
+  -electron-corner-smoothing: 60%;
   @for $i from 1 through 7 {
     .theme-preview > &:nth-child(#{$i}) {
       width: #{math.abs(math.sin($i)) * 100} + '%';
diff --git a/package.json b/package.json
@@ -70,7 +70,7 @@
     "css-font-face-src": "^2.0.0",
     "dotenv": "^17.0.1",
     "dotenv-cli": "^8.0.0",
-    "electron": "^36.7.0",
+    "electron": "^37.2.0",
     "esbuild": "^0.25.5",
     "eslint": "^9.30.1",
     "fuzzaldrin-plus": "^0.6.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/renderer/assets/_partials.scss b/src/renderer/assets/_partials.scss
@@ -23,6 +23,7 @@
   &::-webkit-scrollbar-thumb {
     background-color: rgb(var(--theme-foreground) / var(--scrollbar-opacity));
     border-radius: $size;
+    -electron-corner-smoothing: 60%;
     &:horizontal:active,
     &:vertical:active {
       --scrollbar-opacity: 0.2;
diff --git a/src/renderer/assets/layers.scss b/src/renderer/assets/layers.scss
@@ -18,6 +18,7 @@
     opacity: 0.5;
     transition: opacity 0.2s, color 0.2s, transform 0.2s;
     cursor: pointer;
+    -electron-corner-smoothing: 60%;
     &:hover:not(:disabled),
     &:focus-visible:not(:disabled) {
       background: var(--design-highlight-background);
@@ -80,6 +81,7 @@
     background: var(--design-input-background);
     border-radius: 4px;
     outline: none;
+    -electron-corner-smoothing: 60%;
     &:focus-visible {
       outline: 1px solid rgb(var(--system-accent));
     }
@@ -100,6 +102,7 @@
     background: var(--design-input-background);
     border-radius: 4px;
     outline: none;
+    -electron-corner-smoothing: 60%;
     &::placeholder {
       color: rgb(var(--theme-foreground));
       opacity: 0.25;
@@ -144,6 +147,7 @@
     background: var(--design-input-background);
     border-radius: 4px;
     outline: none;
+    -electron-corner-smoothing: 60%;
     &:has(:focus-visible) {
       outline: 1px solid rgb(var(--system-accent));
     }
diff --git a/src/renderer/components/FindBox.vue b/src/renderer/components/FindBox.vue
@@ -174,6 +174,7 @@ watch($$(isFinding), (value: boolean) => {
   background: rgb(var(--theme-background) / var(--theme-opacity));
   border-radius: var(--design-card-border-radius);
   box-shadow: var(--design-card-shadow);
+  -electron-corner-smoothing: 60%;
 }
 .finder {
   display: flex;
diff --git a/src/renderer/components/TabItem.vue b/src/renderer/components/TabItem.vue
@@ -233,6 +233,7 @@ function close() {
   // https://github.com/react-dnd/react-dnd/issues/788
   transform: translate(0, 0);
   transition: transform 0.2s;
+  -electron-corner-smoothing: 60%;
   &:hover {
     background: var(--design-highlight-background);
   }
@@ -272,6 +273,7 @@ function close() {
   font-size: 12px;
   background: var(--icon-color);
   border-radius: 4px;
+  -electron-corner-smoothing: 60%;
   :deep(.visual-icon) {
     filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 25%));
   }
diff --git a/src/renderer/components/TabList.vue b/src/renderer/components/TabList.vue
@@ -335,6 +335,7 @@ function openTabItemMenu(event: MouseEvent, tab: TerminalTab) {
     flex-direction: column;
     padding: 0;
     border-radius: var(--design-card-border-radius);
+    -electron-corner-smoothing: 60%;
     & > * {
       margin-right: calc(0px - var(--scrollbar-size));
     }
@@ -406,6 +407,7 @@ function openTabItemMenu(event: MouseEvent, tab: TerminalTab) {
   text-align: center;
   border-radius: 8px;
   transition: transform 0.2s;
+  -electron-corner-smoothing: 60%;
   view-transition-name: new-tab;
   .tab-list.horizontal & {
     width: var(--min-tab-height);
diff --git a/src/renderer/components/TabListFindBox.vue b/src/renderer/components/TabListFindBox.vue
@@ -32,6 +32,7 @@ let keyword = $(useTabListFindingKeyword())
   gap: 4px;
   align-items: center;
   border-radius: 8px;
+  -electron-corner-smoothing: 60%;
 }
 .icon {
   opacity: 0.5;
diff --git a/src/renderer/components/TerminalBlock.vue b/src/renderer/components/TerminalBlock.vue
@@ -78,6 +78,7 @@ async function handleDrop(args: DraggableElementEventPayload<DraggableElementDat
   background: rgb(var(--theme-background) / var(--theme-opacity));
   border-radius: var(--design-card-border-radius);
   box-shadow: var(--design-card-shadow);
+  -electron-corner-smoothing: 60%;
   // Both for TerminalTeletype and other teletypes
   :deep(.xterm) {
     padding: 8px;
diff --git a/src/renderer/components/TerminalTeletype.vue b/src/renderer/components/TerminalTeletype.vue
@@ -299,6 +299,7 @@ function scrollToStickyCommand() {
   margin-left: calc(var(--command-mark-padding) - var(--integration-width));
   border-radius: 4px;
   cursor: default;
+  -electron-corner-smoothing: 60%;
   &.is-interactive {
     transition: background 0.2s;
     cursor: pointer;
@@ -340,6 +341,7 @@ function scrollToStickyCommand() {
   box-shadow: 0 0 1em 0 rgb(0 0 0 / 25%);
   // TODO: This may slightly slow down, but is friendlier visually
   transition: transform 50ms, margin-left 50ms;
+  -electron-corner-smoothing: 60%;
   &.is-right {
     transform: translateX(-100%);
   }
@@ -465,6 +467,7 @@ function scrollToStickyCommand() {
   font-size: 4px;
   border-radius: 1em;
   animation: loader-switch 1s infinite linear;
+  -electron-corner-smoothing: 60%;
 }
 .terminal-completion-desc {
   padding: 0 0.375ch;
diff --git a/src/renderer/components/WebContents.vue b/src/renderer/components/WebContents.vue
@@ -49,5 +49,6 @@ watchEffect(() => {
 <style lang="scss" scoped>
 .web-contents {
   border-radius: var(--design-card-border-radius);
+  -electron-corner-smoothing: 60%;
 }
 </style>
diff --git a/src/renderer/components/WindowControl.vue b/src/renderer/components/WindowControl.vue
@@ -69,6 +69,7 @@ function close() {
   border-radius: 8px;
   transition: background 0.2s, color 0.2s;
   cursor: pointer;
+  -electron-corner-smoothing: 60%;
   -webkit-app-region: no-drag;
   &:hover {
     background: var(--design-active-background);
diff --git a/src/renderer/components/basic/DropIndicator.vue b/src/renderer/components/basic/DropIndicator.vue
@@ -25,6 +25,7 @@ const { vertical } = defineProps<{
     border: 2px solid rgb(var(--system-accent));
     background: rgb(var(--theme-background));
     border-radius: 6px;
+    -electron-corner-smoothing: 60%;
   }
   &.vertical::before {
     top: -2px;
diff --git a/src/renderer/components/basic/OrderedCheckbox.vue b/src/renderer/components/basic/OrderedCheckbox.vue
@@ -46,6 +46,7 @@ const checked = $computed({
   background: white;
   border-radius: 3px;
   cursor: pointer;
+  -electron-corner-smoothing: 60%;
   &:hover {
     border-color: rgb(59 59 59);
   }
@@ -58,6 +59,7 @@ const checked = $computed({
       inset: 0;
       background: rgb(0 0 0 / 25%);
       border-radius: inherit;
+      -electron-corner-smoothing: 60%;
     }
   }
 }
diff --git a/src/renderer/compositions/terminal.ts b/src/renderer/compositions/terminal.ts
@@ -516,7 +516,6 @@ export function showTabOptions(event?: MouseEvent, type?: string) {
         if (item.tab && toRaw(item.tab) === toRaw(currentTerminal)) {
           defaultIndex = options.length
         }
-        console.log('enabled', enabledItems.includes(item))
         options.push({
           type: index ? 'checkbox' : 'normal',
           label: item.tab ? getTerminalTabTitle(item.tab) : item.character?.title,

Original file line number	Diff line number	Diff line change
`@@ -224,6 +224,7 @@ watchEffect((onInvalidate) => {`
`224`	`224`	`color: rgb(var(--system-accent));`
`225`	`225`	`background: currentColor;`
`226`	`226`	`border-radius: 4px;`
	`227`	`+ -electron-corner-smoothing: 60%;`
`227`	`228`	`}`
`228`	`229`	`&:disabled::-webkit-slider-thumb {`
`229`	`230`	`filter: grayscale(1);`
`@@ -232,6 +233,7 @@ watchEffect((onInvalidate) => {`
`232`	`233`	`height: 4px;`
`233`	`234`	`background: var(--design-input-background);`
`234`	`235`	`border-radius: 4px;`
	`236`	`+ -electron-corner-smoothing: 60%;`
`235`	`237`	`}`
`236`	`238`	`}`
`237`	`239`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -331,6 +331,7 @@ function openContextMenu(event: MouseEvent, file?: FileEntity) {`
`331`	`331`	`text-decoration: none;`
`332`	`332`	`border-radius: 4px;`
`333`	`333`	`transition: transform 0.2s;`
	`334`	`+ -electron-corner-smoothing: 60%;`
`334`	`335`	`&:hover {`
`335`	`336`	`background: var(--design-highlight-background);`
`336`	`337`	`}`
Original file line number	Diff line number	Diff line change
`@@ -300,6 +300,7 @@ function pickFont(event: InputEvent) {`
`300`	`300`	`text-transform: uppercase;`
`301`	`301`	`background: rgb(var(--theme-red));`
`302`	`302`	`border-radius: 1em;`
	`303`	`+ -electron-corner-smoothing: 60%;`
`303`	`304`	`}`
`304`	`305`	`.item-key {`
`305`	`306`	`flex: none;`