fix: macOS compatibility - title bar padding, cross-platform vault paths, version display

- Add left padding on macOS for window buttons in title bar
- Use dynamic version from package.json in Settings About page
- Cross-platform vault paths (~/Documents/BluePDM on macOS, C:\BluePDM on Windows)
- Expand ~ to home directory in Electron main process
- Fix path separators for rename operations on macOS
- Add Supabase secrets to GitHub Actions workflow

Author: eldinmiller

electron/main.ts

@@ -506,13 +506,20 @@ ipcMain.handle('working-dir:set', async (_, newPath: string) => {
 
 ipcMain.handle('working-dir:create', async (_, newPath: string) => {
   try {
+    // Expand ~ to home directory on macOS/Linux
+    let expandedPath = newPath
+    if (newPath.startsWith('~')) {
+      const homedir = require('os').homedir()
+      expandedPath = newPath.replace(/^~/, homedir)
+    }
+    
     // Create the directory if it doesn't exist
-    if (!fs.existsSync(newPath)) {
-      fs.mkdirSync(newPath, { recursive: true })
-      log('Created working directory:', newPath)
+    if (!fs.existsSync(expandedPath)) {
+      fs.mkdirSync(expandedPath, { recursive: true })
+      log('Created working directory:', expandedPath)
     }
-    workingDirectory = newPath
-    startFileWatcher(newPath)
+    workingDirectory = expandedPath
+    startFileWatcher(expandedPath)
     return { success: true, path: workingDirectory }
   } catch (err) {
     log('Error creating working directory:', err)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "blue-pdm",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "Product Data Management for engineering teams",
   "main": "dist-electron/main.js",
   "scripts": {

src/components/MenuBar.tsx

@@ -17,6 +17,7 @@ export function MenuBar({ minimal = false }: MenuBarProps) {
   const [showUserMenu, setShowUserMenu] = useState(false)
   const [showSettings, setShowSettings] = useState(false)
   const [titleBarPadding, setTitleBarPadding] = useState(140) // Default fallback
+  const [platform, setPlatform] = useState<string>('win32') // Default to Windows
   const [localSearch, setLocalSearch] = useState(searchQuery || '')
   const menuRef = useRef<HTMLDivElement>(null)
   const searchInputRef = useRef<HTMLInputElement>(null)
@@ -37,6 +38,7 @@ export function MenuBar({ minimal = false }: MenuBarProps) {
   useEffect(() => {
     if (window.electronAPI) {
       window.electronAPI.getVersion().then(setAppVersion)
+      window.electronAPI.getPlatform().then(setPlatform)
       // Get the actual titlebar overlay rect
       window.electronAPI.getTitleBarOverlayRect?.().then((rect) => {
         if (rect?.width) {
@@ -79,8 +81,11 @@ export function MenuBar({ minimal = false }: MenuBarProps) {
 
   return (
     <div className="h-[38px] bg-pdm-activitybar border-b border-pdm-border select-none flex-shrink-0 titlebar-drag-region relative">
-      {/* Left side - App name */}
-      <div className="absolute left-0 top-0 h-full flex items-center">
+      {/* Left side - App name (add padding on macOS for window buttons) */}
+      <div 
+        className="absolute left-0 top-0 h-full flex items-center"
+        style={{ paddingLeft: platform === 'darwin' ? 72 : 0 }}
+      >
         <div className="flex items-center gap-2 px-4 titlebar-no-drag">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="text-pdm-accent">
             <path 
@@ -190,10 +195,10 @@ export function MenuBar({ minimal = false }: MenuBarProps) {
         )}
       </div>
 
-      {/* Right side - Settings and User (with padding for window controls) */}
+      {/* Right side - Settings and User (with padding for window controls on Windows) */}
       <div 
         className="absolute right-0 top-0 h-full flex items-center gap-2 pl-4 titlebar-no-drag"
-        style={{ paddingRight: titleBarPadding }}
+        style={{ paddingRight: platform === 'darwin' ? 16 : titleBarPadding }}
       >
         {/* Settings gear - hidden on welcome/signin screens */}
         {!minimal && (

src/components/SettingsModal.tsx

@@ -29,6 +29,19 @@ import {
 import { usePDMStore, ConnectedVault } from '../stores/pdmStore'
 import { supabase, signOut } from '../lib/supabase'
 
+// Build vault path based on platform
+function buildVaultPath(platform: string, vaultSlug: string): string {
+  if (platform === 'darwin') {
+    // macOS: ~/Documents/BluePDM/vault-name
+    return `~/Documents/BluePDM/${vaultSlug}`
+  } else if (platform === 'linux') {
+    return `~/BluePDM/${vaultSlug}`
+  } else {
+    // Windows: C:\BluePDM\vault-name
+    return `C:\\BluePDM\\${vaultSlug}`
+  }
+}
+
 type SettingsTab = 'account' | 'vault' | 'organization' | 'preferences' | 'about'
 
 interface OrgUser {
@@ -96,6 +109,16 @@ export function SettingsModal({ onClose }: SettingsModalProps) {
   const [isDeleting, setIsDeleting] = useState(false)
   const [disconnectingVault, setDisconnectingVault] = useState<{ id: string; name: string } | null>(null)
   const [isDisconnecting, setIsDisconnecting] = useState(false)
+  const [appVersion, setAppVersion] = useState('')
+  const [platform, setPlatform] = useState<string>('win32')
+  
+  // Get app version and platform
+  useEffect(() => {
+    if (window.electronAPI) {
+      window.electronAPI.getVersion().then(setAppVersion)
+      window.electronAPI.getPlatform().then(setPlatform)
+    }
+  }, [])
 
   // Load org users and vaults when organization tab is selected
   useEffect(() => {
@@ -254,9 +277,11 @@ export function SettingsModal({ onClose }: SettingsModalProps) {
         // Rename the local folder too
         const api = (window as any).electronAPI
         if (api && connectedVault.localPath) {
+          // Use the same path separator as the original path
+          const pathSep = connectedVault.localPath.includes('/') ? '/' : '\\'
           const pathParts = connectedVault.localPath.split(/[/\\]/)
           pathParts[pathParts.length - 1] = newName.replace(/[<>:"/\\|?*]/g, '-')
-          const newPath = pathParts.join('\\')
+          const newPath = pathParts.join(pathSep)
 
           if (newPath !== connectedVault.localPath) {
             const result = await api.renameItem(connectedVault.localPath, newPath)
@@ -382,8 +407,8 @@ export function SettingsModal({ onClose }: SettingsModalProps) {
         return
       }
 
-      // Create vault folder in C:\BluePDM\ to avoid conflicts with other software
-      const localPath = `C:\\BluePDM\\${vault.slug}`
+      // Create vault folder based on platform
+      const localPath = buildVaultPath(platform, vault.slug)
       const result = await api.createWorkingDir(localPath)
 
       if (result.success && result.path) {
@@ -1047,9 +1072,11 @@ export function SettingsModal({ onClose }: SettingsModalProps) {
                   <p className="text-pdm-fg-dim mb-2">
                     Open source Product Data Management for engineering teams
                   </p>
-                  <p className="text-sm text-pdm-fg-muted">
-                    Version 0.7.1
-                  </p>
+                  {appVersion && (
+                    <p className="text-sm text-pdm-fg-muted">
+                      Version {appVersion}
+                    </p>
+                  )}
                 </div>
 
                 {/* Links */}

src/components/WelcomeScreen.tsx

@@ -3,6 +3,19 @@ import { FolderPlus, Loader2, HardDrive, WifiOff, LogIn, Check, Settings, Databa
 import { usePDMStore, ConnectedVault } from '../stores/pdmStore'
 import { signInWithGoogle, isSupabaseConfigured, supabase } from '../lib/supabase'
 
+// Build vault path based on platform
+function buildVaultPath(platform: string, vaultSlug: string): string {
+  if (platform === 'darwin') {
+    // macOS: ~/Documents/BluePDM/vault-name
+    return `~/Documents/BluePDM/${vaultSlug}`
+  } else if (platform === 'linux') {
+    return `~/BluePDM/${vaultSlug}`
+  } else {
+    // Windows: C:\BluePDM\vault-name
+    return `C:\\BluePDM\\${vaultSlug}`
+  }
+}
+
 interface VaultStats {
   fileCount: number
   totalSize: number
@@ -51,6 +64,14 @@ export function WelcomeScreen({ onOpenVault, onOpenRecentVault }: WelcomeScreenP
   const [orgVaults, setOrgVaults] = useState<Vault[]>([])
   const [isLoadingVaults, setIsLoadingVaults] = useState(false)
   const [connectingVaultId, setConnectingVaultId] = useState<string | null>(null)
+  const [platform, setPlatform] = useState<string>('win32')
+
+  // Get platform on mount
+  useEffect(() => {
+    if (window.electronAPI) {
+      window.electronAPI.getPlatform().then(setPlatform)
+    }
+  }, [])
 
   // Auto-connect on mount if we have connected vaults
   useEffect(() => {
@@ -140,8 +161,8 @@ export function WelcomeScreen({ onOpenVault, onOpenRecentVault }: WelcomeScreenP
     setConnectingVaultId(vault.id)
 
     try {
-      // Create vault folder in C:\BluePDM\ to avoid conflicts with other software
-      const vaultPath = `C:\\BluePDM\\${vault.slug}`
+      // Create vault folder based on platform
+      const vaultPath = buildVaultPath(platform, vault.slug)
       const result = await window.electronAPI.createWorkingDir(vaultPath)
 
       if (result.success && result.path) {
@@ -179,9 +200,9 @@ export function WelcomeScreen({ onOpenVault, onOpenRecentVault }: WelcomeScreenP
       if (recentVaults.length > 0) {
         vaultPath = recentVaults[0]
       } else if (organization) {
-        vaultPath = `C:\\BluePDM\\${organization.slug}`
+        vaultPath = buildVaultPath(platform, organization.slug)
       } else {
-        vaultPath = `C:\\BluePDM\\local-vault`
+        vaultPath = buildVaultPath(platform, 'local-vault')
       }
 
       const result = await window.electronAPI.createWorkingDir(vaultPath)
@@ -473,7 +494,7 @@ export function WelcomeScreen({ onOpenVault, onOpenRecentVault }: WelcomeScreenP
                   Local Vault
                 </h2>
                 <p className="text-xs text-pdm-fg-muted truncate">
-                  {recentVaults[0] || 'C:\\pdm-vault'}
+                  {recentVaults[0] || buildVaultPath(platform, 'local-vault')}
                 </p>
               </div>
             </div>

src/components/sidebar/ExplorerView.tsx

@@ -211,10 +211,11 @@ export function ExplorerView({ onOpenVault, onOpenRecentVault, onRefresh }: Expl
       return
     }
 
-    // Build new path
+    // Build new path (use the same path separator as the original)
+    const pathSep = oldPath.includes('/') ? '/' : '\\'
     const pathParts = oldPath.split(/[/\\]/)
     pathParts[pathParts.length - 1] = newName
-    const newPath = pathParts.join('\\')
+    const newPath = pathParts.join(pathSep)
 
     const result = await window.electronAPI?.moveFile(oldPath, newPath)
     if (result?.success) {