fix: window titlebar position, fixed #197

Signed-off-by: Innei <i@innei.in>

src/preload/index.d.ts

@@ -4,5 +4,6 @@ declare global {
   interface Window {
     electron?: ElectronAPI
     api: unknown
+    platform: NodeJS.Platform
   }
 }

src/preload/index.ts

@@ -11,6 +11,7 @@ if (process.contextIsolated) {
   try {
     contextBridge.exposeInMainWorld("electron", electronAPI)
     contextBridge.exposeInMainWorld("api", api)
+    contextBridge.exposeInMainWorld("platform", process.platform)
   } catch (error) {
     console.error(error)
   }
@@ -19,4 +20,6 @@ if (process.contextIsolated) {
   window.electron = electronAPI
   // @ts-ignore (define in dts)
   window.api = api
+  // @ts-ignore (define in dts)
+  window.platform = process.platform
 }

src/renderer/src/lib/utils.ts

@@ -40,6 +40,20 @@ export function getEntriesParams({
 
 export type OS = "macOS" | "iOS" | "Windows" | "Android" | "Linux" | ""
 export const getOS = memoize((): OS => {
+  if (window.platform) {
+    switch (window.platform) {
+      case "darwin": {
+        return "macOS"
+      }
+      case "win32": {
+        return "Windows"
+      }
+      case "linux": {
+        return "Linux"
+      }
+    }
+  }
+
   const { userAgent } = window.navigator,
     { platform } = window.navigator,
     macosPlatforms = ["Macintosh", "MacIntel", "MacPPC", "Mac68K"],

src/renderer/src/main.tsx

@@ -20,7 +20,6 @@ const $container = document.querySelector("#root") as HTMLElement
 if (window.electron && getOS() === "Windows") {
   $container.style.borderRadius = `${ELECTRON_WINDOWS_RADIUS}px`
   $container.style.overflow = "hidden"
-  $container.style.paddingTop = `${ElECTRON_CUSTOM_TITLEBAR_HEIGHT}px`
   $container.style.background = "var(--fo-background)"
 
   document.body.style.cssText += `--fo-window-padding-top: ${ElECTRON_CUSTOM_TITLEBAR_HEIGHT}px; --fo-window-radius: ${ELECTRON_WINDOWS_RADIUS}px;`

src/renderer/src/modules/app/Titlebar.tsx

@@ -10,7 +10,7 @@ export const Titlebar = () => {
 
   return (
     <div
-      className="flex w-full items-center justify-end overflow-hidden"
+      className="drag-region flex w-full items-center justify-end overflow-hidden"
       style={{
         height:
           `${ElECTRON_CUSTOM_TITLEBAR_HEIGHT}px`,
@@ -19,7 +19,7 @@ export const Titlebar = () => {
       }}
     >
       <button
-        className="no-drag-region pointer-events-auto flex h-full w-[40px] items-center justify-center duration-200 hover:bg-theme-item-active"
+        className="no-drag-region pointer-events-auto flex h-full w-[50px] items-center justify-center duration-200 hover:bg-theme-item-active"
         type="button"
         onClick={() => {
           tipcClient?.windowAction({ action: "minimize" })
@@ -30,7 +30,7 @@ export const Titlebar = () => {
 
       <button
         type="button"
-        className="no-drag-region pointer-events-auto flex h-full w-[40px] items-center justify-center duration-200 hover:bg-theme-item-active"
+        className="no-drag-region pointer-events-auto flex h-full w-[50px] items-center justify-center duration-200 hover:bg-theme-item-active"
         onClick={async () => {
           await tipcClient?.windowAction({ action: "maximum" })
           refetch()
@@ -41,7 +41,7 @@ export const Titlebar = () => {
 
       <button
         type="button"
-        className="no-drag-region pointer-events-auto flex h-full w-[40px] items-center justify-center duration-200 hover:bg-red-500 hover:!text-white"
+        className="no-drag-region pointer-events-auto flex h-full w-[50px] items-center justify-center duration-200 hover:bg-red-500 hover:!text-white"
         onClick={() => {
           tipcClient?.windowAction({ action: "close" })
         }}

src/renderer/src/modules/entry-content/index.tsx

@@ -140,7 +140,7 @@ function EntryContentRender({ entryId }: { entryId: string }) {
       <EntryHeader
         entryId={entry.entries.id}
         view={0}
-        className="h-[55px] shrink-0 px-5"
+        className="h-[55px] shrink-0 px-3"
       />
 
       <ScrollArea.ScrollArea

src/renderer/src/pages/(main)/layout.tsx

@@ -55,7 +55,8 @@ export function Component() {
       </FeedResponsiveResizerContainer>
       <main
         ref={setMainContainerElement}
-        className="flex min-w-0 flex-1 bg-theme-background !outline-none"
+
+        className="flex min-w-0 flex-1 bg-theme-background pt-[calc(var(--fo-window-padding-top)_-10px)] !outline-none"
         // NOTE: tabIndex for main element can get by `document.activeElement`
         tabIndex={-1}
       >