show version number on top

README

@@ -42,6 +42,7 @@ The project is currently optimized around page-level PDF work: split, merge, reo
 - [x] Add first keyboard shortcuts
 - [x] Cache thumbnails by page and rotation
 - [x] Regenerate only changed rotated thumbnails
+- [x] Show software version number
 
 ### Milestone 2: Real page workspace
 

src/components/Layout.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { APP_VERSION } from '../version';
 
 interface LayoutProps {
   children: React.ReactNode;
@@ -8,14 +9,21 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
   return (
     <div className="app-root">
       <header className="app-header">
-        <div className="app-header-title">
+        <div className="app-header-content">
-          <span className="app-logo">📄</span>
+          <div className="app-header-title">
-          <div>
+            <span className="app-logo">📄</span>
-            <h1>PDF Workbench</h1>
+            <div>
-            <small>All in your browser</small>
+              <h1>PDF Workbench</h1>
+              <small>All in your browser</small>
+            </div>
+          </div>
+
+          <div className="app-version" title={`Version ${APP_VERSION}`}>
+            v{APP_VERSION}
           </div>
         </div>
       </header>
+
       <main className="app-main">{children}</main>
     </div>
   );

src/styles.css

@@ -179,3 +179,22 @@ button.secondary {
   border: none;
   border-top: 1px solid #e5e7eb;
 }
+
+.app-header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.app-version {
+  flex: 0 0 auto;
+  border-radius: 999px;
+  background: #374151;
+  color: #d1d5db;
+  padding: 0.4rem 0.7rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+}

src/version.ts

@@ -0,0 +1 @@
+export const APP_VERSION = '0.1.2';