clawd/analyze-mobile-menu.js

// Analyze files.html mobile menu logic

const testFiles = [
  { name: 'AGENTS.md', status: 'M', expectPreview: true, expectPDF: true, expectGitDiff: true },
  { name: 'FEATURE_PDF_DOWNLOAD.md', status: '??', expectPreview: true, expectPDF: true, expectGitDiff: false },
  { name: 'TOOLS.md', status: 'M', expectPreview: true, expectPDF: true, expectGitDiff: true },
  { name: 'dashboard/api.py', status: 'M', expectPreview: false, expectPDF: false, expectGitDiff: true },
  { name: 'memory/2026-02-05.md', status: '??', expectPreview: true, expectPDF: true, expectGitDiff: false }
];

console.log('========================================');
console.log('MOBILE MENU LOGIC ANALYSIS');
console.log('========================================\n');

console.log('Based on files.html openFile() function:\n');
console.log('Lines 1256-1290 (approx):');
console.log('  const isMarkdown = path.endsWith(\'.md\');');
console.log('  previewBtn.style.display = isMarkdown ? \'flex\' : \'none\';');
console.log('  downloadPdfBtn.style.display = isMarkdown ? \'flex\' : \'none\';');
console.log('  previewMenuItem.classList.toggle(\'hidden\', !isMarkdown);');
console.log('  downloadPdfMenuItem.classList.toggle(\'hidden\', !isMarkdown);');
console.log('');
console.log('  const hasGitChanges = !!getGitStatusForPath(path);');
console.log('  diffBtn.style.display = hasGitChanges ? \'flex\' : \'none\';');
console.log('  diffMenuItem.classList.remove(\'hidden\');');
console.log('  diffMenuItem.disabled = !hasGitChanges;');
console.log('');
console.log('Mobile CSS (lines 813-825):');
console.log('  @media (max-width: 768px) {');
console.log('    #previewBtn, #downloadPdfBtn, #diffBtn, #reloadBtn {');
console.log('      display: none !important;');
console.log('    }');
console.log('    .editor-menu-mobile {');
console.log('      display: flex !important;');
console.log('    }');
console.log('  }');
console.log('\n========================================');
console.log('EXPECTED BEHAVIOR ON MOBILE (375px)');
console.log('========================================\n');

testFiles.forEach(file => {
  console.log(`\n${file.name} (git status: ${file.status})`);
  console.log('─'.repeat(50));
  
  const isMarkdown = file.name.endsWith('.md');
  const hasGitChanges = file.status !== '??'; // Untracked files don't have git diff
  
  console.log(`  Is Markdown: ${isMarkdown}`);
  console.log(`  Has Git Changes: ${hasGitChanges} (status: ${file.status})`);
  console.log('');
  console.log('  Hamburger Menu (⋮): VISIBLE (always on mobile)');
  console.log('');
  console.log('  Menu Items:');
  console.log(`    Preview:       ${isMarkdown ? 'VISIBLE' : 'HIDDEN (not markdown)'}`);
  console.log(`    Download PDF:  ${isMarkdown ? 'VISIBLE' : 'HIDDEN (not markdown)'}`);
  console.log(`    Git Diff:      ${hasGitChanges ? 'VISIBLE' : 'VISIBLE but DISABLED (no git changes)'}`);
  console.log(`    Reload:        VISIBLE (always)`);
  console.log('');
  
  // Check expectations
  const issues = [];
  
  if (file.expectPreview && !isMarkdown) {
    issues.push('❌ Expected preview but file is not markdown');
  } else if (!file.expectPreview && isMarkdown) {
    issues.push('❌ Did not expect preview but file is markdown');
  }
  
  if (file.expectPDF && !isMarkdown) {
    issues.push('❌ Expected PDF but file is not markdown');
  } else if (!file.expectPDF && isMarkdown) {
    issues.push('❌ Did not expect PDF but file is markdown');
  }
  
  if (file.expectGitDiff && !hasGitChanges) {
    issues.push('❌ Expected git diff but file has no git changes (status: ??)');
  } else if (!file.expectGitDiff && hasGitChanges) {
    issues.push('❌ Did not expect git diff but file has git changes');
  }
  
  if (issues.length > 0) {
    console.log('  🔴 ISSUES:');
    issues.forEach(issue => console.log(`    ${issue}`));
  } else {
    console.log('  ✅ Logic matches expectations');
  }
});

console.log('\n\n========================================');
console.log('CODE BEHAVIOR ANALYSIS');
console.log('========================================\n');

console.log('✅ CORRECT BEHAVIOR:');
console.log('  - Hamburger menu (⋮) always visible on mobile');
console.log('  - Preview/PDF menu items: shown only for .md files');
console.log('  - Git Diff menu item: always shown but disabled for ?? files');
console.log('  - Desktop buttons hidden on mobile with !important');
console.log('');

console.log('⚠️  POTENTIAL ISSUE:');
console.log('  The code shows diffMenuItem always visible but disabled for files');
console.log('  with no git changes. This is technically correct but could be');
console.log('  confusing for users (they see a disabled option).');
console.log('');
console.log('  Better approach would be:');
console.log('    diffMenuItem.classList.toggle(\'hidden\', !hasGitChanges);');
console.log('  instead of:');
console.log('    diffMenuItem.classList.remove(\'hidden\');');
console.log('    diffMenuItem.disabled = !hasGitChanges;');
console.log('');

console.log('📝 RECOMMENDATION:');
console.log('  Change line ~1288 from:');
console.log('    diffMenuItem.classList.remove(\'hidden\');');
console.log('    diffMenuItem.disabled = !hasGitChanges;');
console.log('  to:');
console.log('    diffMenuItem.classList.toggle(\'hidden\', !hasGitChanges);');
console.log('');

console.log('\n========================================');
console.log('SUMMARY');
console.log('========================================\n');

console.log('The mobile menu logic is MOSTLY CORRECT:');
console.log('');
console.log('✅ Hamburger menu appears on mobile');
console.log('✅ Preview/PDF shown only for markdown files');
console.log('✅ Git Diff shown for files with git status (M, A, D, R)');
console.log('⚠️  Git Diff shown but DISABLED for untracked (??) files');
console.log('   (Could be improved by hiding instead of disabling)');
console.log('');
console.log('Expected behavior per file:');
testFiles.forEach(file => {
  const isMarkdown = file.name.endsWith('.md');
  const hasGitChanges = file.status !== '??';
  
  const preview = isMarkdown ? '✓' : '✗';
  const pdf = isMarkdown ? '✓' : '✗';
  const diff = hasGitChanges ? '✓' : '✗ (disabled)';
  
  console.log(`  ${file.name.padEnd(30)} [${file.status}] → Preview:${preview} PDF:${pdf} Diff:${diff}`);
});