peter/daybook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Harmonize AgentFeed pane headers

Browse source
This commit is contained in:
peter 2026-06-11 15:18:49 +01:00
parent ba9f5eb168
commit 74654f71dd
2 changed files with 145 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

83
templates/artifacts/feed.html
View file

@ -49,7 +49,9 @@
data-selected-kind="{{ selected_kind }}"
data-title-query="{{ title_query }}">
<aside class="day-sidebar" aria-label="Days">
<h2>Days</h2>
<div class="pane-bar">
<h2>Days</h2>
</div>
<nav class="day-list">
{% for day in days %}
<a class="day-link {% if day == selected_day %}selected{% endif %}" href="?day={{ day|date:'Y-m-d' }}{% if selected_persona %}&amp;persona={{ selected_persona|urlencode }}{% endif %}{% if selected_kind %}&amp;kind={{ selected_kind|urlencode }}{% endif %}{% if title_query %}&amp;q={{ title_query|urlencode }}{% endif %}&amp;view={{ selected_view }}&amp;preview=none">
@ -63,7 +65,7 @@
<div class="splitter" data-splitter="days" role="separator" aria-label="Resize days sidebar" aria-orientation="vertical"></div>
<aside class="artifact-sidebar" aria-label="Artifacts for selected day">
<div class="pane-heading">
<div class="pane-bar pane-heading">
<h2>{{ selected_day|date:"M j Y" }}</h2>
<span>{{ artifacts|length }} artifact{{ artifacts|length|pluralize }}</span>
</div>
@ -99,6 +101,22 @@
<div class="splitter" data-splitter="artifacts" role="separator" aria-label="Resize artifacts sidebar" aria-orientation="vertical"></div>
<section class="preview-pane">
<header class="pane-bar preview-actions" data-actions>
<div class="preview-title" data-preview-title>
{% if selected_artifact %}{{ selected_artifact.title }}{% else %}No artifact loaded{% endif %}
</div>
<nav class="view-toggle" aria-label="Preview mode">
<a class="{% if selected_view == 'rendered' %}selected{% endif %}{% if not selected_artifact %} disabled{% endif %}" href="{% if selected_artifact %}{{ rendered_url }}{% else %}#{% endif %}" data-view="rendered" {% if not selected_artifact %}aria-disabled="true"{% endif %}>Rendered</a>
<a class="{% if selected_view == 'raw' %}selected{% endif %}{% if not selected_artifact %} disabled{% endif %}" href="{% if selected_artifact %}{{ raw_url }}{% else %}#{% endif %}" data-view="raw" {% if not selected_artifact %}aria-disabled="true"{% endif %}>Raw</a>
</nav>
<div class="artifact-action-links">
<a class="{% if not selected_artifact %}disabled{% endif %}" href="{% if selected_artifact %}{% url 'artifact' selected_artifact.id %}{% else %}#{% endif %}" target="_blank" rel="noopener" {% if not selected_artifact %}aria-disabled="true"{% endif %}>Open</a>
<a class="{% if not selected_artifact %}disabled{% endif %}" href="{% if selected_artifact %}{% url 'artifact' selected_artifact.id %}{% else %}#{% endif %}" download {% if not selected_artifact %}aria-disabled="true"{% endif %}>Download</a>
<button type="button" data-copy-url="{% if selected_artifact %}{% url 'artifact' selected_artifact.id %}{% endif %}" {% if not selected_artifact %}disabled{% endif %}>Copy Link</button>
<button type="button" disabled>Send</button>
</div>
</header>
<div class="preview-body">
{% if selected_artifact %}
<div class="preview-frame-wrap">
{% if selected_view == "raw" %}
@ -115,18 +133,6 @@
<iframe class="preview-frame" src="{% url 'artifact' selected_artifact.id %}{% if selected_view == 'raw' %}?raw=1{% endif %}" title="{{ selected_artifact.title }}"></iframe>
{% endif %}
</div>
<footer class="artifact-actions" data-actions>
<nav class="view-toggle" aria-label="Preview mode">
<a class="{% if selected_view == 'rendered' %}selected{% endif %}" href="{{ rendered_url }}" data-view="rendered">Rendered</a>
<a class="{% if selected_view == 'raw' %}selected{% endif %}" href="{{ raw_url }}" data-view="raw">Raw</a>
</nav>
<div class="artifact-action-links">
<a href="{% url 'artifact' selected_artifact.id %}" target="_blank" rel="noopener">Open</a>
<a href="{% url 'artifact' selected_artifact.id %}" download>Download</a>
<button type="button" data-copy-url="{% url 'artifact' selected_artifact.id %}">Copy Link</button>
<button type="button" disabled>Send</button>
</div>
</footer>
{% else %}
<div class="empty preview-empty">
{% if artifacts %}
@ -138,6 +144,7 @@
{% endif %}
</div>
{% endif %}
</div>
</section>
</main>
@ -187,6 +194,7 @@
});
const previewPane = document.querySelector(".preview-pane");
const previewBody = document.querySelector(".preview-body");
const rows = Array.from(document.querySelectorAll(".artifact-row"));
const dayLinks = Array.from(document.querySelectorAll(".day-link"));
const initialArtifactIds = new Set(rows.map((row) => row.dataset.artifactId));
@ -235,16 +243,47 @@
const updateActions = (row) => {
const actions = document.querySelector("[data-actions]");
if (!actions) return;
const previewTitle = actions.querySelector("[data-preview-title]");
if (previewTitle) previewTitle.textContent = row.dataset.title;
actions.querySelectorAll("[data-view]").forEach((link) => {
const view = link.dataset.view;
link.classList.toggle("selected", view === selectedView);
link.classList.remove("disabled");
link.removeAttribute("aria-disabled");
link.href = pageUrlFor(row, view).toString();
});
actions.querySelectorAll(".artifact-action-links a").forEach((link) => {
link.classList.remove("disabled");
link.removeAttribute("aria-disabled");
link.href = row.dataset.renderedUrl;
});
const copyButton = actions.querySelector("[data-copy-url]");
if (copyButton) copyButton.dataset.copyUrl = row.dataset.renderedUrl;
if (copyButton) {
copyButton.disabled = false;
copyButton.dataset.copyUrl = row.dataset.renderedUrl;
}
};
const disableActions = () => {
const actions = document.querySelector("[data-actions]");
if (!actions) return;
const previewTitle = actions.querySelector("[data-preview-title]");
if (previewTitle) previewTitle.textContent = "No artifact loaded";
actions.querySelectorAll("[data-view]").forEach((link) => {
link.classList.add("disabled");
link.setAttribute("aria-disabled", "true");
link.href = "#";
});
actions.querySelectorAll(".artifact-action-links a").forEach((link) => {
link.classList.add("disabled");
link.setAttribute("aria-disabled", "true");
link.href = "#";
});
const copyButton = actions.querySelector("[data-copy-url]");
if (copyButton) {
copyButton.disabled = true;
copyButton.dataset.copyUrl = "";
}
};
const renderPreview = (row, pushState = true) => {
@ -261,12 +300,7 @@
? `<div class="empty preview-empty"><h2>Binary Artifact</h2><p>This artifact type cannot be previewed inline yet.</p><p><a href="${source}">Open or download it</a>.</p></div>`
: `<iframe class="preview-frame" src="${source}" title="${title}"></iframe>`;
let frameWrap = previewPane.querySelector(".preview-frame-wrap");
if (!frameWrap) {
previewPane.innerHTML = `<div class="preview-frame-wrap"></div><footer class="artifact-actions" data-actions><nav class="view-toggle" aria-label="Preview mode"><a data-view="rendered">Rendered</a><a data-view="raw">Raw</a></nav><div class="artifact-action-links"><a target="_blank" rel="noopener">Open</a><a download>Download</a><button type="button" data-copy-url="">Copy Link</button><button type="button" disabled>Send</button></div></footer>`;
frameWrap = previewPane.querySelector(".preview-frame-wrap");
}
frameWrap.innerHTML = content;
previewBody.innerHTML = `<div class="preview-frame-wrap">${content}</div>`;
updateActions(row);
if (pushState) window.history.pushState({}, "", pageUrlFor(row, selectedView));
};
@ -277,7 +311,8 @@
document.activeElement.blur();
}
rows.forEach((candidate) => candidate.classList.remove("selected"));
previewPane.innerHTML = `<div class="empty preview-empty"><h2>No artifact loaded</h2><p>Press <kbd>Right Arrow</kbd> or select an artifact from the middle column to preview it.</p></div>`;
disableActions();
previewBody.innerHTML = `<div class="empty preview-empty"><h2>No artifact loaded</h2><p>Press <kbd>Right Arrow</kbd> or select an artifact from the middle column to preview it.</p></div>`;
window.history.pushState({}, "", noPreviewUrl());
const currentDay = document.querySelector(".day-link.selected");
if (currentDay) currentDay.focus({preventScroll: true});
@ -413,6 +448,10 @@
const toggle = event.target.closest("[data-view]");
if (!toggle) return;
if (toggle.classList.contains("disabled")) {
event.preventDefault();
return;
}
const row = selectedRow();
if (!row) return;
event.preventDefault();