#!/usr/bin/env python3 """Rewrite Little Fig UI to be fully mobile responsive.""" import subprocess, os TOKEN = "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" subprocess.run(["git", "clone", f"https://{TOKEN}@github.com/ticketguy/littlefig.git", "/app/littlefig"], check=True) os.chdir("/app/littlefig") subprocess.run(["git", "config", "user.name", "0xticketguy"], check=True) subprocess.run(["git", "config", "user.email", "0xticketguy@harboria.dev"], check=True) ui_path = "src/little_fig/web/static/index.html" with open(ui_path, "r") as f: html = f.read() # The UI uses Tailwind CSS via CDN. We need to add responsive classes. # Key changes: # 1. Sidebar: hidden on mobile, shown on md+ (with hamburger toggle) # 2. Chat sidebar (history): hidden on mobile # 3. Touch-friendly tap targets # 4. Full-width content on mobile # Replace the sidebar aside — add responsive classes old_sidebar_start = '

' new_sidebar_start = '

' html = html.replace(old_sidebar_start, new_sidebar_start) # Replace main — add responsive margin old_main = '

' new_main = '

' html = html.replace(old_main, new_main) # Replace chat history sidebar — hide on mobile old_chat_sidebar = '

' new_chat_sidebar = '

' html = html.replace(old_chat_sidebar, new_chat_sidebar) # Add hamburger button + overlay AFTER tag hamburger_html = ''' ''' html = html.replace( '', '' + hamburger_html ) # Add toggleSidebar function and responsive CSS before closing toggle_js = ''' // ── Mobile sidebar toggle ──────────────────────────────────────────────────── function toggleSidebar(){ const sb=document.getElementById('sidebar'); const ov=document.getElementById('sidebar-overlay'); const open=sb.classList.contains('-translate-x-full'); if(open){sb.classList.remove('-translate-x-full');sb.classList.add('translate-x-0');ov.classList.remove('hidden')} else{sb.classList.add('-translate-x-full');sb.classList.remove('translate-x-0');ov.classList.add('hidden')} } // Close sidebar when nav item clicked on mobile document.querySelectorAll('.sidebar-item').forEach(el=>{el.addEventListener('click',()=>{ if(window.innerWidth<768){toggleSidebar()} })}); ''' # Insert before the last html = html.replace('// ── Init ─', toggle_js + '\n// ── Init ─') # Add responsive CSS to the