feat: plan mobile work by milestone (#203)
This commit is contained in:
1 parent
09b2898d1c
commit
2be29b684a
9 files changed
+514
-10
No files matched your search
+102
-1
@@ -62,6 +62,8 @@ textarea { resize: vertical; min-height: 120px; }
|
||||
.work-filters { display:flex; gap:8px; flex-wrap:wrap; }
|
||||
.work-filter { min-height: 44px; }
|
||||
.work-filter[aria-pressed="true"] { border-color:var(--accent); background:#1d4f7a; }
|
||||
.milestone-lane { display:flex; align-items:center; gap:8px; min-width:min(100%,260px); }
|
||||
.work-milestone-filter { min-width:180px; flex:1; padding:8px; border-radius:8px; border:1px solid #1f3a5f; background:#0b1526; color:var(--text); }
|
||||
.my-work-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px; }
|
||||
.my-work-card { min-height: 44px; display:grid; gap:8px; padding:12px; border:1px solid #1f3a5f; border-radius:12px; background:#0f1d33; color:var(--text); }
|
||||
.my-work-card-main { display:block; width:100%; color:var(--text); text-align:left; font:inherit; background:transparent; border:0; padding:0; }
|
||||
@@ -153,6 +155,9 @@ textarea { resize: vertical; min-height: 120px; }
|
||||
.issue-due-editor input { box-sizing:border-box; width:100%; max-width:100%; }
|
||||
.issue-due-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
|
||||
.issue-due-editor input, .issue-due-editor button { min-height:44px; }
|
||||
.issue-milestone-editor { display:grid; gap:8px; max-width:100%; margin:14px 0; padding:12px; border:1px solid #2a496e; border-radius:12px; }
|
||||
.issue-milestone-editor select { width:100%; padding:8px; border-radius:8px; border:1px solid #1f3a5f; background:#0b1526; color:var(--text); }
|
||||
.work-milestone-filter, .issue-milestone-editor select, .issue-milestone-editor button { min-height:44px; }
|
||||
.issue-sheet-actions { position:sticky; bottom:0; z-index:3; display:grid; gap:8px; margin-top:14px; padding:10px 4px; padding-bottom:calc(10px + env(safe-area-inset-bottom)); background:rgba(11,21,38,.98); border-top:1px solid #2a496e; }
|
||||
.issue-sheet-actions button, .issue-sheet-actions a { min-height:44px; display:flex; align-items:center; justify-content:center; }
|
||||
.issue-sheet-actions a { border:1px solid #60a5fa; border-radius:10px; font-weight:700; }
|
||||
@@ -269,6 +274,12 @@ textarea { resize: vertical; min-height: 120px; }
|
||||
<button class="work-filter" data-work-filter="review" aria-pressed="false">Reviews <span data-work-count="review">0</span></button>
|
||||
<button class="work-filter" data-work-filter="update" aria-pressed="false">Updates <span data-work-count="update">0</span></button>
|
||||
</div>
|
||||
<label class="milestone-lane" for="work-milestone-filter"><span class="small">Release lane</span>
|
||||
<select class="work-milestone-filter" id="work-milestone-filter">
|
||||
<option value="all">All milestones</option>
|
||||
<option value="unplanned">Unplanned</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div class="my-work-list" id="my-work-list"></div>
|
||||
<div class="small" id="work-page-status" aria-live="polite"></div>
|
||||
@@ -412,6 +423,13 @@ textarea { resize: vertical; min-height: 120px; }
|
||||
</div>
|
||||
<div id="issue-due-status" class="small" aria-live="assertive">Load an issue to schedule it.</div>
|
||||
</fieldset>
|
||||
<fieldset class="issue-milestone-editor" aria-describedby="issue-milestone-status">
|
||||
<legend>Milestone</legend>
|
||||
<label for="issue-milestone" class="small">Plan this issue into a release</label>
|
||||
<select id="issue-milestone" disabled><option value="">No milestone</option></select>
|
||||
<button id="save-issue-milestone" type="button" disabled>Save milestone</button>
|
||||
<div id="issue-milestone-status" class="small" aria-live="assertive">Load an issue to plan it.</div>
|
||||
</fieldset>
|
||||
<p class="issue-sheet-content" id="issue-sheet-body"></p>
|
||||
<button id="edit-issue-content" type="button" disabled>Edit issue</button>
|
||||
<form class="issue-edit-form" id="issue-edit-form" hidden>
|
||||
@@ -664,10 +682,14 @@ textarea { resize: vertical; min-height: 120px; }
|
||||
});
|
||||
let liveMode = true;
|
||||
const WORK_FILTER_KEY = 'stackchain.my-work-filter.v1';
|
||||
const WORK_MILESTONE_KEY = 'stackchain.my-work-milestone.v1';
|
||||
let selectedWorkFilter = 'all';
|
||||
let selectedWorkMilestone = 'all';
|
||||
try {
|
||||
const savedFilter = sessionStorage.getItem(WORK_FILTER_KEY);
|
||||
if (['all', 'issue', 'pull', 'review', 'update'].includes(savedFilter)) selectedWorkFilter = savedFilter;
|
||||
const savedMilestone = sessionStorage.getItem(WORK_MILESTONE_KEY);
|
||||
if (savedMilestone) selectedWorkMilestone = savedMilestone;
|
||||
} catch (e) {
|
||||
console.warn('Could not restore My Work filter', e);
|
||||
}
|
||||
@@ -927,6 +949,7 @@ textarea { resize: vertical; min-height: 120px; }
|
||||
const workSession = createWorkSession({
|
||||
getItems: () => lastMyWork,
|
||||
getFilter: () => selectedWorkFilter,
|
||||
getMilestone: () => selectedWorkMilestone,
|
||||
onOpen: openWorkSessionItem,
|
||||
onProgress: state => {
|
||||
document.querySelectorAll('.work-session-nav').forEach(nav => { nav.hidden = false; });
|
||||
@@ -1020,6 +1043,20 @@ textarea { resize: vertical; min-height: 120px; }
|
||||
const element = qs('[data-work-count="' + filter + '"]');
|
||||
if (element) element.textContent = count;
|
||||
});
|
||||
const milestoneSelect = qs('#work-milestone-filter');
|
||||
const lanes = milestoneLanes(lastMyWork);
|
||||
milestoneSelect.innerHTML = '<option value="all">All milestones</option>' +
|
||||
'<option value="unplanned">Unplanned</option>' + lanes.map(lane =>
|
||||
'<option value="' + Number(lane.id) + '">' + escapeHtml(lane.title) + '</option>'
|
||||
).join('');
|
||||
milestoneSelect.value = selectedWorkMilestone;
|
||||
if (milestoneSelect.value !== selectedWorkMilestone) {
|
||||
const retained = document.createElement('option');
|
||||
retained.value = selectedWorkMilestone;
|
||||
retained.textContent = 'Selected milestone';
|
||||
milestoneSelect.append(retained);
|
||||
milestoneSelect.value = selectedWorkMilestone;
|
||||
}
|
||||
qs('#my-work').removeAttribute('data-stale');
|
||||
qs('#my-work-status').textContent = lastMyWork.length ?
|
||||
summarizeMyWork(lastMyWork) : 'No assigned work, review requests, or unread updates.';
|
||||
@@ -1052,7 +1089,7 @@ textarea { resize: vertical; min-height: 120px; }
|
||||
}
|
||||
|
||||
function renderMyWork() {
|
||||
const visible = filterMyWork(lastMyWork, selectedWorkFilter);
|
||||
const visible = filterMyWork(lastMyWork, selectedWorkFilter, selectedWorkMilestone);
|
||||
const incomplete = activeWorkStreams().some(stream => workPagination[stream]?.has_more);
|
||||
qs('#my-work-list').innerHTML = visible.length ? visible.map(item => {
|
||||
const index = lastMyWork.findIndex(candidate => candidate.key === item.key && candidate.kind === item.kind);
|
||||
@@ -1060,6 +1097,7 @@ textarea { resize: vertical; min-height: 120px; }
|
||||
'<span class="small">' + escapeHtml(item.key) + ' · ' + escapeHtml(item.kind === 'pull' ? 'PR' : (item.kind === 'update' ? 'Update' : 'Issue')) + '</span>' +
|
||||
'<span class="my-work-card-title">' + escapeHtml(item.title) + '</span>' +
|
||||
'<span class="pill">' + escapeHtml(item.reason) + '</span>' +
|
||||
(item.milestone?.title ? ' <span class="pill milestone-badge">' + escapeHtml(item.milestone.title) + '</span>' : '') +
|
||||
(item.due_label ? ' <span class="pill due-badge">' + escapeHtml(item.due_label) + '</span>' : '') +
|
||||
(item.has_update ? ' <span class="pill">Unread update</span>' : '') +
|
||||
(item.updated_at ? '<span class="small"> · Updated ' + escapeHtml(fmt(item.updated_at)) + '</span>' : '');
|
||||
@@ -1197,6 +1235,30 @@ textarea { resize: vertical; min-height: 120px; }
|
||||
.map(input => Number(input.value)).filter(Number.isInteger);
|
||||
}
|
||||
|
||||
async function loadIssueMilestoneEditor(item, confirmedMilestone) {
|
||||
const select = qs('#issue-milestone');
|
||||
const status = qs('#issue-milestone-status');
|
||||
select.innerHTML = '<option value="">No milestone</option>';
|
||||
select.disabled = true;
|
||||
qs('#save-issue-milestone').disabled = true;
|
||||
status.textContent = 'Loading milestones…';
|
||||
try {
|
||||
const milestones = await issueController.loadMilestones(item);
|
||||
if (selectedIssue !== item) return;
|
||||
select.innerHTML += milestones.map(milestone =>
|
||||
'<option value="' + Number(milestone.id) + '">' + escapeHtml(milestone.title) + '</option>'
|
||||
).join('');
|
||||
const draft = issueController.loadMilestoneDraft(item);
|
||||
select.value = String(draft ?? confirmedMilestone?.id ?? '');
|
||||
select.disabled = false;
|
||||
qs('#save-issue-milestone').disabled = false;
|
||||
status.textContent = confirmedMilestone ?
|
||||
'Planned for ' + confirmedMilestone.title + '.' : 'No milestone set.';
|
||||
} catch (_error) {
|
||||
status.textContent = 'Milestones could not be loaded. Retry by reopening this issue.';
|
||||
}
|
||||
}
|
||||
|
||||
async function openIssueSheet(item, trigger) {
|
||||
if (!item) return;
|
||||
selectedIssue = item;
|
||||
@@ -1220,6 +1282,10 @@ textarea { resize: vertical; min-height: 120px; }
|
||||
qs('#save-issue-due-date').disabled = true;
|
||||
qs('#clear-issue-due-date').disabled = true;
|
||||
qs('#issue-due-status').textContent = 'Loading due date…';
|
||||
qs('#issue-milestone').innerHTML = '<option value="">No milestone</option>';
|
||||
qs('#issue-milestone').disabled = true;
|
||||
qs('#save-issue-milestone').disabled = true;
|
||||
qs('#issue-milestone-status').textContent = 'Loading milestones…';
|
||||
qs('#retry-issue-load').hidden = true;
|
||||
qs('#open-issue-gitea').href = item.url || '#';
|
||||
qs('#send-issue-comment').disabled = false;
|
||||
@@ -1238,6 +1304,7 @@ textarea { resize: vertical; min-height: 120px; }
|
||||
'<span class="pill">' + escapeHtml(label) + '</span>'
|
||||
).join(' ');
|
||||
loadIssueLabelEditor(item, detail.labels || []);
|
||||
loadIssueMilestoneEditor(item, detail.milestone);
|
||||
qs('#issue-assignees').textContent = (detail.assignees || []).length ?
|
||||
'Assigned to ' + detail.assignees.join(', ') : 'No assignee reported';
|
||||
qs('#issue-comments').innerHTML = (detail.comments || []).length ?
|
||||
@@ -2211,6 +2278,33 @@ textarea { resize: vertical; min-height: 120px; }
|
||||
saveSelectedIssueDueDate(value + 'T23:59:59Z');
|
||||
});
|
||||
qs('#clear-issue-due-date').addEventListener('click', () => saveSelectedIssueDueDate(null));
|
||||
qs('#save-issue-milestone').addEventListener('click', async () => {
|
||||
if (!selectedIssue || !lastContextSnapshot) return;
|
||||
const editing = selectedIssue;
|
||||
const button = qs('#save-issue-milestone');
|
||||
const raw = qs('#issue-milestone').value;
|
||||
const milestoneId = raw ? Number(raw) : null;
|
||||
button.disabled = true;
|
||||
qs('#issue-milestone').disabled = true;
|
||||
qs('#issue-milestone-status').textContent = milestoneId ? 'Saving milestone…' : 'Clearing milestone…';
|
||||
try {
|
||||
const confirmed = await issueController.updateMilestone(editing, milestoneId);
|
||||
lastContextSnapshot = buildMyWork.replaceIssueMilestone(
|
||||
lastContextSnapshot, editing.repository, editing.number, confirmed.milestone
|
||||
);
|
||||
selectedIssue = { ...editing, milestone: confirmed.milestone };
|
||||
selectedIssueDetail = { ...selectedIssueDetail, milestone: confirmed.milestone };
|
||||
paintMyWork(lastContextSnapshot);
|
||||
qs('#issue-milestone-status').textContent = confirmed.milestone ?
|
||||
'Planned for ' + confirmed.milestone.title + '. Release lane updated.' : 'Milestone cleared.';
|
||||
} catch (error) {
|
||||
qs('#issue-milestone-status').textContent = error.message + ' Your selection is safe; retry.';
|
||||
qs('#issue-milestone').focus();
|
||||
} finally {
|
||||
button.disabled = false;
|
||||
qs('#issue-milestone').disabled = false;
|
||||
}
|
||||
});
|
||||
qs('#send-issue-comment').addEventListener('click', async () => {
|
||||
if (!selectedIssue) return;
|
||||
const body = qs('#issue-comment').value.trim();
|
||||
@@ -2552,6 +2646,13 @@ textarea { resize: vertical; min-height: 120px; }
|
||||
updateWorkPaginationControls();
|
||||
});
|
||||
});
|
||||
qs('#work-milestone-filter').addEventListener('change', event => {
|
||||
selectedWorkMilestone = event.target.value;
|
||||
try { sessionStorage.setItem(WORK_MILESTONE_KEY, selectedWorkMilestone); }
|
||||
catch (e) { console.warn('Could not persist My Work milestone lane', e); }
|
||||
renderMyWork();
|
||||
if (workSession.active()) workSession.reconcile();
|
||||
});
|
||||
contextPoller.start();
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
contextPoller.setVisible(!document.hidden);
|
||||
|
||||
Reference in new issue
Block a user