add badges

data/static/css/style.css

@@ -60,10 +60,11 @@ body {
   color: black;
 }
 
-a:link {
+:where(a:link) {
   color: #c11c1c;
 }
-a:visited {
+
+:where(a:visited) {
   color: #730c0c;
 }
 
@@ -116,7 +117,7 @@ a:visited {
   font-size: 3rem;
   margin: 0 20px;
   text-decoration: none;
-  color: black !important;
+  color: black;
 }
 
 .thread-title {
@@ -133,7 +134,7 @@ a:visited {
 
 .post {
   display: grid;
-  grid-template-columns: 200px 1fr;
+  grid-template-columns: 230px 1fr;
   grid-template-rows: 1fr;
   gap: 0;
   grid-auto-flow: row;
@@ -710,7 +711,7 @@ blockquote {
 button, input[type=submit], .linkbutton {
   display: inline-block;
   background-color: rgb(177, 206, 204.5);
-  color: black !important;
+  color: black;
 }
 button:hover, input[type=submit]:hover, .linkbutton:hover {
   background-color: rgb(192.6, 215.8, 214.6);
@@ -731,7 +732,7 @@ button.icon, input[type=submit].icon, .linkbutton.icon {
 }
 button.critical, input[type=submit].critical, .linkbutton.critical {
   background-color: red;
-  color: white !important;
+  color: white;
 }
 button.critical:hover, input[type=submit].critical:hover, .linkbutton.critical:hover {
   background-color: #ff3333;
@@ -752,7 +753,7 @@ button.critical.icon, input[type=submit].critical.icon, .linkbutton.critical.ico
 }
 button.warn, input[type=submit].warn, .linkbutton.warn {
   background-color: #fbfb8d;
-  color: black !important;
+  color: black;
 }
 button.warn:hover, input[type=submit].warn:hover, .linkbutton.warn:hover {
   background-color: rgb(251.8, 251.8, 163.8);
@@ -774,7 +775,7 @@ button.warn.icon, input[type=submit].warn.icon, .linkbutton.warn.icon {
 
 input[type=file]::file-selector-button {
   background-color: rgb(177, 206, 204.5);
-  color: black !important;
+  color: black;
 }
 input[type=file]::file-selector-button:hover {
   background-color: rgb(192.6, 215.8, 214.6);
@@ -803,7 +804,7 @@ p {
 
 .pagebutton {
   background-color: rgb(177, 206, 204.5);
-  color: black !important;
+  color: black;
 }
 .pagebutton:hover {
   background-color: rgb(192.6, 215.8, 214.6);
@@ -963,10 +964,6 @@ textarea {
   gap: 5px;
 }
 
-.thread-info-bookmark-button {
-  margin-left: auto !important;
-}
-
 .thread-info-post-preview {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1131,7 +1128,7 @@ textarea {
 
 .tab-button {
   background-color: rgb(177, 206, 204.5);
-  color: black !important;
+  color: black;
 }
 .tab-button:hover {
   background-color: rgb(192.6, 215.8, 214.6);
@@ -1292,7 +1289,7 @@ footer {
 
 .reaction-button.active {
   background-color: #beb1ce;
-  color: black !important;
+  color: black;
 }
 .reaction-button.active:hover {
   background-color: rgb(203, 192.6, 215.8);
@@ -1473,3 +1470,56 @@ a.mention:hover, a.mention:visited:hover {
 h1 {
   margin: 0;
 }
+
+.settings-badge-container {
+  display: flex;
+  align-items: baseline;
+  gap: 5px;
+  border: 1px solid black;
+  border-radius: 4px;
+  padding: 5px 10px;
+  margin: 10px 0;
+}
+.settings-badge-container:has(input:invalid) {
+  border: 2px dashed red;
+}
+.settings-badge-container input:invalid {
+  border: 2px dashed red;
+}
+
+.settings-badge-file-picker {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.settings-badge-file-picker input.hidden[type=file] {
+  width: 100%;
+}
+.settings-badge-file-picker input.hidden[type=file]::file-selector-button {
+  display: none;
+}
+.settings-badge-file-picker.hidden {
+  display: none;
+}
+
+.settings-badge-select {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  align-items: center;
+  min-width: 200px;
+}
+
+img.badge-button {
+  min-width: 88px;
+  min-height: 31px;
+  max-width: 88px;
+  max-height: 31px;
+}
+
+.badges-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 5px;
+}

data/static/css/theme-otomotone.css

@@ -60,10 +60,11 @@ body {
   color: #e6e6e6;
 }
 
-a:link {
+:where(a:link) {
   color: #e87fe1;
 }
-a:visited {
+
+:where(a:visited) {
   color: #ed4fb1;
 }
 
@@ -116,7 +117,7 @@ a:visited {
   font-size: 3rem;
   margin: 0 20px;
   text-decoration: none;
-  color: white !important;
+  color: white;
 }
 
 .thread-title {
@@ -133,7 +134,7 @@ a:visited {
 
 .post {
   display: grid;
-  grid-template-columns: 200px 1fr;
+  grid-template-columns: 230px 1fr;
   grid-template-rows: 1fr;
   gap: 0;
   grid-auto-flow: row;
@@ -710,7 +711,7 @@ blockquote {
 button, input[type=submit], .linkbutton {
   display: inline-block;
   background-color: #3c283c;
-  color: #e6e6e6 !important;
+  color: #e6e6e6;
 }
 button:hover, input[type=submit]:hover, .linkbutton:hover {
   background-color: rgb(109.2, 72.8, 109.2);
@@ -731,7 +732,7 @@ button.icon, input[type=submit].icon, .linkbutton.icon {
 }
 button.critical, input[type=submit].critical, .linkbutton.critical {
   background-color: #d53232;
-  color: #e6e6e6 !important;
+  color: #e6e6e6;
 }
 button.critical:hover, input[type=submit].critical:hover, .linkbutton.critical:hover {
   background-color: rgb(221.4, 91, 91);
@@ -752,7 +753,7 @@ button.critical.icon, input[type=submit].critical.icon, .linkbutton.critical.ico
 }
 button.warn, input[type=submit].warn, .linkbutton.warn {
   background-color: #eaea6a;
-  color: black !important;
+  color: black;
 }
 button.warn:hover, input[type=submit].warn:hover, .linkbutton.warn:hover {
   background-color: rgb(238.2, 238.2, 135.8);
@@ -774,7 +775,7 @@ button.warn.icon, input[type=submit].warn.icon, .linkbutton.warn.icon {
 
 input[type=file]::file-selector-button {
   background-color: #3c283c;
-  color: #e6e6e6 !important;
+  color: #e6e6e6;
 }
 input[type=file]::file-selector-button:hover {
   background-color: rgb(109.2, 72.8, 109.2);
@@ -803,7 +804,7 @@ p {
 
 .pagebutton {
   background-color: #3c283c;
-  color: #e6e6e6 !important;
+  color: #e6e6e6;
 }
 .pagebutton:hover {
   background-color: rgb(109.2, 72.8, 109.2);
@@ -963,10 +964,6 @@ textarea {
   gap: 5px;
 }
 
-.thread-info-bookmark-button {
-  margin-left: auto !important;
-}
-
 .thread-info-post-preview {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1131,7 +1128,7 @@ textarea {
 
 .tab-button {
   background-color: #3c283c;
-  color: #e6e6e6 !important;
+  color: #e6e6e6;
 }
 .tab-button:hover {
   background-color: rgb(109.2, 72.8, 109.2);
@@ -1292,7 +1289,7 @@ footer {
 
 .reaction-button.active {
   background-color: #8a5584;
-  color: #e6e6e6 !important;
+  color: #e6e6e6;
 }
 .reaction-button.active:hover {
   background-color: rgb(167.4843049327, 112.9156950673, 161.3067264574);
@@ -1474,6 +1471,59 @@ h1 {
   margin: 0;
 }
 
+.settings-badge-container {
+  display: flex;
+  align-items: baseline;
+  gap: 5px;
+  border: 1px solid black;
+  border-radius: 8px;
+  padding: 5px 10px;
+  margin: 10px 0;
+}
+.settings-badge-container:has(input:invalid) {
+  border: 2px dashed red;
+}
+.settings-badge-container input:invalid {
+  border: 2px dashed red;
+}
+
+.settings-badge-file-picker {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.settings-badge-file-picker input.hidden[type=file] {
+  width: 100%;
+}
+.settings-badge-file-picker input.hidden[type=file]::file-selector-button {
+  display: none;
+}
+.settings-badge-file-picker.hidden {
+  display: none;
+}
+
+.settings-badge-select {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  align-items: center;
+  min-width: 200px;
+}
+
+img.badge-button {
+  min-width: 88px;
+  min-height: 31px;
+  max-width: 88px;
+  max-height: 31px;
+}
+
+.badges-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 5px;
+}
+
 #topnav {
   margin-bottom: 10px;
   border: 10px solid rgb(40, 40, 40);

data/static/css/theme-peachy.css

@@ -60,10 +60,11 @@ body {
   color: black;
 }
 
-a:link {
+:where(a:link) {
   color: black;
 }
-a:visited {
+
+:where(a:visited) {
   color: black;
 }
 
@@ -116,7 +117,7 @@ a:visited {
   font-size: 3rem;
   margin: 0 12px;
   text-decoration: none;
-  color: black !important;
+  color: black;
 }
 
 .thread-title {
@@ -133,7 +134,7 @@ a:visited {
 
 .post {
   display: grid;
-  grid-template-columns: 200px 1fr;
+  grid-template-columns: 230px 1fr;
   grid-template-rows: 1fr;
   gap: 0;
   grid-auto-flow: row;
@@ -710,7 +711,7 @@ blockquote {
 button, input[type=submit], .linkbutton {
   display: inline-block;
   background-color: #f27a5a;
-  color: black !important;
+  color: black;
 }
 button:hover, input[type=submit]:hover, .linkbutton:hover {
   background-color: rgb(244.6, 148.6, 123);
@@ -731,7 +732,7 @@ button.icon, input[type=submit].icon, .linkbutton.icon {
 }
 button.critical, input[type=submit].critical, .linkbutton.critical {
   background-color: #f73030;
-  color: white !important;
+  color: white;
 }
 button.critical:hover, input[type=submit].critical:hover, .linkbutton.critical:hover {
   background-color: rgb(248.6, 89.4, 89.4);
@@ -752,7 +753,7 @@ button.critical.icon, input[type=submit].critical.icon, .linkbutton.critical.ico
 }
 button.warn, input[type=submit].warn, .linkbutton.warn {
   background-color: #fbfb8d;
-  color: black !important;
+  color: black;
 }
 button.warn:hover, input[type=submit].warn:hover, .linkbutton.warn:hover {
   background-color: rgb(251.8, 251.8, 163.8);
@@ -774,7 +775,7 @@ button.warn.icon, input[type=submit].warn.icon, .linkbutton.warn.icon {
 
 input[type=file]::file-selector-button {
   background-color: #f27a5a;
-  color: black !important;
+  color: black;
 }
 input[type=file]::file-selector-button:hover {
   background-color: rgb(244.6, 148.6, 123);
@@ -803,7 +804,7 @@ p {
 
 .pagebutton {
   background-color: #f27a5a;
-  color: black !important;
+  color: black;
 }
 .pagebutton:hover {
   background-color: rgb(244.6, 148.6, 123);
@@ -963,10 +964,6 @@ textarea {
   gap: 3px;
 }
 
-.thread-info-bookmark-button {
-  margin-left: auto !important;
-}
-
 .thread-info-post-preview {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1131,7 +1128,7 @@ textarea {
 
 .tab-button {
   background-color: #f27a5a;
-  color: black !important;
+  color: black;
 }
 .tab-button:hover {
   background-color: rgb(244.6, 148.6, 123);
@@ -1292,7 +1289,7 @@ footer {
 
 .reaction-button.active {
   background-color: #b54444;
-  color: white !important;
+  color: white;
 }
 .reaction-button.active:hover {
   background-color: rgb(197.978313253, 103.221686747, 103.221686747);
@@ -1474,14 +1471,65 @@ h1 {
   margin: 0;
 }
 
+.settings-badge-container {
+  display: flex;
+  align-items: baseline;
+  gap: 3px;
+  border: 1px solid black;
+  border-radius: 16px;
+  padding: 3px 6px;
+  margin: 6px 0;
+}
+.settings-badge-container:has(input:invalid) {
+  border: 2px dashed red;
+}
+.settings-badge-container input:invalid {
+  border: 2px dashed red;
+}
+
+.settings-badge-file-picker {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.settings-badge-file-picker input.hidden[type=file] {
+  width: 100%;
+}
+.settings-badge-file-picker input.hidden[type=file]::file-selector-button {
+  display: none;
+}
+.settings-badge-file-picker.hidden {
+  display: none;
+}
+
+.settings-badge-select {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  align-items: center;
+  min-width: 200px;
+}
+
+img.badge-button {
+  min-width: 88px;
+  min-height: 31px;
+  max-width: 88px;
+  max-height: 31px;
+}
+
+.badges-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 3px;
+}
+
 #topnav {
   border-top-left-radius: 16px;
   border-top-right-radius: 16px;
 }
 
 #bottomnav {
-  border-bottom-left-radius: 16px;
-  border-bottom-right-radius: 16px;
   color: white;
 }
 
@@ -1489,9 +1537,10 @@ textarea {
   padding: 12px 16px;
 }
 
-footer {
-  margin-top: 10px;
+#footer {
   border-radius: 16px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
   border: none;
   text-align: center;
 }

data/static/css/theme-snow-white.css

@@ -48,7 +48,7 @@
   font-family: "Cadman", sans-serif;
   text-decoration: none;
   border: 1px solid black;
-  border-radius: 8px;
+  border-radius: 4px;
   padding: 5px 20px;
   margin: 10px 0;
 }
@@ -60,10 +60,11 @@ body {
   color: black;
 }
 
-a:link {
+:where(a:link) {
   color: #711579;
 }
-a:visited {
+
+:where(a:visited) {
   color: #4a144f;
 }
 
@@ -116,7 +117,7 @@ a:visited {
   font-size: 3rem;
   margin: 0 20px;
   text-decoration: none;
-  color: black !important;
+  color: black;
 }
 
 .thread-title {
@@ -133,7 +134,7 @@ a:visited {
 
 .post {
   display: grid;
-  grid-template-columns: 200px 1fr;
+  grid-template-columns: 230px 1fr;
   grid-template-rows: 1fr;
   gap: 0;
   grid-auto-flow: row;
@@ -604,14 +605,14 @@ pre code { /* Literal.Number.Integer.Long */ }
   padding: 5px 10px;
   display: inline-block;
   margin: 4px;
-  border-radius: 8px;
+  border-radius: 4px;
   font-size: 1rem;
   white-space: pre;
 }
 
 #delete-dialog, .lightbox-dialog {
   padding: 0;
-  border-radius: 8px;
+  border-radius: 4px;
   border: 2px solid black;
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
 }
@@ -648,7 +649,7 @@ pre code { /* Literal.Number.Integer.Long */ }
 blockquote {
   padding: 10px 20px;
   margin: 10px;
-  border-radius: 8px;
+  border-radius: 4px;
   border-left: 10px solid rgb(239.24, 241, 244.36);
   background-color: rgba(0, 0, 0, 0.1490196078);
 }
@@ -710,7 +711,7 @@ blockquote {
 button, input[type=submit], .linkbutton {
   display: inline-block;
   background-color: #eecee9;
-  color: black !important;
+  color: black;
 }
 button:hover, input[type=submit]:hover, .linkbutton:hover {
   background-color: rgb(241.4, 215.8, 237.4);
@@ -731,7 +732,7 @@ button.icon, input[type=submit].icon, .linkbutton.icon {
 }
 button.critical, input[type=submit].critical, .linkbutton.critical {
   background-color: red;
-  color: white !important;
+  color: white;
 }
 button.critical:hover, input[type=submit].critical:hover, .linkbutton.critical:hover {
   background-color: #ff3333;
@@ -752,7 +753,7 @@ button.critical.icon, input[type=submit].critical.icon, .linkbutton.critical.ico
 }
 button.warn, input[type=submit].warn, .linkbutton.warn {
   background-color: #fbfb8d;
-  color: black !important;
+  color: black;
 }
 button.warn:hover, input[type=submit].warn:hover, .linkbutton.warn:hover {
   background-color: rgb(251.8, 251.8, 163.8);
@@ -774,7 +775,7 @@ button.warn.icon, input[type=submit].warn.icon, .linkbutton.warn.icon {
 
 input[type=file]::file-selector-button {
   background-color: #eecee9;
-  color: black !important;
+  color: black;
 }
 input[type=file]::file-selector-button:hover {
   background-color: rgb(241.4, 215.8, 237.4);
@@ -803,7 +804,7 @@ p {
 
 .pagebutton {
   background-color: #eecee9;
-  color: black !important;
+  color: black;
 }
 .pagebutton:hover {
   background-color: rgb(241.4, 215.8, 237.4);
@@ -852,7 +853,7 @@ p {
 
 input[type=text], input[type=password], textarea, select {
   border: 1px solid black;
-  border-radius: 8px;
+  border-radius: 4px;
   padding: 7px 10px;
   width: 100%;
   resize: vertical;
@@ -963,10 +964,6 @@ textarea {
   gap: 5px;
 }
 
-.thread-info-bookmark-button {
-  margin-left: auto !important;
-}
-
 .thread-info-post-preview {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1131,7 +1128,7 @@ textarea {
 
 .tab-button {
   background-color: #eecee9;
-  color: black !important;
+  color: black;
 }
 .tab-button:hover {
   background-color: rgb(241.4, 215.8, 237.4);
@@ -1170,9 +1167,9 @@ textarea {
   background-color: rgb(231.4, 224.9375, 212.6);
   border: 1px solid black;
   padding: 10px;
-  border-top-right-radius: 8px;
-  border-bottom-right-radius: 8px;
-  border-bottom-left-radius: 8px;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
 }
 
 ul, ol {
@@ -1199,7 +1196,7 @@ ul.horizontal li, ol.horizontal li {
   border: 1px solid black;
   background-color: #81a3e6;
   padding: 20px 15px;
-  border-radius: 8px;
+  border-radius: 4px;
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
 }
 
@@ -1209,8 +1206,8 @@ ul.horizontal li, ol.horizontal li {
 }
 
 .accordion {
-  border-top-right-radius: 8px;
-  border-top-left-radius: 8px;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
   border: 1px solid black;
   margin: 10px 5px;
   overflow: hidden;
@@ -1281,7 +1278,7 @@ ul.horizontal li, ol.horizontal li {
   transform: translateX(-50%);
   margin: 0;
   border: none;
-  border-radius: 8px;
+  border-radius: 4px;
   background-color: rgba(0, 0, 0, 0.5019607843);
   padding: 5px 10px;
 }
@@ -1292,7 +1289,7 @@ footer {
 
 .reaction-button.active {
   background-color: #eee3ce;
-  color: black !important;
+  color: black;
 }
 .reaction-button.active:hover {
   background-color: rgb(241.4, 232.6, 215.8);
@@ -1316,7 +1313,7 @@ footer {
   position: relative;
   margin: 0;
   border: none;
-  border-radius: 8px;
+  border-radius: 4px;
   background-color: rgba(0, 0, 0, 0.5019607843);
   padding: 5px 10px;
   width: 250px;
@@ -1341,7 +1338,7 @@ footer {
 .bookmarks-dropdown {
   background-color: #ced9ee;
   border: 1px solid black;
-  border-radius: 8px;
+  border-radius: 4px;
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
   position: absolute;
   margin: 0;
@@ -1359,7 +1356,7 @@ footer {
   margin: 10px 0;
   cursor: pointer;
   border: 1px solid black;
-  border-radius: 8px;
+  border-radius: 4px;
   color: black;
   background-color: #eecee9;
 }
@@ -1438,7 +1435,7 @@ a.mention, a.mention:visited {
   color: white;
   background-color: rgb(136.0836363636, 149.3636363636, 174.7163636364);
   padding: 5px;
-  border-radius: 8px;
+  border-radius: 4px;
   text-decoration: none;
 }
 a.mention.display, a.mention:visited.display {
@@ -1462,7 +1459,7 @@ a.mention:hover, a.mention:visited:hover {
 }
 .settings-grid fieldset {
   border: 1px solid white;
-  border-radius: 8px;
+  border-radius: 4px;
   background-color: rgb(187.6595454545, 188.3232954545, 189.5904545455);
 }
 
@@ -1473,3 +1470,56 @@ a.mention:hover, a.mention:visited:hover {
 h1 {
   margin: 0;
 }
+
+.settings-badge-container {
+  display: flex;
+  align-items: baseline;
+  gap: 5px;
+  border: 1px solid black;
+  border-radius: 4px;
+  padding: 5px 10px;
+  margin: 10px 0;
+}
+.settings-badge-container:has(input:invalid) {
+  border: 2px dashed red;
+}
+.settings-badge-container input:invalid {
+  border: 2px dashed red;
+}
+
+.settings-badge-file-picker {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.settings-badge-file-picker input.hidden[type=file] {
+  width: 100%;
+}
+.settings-badge-file-picker input.hidden[type=file]::file-selector-button {
+  display: none;
+}
+.settings-badge-file-picker.hidden {
+  display: none;
+}
+
+.settings-badge-select {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  align-items: center;
+  min-width: 200px;
+}
+
+img.badge-button {
+  min-width: 88px;
+  min-height: 31px;
+  max-width: 88px;
+  max-height: 31px;
+}
+
+.badges-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 5px;
+}

data/static/js/bitties/pyrom-bitty.js

@@ -1,4 +1,5 @@
 const bookmarkMenuHrefTemplate = '/hyperapi/bookmarks-dropdown';
+const badgeEditorEndpoint = '/hyperapi/badge-editor';
 const previewEndpoint = '/api/babycode-preview';
 const userEndpoint = '/api/current-user';
 
@@ -277,3 +278,200 @@ export default class {
     }
   }
 }
+
+export class BadgeEditorForm {
+  #badgeTemplate = undefined;
+  async loadBadgeEditor(ev, el) {
+    const badges = await this.api.getHTML(badgeEditorEndpoint);
+    if (!badges.value) {
+      return;
+    }
+    if (this.#badgeTemplate === undefined){
+      const badge = await this.api.getHTML(`${badgeEditorEndpoint}/template`)
+      if (!badge.value){
+        return;
+      }
+      this.#badgeTemplate= badge.value;
+    }
+    el.replaceChildren();
+    const addButton = `<button data-disable-if-max="1" data-receive="updateBadgeCount" DISABLE_IF_MAX type="button" data-send="addBadge">Add badge</button>`;
+    const submitButton = `<input data-receive="updateBadgeCount" type="submit" value="Save badges">`;
+    const controls = `<span>${addButton} ${submitButton} <span data-count="1" data-receive="updateBadgeCount">BADGECOUNT/10</span></span>`
+    const badgeCount = badges.value.querySelectorAll('.settings-badge-container').length;
+    const subs = [
+      ['BADGECOUNT', badgeCount],
+      ['DISABLE_IF_MAX', badgeCount === 10 ? 'disabled' : ''],
+    ];
+    el.appendChild(this.api.makeHTML(controls, subs));
+    el.appendChild(badges.value);
+  }
+
+  addBadge(ev, el) {
+    if (this.#badgeTemplate === undefined) {
+      return;
+    }
+    const badge = this.#badgeTemplate.cloneNode(true);
+    el.appendChild(badge);
+    this.api.localTrigger('updateBadgeCount');
+  }
+
+  deleteBadge(ev, el) {
+    if (!el.contains(el.sender)) {
+      return;
+    }
+    el.remove();
+    this.api.localTrigger('updateBadgeCount');
+  }
+
+  updateBadgeCount(_ev, el) {
+    const badgeCount = el.parentNode.parentNode.querySelectorAll('.settings-badge-container').length;
+    if (el.dsInt('disableIfMax') === 1) {
+      el.disabled = badgeCount === 10;
+    } else if (el.dsInt('count') === 1) {
+      el.textContent = `${badgeCount}/10`;
+    }
+  }
+
+  badgeEditorPrepareSubmit(ev, el) {
+    if (ev.type !== 'submit') {
+      return;
+    }
+    ev.preventDefault();
+
+    const badges = el.querySelectorAll('.settings-badge-container').length;
+
+    const noUploads = el.querySelectorAll('.settings-badge-file-picker.hidden input[type=file]');
+    noUploads.forEach(e => {
+      e.value = null;
+    })
+    // console.log(noUploads);
+    el.submit();
+    // console.log('would submit now');
+  }
+}
+
+const validateBase64Img = dataURL => new Promise(resolve => {
+  const img = new Image();
+  img.onload = () => {
+    resolve(img.width === 88 && img.height === 31);
+  };
+  img.src = dataURL;
+});
+
+export class BadgeEditorBadge {
+  #badgeCustomImageData = null;
+  badgeUpdatePreview(ev, el) {
+    if (ev.type !== 'change') {
+      return;
+    }
+    // TODO: el.sender doesn't have a bittyParentBittyId
+    const selectBittyParent = el.sender.closest('bitty-7-0');
+    if (el.bittyParentBittyId !== selectBittyParent.dataset.bittyid) {
+      return;
+    }
+
+    if (ev.val === 'custom') {
+      if (this.#badgeCustomImageData) {
+        el.src = this.#badgeCustomImageData;
+      } else {
+        el.removeAttribute('src');
+      }
+      return;
+    }
+    const option = el.sender.selectedOptions[0];
+    el.src = option.dataset.filePath;
+  }
+
+  async badgeUpdatePreviewCustom(ev, el) {
+    if (ev.type !== 'change') {
+      return;
+    }
+    if (el.bittyParentBittyId !== el.sender.bittyParentBittyId) {
+      return;
+    }
+
+    const file = ev.target.files[0];
+    if (file.size >= 1000 * 500) {
+      this.api.trigger('badgeErrorSize');
+      this.#badgeCustomImageData = null;
+      el.removeAttribute('src');
+      return;
+    }
+
+    const reader = new FileReader();
+
+    reader.onload = async e => {
+      const dimsValid = await validateBase64Img(e.target.result);
+      if (!dimsValid) {
+        this.api.trigger('badgeErrorDim');
+        this.#badgeCustomImageData = null;
+        el.removeAttribute('src');
+        return;
+      }
+      this.#badgeCustomImageData = e.target.result;
+      el.src = this.#badgeCustomImageData;
+      this.api.trigger('badgeHideErrors');
+    }
+
+    reader.readAsDataURL(file);
+  }
+
+  badgeToggleFilePicker(ev, el) {
+    if (ev.type !== 'change') {
+      return;
+    }
+    // TODO: el.sender doesn't have a bittyParentBittyId
+    const selectBittyParent = el.sender.closest('bitty-7-0');
+    if (el.bittyParentBittyId !== selectBittyParent.dataset.bittyid) {
+      return;
+    }
+    const filePicker = el.querySelector('input[type=file]');
+    if (ev.val === 'custom') {
+      el.classList.remove('hidden');
+      if (filePicker.dataset.validity) {
+        filePicker.setCustomValidity(filePicker.dataset.validity);
+      }
+      filePicker.required = true;
+    } else {
+      el.classList.add('hidden');
+      filePicker.setCustomValidity('');
+      filePicker.required = false;
+    }
+  }
+
+  openBadgeFilePicker(ev, el) {
+    // TODO: el.sender doesn't have a bittyParentBittyId
+    if (el.sender.parentNode !== el.parentNode) {
+      return;
+    }
+    el.click();
+  }
+
+  badgeErrorSize(_ev, el) {
+    if (el.sender !== el.bittyParent) {
+      return;
+    }
+    const validity = "Image can't be over 500KB."
+    el.dataset.validity = validity;
+    el.setCustomValidity(validity);
+    el.reportValidity();
+  }
+
+  badgeErrorDim(_ev, el) {
+    if (el.sender !== el.bittyParent) {
+      return;
+    }
+    const validity = "Image must be exactly 88x31 pixels."
+    el.dataset.validity = validity;
+    el.setCustomValidity(validity);
+    el.reportValidity();
+  }
+
+  badgeHideErrors(_ev, el) {
+    if (el.sender !== el.bittyParent) {
+      return;
+    }
+    delete el.dataset.validity;
+    el.setCustomValidity('');
+  }
+}