Revert page name when page name element blurs

web/components/top_bar.tsx

@@ -38,14 +38,14 @@ export function TopBar({
   unsavedChanges: boolean;
   isLoading: boolean;
   notifications: Notification[];
-  onRename: (newName: string) => void;
+  onRename: (newName?: string) => void;
   actionButtons: ActionButton[];
   lhs?: ComponentChildren;
   rhs?: ComponentChildren;
 }) {
-  const [theme, setTheme] = useState<string>(localStorage.theme ?? "light");
+  // const [theme, setTheme] = useState<string>(localStorage.theme ?? "light");
   const inputRef = useRef<HTMLInputElement>(null);
-  const isMac = isMacLike();
+  // const isMac = isMacLike();
 
   return (
     <div id="sb-top">
@@ -66,6 +66,9 @@ export function TopBar({
               ref={inputRef}
               value={pageName}
               className="sb-edit-page-name"
+              onBlur={(e) => {
+                (e.target as any).value = pageName;
+              }}
               onKeyDown={(e) => {
                 e.stopPropagation();
                 if (e.key === "Enter") {
@@ -73,6 +76,9 @@ export function TopBar({
                   const newName = (e.target as any).value;
                   onRename(newName);
                 }
+                if (e.key === "Escape") {
+                  onRename();
+                }
               }}
             />
           </span>