From a3fab92e3dd68b0b70e07b8d3033cb63c576d8e8 Mon Sep 17 00:00:00 2001
From: shmyga <shmyga.z@gmail.com>
Date: Thu, 2 Jul 2026 02:43:43 +0300
Subject: [PATCH] feat(view): fix index page

---
 gallery/easel/route/api/__init__.py           |  2 +-
 gallery/easel/route/api/schedule.py           |  2 +-
 gallery/easel/route/api/weather.py            |  2 +-
 .../route/view/common/templates/base.html     | 10 +++---
 .../route/view/root/templates/root_index.html | 33 +++++++++++--------
 static/src/components.ts                      |  4 +--
 static/src/lib/bootstrap-icons.scss           |  3 ++
 static/src/mobile.scss                        | 15 +++++++--
 static/src/schedule/schedule.ts               |  5 +--
 static/src/weather/weather.ts                 |  3 +-
 10 files changed, 50 insertions(+), 29 deletions(-)

diff --git a/gallery/easel/route/api/__init__.py b/gallery/easel/route/api/__init__.py
index dc262dd..4c563a1 100644
--- a/gallery/easel/route/api/__init__.py
+++ b/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)
diff --git a/gallery/easel/route/api/schedule.py b/gallery/easel/route/api/schedule.py
index fd45f93..a0dc8b2 100644
--- a/gallery/easel/route/api/schedule.py
+++ b/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")
diff --git a/gallery/easel/route/api/weather.py b/gallery/easel/route/api/weather.py
index ba61453..b00095b 100644
--- a/gallery/easel/route/api/weather.py
+++ b/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")
diff --git a/gallery/easel/route/view/common/templates/base.html b/gallery/easel/route/view/common/templates/base.html
index f588bc3..5f4a917 100644
--- a/gallery/easel/route/view/common/templates/base.html
+++ b/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">
-      Created by shmyga &middot; &copy; 2026
+    <footer class="app-footer pt-5 my-5 text-muted border-top">
+      <div class="d-flex justify-content-between">
+        <span>Created by shmyga &middot; &copy; 2026</span>
+        <span>v{{ version }}</span>
+      </div>
     </footer>
     {% endif %}
   </div>
diff --git a/gallery/easel/route/view/root/templates/root_index.html b/gallery/easel/route/view/root/templates/root_index.html
index bd47e96..12f0fd9 100644
--- a/gallery/easel/route/view/root/templates/root_index.html
+++ b/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}}"
-     class="list-group-item list-group-item-action px-4">
-    <app-link href="{{section.link}}"
-              icon="{{section.icon}}">
-      {{_(section.title)}}
-    </app-link>
-  </a>
+  <app-link href="{{section.link}}"
+            icon="{{section.icon}}"
+            class="list-group-item list-group-item-action">
+    {{_(section.title)}}
+  </app-link>
   {% endfor %}
 </div>
-<hr class="col-3 col-md-2 mb-5">
 <h1>{{_("Docs")}}</h1>
-<a href="/docs"
-   target="_blank">
-  <h4>Swagger</h4>
-</a>
+<div class="list-group mb-3">
+  <app-link href="/docs"
+            target="_blank"
+            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 %}
\ No newline at end of file
diff --git a/static/src/components.ts b/static/src/components.ts
index 2f44cc2..b3a4936 100644
--- a/static/src/components.ts
+++ b/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>
diff --git a/static/src/lib/bootstrap-icons.scss b/static/src/lib/bootstrap-icons.scss
index 40143d1..3dfbd0a 100644
--- a/static/src/lib/bootstrap-icons.scss
+++ b/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);
+  }
 }
diff --git a/static/src/mobile.scss b/static/src/mobile.scss
index 8be9136..ca265f5 100644
--- a/static/src/mobile.scss
+++ b/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); 
-      margin-bottom: map-get($spacers, 1); 
+      padding-bottom: map-get($spacers, $default-space);
+      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;
       }
     }
   }
diff --git a/static/src/schedule/schedule.ts b/static/src/schedule/schedule.ts
index bacd2ad..dfbb233 100644
--- a/static/src/schedule/schedule.ts
+++ b/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);
@@ -107,4 +108,4 @@ declare global {
 
 window.scheduleChannelStorage = new ScheduleChannelStorage();
 window.scheduleChannelManager = new ScheduleChannelManager();
-console.log("ok");
\ No newline at end of file
+console.log("ok");
diff --git a/static/src/weather/weather.ts b/static/src/weather/weather.ts
index 878fae3..621f991 100644
--- a/static/src/weather/weather.ts
+++ b/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);