improve tag dialog

src/articles/index.html

@@ -38,7 +38,7 @@
 		<link rel="stylesheet" type="text/css" href="../css/search.css" />
 		<script type="module" src="../javascript/header.js"></script>
 		<script type="module" src="../javascript/search.js"></script>
-		<script type="module" src="../javascript/feed.js"></script>
+		<script type="module" src="../javascript/icons.js"></script>
 		<script type="module">
 			document.addEventListener("DOMContentLoaded", async () => {
 				document.querySelectorAll(".article-item > time").forEach((time) => {
@@ -57,10 +57,20 @@
 		<aside id="menu">
 			<div id="index-menu">
 				<div id="tag-filter">
-					<span>Filtrer par étiquette :</span>
-					<div id="tag-choose" class="button"></div>
-					<dialog id="tag-dialog"></dialog>
+					<span>Filtrer les articles:</span>
+					<button id="tag-choose">par étiquette</button>
 				</div>
+				<dialog id="tag-dialog">
+					<header>
+						<h1>🏷️&amp;nbsp;Filtrer les articles</h1>
+						<button autofocus><i class="icon-close"></i></button>
+					</header>
+					<p>
+						Choisissez une étiquette qu&#x27;un article doit avoir pour être
+						listé.
+					</p>
+					<div id="tag-dialog-cloud"></div>
+				</dialog>
 				<a href="./blog.atom" class="button"
 					><i class="icon-atom-feed"></i>&nbsp;Flux atom des articles</a
 				>