Moved projects selector to a Stimulus controller

app/javascript/application.js

@@ -4,7 +4,3 @@ import "controllers"
 
 import "trix"
 import "@rails/actiontext"
-
-import {ProjectsSelector} from 'elements/project_selector'
-
-customElements.define('projects-selector', ProjectsSelector)

app/javascript/controllers/projects_selector_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from '@hotwired/stimulus'
+
+class ProjectsSelectorController extends Controller {
+    static values = {
+        frame: String
+    }
+
+    changeProject(event) {
+        const href = event.target.value
+        Turbo.visit(href, {action: 'advance', frame: this.frameValue})
+    }
+}
+
+export default ProjectsSelectorController

app/javascript/elements/project_selector.js

@@ -1,40 +0,0 @@
-import {html, css, LitElement} from 'lit'
-
-export class ProjectsSelector extends LitElement {
-    static style=css`
-    slot {
-        display: none;
-    }
-    `
-
-    static properties = {
-        frame: {type: String},
-        _options: {type: Array, state: true}
-    }
-
-    render() {
-        return html`
-            <slot @slotchange=${this._handleUpdatedElements} style="display: none"></slot>
-            <select @change=${this._handleSelect}>
-                ${(this._options || []).map(option => this._renderOption(option))}
-            </select>
-        `
-    }
-
-    _handleUpdatedElements(e) {
-        const childNodes = e.target.assignedElements({flatten: true})
-        this._options = childNodes.map(e => {
-            return {name: e.innerText, href: e.getAttribute('href'), selected: !!e.getAttribute('selected')}
-        })
-    }
-
-    _renderOption(option) {
-        const {name, href, selected} = option
-        return html`<option value="${href}" ?selected="${selected}">${name}</option>`
-    }
-
-    _handleSelect(e) {
-        const href = e.target.value
-        Turbo.visit(href, {action: 'advance', frame: this.frame})
-    }
-}

app/views/application/_projects_selector.html.erb

@@ -1,7 +1,9 @@
 <% if current_project %>
-    <projects-selector>
+    <section data-controller="projects-selector">
+        <select data-action="projects-selector#changeProject">
             <% all_projects.each do |project| %>
-            <%= tag.option(project.name, href: project_path(project), selected: current_project == project) %>
+                <%= tag.option(project.name, value: project_path(project), selected: current_project == project) %>
             <% end %>
-    </projects-selector>
+        </select>
+    </section>
 <% end %>