feat(view): fix index page

gallery/easel/route/api/__init__.py

@@ -2,6 +2,6 @@ from fastapi import APIRouter
 
 from . import schedule, weather
 
-router = APIRouter(prefix="/api", tags=["API"])
+router = APIRouter(prefix="/api")
 router.include_router(weather.router)
 router.include_router(schedule.router)

gallery/easel/route/api/schedule.py

@@ -7,7 +7,7 @@ from gallery.easel.depends.schedule import ScheduleApiDepends
 from gallery.sketch.schedule.api import ScheduleApi
 from gallery.sketch.schedule.model import Channel, Schedule
 
-router = APIRouter(prefix="/schedule")
+router = APIRouter(prefix="/schedule", tags=["Schedule"])
 
 
 @router.get("/providers")

gallery/easel/route/api/weather.py

@@ -7,7 +7,7 @@ from gallery.easel.depends.weather import WeatherApiDepends
 from gallery.sketch.weather.api import WeatherApi
 from gallery.sketch.weather.model import Location, WeatherResponse
 
-router = APIRouter(prefix="/weather")
+router = APIRouter(prefix="/weather", tags=["Weather"])
 
 
 @router.get("/providers")

gallery/easel/route/view/common/templates/base.html

@@ -30,9 +30,6 @@
         {% block header %}{% endblock %}
       </div>
       <ul class="navbar-nav flex-row flex-wrap ms-md-auto">
-        <li class="nav-item me-2">
-          <span class="nav-link">{{ version }}</span>
-        </li>
         <li class="nav-item dropdown">
           <button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
                   id="bd-language"
@@ -115,8 +112,11 @@
       {% block content %}{% endblock %}
     </main>
     {% if not is_widget %}
-    <footer class="pt-5 my-5 text-muted border-top">
+    <footer class="app-footer pt-5 my-5 text-muted border-top">
-      Created by shmyga &middot; &copy; 2026
+      <div class="d-flex justify-content-between">
+        <span>Created by shmyga &middot; &copy; 2026</span>
+        <span>v{{ version }}</span>
+      </div>
     </footer>
     {% endif %}
   </div>

gallery/easel/route/view/root/templates/root_index.html

@@ -6,21 +6,28 @@
 
 {% block content %}
 <h1>{{_("View")}}</h1>
-<div class="list-group mb-5">
+<div class="list-group mb-3">
   {% for section in sections %}
-  <a href="{{section.link}}"
+  <app-link href="{{section.link}}"
-     class="list-group-item list-group-item-action px-4">
+            icon="{{section.icon}}"
-    <app-link href="{{section.link}}"
+            class="list-group-item list-group-item-action">
-              icon="{{section.icon}}">
+    {{_(section.title)}}
-      {{_(section.title)}}
+  </app-link>
-    </app-link>
-  </a>
   {% endfor %}
 </div>
-<hr class="col-3 col-md-2 mb-5">
 <h1>{{_("Docs")}}</h1>
-<a href="/docs"
+<div class="list-group mb-3">
-   target="_blank">
+  <app-link href="/docs"
-  <h4>Swagger</h4>
+            target="_blank"
-</a>
+            icon="file-earmark-text"
+            class="list-group-item list-group-item-action">
+    Swagger UI
+  </app-link>
+  <app-link href="/redoc"
+            target="_blank"
+            icon="file-earmark-text"
+            class="list-group-item list-group-item-action">
+    ReDoc
+  </app-link>
+</div>
 {% endblock %}

static/src/components.ts

@@ -1,10 +1,10 @@
 class AppLinkElement extends HTMLElement {
-  static observedAttributes = ["icon", "href"];
+  static observedAttributes = ["icon", "href", "target"];
 
   constructor() {
     super();
     this.innerHTML = `
-    <a href="${this.getAttribute("href")}"
+    <a href="${this.getAttribute("href")}" target="${this.getAttribute("target") || ""}"
       class="d-flex align-items-center text-body text-decoration-none">
       <span class="fs-4">
         <span class="bi bi-${this.getAttribute("icon")} me-1"></span>

static/src/lib/bootstrap-icons.scss

@@ -42,4 +42,7 @@
   &.bi-arrow-up-square {
     mask-image: url(bootstrap-icons/icons/arrow-up-square.svg);
   }
+  &.bi-file-earmark-text {
+    mask-image: url(bootstrap-icons/icons/file-earmark-text.svg);
+  }
 }

static/src/mobile.scss

@@ -1,13 +1,17 @@
 @import "./lib/bootstrap";
 
+$default-space: 2;
+
 @include media-breakpoint-down(md) {
   .app-header {
     flex-direction: column;
+    padding-bottom: map-get($spacers, $default-space) !important;
+    margin-bottom: map-get($spacers, $default-space) !important;
 
     > .link-list {
       border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
-      padding-bottom: map-get($spacers, 1); 
+      padding-bottom: map-get($spacers, $default-space);
-      margin-bottom: map-get($spacers, 1); 
+      margin-bottom: map-get($spacers, $default-space);
       flex-direction: column;
       gap: 0;
 
@@ -22,12 +26,17 @@
     }
   }
 
+  .app-footer {
+    padding-top: map-get($spacers, $default-space) !important;
+    margin-top: map-get($spacers, $default-space) !important;
+  }
+
   .navbar-nav {
     flex-direction: column !important;
 
     > .nav-item {
       .btn {
-        padding: 0.125rem !important;
+        padding: map-get($spacers, 1) !important;
       }
     }
   }

static/src/schedule/schedule.ts

@@ -56,7 +56,7 @@ class ScheduleChannelElement extends HTMLElement {
     this.channel = JSON.parse(this.getAttribute("channel") || "{}");
     this.innerHTML = `
     <a href="${this.channel?.provider}/${this.channel?.id}"
-      class="list-group-item list-group-item-action px-4 d-flex justify-content-between align-items-start">
+      class="d-flex justify-content-between align-items-start  text-decoration-none">
       <span>
         <span class="text-primary">${this.channel?.name}</span>
       </span>
@@ -67,6 +67,7 @@ class ScheduleChannelElement extends HTMLElement {
         </span>
       </span>
     </a>`;
+    this.classList = "list-group-item list-group-item-action";
     this.addEventListener("click", this.handleClick);
     if (this.hasAttribute("removable")) {
       this.querySelector<HTMLElement>("[data-remove]")?.addEventListener("click", this.handleRemoveClick);

static/src/weather/weather.ts

@@ -60,7 +60,7 @@ class WeatherLocationElement extends HTMLElement {
     this.location = JSON.parse(this.getAttribute("location") || "{}");
     this.innerHTML = `
     <a href="${this.location?.provider}/${this.location?.id}"
-      class="list-group-item list-group-item-action px-4 d-flex justify-content-between align-items-start">
+      class="d-flex justify-content-between align-items-start text-decoration-none">
       <span>
         <span class="fi fi-${this.location?.country_code} me-1"></span>
         <span class="text-primary">${this.location?.name}</span>
@@ -75,6 +75,7 @@ class WeatherLocationElement extends HTMLElement {
         </span>
       </span>
     </a>`;
+    this.classList = 'list-group-item list-group-item-action';
     this.addEventListener("click", this.handleClick);
     if (this.hasAttribute("removable")) {
       this.querySelector<HTMLElement>("[data-remove]")?.addEventListener("click", this.handleRemoveClick);