Remove dependency on tail select component and instead role my own to minmise bundle size

templates/calendar.html

@@ -40,14 +40,22 @@
         </div>
 
         <div class="mr-4">
-            <select name="view" hx-get="{{ url_for('calendar.get_calendar', person_id=person_id) }}"
-                hx-target="#container" hx-vals='{"date": "{{ date }}"}' hx-push-url="true"
-                _="init js(me) tail.select(me, {}) end" class="h-10 invisible">
-                <option value="month" {% if view=='month' %}selected{% endif %}>Month</option>
-                <option value="year" {% if view=='year' %}selected{% endif %}>Year</option>
-                <option value="notes">Notes</option>
-                <option value="overview">Overview</option>
-            </select>
+            {{ render_partial('partials/custom_select.html',
+            name='view',
+            options=[
+            {'id': 'month', 'name': 'Month', 'selected': (view == 'month')},
+            {'id': 'year', 'name': 'Year', 'selected': (view == 'year')},
+            {'id': 'notes', 'name': 'Notes', 'selected': (view == 'notes')},
+            {'id': 'overview', 'name': 'Overview', 'selected': (view == 'overview')}
+            ],
+            multiple=false,
+            search=false,
+            placeholder='View',
+            hx_get=url_for('calendar.get_calendar', person_id=person_id),
+            hx_target='#container',
+            hx_vals='{"date": "' + date.strftime('%Y-%m-%d') + '"}',
+            hx_push_url=true)
+            }}
         </div>
     </div>