feat: add version display to UI and API

## Changes

### Version System
- Added version pattern: YYYY.MM.PATCH (e.g., 2026.01.1)
- Created version.ts files for both API and web packages
- Initial version: 2026.01.1

### Web UI
- Display version in small green text (light green: #90ee90) under Basil logo
- Added hover tooltip showing "Version 2026.01.1"
- Logo link also shows version in title attribute
- Styled with opacity transition for hover effect

### API
- Added /api/version endpoint returning JSON: {"version": "2026.01.1"}
- Updated server startup message to show version
- Console output: "🌿 Basil API server v2026.01.1 running on..."

### CSS Styling
- .logo-container: Flex column layout for logo and version
- .version: 0.65rem font, light green (#90ee90), 0.85 opacity
- Hover increases opacity to 1.0 for better visibility
- Cursor set to "help" to indicate tooltip

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

packages/api/src/index.ts

@@ -12,6 +12,7 @@ import authRoutes from './routes/auth.routes';
 import mealPlansRoutes from './routes/meal-plans.routes';
 import './config/passport'; // Initialize passport strategies
 import { testEmailConfig } from './services/email.service';
+import { APP_VERSION } from './version';
 
 dotenv.config();
 
@@ -45,13 +46,18 @@ app.get('/health', (req, res) => {
   res.json({ status: 'ok', timestamp: new Date().toISOString() });
 });
 
+// Version endpoint
+app.get('/api/version', (req, res) => {
+  res.json({ version: APP_VERSION });
+});
+
 // Export app for testing
 export default app;
 
 // Start server only if this file is run directly (not imported)
 if (require.main === module) {
   app.listen(PORT, async () => {
-    console.log(`🌿 Basil API server running on http://localhost:${PORT}`);
+    console.log(`🌿 Basil API server v${APP_VERSION} running on http://localhost:${PORT}`);
 
     // Test email configuration on startup
     await testEmailConfig();

packages/api/src/version.ts

@@ -0,0 +1,5 @@
+/**
+ * Application version following the pattern: YYYY.MM.PATCH
+ * Example: 2026.01.1 (January 2026, patch 1)
+ */
+export const APP_VERSION = '2026.01.1';

packages/web/src/App.css

@@ -74,9 +74,16 @@ body {
   gap: 2rem;
 }
 
+.logo-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
 .logo {
   font-size: 1.5rem;
   font-weight: bold;
+  margin: 0;
 }
 
 .logo a {
@@ -88,6 +95,22 @@ body {
   opacity: 0.9;
 }
 
+.version {
+  font-size: 0.65rem;
+  color: #90ee90;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+  cursor: help;
+  align-self: flex-start;
+  margin-left: 0.25rem;
+  opacity: 0.85;
+  transition: opacity 0.2s ease;
+}
+
+.version:hover {
+  opacity: 1;
+}
+
 nav {
   display: flex;
   gap: 1.5rem;

packages/web/src/App.tsx

@@ -16,6 +16,7 @@ import RecipeImport from './pages/RecipeImport';
 import NewRecipe from './pages/NewRecipe';
 import UnifiedEditRecipe from './pages/UnifiedEditRecipe';
 import CookingMode from './pages/CookingMode';
+import { APP_VERSION } from './version';
 import './App.css';
 
 function App() {
@@ -26,7 +27,12 @@ function App() {
           <div className="app">
             <header className="header">
               <div className="container">
-                <h1 className="logo"><Link to="/">🌿 Basil</Link></h1>
+                <div className="logo-container">
+                  <h1 className="logo">
+                    <Link to="/" title={`Basil v${APP_VERSION}`}>🌿 Basil</Link>
+                  </h1>
+                  <span className="version" title={`Version ${APP_VERSION}`}>v{APP_VERSION}</span>
+                </div>
                 <nav>
                   <Link to="/">Cookbooks</Link>
                   <Link to="/recipes">All Recipes</Link>

packages/web/src/version.ts

@@ -0,0 +1,5 @@
+/**
+ * Application version following the pattern: YYYY.MM.PATCH
+ * Example: 2026.01.1 (January 2026, patch 1)
+ */
+export const APP_VERSION = '2026.01.1';