diff --git a/static/sessions.js b/static/sessions.js index ef5d315..ce28e5b 100644 --- a/static/sessions.js +++ b/static/sessions.js @@ -287,7 +287,7 @@ function renderSessionListFromCache(){ trash.onclick=async(e)=>{e.stopPropagation();e.preventDefault();await deleteSession(s.session_id);}; // Project move button (folder icon) const move=document.createElement('button'); - move.className='session-action-btn';move.innerHTML='📂';move.title='Move to project'; + move.className='session-action-btn'+(s.project_id?' has-project':'');move.innerHTML='📂';move.title='Move to project'; move.onclick=async(e)=>{e.stopPropagation();e.preventDefault();_showProjectPicker(s,move);}; // Project dot indicator if(s.project_id){ @@ -360,11 +360,14 @@ function _showProjectPicker(session, anchorEl){ document.querySelectorAll('.project-picker').forEach(p=>p.remove()); const picker=document.createElement('div'); picker.className='project-picker'; + // Close on outside click + const close=(e)=>{if(!picker.contains(e.target)&&e.target!==anchorEl){picker.remove();document.removeEventListener('click',close);}}; // "No project" option const none=document.createElement('div'); none.className='project-picker-item'+(!session.project_id?' active':''); none.textContent='No project'; none.onclick=async()=>{ + document.removeEventListener('click',close); picker.remove(); await api('/api/session/move',{method:'POST',body:JSON.stringify({session_id:session.session_id,project_id:null})}); session.project_id=null; @@ -386,6 +389,7 @@ function _showProjectPicker(session, anchorEl){ name.textContent=p.name; item.appendChild(name); item.onclick=async()=>{ + document.removeEventListener('click',close); picker.remove(); await api('/api/session/move',{method:'POST',body:JSON.stringify({session_id:session.session_id,project_id:p.project_id})}); session.project_id=p.project_id; @@ -394,11 +398,43 @@ function _showProjectPicker(session, anchorEl){ }; picker.appendChild(item); } - // Position relative to anchor - anchorEl.style.position='relative'; - anchorEl.appendChild(picker); - // Close on outside click - const close=(e)=>{if(!picker.contains(e.target)&&e.target!==anchorEl){picker.remove();document.removeEventListener('click',close);}}; + // "+ New project" item + const createItem=document.createElement('div'); + createItem.className='project-picker-item project-picker-create'; + createItem.textContent='+ New project'; + createItem.onclick=async()=>{ + picker.remove(); + document.removeEventListener('click',close); + const name=prompt('Project name:'); + if(!name||!name.trim()) return; + const color=PROJECT_COLORS[_allProjects.length%PROJECT_COLORS.length]; + const res=await api('/api/projects/create',{method:'POST',body:JSON.stringify({name:name.trim(),color})}); + if(res.project){ + _allProjects.push(res.project); + await api('/api/session/move',{method:'POST',body:JSON.stringify({session_id:session.session_id,project_id:res.project.project_id})}); + session.project_id=res.project.project_id; + await renderSessionList(); + showToast('Created "'+res.project.name+'" and moved session'); + } + }; + picker.appendChild(createItem); + // Position picker on document.body to avoid overflow:hidden clipping + document.body.appendChild(picker); + const rect=anchorEl.getBoundingClientRect(); + picker.style.position='fixed'; + picker.style.zIndex='999'; + const spaceBelow=window.innerHeight-rect.bottom; + if(spaceBelow<160&&rect.top>160){ + picker.style.bottom=(window.innerHeight-rect.top+4)+'px'; + picker.style.top='auto'; + }else{ + picker.style.top=(rect.bottom+4)+'px'; + picker.style.bottom='auto'; + } + const pickerW=160; + let left=rect.right-pickerW; + if(left<8) left=8; + picker.style.left=left+'px'; setTimeout(()=>document.addEventListener('click',close),0); } diff --git a/static/style.css b/static/style.css index 28bef02..2691cb3 100644 --- a/static/style.css +++ b/static/style.css @@ -504,6 +504,8 @@ body.resizing{user-select:none;cursor:col-resize;} .session-dup,.session-action-btn{background:none;border:none;color:var(--muted);font-size:11px;cursor:pointer;opacity:0;transition:opacity .15s;padding:2px 4px;flex-shrink:0;} .session-item:hover .session-dup,.session-item:hover .session-action-btn{opacity:1;} .session-dup:hover,.session-action-btn:hover{color:var(--text);} +.session-action-btn.has-project{opacity:.6;color:var(--blue);} +.session-item:hover .session-action-btn.has-project{opacity:1;} /* ── Cron alert badge ── */ .cron-badge{position:absolute;top:2px;right:2px;background:#e53e3e;color:#fff;font-size:9px;font-weight:700;min-width:14px;height:14px;line-height:14px;text-align:center;border-radius:7px;padding:0 3px;} @@ -538,10 +540,12 @@ body.resizing{user-select:none;cursor:col-resize;} .project-create-btn{font-size:10px;padding:3px 6px;border-radius:12px;cursor:pointer;border:1px dashed var(--border2);background:none;color:var(--muted);opacity:.6;transition:all .15s;} .project-create-btn:hover{opacity:1;border-color:var(--blue);color:var(--blue);} .project-create-input{font-size:10px;padding:3px 8px;border-radius:12px;border:1px solid rgba(124,185,255,.6);background:rgba(20,32,60,.9);color:var(--text);outline:none;width:100px;font-family:inherit;box-shadow:0 0 0 2px rgba(124,185,255,.15);} -.project-picker{position:absolute;right:0;top:100%;background:var(--sidebar);border:1px solid var(--border2);border-radius:8px;padding:4px;z-index:30;min-width:140px;box-shadow:0 4px 16px rgba(0,0,0,.3);} +.project-picker{position:absolute;right:0;top:100%;background:var(--sidebar);border:1px solid var(--border2);border-radius:8px;padding:4px;z-index:30;min-width:140px;max-width:220px;width:max-content;box-shadow:0 4px 16px rgba(0,0,0,.3);} .project-picker-item{padding:5px 10px;font-size:11px;border-radius:6px;cursor:pointer;color:var(--muted);transition:all .1s;display:flex;align-items:center;gap:6px;} .project-picker-item:hover{background:rgba(255,255,255,.08);color:var(--text);} .project-picker-item.active{color:var(--blue);} +.project-picker-create{color:var(--blue);opacity:.7;border-top:1px solid var(--border2);margin-top:2px;padding-top:6px;} +.project-picker-create:hover{opacity:1;background:rgba(124,185,255,.08);} .session-project-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;display:inline-block;margin-left:4px;vertical-align:middle;} /* ── Code copy button ── */