@phenx-inc/ctlsurf 0.3.3 → 0.3.5

package/src/renderer/components/StatusBar.tsx

@@ -1,12 +1,20 @@
 import { useState } from 'react'
 
+interface UpdateInfo {
+  current: string
+  latest: string | null
+  hasUpdate: boolean
+  checkedAt: number | null
+}
+
 interface StatusBarProps {
   wsStatus: string
   cwd: string | null
   onChangeCwd: () => void
+  updateInfo: UpdateInfo | null
 }
 
-export function StatusBar({ wsStatus, cwd, onChangeCwd }: StatusBarProps) {
+export function StatusBar({ wsStatus, cwd, onChangeCwd, updateInfo }: StatusBarProps) {
   const [creating, setCreating] = useState(false)
 
   const wsLabel = {
@@ -44,6 +52,9 @@ export function StatusBar({ wsStatus, cwd, onChangeCwd }: StatusBarProps) {
   const home = '/Users/' + (cwd?.split('/')[2] || '')
   const displayPath = cwd?.replace(home, '~') || ''
 
+  const versionLabel = updateInfo?.current ? `v${updateInfo.current}` : ''
+  const hasUpdate = !!updateInfo?.hasUpdate && !!updateInfo.latest
+
   return (
     <div className="statusbar">
       <div className="statusbar-section">
@@ -67,6 +78,20 @@ export function StatusBar({ wsStatus, cwd, onChangeCwd }: StatusBarProps) {
         ) : (
           <span>ctlsurf: {wsLabel}</span>
         )}
+        {versionLabel && (
+          <span
+            className={`statusbar-version${hasUpdate ? ' has-update' : ''}`}
+            title={
+              hasUpdate
+                ? `Update available: ${updateInfo!.latest}\nRun: npm i -g @phenx-inc/ctlsurf`
+                : '@phenx-inc/ctlsurf'
+            }
+          >
+            {hasUpdate
+              ? `${versionLabel} → ${updateInfo!.latest} available`
+              : versionLabel}
+          </span>
+        )}
       </div>
     </div>
   )

package/src/renderer/styles.css

@@ -518,6 +518,19 @@ html, body, #root {
 .status-dot.idle { background: #565f89; }
 .status-dot.pending { background: #e0af68; }
 
+.statusbar-version {
+  margin-left: 12px;
+  color: #565f89;
+  font-size: 11px;
+  white-space: nowrap;
+  cursor: help;
+}
+
+.statusbar-version.has-update {
+  color: #e0af68;
+  font-weight: 500;
+}
+
 .tracking-dot {
   width: 6px;
   height: 6px;