From: Amazingca <autumn@amazingca.dev>
Date: Mon, 11 May 2026 01:26:53 +0000 (-0600)
Subject: Add responsive <title> and favicons
X-Git-Url: http://git.amazingca.dev/?a=commitdiff_plain;h=27bd367f0e8b4e1aa34b6632e7f81ad3a04fbca3;p=autumn%2Ftodo

Add responsive <title> and favicons
---

diff --git a/app/archived.html b/app/archived.html
index de97658..decbf48 100644
--- a/app/archived.html
+++ b/app/archived.html
@@ -3,6 +3,7 @@
   <head>
     <title>todo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="./favicon.ico" id="favicon">
     <link rel="stylesheet" type="text/css" href="./style.css">
     <script src="./todos.js" defer></script>
   </head>
diff --git a/app/favicon-notify.ico b/app/favicon-notify.ico
new file mode 100644
index 0000000..d975b88
Binary files /dev/null and b/app/favicon-notify.ico differ
diff --git a/app/favicon.ico b/app/favicon.ico
new file mode 100644
index 0000000..98d52cf
Binary files /dev/null and b/app/favicon.ico differ
diff --git a/app/index.html b/app/index.html
index 38a5577..d94cf6f 100644
--- a/app/index.html
+++ b/app/index.html
@@ -3,6 +3,7 @@
   <head>
     <title>todo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="./favicon.ico" id="favicon">
     <link rel="stylesheet" type="text/css" href="./style.css">
     <script src="./todos.js" defer></script>
   </head>
diff --git a/app/settings.html b/app/settings.html
index a2c629b..49c3ad1 100644
--- a/app/settings.html
+++ b/app/settings.html
@@ -3,6 +3,7 @@
   <head>
     <title>todo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="./favicon.ico" id="favicon">
     <link rel="stylesheet" type="text/css" href="./style.css">
     <script src="./settings.js" defer></script>
   </head>
diff --git a/app/settings.js b/app/settings.js
index 6ce9df7..d0083b3 100644
--- a/app/settings.js
+++ b/app/settings.js
@@ -114,6 +114,24 @@ const dispatchThemesSelectUpdate = () => {
   }
 }
 
+const titleElement = document.getElementsByTagName("title")[0];
+const faviconElement = document.getElementById("favicon");
+
+const updateHeaders = (notify = todos.uncompleted.length > 0) => {
+
+  if (notify) {
+
+    titleElement.innerHTML = `todo (${todos.uncompleted.length})`;
+    faviconElement.href = "./favicon-notify.ico";
+  } else {
+
+    titleElement.innerHTML = "todo";
+    faviconElement.href = "./favicon.ico";
+  }
+}
+
+updateHeaders();
+
 const updateTheme = (force = false) => {
 
   if (theme.colorScheme != "default" || true) {
diff --git a/app/todos.js b/app/todos.js
index 356bf96..c90b673 100644
--- a/app/todos.js
+++ b/app/todos.js
@@ -62,6 +62,7 @@ if (page == "home") document.getElementById("createTodo").addEventListener("clic
     }
   ].concat(todos.uncompleted);
 
+  updateHeaders(true);
   hydrateUncompleted();
   applyListeners();
   document.getElementById("todo-uncompleted-0-description").focus();
@@ -268,8 +269,26 @@ const hydrateCompleted = () => {
     .join("");
 }
 
+const titleElement = document.getElementsByTagName("title")[0];
+const faviconElement = document.getElementById("favicon");
+
+const updateHeaders = (notify = todos.uncompleted.length > 0) => {
+
+  if (notify) {
+
+    titleElement.innerHTML = `todo (${todos.uncompleted.length})`;
+    faviconElement.href = "./favicon-notify.ico";
+  } else {
+
+    titleElement.innerHTML = "todo";
+    faviconElement.href = "./favicon.ico";
+  }
+}
+
 const hydrateTodos = () => {
 
+  updateHeaders();
+
   if (page == "archived") hydrateArchived();
   if (page == "home") {