Release v1.2.1: Improve titlebar design and welcome screen behavior

Author: OffLine911

CHANGELOG.md

@@ -5,6 +5,26 @@ All notable changes to MarkViewPro will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.2.1] - 2026-01-26
+
+### Improved
+- **Titlebar Design**: Cleaner, more professional titlebar
+  - Removed left-side branding when files are open
+  - "MarkView Pro" title now centered when no files are open
+  - Title disappears when tabs are visible
+  - More space for tabs and controls
+- **Welcome Screen Behavior**: Smarter welcome tab handling
+  - Welcome tab automatically closes when opening first file
+  - Welcome tab closes when creating new document
+  - Welcome tab closes when dropping files
+  - Prevents cluttering workspace with welcome screen
+
+### Technical
+- Added `hasOpenFiles` prop to Titlebar component
+- Improved tab replacement logic for welcome screen
+- Enhanced drag and drop to handle welcome tab closure
+- Cleaner conditional rendering of title vs tabs
+
 ## [1.2.0] - 2026-01-26
 
 ### Added
@@ -142,6 +162,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Vite build system
 - Automated CI/CD pipeline with GitHub Actions
 
+[1.2.1]: https://github.com/OffLine911/MarkViewPro/releases/tag/v1.2.1
 [1.2.0]: https://github.com/OffLine911/MarkViewPro/releases/tag/v1.2.0
 [1.1.7]: https://github.com/OffLine911/MarkViewPro/releases/tag/v1.1.7
 [1.1.6]: https://github.com/OffLine911/MarkViewPro/releases/tag/v1.1.6

frontend/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "markview-pro",
   "private": true,
-  "version": "1.2.0",
+  "version": "1.2.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/package.json

@@ -1 +1 @@
-2eb219998c14429877260ecb9e5d34ee
+b38268aa7185cc6afe6ed595f0155e34

frontend/package.json.md5

@@ -68,6 +68,11 @@ export default function App() {
 
       const files = e.dataTransfer?.files;
       if (files && files.length > 0) {
+        // If this is the welcome tab and it's not modified, close it before adding new files
+        if (tabs.length === 1 && tabs[0].fileName === 'Welcome to MarkView Pro' && !tabs[0].isModified) {
+          closeTab(tabs[0].id);
+        }
+
         for (let i = 0; i < files.length; i++) {
           const file = files[i];
           if (file.name.endsWith('.md') || file.name.endsWith('.markdown')) {
@@ -93,7 +98,7 @@ export default function App() {
       document.removeEventListener('dragleave', handleDragLeave);
       document.removeEventListener('drop', handleDrop);
     };
-  }, [addTab]);
+  }, [addTab, closeTab, tabs]);
 
   // Apply zoom level
   useEffect(() => {
@@ -103,14 +108,25 @@ export default function App() {
   const handleOpen = useCallback(async () => {
     const result = await openFile();
     if (result) {
+      // If this is the welcome tab and it's not modified, replace it
+      if (tabs.length === 1 && tabs[0].fileName === 'Welcome to MarkView Pro' && !tabs[0].isModified) {
+        closeTab(tabs[0].id);
+      }
       addTab(fileName || 'Untitled', filePath, content);
     }
-  }, [openFile, addTab, fileName, filePath, content]);
+  }, [openFile, addTab, closeTab, tabs, fileName, filePath, content]);
 
   const handleNew = useCallback(() => {
+    // If this is the welcome tab and it's not modified, replace it
+    if (tabs.length === 1 && tabs[0].fileName === 'Welcome to MarkView Pro' && !tabs[0].isModified) {
+      closeTab(tabs[0].id);
+    }
     newFile();
     addTab('New Document', null, '');
-  }, [newFile, addTab]);
+  }, [newFile, addTab, closeTab, tabs]);
+
+  // Check if we have any real files open (not just welcome screen)
+  const hasOpenFiles = tabs.length > 1 || (tabs.length === 1 && tabs[0].fileName !== 'Welcome to MarkView Pro');
 
   const handleSave = useCallback(async () => {
     if (filePath) {
@@ -191,8 +207,7 @@ export default function App() {
       )}
 
       <Titlebar
-        fileName={fileName}
-        isModified={isModified}
+        hasOpenFiles={hasOpenFiles}
         onNew={handleNew}
         onOpen={handleOpen}
         onSave={handleSave}
@@ -206,12 +221,14 @@ export default function App() {
         isFullscreen={isFullscreen}
       />
 
-      <TabBar
-        tabs={tabs}
-        activeTabId={activeTabId}
-        onTabClick={setActiveTabId}
-        onTabClose={closeTab}
-      />
+      {hasOpenFiles && (
+        <TabBar
+          tabs={tabs}
+          activeTabId={activeTabId}
+          onTabClick={setActiveTabId}
+          onTabClose={closeTab}
+        />
+      )}
 
       <div className="flex flex-1 overflow-hidden">
         <Sidebar

frontend/src/App.tsx

@@ -22,8 +22,7 @@ import {
 import { useSettings } from '../../hooks/useSettings';
 
 interface TitlebarProps {
-  fileName: string | null;
-  isModified: boolean;
+  hasOpenFiles: boolean;
   onNew: () => void;
   onOpen: () => void;
   onSave: () => void;
@@ -38,8 +37,7 @@ interface TitlebarProps {
 }
 
 export function Titlebar({
-  fileName,
-  isModified,
+  hasOpenFiles,
   onNew,
   onOpen,
   onSave,
@@ -84,13 +82,6 @@ export function Titlebar({
       className="flex items-center h-10 px-2 select-none titlebar-bg wails-drag"
     >
       <div className="flex items-center gap-0.5 wails-no-drag">
-        <div className="flex items-center gap-1.5 px-2 mr-1">
-          <div className="w-4 h-4 rounded bg-gradient-to-br from-cyan-400 to-blue-500" />
-          <span className="text-xs font-semibold text-zinc-300 dark:text-zinc-300 titlebar-text">MarkViewPro</span>
-        </div>
-
-        <div className="h-4 w-px bg-zinc-700 mx-1" />
-
         <button
           onClick={onToggleSidebar}
           className="titlebar-btn"
@@ -146,17 +137,16 @@ export function Titlebar({
         </div>
       </div>
 
-      <div className="flex-1 flex items-center justify-center min-w-0">
-        <div className="flex items-center gap-2 text-xs text-zinc-400 truncate select-none wails-no-drag">
-          <FileText className="w-3.5 h-3.5 flex-shrink-0 text-zinc-500" />
-          <span className="truncate font-medium text-zinc-300">
-            {fileName || 'Untitled'}
-          </span>
-          {isModified && (
-            <span className="w-1.5 h-1.5 rounded-full bg-amber-500 flex-shrink-0" title="Unsaved changes" />
-          )}
+      {!hasOpenFiles && (
+        <div className="flex-1 flex items-center justify-center min-w-0">
+          <div className="flex items-center gap-2 select-none wails-no-drag">
+            <div className="w-5 h-5 rounded bg-gradient-to-br from-cyan-400 to-blue-500" />
+            <span className="text-sm font-semibold text-zinc-300 titlebar-text">MarkView Pro</span>
+          </div>
         </div>
-      </div>
+      )}
+
+      {hasOpenFiles && <div className="flex-1" />}
 
       <div className="flex items-center gap-0.5 wails-no-drag">
         <button onClick={onPrint} className="titlebar-btn" title="Print (Ctrl+P)">

frontend/src/components/Titlebar/Titlebar.tsx

@@ -13,7 +13,7 @@
   "info": {
     "companyName": "MarkViewPro",
     "productName": "MarkViewPro",
-    "productVersion": "1.2.0",
+    "productVersion": "1.2.1",
     "copyright": "Copyright © 2024 MarkViewPro Contributors",
     "comments": "A modern Markdown viewer and editor"
   },