Auto-save: Updated app/layout.tsx

Auto-saved at 2025-07-30 10:08:28

🤖 Generated with [Claude Code](https://claude.ai/code)

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

app/layout.tsx

@@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "161",
-  description: "Generated by create next app",
+  description: "TKB Timeshift Schedule Management Application",
 };
 
 export default function RootLayout({

components/timeshift-spreadsheet.tsx

@@ -386,21 +386,23 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
           tableHeight: "500px",
           style: styles,
           onchange: (instance: any, cell: HTMLElement, x: number, y: number, value: string) => {
+            console.log("onChange triggered:", { x, y, value, isMerging: isMergingRef.current })
+            
             // Skip onChange events during merging process to prevent infinite loops
             if (isMergingRef.current) {
               console.log("Skipping onChange during merge:", { x, y, value })
               return
             }
             
-            console.log("onChange triggered:", { x, y, value })
-            
             // Only process if component is still active
             if (!isActiveRef.current || !jspreadsheetInstance.current) return
             
             // Apply rotation to first row (y === 0) when text is entered
-            if (y === 0 && value !== undefined) {
+            if (y === 0 || y === '0') {
               console.log("First row change detected, applying rotation...", { x, y, value })
-              setTimeout(() => {
+              
+              // Use requestAnimationFrame for better DOM timing
+              requestAnimationFrame(() => {
                 if (!isActiveRef.current || !spreadsheetRef.current) return
                 
                 try {
@@ -410,32 +412,118 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
                     if (rows[0]) {
                       const cells = rows[0].querySelectorAll('td')
                       const targetCell = cells[x + 1] as HTMLElement // +1 because first cell is row number
-                      console.log("Target cell found:", !!targetCell, "Cell content:", targetCell?.textContent)
+                      console.log("Target cell found:", !!targetCell, "Target cell:", targetCell)
+                      
                       if (targetCell) {
-                        // Apply rotation even for empty values to maintain consistent styling
+                        const displayValue = value !== undefined && value !== null ? String(value).trim() : ''
-                        const displayValue = value && value.trim() ? value.trim() : ''
+                        console.log("Processing value:", displayValue)
+                        
                         if (displayValue) {
-                          targetCell.innerHTML = `<div style="transform: rotate(-90deg); font-size: 12px; height: 20px; display: flex; align-items: center; justify-content: center; white-space: nowrap; width: 100%;">${displayValue}</div>`
+                          // Apply rotation with improved styling
-                          console.log("Rotation applied to cell with value:", displayValue)
+                          targetCell.innerHTML = `<div style="
+                            transform: rotate(-90deg); 
+                            font-size: 12px; 
+                            height: 80px; 
+                            width: 20px;
+                            display: flex; 
+                            align-items: center; 
+                            justify-content: center; 
+                            white-space: nowrap;
+                            margin: 0 auto;
+                            transform-origin: center center;
+                          ">${displayValue}</div>`
+                          console.log("✅ Rotation applied successfully to cell with value:", displayValue)
                         } else {
-                          // Clear rotation for empty cells
+                          // Clear cell content but maintain structure  
                           targetCell.innerHTML = ''
-                          targetCell.style.transform = 'none'
+                          console.log("✅ Cleared cell content")
-                          console.log("Cleared rotation for empty cell")
                         }
+                      } else {
+                        console.warn("❌ Target cell not found at index:", x + 1)
                       }
+                    } else {
+                      console.warn("❌ First row not found")
                     }
+                  } else {
+                    console.warn("❌ Table not found")
                   }
                 } catch (error) {
-                  console.error("Error applying rotation:", error)
+                  console.error("❌ Error applying rotation:", error)
                 }
-              }, 50) // Reduced timeout for faster response
+              })
             }
           }
         })
         
         console.log("jspreadsheet initialized:", !!jspreadsheetInstance.current)
         
+        // Additional event listener for first row rotation as fallback
+        setTimeout(() => {
+          if (!isActiveRef.current || !spreadsheetRef.current) return
+          
+          const table = spreadsheetRef.current?.querySelector('.jexcel tbody')
+          if (table) {
+            // Add input event listeners to first row cells
+            const firstRow = table.querySelector('tr:first-child')
+            if (firstRow) {
+              const cells = firstRow.querySelectorAll('td')
+              cells.forEach((cell, index) => {
+                if (index > 0) { // Skip row number cell
+                  // Listen for input events on the cell
+                  cell.addEventListener('input', (e) => {
+                    const target = e.target as HTMLElement
+                    const value = target.textContent || target.innerText || ''
+                    console.log("🎯 Direct input event on first row cell:", { index, value })
+                    
+                    if (value.trim()) {
+                      requestAnimationFrame(() => {
+                        target.innerHTML = `<div style="
+                          transform: rotate(-90deg); 
+                          font-size: 12px; 
+                          height: 80px; 
+                          width: 20px;
+                          display: flex; 
+                          align-items: center; 
+                          justify-content: center; 
+                          white-space: nowrap;
+                          margin: 0 auto;
+                          transform-origin: center center;
+                        ">${value.trim()}</div>`
+                        console.log("🎯 Direct rotation applied via input event")
+                      })
+                    }
+                  })
+                  
+                  // Also listen for blur events
+                  cell.addEventListener('blur', (e) => {
+                    const target = e.target as HTMLElement
+                    const value = target.textContent || target.innerText || ''
+                    console.log("🎯 Blur event on first row cell:", { index, value })
+                    
+                    if (value.trim()) {
+                      requestAnimationFrame(() => {
+                        target.innerHTML = `<div style="
+                          transform: rotate(-90deg); 
+                          font-size: 12px; 
+                          height: 80px; 
+                          width: 20px;
+                          display: flex; 
+                          align-items: center; 
+                          justify-content: center; 
+                          white-space: nowrap;
+                          margin: 0 auto;
+                          transform-origin: center center;
+                        ">${value.trim()}</div>`
+                        console.log("🎯 Direct rotation applied via blur event")
+                      })
+                    }
+                  })
+                }
+              })
+            }
+          }
+        }, 500)
+        
         // DISABLED: Mutation observer for first row rotation
         // This was causing popup issues when switching tabs
         // TODO: Implement a different approach for first row rotation if needed

logs/auto-commit.log

@@ -156,3 +156,8 @@
 2025-07-30 09:24:50 +02:00: ✅ Restore point created
 2025-07-30 09:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
 2025-07-30 09:54:37 +02:00: 🔖 Creating restore point...
+2025-07-30 09:56:10 +02:00: ✅ Restore point created
+2025-07-30 10:07:58 +02:00: 📝 File changed: app/layout.tsx (change)
+2025-07-30 10:07:58 +02:00: 📝 File changed: app/layout.tsx (change)
+2025-07-30 10:07:58 +02:00: 📝 File changed: app/layout.tsx (change)
+2025-07-30 10:08:28 +02:00: 🔄 Performing auto-commit...

logs/auto-commit.out.log

@@ -152,3 +152,8 @@
 2025-07-30 09:24:50 +02:00: ✅ Restore point created
 2025-07-30 09:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
 2025-07-30 09:54:37 +02:00: 🔖 Creating restore point...
+2025-07-30 09:56:10 +02:00: ✅ Restore point created
+2025-07-30 10:07:58 +02:00: 📝 File changed: app/layout.tsx (change)
+2025-07-30 10:07:58 +02:00: 📝 File changed: app/layout.tsx (change)
+2025-07-30 10:07:58 +02:00: 📝 File changed: app/layout.tsx (change)
+2025-07-30 10:08:28 +02:00: 🔄 Performing auto-commit...