Release v1.2.2: Move tabs to titlebar center

Author: OffLine911

CHANGELOG.md

@@ -5,6 +5,21 @@ 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.2] - 2026-01-26
+
+### Improved
+- **Tabs in Titlebar**: Tabs now centered in titlebar for cleaner design
+  - Removed separate tab bar row
+  - Tabs integrated directly into titlebar center
+  - More vertical space for content
+  - Professional, modern appearance like VS Code
+  - Smooth transitions between title and tabs
+
+### Technical
+- Merged TabBar component into Titlebar
+- Tabs now render in titlebar's center flex container
+- Removed redundant TabBar import and component
+
 ## [1.2.1] - 2026-01-26
 
 ### Improved
@@ -162,6 +177,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.2]: https://github.com/OffLine911/MarkViewPro/releases/tag/v1.2.2
 [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

frontend/package-lock.json

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

frontend/package.json

@@ -1 +1 @@
-b38268aa7185cc6afe6ed595f0155e34
+affd92bd8a55012b8c0199fb631fa565

frontend/package.json.md5

@@ -1,7 +1,6 @@
 import { useState, useCallback, useEffect } from 'react';
 import { Sidebar } from './components/Sidebar/Sidebar';
 import { Titlebar } from './components/Titlebar/Titlebar';
-import { TabBar } from './components/TabBar/TabBar';
 import { MarkdownViewer } from './components/Viewer/MarkdownViewer';
 import { StatusBar } from './components/StatusBar/StatusBar';
 import { SettingsModal } from './components/Settings/SettingsModal';
@@ -208,6 +207,10 @@ export default function App() {
 
       <Titlebar
         hasOpenFiles={hasOpenFiles}
+        tabs={tabs}
+        activeTabId={activeTabId}
+        onTabClick={setActiveTabId}
+        onTabClose={closeTab}
         onNew={handleNew}
         onOpen={handleOpen}
         onSave={handleSave}
@@ -221,15 +224,6 @@ export default function App() {
         isFullscreen={isFullscreen}
       />
 
-      {hasOpenFiles && (
-        <TabBar
-          tabs={tabs}
-          activeTabId={activeTabId}
-          onTabClick={setActiveTabId}
-          onTabClose={closeTab}
-        />
-      )}
-
       <div className="flex flex-1 overflow-hidden">
         <Sidebar
           isOpen={sidebarOpen}

frontend/src/App.tsx

@@ -23,6 +23,10 @@ import { useSettings } from '../../hooks/useSettings';
 
 interface TitlebarProps {
   hasOpenFiles: boolean;
+  tabs: Array<{ id: string; fileName: string; isModified: boolean }>;
+  activeTabId: string;
+  onTabClick: (tabId: string) => void;
+  onTabClose: (tabId: string) => void;
   onNew: () => void;
   onOpen: () => void;
   onSave: () => void;
@@ -38,6 +42,10 @@ interface TitlebarProps {
 
 export function Titlebar({
   hasOpenFiles,
+  tabs,
+  activeTabId,
+  onTabClick,
+  onTabClose,
   onNew,
   onOpen,
   onSave,
@@ -137,16 +145,47 @@ export function Titlebar({
         </div>
       </div>
 
-      {!hasOpenFiles && (
-        <div className="flex-1 flex items-center justify-center min-w-0">
+      <div className="flex-1 flex items-center justify-center min-w-0 px-4">
+        {!hasOpenFiles ? (
           <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>
-      )}
-
-      {hasOpenFiles && <div className="flex-1" />}
+        ) : (
+          <div className="flex items-center gap-1 overflow-x-auto no-scrollbar wails-no-drag max-w-full">
+            {tabs.map(tab => (
+              <div
+                key={tab.id}
+                onClick={() => onTabClick(tab.id)}
+                className={`
+                  flex items-center gap-2 px-3 py-1 min-w-[100px] max-w-[180px] cursor-pointer rounded
+                  transition-colors group
+                  ${tab.id === activeTabId 
+                    ? 'bg-zinc-800 text-zinc-100' 
+                    : 'bg-zinc-900/50 text-zinc-400 hover:bg-zinc-800/50 hover:text-zinc-200'
+                  }
+                `}
+              >
+                <span className="flex-1 truncate text-xs">
+                  {tab.fileName || 'Untitled'}
+                </span>
+                {tab.isModified && (
+                  <span className="w-1.5 h-1.5 rounded-full bg-amber-500 flex-shrink-0" />
+                )}
+                {tabs.length > 1 && (
+                  <button
+                    onClick={(e) => { e.stopPropagation(); onTabClose(tab.id); }}
+                    className="flex-shrink-0 p-0.5 rounded hover:bg-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity"
+                    title="Close tab"
+                  >
+                    <X className="w-3 h-3" />
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
 
       <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.1",
+    "productVersion": "1.2.2",
     "copyright": "Copyright © 2024 MarkViewPro Contributors",
     "comments": "A modern Markdown viewer and editor"
   },