From d464d625d84156354ecf84910b55b8a65488e0e8 Mon Sep 17 00:00:00 2001 From: Markus Unterwaditzer Date: Sat, 27 Jun 2026 23:30:59 +0200 Subject: [PATCH] feat: Move repo topic selector to tom-select (#12736) This is a proof of concept for replacing Formatic's buggy dropdown with something else. There are a bunch of open gitea issues on github discussing getting rid of Fomantic. Tested in Firefox/Chrome. Attached screenshots are before/after. The one with the input focused in orange, and tighter letter spacing, is after. If this is merged I plan to move the other selectors off of Fomantic. Alternative to https://codeberg.org/forgejo/forgejo/pulls/12731, also fixes #10118 Signed-off-by: Markus Unterwaditzer Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/12736 Reviewed-by: Gusted --- package-lock.json | 33 ++++++ package.json | 1 + routers/web/repo/view.go | 7 +- templates/repo/home.tmpl | 11 +- web_src/css/features/tom-select.css | 120 ++++++++++++++++++++ web_src/css/index.css | 1 + web_src/js/features/repo-home.js | 165 +++++++++++++--------------- web_src/js/modules/tom-select.ts | 34 ++++++ 8 files changed, 276 insertions(+), 96 deletions(-) create mode 100644 web_src/css/features/tom-select.css create mode 100644 web_src/js/modules/tom-select.ts diff --git a/package-lock.json b/package-lock.json index bb4f7715d8..a3112d347a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -71,6 +71,7 @@ "tinycolor2": "1.6.0", "tippy.js": "6.3.7", "toastify-js": "1.12.0", + "tom-select": "2.4.3", "tributejs": "5.1.3", "uint8-to-base64": "0.2.1", "vanilla-colorful": "0.7.2", @@ -2915,6 +2916,21 @@ "dev": true, "license": "MIT" }, + "node_modules/@orchidjs/sifter": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@orchidjs/sifter/-/sifter-1.1.0.tgz", + "integrity": "sha512-mYwHCfr736cIWWdhhSZvDbf90AKt2xyrJspKFC3qyIJG1LtrJeJunYEqCGG4Aq2ijENbc4WkOjszcvNaIAS/pQ==", + "license": "Apache-2.0", + "dependencies": { + "@orchidjs/unicode-variants": "^1.1.2" + } + }, + "node_modules/@orchidjs/unicode-variants": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@orchidjs/unicode-variants/-/unicode-variants-1.1.2.tgz", + "integrity": "sha512-5DobW1CHgnBROOEpFlEXytED5OosEWESFvg/VYmH0143oXcijYTprRYJTs+55HzGM4IqxiLFSuqEzu9mPNwVsA==", + "license": "Apache-2.0" + }, "node_modules/@oxc-project/types": { "version": "0.133.0", "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.133.0.tgz", @@ -15448,6 +15464,23 @@ "integrity": "sha512-HeMHCO9yLPvP9k0apGSdPUWrUbLnxUKNFzgUoZp1PHCLploIX/4DSQ7V8H25ef+h4iO9n0he7ImfcndnN6nDrQ==", "license": "MIT" }, + "node_modules/tom-select": { + "version": "2.4.3", + "resolved": "https://registry.npmjs.org/tom-select/-/tom-select-2.4.3.tgz", + "integrity": "sha512-MFFrMxP1bpnAMPbdvPCZk0KwYxLqhYZso39torcdoefeV/NThNyDu8dV96/INJ5XQVTL3O55+GqQ78Pkj5oCfw==", + "license": "Apache-2.0", + "dependencies": { + "@orchidjs/sifter": "^1.1.0", + "@orchidjs/unicode-variants": "^1.1.2" + }, + "engines": { + "node": "*" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/tom-select" + } + }, "node_modules/toml-eslint-parser": { "version": "0.12.0", "resolved": "https://registry.npmjs.org/toml-eslint-parser/-/toml-eslint-parser-0.12.0.tgz", diff --git a/package.json b/package.json index 596d977a3b..ecf2dbbcae 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,7 @@ "tinycolor2": "1.6.0", "tippy.js": "6.3.7", "toastify-js": "1.12.0", + "tom-select": "2.4.3", "tributejs": "5.1.3", "uint8-to-base64": "0.2.1", "vanilla-colorful": "0.7.2", diff --git a/routers/web/repo/view.go b/routers/web/repo/view.go index 09adfae069..8dfbcf10e1 100644 --- a/routers/web/repo/view.go +++ b/routers/web/repo/view.go @@ -954,7 +954,12 @@ func renderRepoTopics(ctx *context.Context) { ctx.ServerError("models.FindTopics", err) return } - ctx.Data["Topics"] = topics + + topicNames := make([]string, 0, len(topics)) + for _, t := range topics { + topicNames = append(topicNames, t.Name) + } + ctx.Data["Topics"] = topicNames } func prepareOpenWithEditorApps(ctx *context.Context) { diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl index 3f82f79c69..c3e626c95f 100644 --- a/templates/repo/home.tmpl +++ b/templates/repo/home.tmpl @@ -13,7 +13,7 @@
{{range .Topics}} - {{.Name}} + {{.}} {{end}} {{if and .Permission.IsAdmin (not .Repository.IsArchived)}} @@ -22,13 +22,8 @@ {{end}} {{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
-
- - {{range .Topics}} - {{/* keep the same layout as Fomantic UI generated labels */}} - {{.Name}}{{svg "octicon-x" 16 "delete icon"}} - {{end}} -
+
+
diff --git a/web_src/css/features/tom-select.css b/web_src/css/features/tom-select.css new file mode 100644 index 0000000000..11419ced7b --- /dev/null +++ b/web_src/css/features/tom-select.css @@ -0,0 +1,120 @@ +/* Copyright 2026 The Forgejo Authors. All rights reserved. + * SPDX-License-Identifier: GPL-3.0-or-later */ + +.ts-hidden-accessible { + border: 0; + clip: rect(0 0 0 0); + clip-path: inset(50%); + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + white-space: nowrap; +} + +.ts-wrapper { + position: relative; + background: var(--color-input-background); + border: 1px solid var(--color-input-border); + border-radius: var(--border-radius); + padding: 4px; + min-height: 40px; +} + +.ts-wrapper:hover { + border-color: var(--color-input-border-hover); +} + +.ts-wrapper.focus { + border-color: var(--color-primary); + outline: none; +} + +.ts-wrapper .ts-control { + background: transparent; + border: none; + padding: 1px 0; + display: flex; + flex-wrap: wrap; + gap: 4px; + align-items: center; +} + +.ts-wrapper .ts-control > .item { + background: var(--color-label-bg); + border: 1px solid var(--color-secondary); + border-radius: var(--border-radius); + padding: 2px 8px; + margin: 0; + color: var(--color-text); + display: inline-flex; + align-items: center; + gap: 4px; +} + +.ts-wrapper .ts-control > .item .remove { + border: none; + color: var(--color-text-light); + padding: 0; + margin-inline-start: 2px; + text-decoration: none; +} + +.ts-wrapper .ts-control > .item .remove:hover { + color: var(--color-text); + background: transparent; +} + +.ts-wrapper .ts-control > .item.invalid { + background: var(--color-error-bg); + border-color: var(--color-error-border); +} + +.ts-wrapper .ts-control input[type="text"] { + color: var(--color-input-text); + flex: 1; + min-width: 100px; + border: none; + background: transparent; + outline: none; + padding: 0; + line-height: 1.8; +} + +.ts-wrapper .ts-dropdown { + position: absolute; + top: 100%; + inset-inline: 0; + z-index: 100; + background: var(--color-body); + border: 1px solid var(--color-secondary); + border-radius: var(--border-radius); + box-shadow: 0 4px 8px var(--color-shadow); + margin-top: 4px; + max-block-size: 300px; + overflow-block: auto; +} + +.ts-wrapper .ts-dropdown .option { + padding: 8px 12px; + color: var(--color-text); +} + +.ts-wrapper .ts-dropdown .option.active, +.ts-wrapper .ts-dropdown .option:hover { + background: var(--color-hover); +} + +.ts-wrapper .ts-dropdown .option.selected { + background: var(--color-active); +} + +.ts-wrapper .ts-dropdown .create { + padding: 8px 12px; + color: var(--color-text-light); +} + +.ts-wrapper .ts-dropdown .create:hover { + background: var(--color-hover); + color: var(--color-text); +} diff --git a/web_src/css/index.css b/web_src/css/index.css index bf9247e178..f48620a715 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -47,6 +47,7 @@ @import "./features/codeeditor.css"; @import "./features/projects.css"; @import "./features/tribute.css"; +@import "./features/tom-select.css"; @import "./features/console.css"; @import "./markup/content.css"; diff --git a/web_src/js/features/repo-home.js b/web_src/js/features/repo-home.js index 3031432c93..faf1ee00ac 100644 --- a/web_src/js/features/repo-home.js +++ b/web_src/js/features/repo-home.js @@ -1,36 +1,95 @@ -import $ from 'jquery'; -import {stripTags} from '../utils.js'; -import {hideElem, queryElemChildren, showElem} from '../utils/dom.js'; -import {POST} from '../modules/fetch.js'; +import {hideElem, showElem} from '../utils/dom.js'; +import {GET, POST} from '../modules/fetch.js'; import {showErrorToast} from '../modules/toast.js'; +import {createTomSelect} from '../modules/tom-select.ts'; const {appSubUrl} = window.config; -export function initRepoTopicBar() { +export async function initRepoTopicBar() { const mgrBtn = document.getElementById('manage_topic'); if (!mgrBtn) return; const editDiv = document.getElementById('topic_edit'); const viewDiv = document.getElementById('repo-topics'); - const topicDropdown = editDiv.querySelector('.ui.dropdown'); + const inputEl = editDiv.querySelector('input[name=topics]'); let lastErrorToast; + let tomSelect; - mgrBtn.addEventListener('click', () => { + // Store original topics for cancel functionality + const getOriginalTopics = () => { + return Array.from(viewDiv.querySelectorAll('.repo-topic'), (el) => el.textContent.trim()); + }; + + mgrBtn.addEventListener('click', async () => { hideElem(viewDiv); showElem(editDiv); - topicDropdown.querySelector('input.search').focus(); + + // Lazy initialize Tom Select on first click + if (!tomSelect) { + const originalTopics = getOriginalTopics(); + + tomSelect = await createTomSelect(inputEl, { + plugins: ['remove_button'], + persist: false, + createOnBlur: true, + loadThrottle: 500, + valueField: 'topic_name', + labelField: 'topic_name', + searchField: 'topic_name', + items: originalTopics, + render: { + no_results: () => null, + }, + async load(query, callback) { + if (!query.length) return callback([]); + try { + const response = await GET(`${appSubUrl}/explore/topics/search?q=${encodeURIComponent(query)}`); + const data = await response.json(); + // Filter out already selected topics + const current = this.getValue(); + const filtered = (data.topics || []).filter((t) => !current.includes(t.topic_name)); + callback(filtered); + } catch { + callback([]); + } + }, + create(input) { + return {topic_name: input.toLowerCase().trim()}; + }, + }); + } + + tomSelect.focus(); }); document.querySelector('#cancel_topic_edit').addEventListener('click', () => { lastErrorToast?.hideToast(); hideElem(editDiv); showElem(viewDiv); + + // Reset to original values + if (tomSelect) { + const originalTopics = getOriginalTopics(); + tomSelect.clear(true); + for (const topic of originalTopics) { + tomSelect.addItem(topic, true); + } + } + mgrBtn.focus(); }); document.getElementById('save_topic').addEventListener('click', async (e) => { lastErrorToast?.hideToast(); - const topics = editDiv.querySelector('input[name=topics]').value; + + // Clear any previous invalid state + if (tomSelect) { + for (const item of tomSelect.wrapper.querySelectorAll('.item.invalid')) { + item.classList.remove('invalid'); + } + } + + const topics = inputEl.value; const data = new FormData(); data.append('topics', topics); @@ -40,7 +99,10 @@ export function initRepoTopicBar() { if (response.ok) { const responseData = await response.json(); if (responseData.status === 'ok') { - queryElemChildren(viewDiv, '.repo-topic', (el) => el.remove()); + // Update view with new topics + for (const el of viewDiv.querySelectorAll('.repo-topic')) { + el.remove(); + } if (topics.length) { const topicArray = topics.split(','); topicArray.sort(); @@ -60,88 +122,17 @@ export function initRepoTopicBar() { // how to test: input topic like " invalid topic " (with spaces), and select it from the list, then "Save" const responseData = await response.json(); lastErrorToast = showErrorToast(responseData.message, {duration: 5000}); - if (responseData.invalidTopics && responseData.invalidTopics.length > 0) { + if (responseData.invalidTopics?.length > 0) { const {invalidTopics} = responseData; - const topicLabels = queryElemChildren(topicDropdown, 'a.ui.label'); - for (const [index, value] of topics.split(',').entries()) { + // Mark invalid topics in Tom Select + const items = tomSelect.wrapper.querySelectorAll('.ts-control .item'); + const values = topics.split(','); + for (const [index, value] of values.entries()) { if (invalidTopics.includes(value)) { - topicLabels[index].classList.remove('green'); - topicLabels[index].classList.add('red'); + items[index]?.classList.add('invalid'); } } } } }); - - $(topicDropdown).dropdown({ - allowAdditions: true, - forceSelection: false, - fullTextSearch: 'exact', - fields: {name: 'description', value: 'data-value'}, - saveRemoteData: false, - label: { - transition: 'horizontal flip', - duration: 200, - variation: false, - }, - apiSettings: { - url: `${appSubUrl}/explore/topics/search?q={query}`, - throttle: 500, - cache: false, - onResponse(res) { - const formattedResponse = { - success: false, - results: [], - }; - const query = stripTags(this.urlData.query.trim()); - let found_query = false; - const current_topics = []; - for (const el of queryElemChildren(topicDropdown, 'a.ui.label.visible')) { - current_topics.push(el.getAttribute('data-value')); - } - - if (res.topics) { - let found = false; - for (let i = 0; i < res.topics.length; i++) { - // skip currently added tags - if (current_topics.includes(res.topics[i].topic_name)) { - continue; - } - - if (res.topics[i].topic_name.toLowerCase() === query.toLowerCase()) { - found_query = true; - } - formattedResponse.results.push({description: res.topics[i].topic_name, 'data-value': res.topics[i].topic_name}); - found = true; - } - formattedResponse.success = found; - } - - if (query.length > 0 && !found_query) { - formattedResponse.success = true; - formattedResponse.results.unshift({description: query, 'data-value': query}); - } else if (query.length > 0 && found_query) { - formattedResponse.results.sort((a, b) => { - if (a.description.toLowerCase() === query.toLowerCase()) return -1; - if (b.description.toLowerCase() === query.toLowerCase()) return 1; - if (a.description > b.description) return -1; - if (a.description < b.description) return 1; - return 0; - }); - } - - return formattedResponse; - }, - }, - onLabelCreate(value) { - value = value.toLowerCase().trim(); - this.attr('data-value', value).contents().first().replaceWith(value); - return $(this); - }, - onAdd(addedValue, _addedText, $addedChoice) { - addedValue = addedValue.toLowerCase().trim(); - $addedChoice[0].setAttribute('data-value', addedValue); - $addedChoice[0].setAttribute('data-text', addedValue); - }, - }); } diff --git a/web_src/js/modules/tom-select.ts b/web_src/js/modules/tom-select.ts new file mode 100644 index 0000000000..5ec51241dc --- /dev/null +++ b/web_src/js/modules/tom-select.ts @@ -0,0 +1,34 @@ +// Copyright 2026 The Forgejo Authors. All rights reserved. +// SPDX-License-Identifier: GPL-3.0-or-later +import type TomSelectType from 'tom-select'; +import type {TomSettings} from 'tom-select/dist/esm/types/index.ts'; + +export async function createTomSelect(el: HTMLInputElement, opts: Partial = {}): Promise { + const {default: TomSelect} = await import(/* webpackChunkName: "tom-select" */'tom-select'); + const ts = new TomSelect(el, { + ...opts, + onItemAdd(...args: unknown[]) { + ts.setTextboxValue(''); + opts.onItemAdd?.apply(this, args); + }, + }); + + // Handle comma key to create item immediately + ts.control_input.addEventListener('keydown', (e: KeyboardEvent) => { + if (e.key === ',') { + e.preventDefault(); + const value = ts.inputValue().trim(); + if (value) { + // Use addItem if option exists, otherwise createItem + if (ts.options[value]) { + ts.addItem(value); + } else { + ts.createItem(value); + } + ts.setTextboxValue(''); + } + } + }); + + return ts; +}