feat: dashboard implemented
This commit is contained in:
160
lib/bds/ui/dashboard.ex
Normal file
160
lib/bds/ui/dashboard.ex
Normal file
@@ -0,0 +1,160 @@
|
||||
defmodule BDS.UI.Dashboard do
|
||||
@moduledoc false
|
||||
|
||||
import Ecto.Query
|
||||
|
||||
alias BDS.Media.Media
|
||||
alias BDS.Posts.Post
|
||||
alias BDS.Repo
|
||||
alias BDS.Tags.Tag
|
||||
|
||||
def snapshot(nil), do: empty_snapshot()
|
||||
|
||||
def snapshot(project_id) when is_binary(project_id) do
|
||||
posts =
|
||||
Repo.all(
|
||||
from post in Post,
|
||||
where: post.project_id == ^project_id,
|
||||
select: %{
|
||||
id: post.id,
|
||||
title: post.title,
|
||||
slug: post.slug,
|
||||
status: post.status,
|
||||
tags: post.tags,
|
||||
categories: post.categories,
|
||||
created_at: post.created_at,
|
||||
updated_at: post.updated_at
|
||||
}
|
||||
)
|
||||
|
||||
media_items =
|
||||
Repo.all(
|
||||
from media in Media,
|
||||
where: media.project_id == ^project_id,
|
||||
select: %{mime_type: media.mime_type, size: media.size}
|
||||
)
|
||||
|
||||
tag_colors =
|
||||
Repo.all(
|
||||
from tag in Tag,
|
||||
where: tag.project_id == ^project_id,
|
||||
select: %{name: tag.name, color: tag.color}
|
||||
)
|
||||
|> Enum.reduce(%{}, fn %{name: name, color: color}, acc ->
|
||||
if blank?(color), do: acc, else: Map.put(acc, name, color)
|
||||
end)
|
||||
|
||||
post_stats = post_stats(posts)
|
||||
media_stats = media_stats(media_items)
|
||||
tag_cloud_items = tag_cloud_items(posts, tag_colors)
|
||||
category_counts = category_counts(posts)
|
||||
|
||||
%{
|
||||
title: "dashboard.title",
|
||||
subtitle: "dashboard.subtitle",
|
||||
post_stats: post_stats,
|
||||
media_stats: media_stats,
|
||||
timeline_entries: timeline_entries(posts),
|
||||
tag_cloud_items: tag_cloud_items,
|
||||
category_counts: category_counts,
|
||||
recent_posts: recent_posts(posts)
|
||||
}
|
||||
end
|
||||
|
||||
def empty_snapshot do
|
||||
%{
|
||||
title: "dashboard.title",
|
||||
subtitle: "dashboard.subtitle",
|
||||
post_stats: %{total_posts: 0, draft_count: 0, published_count: 0, archived_count: 0},
|
||||
media_stats: %{media_count: 0, image_count: 0, total_bytes: 0},
|
||||
timeline_entries: [],
|
||||
tag_cloud_items: [],
|
||||
category_counts: [],
|
||||
recent_posts: []
|
||||
}
|
||||
end
|
||||
|
||||
defp post_stats(posts) do
|
||||
Enum.reduce(posts, %{total_posts: 0, draft_count: 0, published_count: 0, archived_count: 0}, fn post, acc ->
|
||||
acc
|
||||
|> Map.update!(:total_posts, &(&1 + 1))
|
||||
|> increment_status(post.status)
|
||||
end)
|
||||
end
|
||||
|
||||
defp media_stats(media_items) do
|
||||
Enum.reduce(media_items, %{media_count: 0, image_count: 0, total_bytes: 0}, fn media, acc ->
|
||||
acc
|
||||
|> Map.update!(:media_count, &(&1 + 1))
|
||||
|> Map.update!(:total_bytes, &(&1 + (media.size || 0)))
|
||||
|> maybe_increment_image_count(media.mime_type)
|
||||
end)
|
||||
end
|
||||
|
||||
defp timeline_entries(posts) do
|
||||
posts
|
||||
|> Enum.reduce(%{}, fn post, acc ->
|
||||
datetime = DateTime.from_unix!(post.created_at, :millisecond)
|
||||
key = {datetime.year, datetime.month}
|
||||
Map.update(acc, key, 1, &(&1 + 1))
|
||||
end)
|
||||
|> Enum.map(fn {{year, month}, count} -> %{year: year, month: month, count: count} end)
|
||||
|> Enum.sort_by(&{&1.year, &1.month})
|
||||
|> Enum.take(-12)
|
||||
end
|
||||
|
||||
defp tag_cloud_items(posts, tag_colors) do
|
||||
posts
|
||||
|> Enum.flat_map(&normalize_terms(&1.tags))
|
||||
|> Enum.frequencies()
|
||||
|> Enum.map(fn {tag, count} -> %{tag: tag, count: count, color: Map.get(tag_colors, tag)} end)
|
||||
|> Enum.sort_by(fn %{tag: tag, count: count} -> {-count, String.downcase(tag)} end)
|
||||
end
|
||||
|
||||
defp category_counts(posts) do
|
||||
posts
|
||||
|> Enum.flat_map(&normalize_terms(&1.categories))
|
||||
|> Enum.frequencies()
|
||||
|> Enum.map(fn {category, count} -> %{category: category, count: count} end)
|
||||
|> Enum.sort_by(fn %{category: category, count: count} -> {-count, String.downcase(category)} end)
|
||||
end
|
||||
|
||||
defp recent_posts(posts) do
|
||||
posts
|
||||
|> Enum.sort_by(& &1.updated_at, :desc)
|
||||
|> Enum.take(5)
|
||||
|> Enum.map(fn post ->
|
||||
%{
|
||||
id: post.id,
|
||||
title: display_title(post),
|
||||
status: Atom.to_string(post.status),
|
||||
updated_at: post.updated_at
|
||||
}
|
||||
end)
|
||||
end
|
||||
|
||||
defp normalize_terms(values) do
|
||||
values
|
||||
|> Kernel.||([])
|
||||
|> Enum.map(&to_string/1)
|
||||
|> Enum.map(&String.trim/1)
|
||||
|> Enum.reject(&(&1 == ""))
|
||||
end
|
||||
|
||||
defp display_title(post) do
|
||||
if blank?(post.title), do: post.slug || "", else: post.title
|
||||
end
|
||||
|
||||
defp increment_status(counts, :draft), do: Map.update!(counts, :draft_count, &(&1 + 1))
|
||||
defp increment_status(counts, :published), do: Map.update!(counts, :published_count, &(&1 + 1))
|
||||
defp increment_status(counts, :archived), do: Map.update!(counts, :archived_count, &(&1 + 1))
|
||||
defp increment_status(counts, _status), do: counts
|
||||
|
||||
defp maybe_increment_image_count(counts, mime_type) when is_binary(mime_type) do
|
||||
if String.starts_with?(mime_type, "image/"), do: Map.update!(counts, :image_count, &(&1 + 1)), else: counts
|
||||
end
|
||||
|
||||
defp maybe_increment_image_count(counts, _mime_type), do: counts
|
||||
|
||||
defp blank?(value), do: value in [nil, ""]
|
||||
end
|
||||
@@ -3,6 +3,7 @@ defmodule BDS.UI.ShellPage do
|
||||
|
||||
alias BDS.I18n
|
||||
alias BDS.Projects
|
||||
alias BDS.UI.Dashboard
|
||||
alias BDS.UI.MenuBar
|
||||
alias BDS.UI.Registry
|
||||
alias BDS.UI.Session
|
||||
@@ -54,6 +55,8 @@ defmodule BDS.UI.ShellPage do
|
||||
workbench = Workbench.new()
|
||||
task_status = BDS.Tasks.status_snapshot()
|
||||
ui_language = I18n.current_ui_locale()
|
||||
projects = project_snapshot()
|
||||
dashboard = dashboard_content(projects.active_project_id)
|
||||
|
||||
%{
|
||||
title: Application.get_env(:bds, :desktop)[:title] || "Blogging Desktop Server",
|
||||
@@ -77,19 +80,19 @@ defmodule BDS.UI.ShellPage do
|
||||
default_sidebar_view: Atom.to_string(Registry.default_sidebar_view())
|
||||
},
|
||||
menu_groups: Enum.map(MenuBar.default_groups(), &encode_menu_group/1),
|
||||
projects: project_snapshot(),
|
||||
projects: projects,
|
||||
session: Session.serialize(workbench),
|
||||
task_status: task_status,
|
||||
content: %{
|
||||
sidebar: sidebar_content(),
|
||||
dashboard: dashboard_content(task_status),
|
||||
dashboard: dashboard,
|
||||
assistant_cards: assistant_cards(),
|
||||
editor_meta: editor_meta(task_status)
|
||||
},
|
||||
status:
|
||||
Workbench.status_bar(workbench,
|
||||
post_count: 42,
|
||||
media_count: 18,
|
||||
post_count: dashboard.post_stats.total_posts,
|
||||
media_count: dashboard.media_stats.media_count,
|
||||
theme_badge: "desktop-shell",
|
||||
ui_language: ui_language,
|
||||
offline_mode: true,
|
||||
@@ -227,25 +230,15 @@ defmodule BDS.UI.ShellPage do
|
||||
%{title: title, subtitle: subtitle, sections: [%{title: title, items: items}]}
|
||||
end
|
||||
|
||||
defp dashboard_content(task_status) do
|
||||
%{
|
||||
title: "Dashboard",
|
||||
subtitle: "Desktop workbench shell wired through Elixir",
|
||||
summary_cards: [
|
||||
%{label: "Posts", value: "42", detail: "Across draft, published, and archive"},
|
||||
%{label: "Media", value: "18", detail: "Images and documents indexed"},
|
||||
%{
|
||||
label: "Tasks",
|
||||
value: Integer.to_string(task_status.active_count),
|
||||
detail: task_summary_detail(task_status)
|
||||
}
|
||||
],
|
||||
checklist: [
|
||||
"Native menu groups mirror the old application shell",
|
||||
"Sidebar, tabs, panel, and assistant panes are inspectable DOM regions",
|
||||
"Automation can boot the shell in a separate process and capture screenshots"
|
||||
]
|
||||
}
|
||||
defp dashboard_content(project_id) do
|
||||
Dashboard.snapshot(project_id)
|
||||
rescue
|
||||
error in [Exqlite.Error, DBConnection.OwnershipError] ->
|
||||
if match?(%Exqlite.Error{}, error) and not String.contains?(Exception.message(error), "no such table") do
|
||||
reraise error, __STACKTRACE__
|
||||
end
|
||||
|
||||
Dashboard.empty_snapshot()
|
||||
end
|
||||
|
||||
defp assistant_cards do
|
||||
@@ -266,18 +259,6 @@ defmodule BDS.UI.ShellPage do
|
||||
}
|
||||
end
|
||||
|
||||
defp task_summary_detail(%{active_count: 0}), do: "No active background tasks"
|
||||
|
||||
defp task_summary_detail(%{running_count: running, pending_count: pending}) do
|
||||
segments = []
|
||||
segments = if running > 0, do: ["#{running} running" | segments], else: segments
|
||||
segments = if pending > 0, do: ["#{pending} queued" | segments], else: segments
|
||||
|
||||
segments
|
||||
|> Enum.reverse()
|
||||
|> Enum.join(", ")
|
||||
end
|
||||
|
||||
defp normalize_view_label(:chat, _label), do: "Chat"
|
||||
defp normalize_view_label(:git, _label), do: "Git"
|
||||
defp normalize_view_label(_id, label), do: label
|
||||
|
||||
@@ -66,6 +66,26 @@
|
||||
"Command failed with HTTP %{status}": "Befehl mit HTTP %{status} fehlgeschlagen",
|
||||
"Create Project": "Projekt erstellen",
|
||||
"Dashboard": "Instrumententafel",
|
||||
"dashboard.postCount.one": "%{count} Beitrag",
|
||||
"dashboard.postCount.other": "%{count} Beiträge",
|
||||
"dashboard.section.categories": "Kategorien",
|
||||
"dashboard.section.postsOverTime": "Beiträge im Zeitverlauf",
|
||||
"dashboard.section.recentlyUpdated": "Kürzlich aktualisiert",
|
||||
"dashboard.section.tags": "Schlagwörter",
|
||||
"dashboard.stats.archived": "%{count} archiviert",
|
||||
"dashboard.stats.categories": "%{count} Kategorien",
|
||||
"dashboard.stats.drafts": "%{count} Entwürfe",
|
||||
"dashboard.stats.images": "%{count} Bilder",
|
||||
"dashboard.stats.mediaFiles": "Mediendateien",
|
||||
"dashboard.stats.published": "%{count} veröffentlicht",
|
||||
"dashboard.stats.tags": "Schlagwörter",
|
||||
"dashboard.stats.totalPosts": "Beiträge gesamt",
|
||||
"dashboard.status.archived": "Archiviert",
|
||||
"dashboard.status.draft": "Entwurf",
|
||||
"dashboard.status.published": "Veröffentlicht",
|
||||
"dashboard.subtitle": "Überblick über deine Blog-Datenbank",
|
||||
"dashboard.tagCloud.more": "+%{count} weitere",
|
||||
"dashboard.title": "Übersicht",
|
||||
"Desktop Runtime": "Desktop-Laufzeit",
|
||||
"Desktop workbench content routed through the Elixir shell.": "Desktop-Arbeitsbereichsinhalte werden durch die Elixir-Shell geleitet.",
|
||||
"Desktop workbench shell wired through Elixir": "Desktop-Workbench-Shell über Elixir verdrahtet",
|
||||
|
||||
@@ -66,6 +66,26 @@
|
||||
"Command failed with HTTP %{status}": "Command failed with HTTP %{status}",
|
||||
"Create Project": "Create Project",
|
||||
"Dashboard": "Dashboard",
|
||||
"dashboard.postCount.one": "%{count} post",
|
||||
"dashboard.postCount.other": "%{count} posts",
|
||||
"dashboard.section.categories": "Categories",
|
||||
"dashboard.section.postsOverTime": "Posts Over Time",
|
||||
"dashboard.section.recentlyUpdated": "Recently Updated",
|
||||
"dashboard.section.tags": "Tags",
|
||||
"dashboard.stats.archived": "%{count} archived",
|
||||
"dashboard.stats.categories": "%{count} categories",
|
||||
"dashboard.stats.drafts": "%{count} drafts",
|
||||
"dashboard.stats.images": "%{count} images",
|
||||
"dashboard.stats.mediaFiles": "Media Files",
|
||||
"dashboard.stats.published": "%{count} published",
|
||||
"dashboard.stats.tags": "Tags",
|
||||
"dashboard.stats.totalPosts": "Total Posts",
|
||||
"dashboard.status.archived": "Archived",
|
||||
"dashboard.status.draft": "Draft",
|
||||
"dashboard.status.published": "Published",
|
||||
"dashboard.subtitle": "Overview of your blog database",
|
||||
"dashboard.tagCloud.more": "+%{count} more",
|
||||
"dashboard.title": "Dashboard",
|
||||
"Desktop Runtime": "Desktop Runtime",
|
||||
"Desktop workbench content routed through the Elixir shell.": "Desktop workbench content routed through the Elixir shell.",
|
||||
"Desktop workbench shell wired through Elixir": "Desktop workbench shell wired through Elixir",
|
||||
|
||||
@@ -66,6 +66,26 @@
|
||||
"Command failed with HTTP %{status}": "El comando falló con HTTP %{status}",
|
||||
"Create Project": "Crear proyecto",
|
||||
"Dashboard": "Panel",
|
||||
"dashboard.postCount.one": "%{count} entrada",
|
||||
"dashboard.postCount.other": "%{count} entradas",
|
||||
"dashboard.section.categories": "Categorías",
|
||||
"dashboard.section.postsOverTime": "Entradas a lo largo del tiempo",
|
||||
"dashboard.section.recentlyUpdated": "Actualizadas recientemente",
|
||||
"dashboard.section.tags": "Etiquetas",
|
||||
"dashboard.stats.archived": "%{count} archivadas",
|
||||
"dashboard.stats.categories": "%{count} categorías",
|
||||
"dashboard.stats.drafts": "%{count} borradores",
|
||||
"dashboard.stats.images": "%{count} imágenes",
|
||||
"dashboard.stats.mediaFiles": "Archivos multimedia",
|
||||
"dashboard.stats.published": "%{count} publicadas",
|
||||
"dashboard.stats.tags": "Etiquetas",
|
||||
"dashboard.stats.totalPosts": "Entradas totales",
|
||||
"dashboard.status.archived": "Archivada",
|
||||
"dashboard.status.draft": "Borrador",
|
||||
"dashboard.status.published": "Publicada",
|
||||
"dashboard.subtitle": "Resumen de la base de datos de tu blog",
|
||||
"dashboard.tagCloud.more": "+%{count} más",
|
||||
"dashboard.title": "Panel",
|
||||
"Desktop Runtime": "Entorno de escritorio",
|
||||
"Desktop workbench content routed through the Elixir shell.": "El contenido del área de trabajo de escritorio se enruta a través del shell de Elixir.",
|
||||
"Desktop workbench shell wired through Elixir": "Shell del área de trabajo de escritorio conectado mediante Elixir",
|
||||
|
||||
@@ -66,6 +66,26 @@
|
||||
"Command failed with HTTP %{status}": "La commande a échoué avec HTTP %{status}",
|
||||
"Create Project": "Créer un projet",
|
||||
"Dashboard": "Tableau de bord",
|
||||
"dashboard.postCount.one": "%{count} article",
|
||||
"dashboard.postCount.other": "%{count} articles",
|
||||
"dashboard.section.categories": "Catégories",
|
||||
"dashboard.section.postsOverTime": "Articles dans le temps",
|
||||
"dashboard.section.recentlyUpdated": "Récemment mis à jour",
|
||||
"dashboard.section.tags": "Étiquettes",
|
||||
"dashboard.stats.archived": "%{count} archivés",
|
||||
"dashboard.stats.categories": "%{count} catégories",
|
||||
"dashboard.stats.drafts": "%{count} brouillons",
|
||||
"dashboard.stats.images": "%{count} images",
|
||||
"dashboard.stats.mediaFiles": "Fichiers média",
|
||||
"dashboard.stats.published": "%{count} publiés",
|
||||
"dashboard.stats.tags": "Étiquettes",
|
||||
"dashboard.stats.totalPosts": "Articles au total",
|
||||
"dashboard.status.archived": "Archivé",
|
||||
"dashboard.status.draft": "Brouillon",
|
||||
"dashboard.status.published": "Publié",
|
||||
"dashboard.subtitle": "Aperçu de la base de données de votre blog",
|
||||
"dashboard.tagCloud.more": "+%{count} de plus",
|
||||
"dashboard.title": "Tableau de bord",
|
||||
"Desktop Runtime": "Exécution bureau",
|
||||
"Desktop workbench content routed through the Elixir shell.": "Le contenu de l’atelier bureau est acheminé via le shell Elixir.",
|
||||
"Desktop workbench shell wired through Elixir": "Shell d’atelier bureau câblé via Elixir",
|
||||
|
||||
@@ -66,6 +66,26 @@
|
||||
"Command failed with HTTP %{status}": "Comando non riuscito con HTTP %{status}",
|
||||
"Create Project": "Crea progetto",
|
||||
"Dashboard": "Dashboard",
|
||||
"dashboard.postCount.one": "%{count} post",
|
||||
"dashboard.postCount.other": "%{count} post",
|
||||
"dashboard.section.categories": "Categorie",
|
||||
"dashboard.section.postsOverTime": "Post nel tempo",
|
||||
"dashboard.section.recentlyUpdated": "Aggiornati di recente",
|
||||
"dashboard.section.tags": "Tag",
|
||||
"dashboard.stats.archived": "%{count} archiviati",
|
||||
"dashboard.stats.categories": "%{count} categorie",
|
||||
"dashboard.stats.drafts": "%{count} bozze",
|
||||
"dashboard.stats.images": "%{count} immagini",
|
||||
"dashboard.stats.mediaFiles": "File multimediali",
|
||||
"dashboard.stats.published": "%{count} pubblicati",
|
||||
"dashboard.stats.tags": "Tag",
|
||||
"dashboard.stats.totalPosts": "Post totali",
|
||||
"dashboard.status.archived": "Archiviato",
|
||||
"dashboard.status.draft": "Bozza",
|
||||
"dashboard.status.published": "Pubblicato",
|
||||
"dashboard.subtitle": "Panoramica del database del tuo blog",
|
||||
"dashboard.tagCloud.more": "+%{count} in più",
|
||||
"dashboard.title": "Dashboard",
|
||||
"Desktop Runtime": "Runtime desktop",
|
||||
"Desktop workbench content routed through the Elixir shell.": "I contenuti del banco di lavoro desktop vengono instradati tramite la shell Elixir.",
|
||||
"Desktop workbench shell wired through Elixir": "Shell del banco di lavoro desktop collegata tramite Elixir",
|
||||
|
||||
278
priv/ui/app.css
278
priv/ui/app.css
@@ -1,5 +1,6 @@
|
||||
:root {
|
||||
--vscode-editor-background: #1e1e1e;
|
||||
--vscode-editor-foreground: #cccccc;
|
||||
--vscode-sideBar-background: #252526;
|
||||
--vscode-activityBar-background: #333333;
|
||||
--vscode-panel-background: #1e1e1e;
|
||||
@@ -21,11 +22,15 @@
|
||||
--vscode-sideBar-border: #80808059;
|
||||
--vscode-tab-border: #252526;
|
||||
--vscode-focusBorder: #007fd4;
|
||||
--vscode-input-background: rgba(255, 255, 255, 0.06);
|
||||
--vscode-input-border: rgba(255, 255, 255, 0.12);
|
||||
--vscode-list-hoverBackground: #2a2d2e;
|
||||
--vscode-list-activeSelectionBackground: #094771;
|
||||
--vscode-list-activeSelectionForeground: #ffffff;
|
||||
--vscode-activityBarBadge-background: #007acc;
|
||||
--vscode-activityBarBadge-foreground: #ffffff;
|
||||
--vscode-testing-iconPassed: #73c991;
|
||||
--vscode-editorWarning-foreground: #cca700;
|
||||
--sidebar-width: 280px;
|
||||
--assistant-width: 360px;
|
||||
color-scheme: dark;
|
||||
@@ -1172,4 +1177,277 @@ button {
|
||||
.dashboard-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: var(--vscode-descriptionForeground);
|
||||
}
|
||||
|
||||
.editor-empty {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
background-color: var(--vscode-editor-background);
|
||||
overflow-y: auto;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.dashboard-content {
|
||||
max-width: 720px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dashboard-content h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
margin: 0 0 4px;
|
||||
color: var(--vscode-editor-foreground);
|
||||
}
|
||||
|
||||
.dashboard-content > .text-muted {
|
||||
margin-bottom: 24px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dashboard-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 16px;
|
||||
background-color: var(--vscode-sideBar-background);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: var(--vscode-editor-foreground);
|
||||
line-height: 1;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: var(--vscode-descriptionForeground);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.stat-breakdown {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.stat-tag {
|
||||
font-size: 11px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--vscode-input-background);
|
||||
color: var(--vscode-descriptionForeground);
|
||||
}
|
||||
|
||||
.stat-published {
|
||||
color: var(--vscode-testing-iconPassed);
|
||||
}
|
||||
|
||||
.stat-draft {
|
||||
color: var(--vscode-editorWarning-foreground);
|
||||
}
|
||||
|
||||
.stat-archived {
|
||||
color: var(--vscode-descriptionForeground);
|
||||
}
|
||||
|
||||
.dashboard-section {
|
||||
background-color: var(--vscode-sideBar-background);
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.dashboard-section h4 {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--vscode-descriptionForeground);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.timeline-chart {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 4px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.timeline-bar-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.timeline-bar {
|
||||
width: 100%;
|
||||
max-width: 40px;
|
||||
background-color: var(--vscode-activityBarBadge-background);
|
||||
border-radius: 3px 3px 0 0;
|
||||
margin-top: auto;
|
||||
min-height: 4px;
|
||||
position: relative;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
.timeline-bar:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.timeline-bar-count {
|
||||
position: absolute;
|
||||
top: -16px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 10px;
|
||||
color: var(--vscode-descriptionForeground);
|
||||
}
|
||||
|
||||
.timeline-bar-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 9px;
|
||||
color: var(--vscode-descriptionForeground);
|
||||
margin-top: 4px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.timeline-bar-label-month {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.timeline-bar-label-year {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.tag-cloud {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px 10px;
|
||||
align-items: baseline;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.dashboard-tag {
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
background-color: var(--vscode-input-background);
|
||||
color: var(--vscode-editor-foreground);
|
||||
cursor: default;
|
||||
transition: opacity 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dashboard-tag:hover {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.dashboard-tag.has-color {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.dashboard-tag.has-color:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.tag-cloud-more {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.tag-count {
|
||||
font-size: 10px;
|
||||
opacity: 0.5;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.dashboard-category {
|
||||
font-size: 12px;
|
||||
border: 1px solid var(--vscode-input-border);
|
||||
}
|
||||
|
||||
.recent-posts-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.recent-post-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.recent-post-item:hover {
|
||||
background-color: var(--vscode-list-hoverBackground);
|
||||
}
|
||||
|
||||
.recent-post-title {
|
||||
flex: 1;
|
||||
color: var(--vscode-editor-foreground);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.recent-post-status {
|
||||
font-size: 10px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--vscode-input-background);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.recent-post-status.status-published {
|
||||
color: var(--vscode-testing-iconPassed);
|
||||
}
|
||||
|
||||
.recent-post-status.status-draft {
|
||||
color: var(--vscode-editorWarning-foreground);
|
||||
}
|
||||
|
||||
.recent-post-status.status-archived {
|
||||
color: var(--vscode-descriptionForeground);
|
||||
}
|
||||
|
||||
.recent-post-date {
|
||||
color: var(--vscode-descriptionForeground);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.dashboard-stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.recent-post-item {
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
274
priv/ui/app.js
274
priv/ui/app.js
@@ -214,9 +214,15 @@ function renderTab(tab) {
|
||||
|
||||
function renderEditor() {
|
||||
const route = currentRoute();
|
||||
const meta = currentEditorMeta();
|
||||
const node = root.querySelector(".editor-shell");
|
||||
|
||||
if (route === "dashboard") {
|
||||
node.innerHTML = renderDashboard();
|
||||
return;
|
||||
}
|
||||
|
||||
const meta = currentEditorMeta();
|
||||
|
||||
node.innerHTML = `
|
||||
<div class="editor-frame">
|
||||
<section class="editor-main">
|
||||
@@ -241,28 +247,148 @@ function renderEditor() {
|
||||
`;
|
||||
}
|
||||
|
||||
function renderDashboard() {
|
||||
const dashboard = bootstrap.content.dashboard || {};
|
||||
const postStats = dashboard.post_stats || {};
|
||||
const mediaStats = dashboard.media_stats || {};
|
||||
const timelineEntries = Array.isArray(dashboard.timeline_entries) ? dashboard.timeline_entries : [];
|
||||
const tagCloudItems = buildDashboardTagCloudItems(dashboard.tag_cloud_items || []);
|
||||
const categoryCounts = Array.isArray(dashboard.category_counts) ? dashboard.category_counts : [];
|
||||
const recentPosts = Array.isArray(dashboard.recent_posts) ? dashboard.recent_posts : [];
|
||||
const meta = currentEditorMeta();
|
||||
const maxCount = Math.max(1, ...timelineEntries.map((entry) => Number(entry.count) || 0));
|
||||
|
||||
return `
|
||||
<div class="editor-empty">
|
||||
<div class="dashboard-content">
|
||||
<h1 data-testid="editor-title">${escapeHtml(t("dashboard.title"))}</h1>
|
||||
<p class="text-muted">${escapeHtml(t("dashboard.subtitle"))}</p>
|
||||
|
||||
<div class="dashboard-stats">
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">${escapeHtml(String(postStats.total_posts || 0))}</div>
|
||||
<div class="stat-label">${escapeHtml(t("dashboard.stats.totalPosts"))}</div>
|
||||
<div class="stat-breakdown">
|
||||
<span class="stat-tag stat-published">${escapeHtml(t("dashboard.stats.published", { count: postStats.published_count || 0 }))}</span>
|
||||
<span class="stat-tag stat-draft">${escapeHtml(t("dashboard.stats.drafts", { count: postStats.draft_count || 0 }))}</span>
|
||||
${(postStats.archived_count || 0) > 0 ? `<span class="stat-tag stat-archived">${escapeHtml(t("dashboard.stats.archived", { count: postStats.archived_count || 0 }))}</span>` : ""}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">${escapeHtml(String(mediaStats.media_count || 0))}</div>
|
||||
<div class="stat-label">${escapeHtml(t("dashboard.stats.mediaFiles"))}</div>
|
||||
<div class="stat-breakdown">
|
||||
<span class="stat-tag">${escapeHtml(t("dashboard.stats.images", { count: mediaStats.image_count || 0 }))}</span>
|
||||
<span class="stat-tag">${escapeHtml(formatBytes(mediaStats.total_bytes || 0))}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">${escapeHtml(String((dashboard.tag_cloud_items || []).length))}</div>
|
||||
<div class="stat-label">${escapeHtml(t("dashboard.stats.tags"))}</div>
|
||||
<div class="stat-breakdown">
|
||||
<span class="stat-tag">${escapeHtml(t("dashboard.stats.categories", { count: categoryCounts.length }))}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${timelineEntries.length ? `
|
||||
<div class="dashboard-section">
|
||||
<h4>${escapeHtml(t("dashboard.section.postsOverTime"))}</h4>
|
||||
<div class="timeline-chart">
|
||||
${timelineEntries
|
||||
.map(
|
||||
(entry) => `
|
||||
<div class="timeline-bar-container">
|
||||
<div class="timeline-bar" style="height: ${Math.max(4, ((Number(entry.count) || 0) / maxCount) * 100)}%">
|
||||
<span class="timeline-bar-count">${escapeHtml(String(entry.count || 0))}</span>
|
||||
</div>
|
||||
<div class="timeline-bar-label">
|
||||
<span class="timeline-bar-label-month">${escapeHtml(formatDashboardMonth(entry.year, entry.month))}</span>
|
||||
<span class="timeline-bar-label-year">${escapeHtml(String(entry.year || ""))}</span>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
</div>
|
||||
` : ""}
|
||||
|
||||
${tagCloudItems.length ? `
|
||||
<div class="dashboard-section">
|
||||
<h4>${escapeHtml(t("dashboard.section.tags"))}</h4>
|
||||
<div class="tag-cloud">
|
||||
${tagCloudItems
|
||||
.map((item) => `<span class="dashboard-tag${item.color ? " has-color" : ""}" style="${escapeHtmlAttribute(renderDashboardTagStyle(item))}" title="${escapeHtmlAttribute(dashboardPostCountLabel(item.count))}">${escapeHtml(item.tag)}</span>`)
|
||||
.join("")}
|
||||
${(dashboard.tag_cloud_items || []).length > 40 ? `<span class="text-muted tag-cloud-more">${escapeHtml(t("dashboard.tagCloud.more", { count: (dashboard.tag_cloud_items || []).length - 40 }))}</span>` : ""}
|
||||
</div>
|
||||
</div>
|
||||
` : ""}
|
||||
|
||||
${categoryCounts.length ? `
|
||||
<div class="dashboard-section">
|
||||
<h4>${escapeHtml(t("dashboard.section.categories"))}</h4>
|
||||
<div class="tag-cloud">
|
||||
${categoryCounts
|
||||
.map(
|
||||
(category) => `
|
||||
<span class="dashboard-tag dashboard-category" title="${escapeHtmlAttribute(dashboardPostCountLabel(category.count || 0))}">
|
||||
${escapeHtml(category.category || "")}
|
||||
<span class="tag-count">${escapeHtml(String(category.count || 0))}</span>
|
||||
</span>
|
||||
`
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
</div>
|
||||
` : ""}
|
||||
|
||||
${recentPosts.length ? `
|
||||
<div class="dashboard-section">
|
||||
<h4>${escapeHtml(t("dashboard.section.recentlyUpdated"))}</h4>
|
||||
<div class="recent-posts-list">
|
||||
${recentPosts
|
||||
.map(
|
||||
(post) => `
|
||||
<button
|
||||
class="recent-post-item"
|
||||
data-open-tab="${escapeHtmlAttribute(post.id || "") }"
|
||||
data-open-route="post"
|
||||
data-open-title="${escapeHtmlAttribute(post.title || "") }"
|
||||
type="button"
|
||||
>
|
||||
<span class="recent-post-title">${escapeHtml(post.title || "")}</span>
|
||||
<span class="recent-post-status status-${escapeHtmlAttribute(post.status || "draft")}">${escapeHtml(dashboardStatusLabel(post.status || "draft"))}</span>
|
||||
<span class="recent-post-date">${escapeHtml(formatDashboardDate(post.updated_at))}</span>
|
||||
</button>
|
||||
`
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
</div>
|
||||
` : ""}
|
||||
|
||||
<div class="dashboard-inspector-meta" hidden>
|
||||
${meta
|
||||
.map(
|
||||
(item) => `
|
||||
<section class="editor-meta-row">
|
||||
<strong data-testid="editor-meta-label">${escapeHtml(tText(item.label))}</strong>
|
||||
<span>${escapeHtml(tText(item.value))}</span>
|
||||
</section>
|
||||
`
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderEditorBody(route) {
|
||||
const meta = currentTabMeta();
|
||||
|
||||
if (route === "dashboard") {
|
||||
const dashboard = bootstrap.content.dashboard;
|
||||
return `
|
||||
<section class="editor-section">
|
||||
<ul class="editor-list compact">
|
||||
${dashboard.summary_cards
|
||||
.map((card) => `<li><strong>${escapeHtml(tText(card.label))}:</strong> ${escapeHtml(card.value)} <span>${escapeHtml(tText(card.detail))}</span></li>`)
|
||||
.join("")}
|
||||
</ul>
|
||||
</section>
|
||||
<section class="editor-section">
|
||||
<h2>${escapeHtml(t("Workbench Notes"))}</h2>
|
||||
<ul class="editor-list">
|
||||
${dashboard.checklist.map((entry) => `<li>${escapeHtml(tText(entry))}</li>`).join("")}
|
||||
</ul>
|
||||
</section>
|
||||
`;
|
||||
}
|
||||
|
||||
if (meta?.payload) {
|
||||
return renderCommandPayload(route, meta.payload);
|
||||
}
|
||||
@@ -1588,6 +1714,114 @@ function statusLabel(status) {
|
||||
}
|
||||
}
|
||||
|
||||
function buildDashboardTagCloudItems(items) {
|
||||
if (!Array.isArray(items) || !items.length) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const topItems = items
|
||||
.slice()
|
||||
.sort((left, right) => (Number(right.count) || 0) - (Number(left.count) || 0))
|
||||
.slice(0, 40);
|
||||
|
||||
const counts = topItems.map((item) => Number(item.count) || 0);
|
||||
const maxCount = Math.max(1, ...counts);
|
||||
const minCount = Math.min(...counts);
|
||||
const range = Math.max(1, maxCount - minCount);
|
||||
|
||||
return topItems
|
||||
.map((item) => ({
|
||||
...item,
|
||||
color: normalizeDashboardTagColor(item.color),
|
||||
fontSize: 11 + (((Number(item.count) || 0) - minCount) / range) * 11,
|
||||
}))
|
||||
.sort((left, right) => String(left.tag || "").localeCompare(String(right.tag || "")));
|
||||
}
|
||||
|
||||
function dashboardPostCountLabel(count) {
|
||||
const normalizedCount = Number(count) || 0;
|
||||
return t(normalizedCount === 1 ? "dashboard.postCount.one" : "dashboard.postCount.other", { count: normalizedCount });
|
||||
}
|
||||
|
||||
function dashboardStatusLabel(status) {
|
||||
const keys = {
|
||||
draft: "dashboard.status.draft",
|
||||
published: "dashboard.status.published",
|
||||
archived: "dashboard.status.archived",
|
||||
};
|
||||
|
||||
return keys[status] ? t(keys[status]) : tText(titleCase(status || "draft"));
|
||||
}
|
||||
|
||||
function formatDashboardMonth(year, month) {
|
||||
return new Intl.DateTimeFormat(formatLocaleFor(state.uiLanguage), { month: "short" }).format(new Date(year, (month || 1) - 1, 1));
|
||||
}
|
||||
|
||||
function formatDashboardDate(timestamp) {
|
||||
if (!timestamp) {
|
||||
return "";
|
||||
}
|
||||
|
||||
return new Intl.DateTimeFormat(formatLocaleFor(state.uiLanguage)).format(new Date(timestamp));
|
||||
}
|
||||
|
||||
function formatLocaleFor(language) {
|
||||
const locales = {
|
||||
de: "de-DE",
|
||||
en: "en-US",
|
||||
es: "es-ES",
|
||||
fr: "fr-FR",
|
||||
it: "it-IT",
|
||||
};
|
||||
|
||||
return locales[language] || locales.en;
|
||||
}
|
||||
|
||||
function formatBytes(bytes) {
|
||||
const normalizedBytes = Number(bytes) || 0;
|
||||
|
||||
if (normalizedBytes === 0) {
|
||||
return "0 B";
|
||||
}
|
||||
|
||||
const units = ["B", "KB", "MB", "GB"];
|
||||
const unitIndex = Math.min(Math.floor(Math.log(normalizedBytes) / Math.log(1024)), units.length - 1);
|
||||
const value = normalizedBytes / Math.pow(1024, unitIndex);
|
||||
return `${value.toFixed(value >= 10 || unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`;
|
||||
}
|
||||
|
||||
function renderDashboardTagStyle(item) {
|
||||
const declarations = [`font-size: ${(item.fontSize || 11).toFixed(1)}px;`];
|
||||
|
||||
if (item.color) {
|
||||
declarations.push(`background-color: ${item.color};`);
|
||||
declarations.push(`color: ${dashboardContrastColor(item.color)};`);
|
||||
}
|
||||
|
||||
return declarations.join(" ");
|
||||
}
|
||||
|
||||
function normalizeDashboardTagColor(color) {
|
||||
if (typeof color !== "string") {
|
||||
return null;
|
||||
}
|
||||
|
||||
const trimmed = color.trim();
|
||||
return /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(trimmed) ? trimmed : null;
|
||||
}
|
||||
|
||||
function dashboardContrastColor(hexColor) {
|
||||
const normalized = hexColor.length === 4
|
||||
? `#${hexColor[1]}${hexColor[1]}${hexColor[2]}${hexColor[2]}${hexColor[3]}${hexColor[3]}`
|
||||
: hexColor;
|
||||
|
||||
const red = Number.parseInt(normalized.slice(1, 3), 16);
|
||||
const green = Number.parseInt(normalized.slice(3, 5), 16);
|
||||
const blue = Number.parseInt(normalized.slice(5, 7), 16);
|
||||
const luminance = (red * 299 + green * 587 + blue * 114) / 1000;
|
||||
return luminance >= 140 ? "#111111" : "#f5f5f5";
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value)
|
||||
.replaceAll("&", "&")
|
||||
|
||||
@@ -100,14 +100,39 @@
|
||||
}
|
||||
},
|
||||
"dashboard": {
|
||||
"title": "Dashboard",
|
||||
"subtitle": "Static shell bundle for direct inspection",
|
||||
"summary_cards": [
|
||||
{ "label": "Posts", "value": "42", "detail": "Drafts, published, archive" }
|
||||
"title": "dashboard.title",
|
||||
"subtitle": "dashboard.subtitle",
|
||||
"post_stats": {
|
||||
"total_posts": 42,
|
||||
"draft_count": 18,
|
||||
"published_count": 21,
|
||||
"archived_count": 3
|
||||
},
|
||||
"media_stats": {
|
||||
"media_count": 18,
|
||||
"image_count": 15,
|
||||
"total_bytes": 12884902
|
||||
},
|
||||
"timeline_entries": [
|
||||
{ "year": 2025, "month": 11, "count": 2 },
|
||||
{ "year": 2025, "month": 12, "count": 3 },
|
||||
{ "year": 2026, "month": 1, "count": 5 },
|
||||
{ "year": 2026, "month": 2, "count": 7 },
|
||||
{ "year": 2026, "month": 3, "count": 9 },
|
||||
{ "year": 2026, "month": 4, "count": 6 }
|
||||
],
|
||||
"checklist": [
|
||||
"Static bundle is valid HTML",
|
||||
"Shell assets render without duplicated bootstrap code"
|
||||
"tag_cloud_items": [
|
||||
{ "tag": "launch", "count": 12, "color": "#2962ff" },
|
||||
{ "tag": "writing", "count": 7, "color": "#00897b" },
|
||||
{ "tag": "elixir", "count": 5, "color": "#e65100" }
|
||||
],
|
||||
"category_counts": [
|
||||
{ "category": "notes", "count": 14 },
|
||||
{ "category": "projects", "count": 8 }
|
||||
],
|
||||
"recent_posts": [
|
||||
{ "id": "post-welcome", "title": "Welcome to bDS2", "status": "draft", "updated_at": 1774972800000 },
|
||||
{ "id": "post-roadmap", "title": "Roadmap", "status": "published", "updated_at": 1774540800000 }
|
||||
]
|
||||
},
|
||||
"assistant_cards": [
|
||||
|
||||
@@ -136,6 +136,29 @@ defmodule BDS.UI.ShellTest do
|
||||
assert html =~ ~s("Assistant":"Assistent")
|
||||
end
|
||||
|
||||
test "shell bootstrap and static bundle expose the old dashboard sections" do
|
||||
html = ShellPage.render()
|
||||
css = File.read!("/Users/gb/Projects/bDS2/priv/ui/app.css")
|
||||
js = File.read!("/Users/gb/Projects/bDS2/priv/ui/app.js")
|
||||
|
||||
assert html =~ ~s("timeline_entries")
|
||||
assert html =~ ~s("tag_cloud_items")
|
||||
assert html =~ ~s("category_counts")
|
||||
assert html =~ ~s("recent_posts")
|
||||
|
||||
assert js =~ "dashboard-content"
|
||||
assert js =~ "dashboard-stats"
|
||||
assert js =~ "timeline-chart"
|
||||
assert js =~ "tag-cloud"
|
||||
assert js =~ "recent-posts-list"
|
||||
|
||||
assert css =~ ".dashboard-content"
|
||||
assert css =~ ".dashboard-stats"
|
||||
assert css =~ ".timeline-chart"
|
||||
assert css =~ ".tag-cloud"
|
||||
assert css =~ ".recent-posts-list"
|
||||
end
|
||||
|
||||
test "static shell bundle exists for direct browser inspection" do
|
||||
assert File.exists?("/Users/gb/Projects/bDS2/priv/ui/index.html")
|
||||
assert File.exists?("/Users/gb/Projects/bDS2/priv/ui/app.css")
|
||||
|
||||
Reference in New Issue
Block a user