feat(ui): add cross-platform content offset and macOS drag region (#693)

Author: antonreshetov

src/renderer/App.vue

@@ -4,6 +4,7 @@ import { useApp, useTheme } from '@/composables'
 import { i18n, ipc } from '@/electron'
 import { RouterName } from '@/router'
 import { isSpaceRouteName } from '@/spaceDefinitions'
+import { isMac } from '@/utils'
 import { LoaderCircle } from 'lucide-vue-next'
 import { loadWASM } from 'onigasm'
 import onigasmFile from 'onigasm/lib/onigasm.wasm?url'
@@ -64,8 +65,9 @@ init()
 <template>
   <Tooltip.TooltipProvider>
     <div
+      v-if="isMac"
       data-title-bar
-      class="absolute top-0 z-50 h-[var(--title-bar-height)] w-full select-none"
+      class="absolute top-0 z-50 h-3 w-full select-none"
     />
     <RouterView v-slot="{ Component, route: currentRoute }">
       <AppSpaceShell v-if="isSpaceRouteName(currentRoute.name)">

src/renderer/components/app-space-shell/AppSpaceShell.vue

@@ -1,6 +1,13 @@
+<script setup lang="ts">
+import { isMac } from '@/utils'
+</script>
+
 <template>
   <div class="grid h-screen grid-cols-[72px_1fr] overflow-hidden">
-    <div class="bg-background border-border/70 mt-2 border-r">
+    <div
+      class="bg-background border-border/70 border-r"
+      :class="isMac && 'mt-2.5'"
+    >
       <SpaceRail />
     </div>
     <div class="min-h-0 min-w-0 overflow-hidden">

src/renderer/components/editor/Editor.vue

@@ -463,7 +463,7 @@ onMounted(() => {
 <template>
   <div
     data-editor
-    class="grid h-full grid-rows-[auto_1fr_auto] overflow-hidden pt-[var(--title-bar-height)]"
+    class="grid h-full grid-rows-[auto_1fr_auto] overflow-hidden pt-[var(--content-top-offset)]"
   >
     <EditorHeader v-if="isShowHeader" />
     <Resizable.ResizablePanelGroup

src/renderer/components/layout/TwoColumn.vue

@@ -30,7 +30,7 @@ const gridTemplateColumns = computed(() => {
 
 const leftHeaderStyle = computed(() => {
   return {
-    paddingTop: `calc(var(--title-bar-height) + ${props.topSpace}px)`,
+    paddingTop: `calc(var(--content-top-offset) + ${props.topSpace}px)`,
   }
 })
 </script>
@@ -62,7 +62,7 @@ const leftHeaderStyle = computed(() => {
       </div>
     </div>
     <div class="bg-border" />
-    <div class="h-full min-h-0 overflow-auto pt-[var(--title-bar-height)]">
+    <div class="h-full min-h-0 overflow-auto pt-[var(--content-top-offset)]">
       <slot name="right" />
     </div>
   </div>

src/renderer/components/sidebar/Sidebar.vue

@@ -5,7 +5,7 @@ import { i18n } from '@/electron'
 <template>
   <div
     data-sidebar
-    class="flex h-full flex-col px-1 pt-[var(--title-bar-height)]"
+    class="flex h-full flex-col px-1 pt-[var(--content-top-offset)]"
   >
     <UiText
       as="div"

src/renderer/components/snippet/Header.vue

@@ -51,7 +51,7 @@ function onKeydown(event: KeyboardEvent) {
 </script>
 
 <template>
-  <div class="border-border mt-[var(--title-bar-height)] mb-2 border-b pb-1">
+  <div class="border-border mt-[var(--content-top-offset)] mb-2 border-b pb-1">
     <div class="flex items-center px-1">
       <Search class="text-muted-foreground ml-1 h-4 w-4" />
       <div class="flex-grow">

src/renderer/components/space-rail/SpaceRail.vue

@@ -4,6 +4,7 @@ import { useApp, useTheme } from '@/composables'
 import { i18n, ipc } from '@/electron'
 import { RouterName } from '@/router'
 import { getSpaceDefinitions } from '@/spaceDefinitions'
+import { isMac } from '@/utils'
 import { Settings } from 'lucide-vue-next'
 import { RouterLink, useRoute } from 'vue-router'
 import packageJson from '../../../../package.json'
@@ -26,7 +27,8 @@ const spaces = computed(() => {
 
 <template>
   <nav
-    class="flex h-full flex-col items-center px-2 pt-[calc(var(--title-bar-height)+8px)] pb-3"
+    class="flex h-full flex-col items-center px-2 pb-3"
+    :class="isMac ? 'pt-[calc(var(--content-top-offset)+8px)]' : 'pt-3'"
     :aria-label="i18n.t('spaces.label')"
   >
     <div class="flex w-full flex-col gap-1">

src/renderer/styles.css

@@ -4,7 +4,7 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --title-bar-height: 10px;
+  --content-top-offset: 8px;
   --editor-tool-header-height: 28px;
   --radius: 0.625rem;
 

src/renderer/utils/index.ts

@@ -1,6 +1,8 @@
 import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
+export const isMac = navigator.userAgent.toLowerCase().includes('mac')
+
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }

src/renderer/views/Preferences.vue

@@ -3,10 +3,10 @@ import type { Component } from 'vue'
 import { preferencesKeys } from '@/components/preferences/keys'
 import { i18n } from '@/electron'
 import { router, RouterName } from '@/router'
+import { isMac } from '@/utils'
 import { Code, Globe, HardDrive, Palette, Plug } from 'lucide-vue-next'
 import { RouterLink, useRoute } from 'vue-router'
 
-const isMac = navigator.userAgent.toLowerCase().includes('mac')
 const route = useRoute()
 
 const scrollRef = useTemplateRef<HTMLElement>('scrollRef')
@@ -51,7 +51,7 @@ provide(preferencesKeys, {
 <template>
   <LayoutTwoColumn
     :title="i18n.t('preferences:label')"
-    :top-space="isMac ? 16 : 0"
+    :top-space="isMac ? 16 : 6"
     @back="() => router.push({ name: RouterName.main })"
   >
     <template #left>