add more tags, cleanup tag display

models.go

@@ -167,5 +167,9 @@ func GetModelTags(model openrouter.Model, m *Model) {
 		}
 	}
 
+	if model.Pricing.Prompt == "0" && model.Pricing.Completion == "0" {
+		m.Tags = append(m.Tags, "free")
+	}
+
 	sort.Strings(m.Tags)
 }

static/css/dropdown.css

@@ -26,6 +26,7 @@
 	background-size: contain;
 	background-repeat: no-repeat;
 	transform: rotate(180deg);
+	flex-shrink: 0;
 }
 
 .dropdown .cont {
@@ -74,8 +75,13 @@
 	background: #2c2f44;
 }
 
+.dropdown .opt.active {
+	background: #24273a;
+}
+
 .dropdown .opt.filtered {
 	display: none;
+	font-weight: 500;
 }
 
 .dropdown .label {
@@ -98,26 +104,52 @@
 	background-repeat: no-repeat;
 }
 
+.dropdown .selected:not(.all-tags) .tags:has(.tag:nth-child(3)) {
+	display: flex;
+	height: 2px;
+	gap: 1px;
+	width: 100%;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+}
+
+.dropdown .selected:not(.all-tags) .tags:has(.tag:nth-child(3)) .tag {
+	background: var(--color);
+	width: 100%;
+	height: 2px;
+}
+
 .tags .tag.reasoning {
+	--color: #c6a0f6;
 	background-image: url(icons/tags/reasoning.svg);
 }
 
 .tags .tag.tools {
+	--color: #eed49f;
 	background-image: url(icons/tags/tools.svg);
 }
 
 .tags .tag.vision {
+	--color: #ed8796;
 	background-image: url(icons/tags/vision.svg);
 }
 
 .tags .tag.json {
+	--color: #7dc4e4;
 	background-image: url(icons/tags/json.svg);
 }
 
 .tags .tag.image {
+	--color: #f4dbd6;
 	background-image: url(icons/tags/image.svg);
 }
 
+.tags .tag.free {
+	--color: #a6da95;
+	background-image: url(icons/tags/free.svg);
+}
+
 .tags .tag.all {
 	background-image: url(icons/tags/all.svg);
 }

static/css/icons/tags/free.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>

static/css/icons/tags/image.svg

@@ -3,5 +3,5 @@
 <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 
 <g id="SVGRepo_bgCarrier" stroke-width="0"/>
-
+
 <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>

static/css/icons/tags/vision.svg

@@ -3,5 +3,5 @@
 <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 
 <g id="SVGRepo_bgCarrier" stroke-width="0"/>
-
+
 <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>

static/js/chat.js

@@ -1641,7 +1641,8 @@
 			el.title = [
 				model.name,
 				separator,
-				`Created:\t\t${formatTimestamp(model.created)}`,
+				`Tags:\t\t${model.tags?.join(", ") || "-"}`,
+				`Created:\t${formatTimestamp(model.created)}`,
 				`Pricing/1M:\t${formatMoney(model.pricing.input)} In | ${formatMoney(model.pricing.output)} Out`,
 				model.pricing.image ? `Images/1K:\t${formatMoney(model.pricing.image * 1000)} Out` : null,
 				separator,
@@ -1659,7 +1660,7 @@
 			modelList.push(model);
 		});
 
-		dropdown($model, 4);
+		dropdown($model, 6);
 
 		// render prompts
 		data.prompts.unshift({

static/js/dropdown.js

@@ -64,6 +64,10 @@
 
 			this.#_selected.addEventListener("click", () => {
 				this.#_dropdown.classList.toggle("open");
+
+				const selection = this.#options[this.#selected];
+
+				selection.el.scrollIntoView();
 			});
 
 			this.#_dropdown.appendChild(this.#_selected);
@@ -171,8 +175,18 @@
 				return;
 			}
 
+			for (const key in this.#options) {
+				const option = this.#options[key];
+
+				option.el.classList.remove("active");
+			}
+
 			const selection = this.#options[this.#selected];
 
+			selection.el.classList.add("active");
+
+			this.#_selected.classList.toggle("all-tags", selection.tags.length >= this.#maxTags);
+
 			this.#_selected.title = selection.title || this.#_select.title;
 			this.#_selected.innerHTML = selection.el.innerHTML;