Merge branch 'dev' into feature/blog

THAT WAS PAINFUL!

.air.toml

@@ -7,14 +7,14 @@ tmp_dir = "tmp"
   bin = "./tmp/main"
   cmd = "go build -o ./tmp/main ."
   delay = 1000
-  exclude_dir = ["admin/static", "admin\\static", "public", "uploads", "test", "db", "res"]
+  exclude_dir = ["uploads", "test", "db", "res"]
   exclude_file = []
   exclude_regex = ["_test.go"]
   exclude_unchanged = false
   follow_symlink = false
   full_bin = ""
   include_dir = []
-  include_ext = ["go", "tpl", "tmpl", "html"]
+  include_ext = ["go", "tpl", "tmpl", "html", "css"]
   include_file = []
   kill_delay = "0s"
   log = "build-errors.log"

.forgejo/workflows/push-prod.yaml

@@ -0,0 +1,50 @@
+on:
+  push:
+    branches:
+      - main
+
+env:
+  EXEC: arimelody-web
+  REMOTE: ${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }}
+  PORT: ${{ secrets.SSH_PORT }}
+
+jobs:
+  deploy:
+    runs-on: docker
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Go
+        uses: actions/setup-go@v4
+        with:
+          go-version: '^1.25.1'
+
+      - name: Run tests
+        run: go test -v ./model
+
+      - name: Build binary
+        run: make build
+
+      - name: Bundle tarball
+        run: make bundle
+
+      - name: Set up SSH keys
+        uses: webfactory/ssh-agent@v0.9.0
+        with:
+          ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}
+
+      - name: Copy to production server
+        run: |
+          ssh-keyscan -p $PORT ${{ secrets.SSH_HOST }} >> ~/.ssh/known_hosts
+          scp -P $PORT ./$EXEC.tar.gz $REMOTE:~/
+
+      - name: Restart production
+        run: |
+          ssh -o StrictHostKeyChecking=no $REMOTE -p $PORT << EOT
+            cd ${{ secrets.DEPLOY_DIR }}
+            tar xzf ~/$EXEC.tar.gz
+            /bin/bash ~/restart.sh
+            rm ~/$EXEC.tar.gz
+          EOT
+

Makefile

@@ -2,11 +2,11 @@ EXEC = arimelody-web
 
 .PHONY: $(EXEC)
 
-$(EXEC):
+build:
 	GOOS=linux GOARCH=amd64 go build -o $(EXEC)
 
-bundle: $(EXEC)
+bundle: build
-	tar czf $(EXEC).tar.gz $(EXEC) admin/components/ admin/views/ admin/static/ views/ public/ schema-migration/
+	tar czf $(EXEC).tar.gz --exclude ".DS_Store" $(EXEC) admin/static/ public/
 
 clean:
 	rm $(EXEC) $(EXEC).tar.gz

admin/account/accounthttp.go

@@ -7,6 +7,7 @@ import (
 	"net/url"
 	"os"
 
+	"arimelody-web/admin/core"
 	"arimelody-web/admin/templates"
 	"arimelody-web/controller"
 	"arimelody-web/log"
@@ -20,12 +21,12 @@ func Handler(app *model.AppState) http.Handler {
 
     mux.Handle("/", accountIndexHandler(app))
 
-    mux.Handle("/totp-setup", totpSetupHandler(app))
+    mux.Handle("/account/totp-setup", totpSetupHandler(app))
-    mux.Handle("/totp-confirm", totpConfirmHandler(app))
+    mux.Handle("/account/totp-confirm", totpConfirmHandler(app))
-    mux.Handle("/totp-delete/", http.StripPrefix("/totp-delete", totpDeleteHandler(app)))
+    mux.Handle("/account/totp-delete", http.StripPrefix("/totp-delete", totpDeleteHandler(app)))
 
-    mux.Handle("/password", changePasswordHandler(app))
+    mux.Handle("/account/password", changePasswordHandler(app))
-    mux.Handle("/delete", deleteAccountHandler(app))
+    mux.Handle("/account/delete", deleteAccountHandler(app))
 
     return mux
 }
@@ -47,7 +48,7 @@ func accountIndexHandler(app *model.AppState) http.Handler {
             }
 
             accountResponse struct {
-                Session *model.Session
+                core.AdminPageData
                 TOTPs []TOTP
             }
         )
@@ -68,7 +69,7 @@ func accountIndexHandler(app *model.AppState) http.Handler {
         session.Error = sessionError
 
         err = templates.AccountTemplate.Execute(w, accountResponse{
-            Session: session,
+            AdminPageData: core.AdminPageData{ Path: r.URL.Path, Session: session },
             TOTPs: totps,
         })
         if err != nil {
@@ -172,7 +173,7 @@ func deleteAccountHandler(app *model.AppState) http.Handler {
 }
 
 type totpConfirmData struct {
-    Session *model.Session
+    core.AdminPageData
     TOTP *model.TOTP
     NameEscaped string
     QRBase64Image string
@@ -181,13 +182,9 @@ type totpConfirmData struct {
 func totpSetupHandler(app *model.AppState) http.Handler {
     return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
         if r.Method == http.MethodGet {
-            type totpSetupData struct {
-                Session *model.Session
-            }
-
             session := r.Context().Value("session").(*model.Session)
 
-            err := templates.TotpSetupTemplate.Execute(w, totpSetupData{ Session: session })
+            err := templates.TOTPSetupTemplate.Execute(w, core.AdminPageData{ Path: "/account", Session: session })
             if err != nil {
                 fmt.Printf("WARN: Failed to render TOTP setup page: %s\n", err)
                 http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
@@ -224,7 +221,9 @@ func totpSetupHandler(app *model.AppState) http.Handler {
         if err != nil {
             fmt.Printf("WARN: Failed to create TOTP method: %s\n", err)
             controller.SetSessionError(app.DB, session, "Something went wrong. Please try again.")
-            err := templates.TotpSetupTemplate.Execute(w, totpConfirmData{ Session: session })
+            err := templates.TOTPSetupTemplate.Execute(w, totpConfirmData{
+                AdminPageData: core.AdminPageData{ Path: r.URL.Path, Session: session },
+            })
             if err != nil {
                 fmt.Printf("WARN: Failed to render TOTP setup page: %s\n", err)
                 http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
@@ -238,8 +237,8 @@ func totpSetupHandler(app *model.AppState) http.Handler {
             fmt.Fprintf(os.Stderr, "WARN: Failed to generate TOTP QR code: %v\n", err)
         }
 
-        err = templates.TotpConfirmTemplate.Execute(w, totpConfirmData{
+        err = templates.TOTPConfirmTemplate.Execute(w, totpConfirmData{
-            Session: session,
+            AdminPageData: core.AdminPageData{ Path: r.URL.Path, Session: session },
             TOTP: &totp,
             NameEscaped: url.PathEscape(totp.Name),
             QRBase64Image: qrBase64Image,
@@ -270,11 +269,6 @@ func totpConfirmHandler(app *model.AppState) http.Handler {
             http.Error(w, http.StatusText(http.StatusBadRequest), http.StatusBadRequest)
             return
         }
-        code := r.FormValue("totp")
-        if len(code) != controller.TOTP_CODE_LENGTH {
-            http.Error(w, http.StatusText(http.StatusBadRequest), http.StatusBadRequest)
-            return
-        }
 
         totp, err := controller.GetTOTP(app.DB, session.Account.ID, name)
         if err != nil {
@@ -294,23 +288,22 @@ func totpConfirmHandler(app *model.AppState) http.Handler {
             fmt.Fprintf(os.Stderr, "WARN: Failed to generate TOTP QR code: %v\n", err)
         }
 
+        code := r.FormValue("totp")
         confirmCode := controller.GenerateTOTP(totp.Secret, 0)
-        if code != confirmCode {
+        confirmCodeOffset := controller.GenerateTOTP(totp.Secret, 1)
-            confirmCodeOffset := controller.GenerateTOTP(totp.Secret, 1)
+        if len(code) != controller.TOTP_CODE_LENGTH || (code != confirmCode && code != confirmCodeOffset) {
-            if code != confirmCodeOffset {
+            session.Error = sql.NullString{ Valid: true, String: "Incorrect TOTP code. Please try again." }
-                session.Error = sql.NullString{ Valid: true, String: "Incorrect TOTP code. Please try again." }
+            err = templates.TOTPConfirmTemplate.Execute(w, totpConfirmData{
-                err = templates.TotpConfirmTemplate.Execute(w, totpConfirmData{
+                AdminPageData: core.AdminPageData{ Path: r.URL.Path, Session: session },
-                    Session: session,
+                TOTP: totp,
-                    TOTP: totp,
+                NameEscaped: url.PathEscape(totp.Name),
-                    NameEscaped: url.PathEscape(totp.Name),
+                QRBase64Image: qrBase64Image,
-                    QRBase64Image: qrBase64Image,
+            })
-                })
+            if err != nil {
-                if err != nil {
+                fmt.Fprintf(os.Stderr, "WARN: Failed to render TOTP setup page: %v\n", err)
-                    fmt.Fprintf(os.Stderr, "WARN: Failed to render TOTP setup page: %v\n", err)
+                http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
-                    http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
-                }
-                return
             }
+            return
         }
 
         err = controller.ConfirmTOTP(app.DB, session.Account.ID, name)
@@ -331,18 +324,23 @@ func totpConfirmHandler(app *model.AppState) http.Handler {
 
 func totpDeleteHandler(app *model.AppState) http.Handler {
     return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-        if r.Method != http.MethodGet {
+        if r.Method != http.MethodPost {
             http.NotFound(w, r)
             return
         }
 
-        if len(r.URL.Path) < 2 {
+        session := r.Context().Value("session").(*model.Session)
+
+        err := r.ParseForm()
+        if err != nil {
+            http.Error(w, http.StatusText(http.StatusBadRequest), http.StatusBadRequest)
+            return
+        }
+        name := r.FormValue("totp-name")
+        if len(name) == 0 {
             http.Error(w, http.StatusText(http.StatusBadRequest), http.StatusBadRequest)
             return
         }
-        name := r.URL.Path[1:]
-
-        session := r.Context().Value("session").(*model.Session)
 
         totp, err := controller.GetTOTP(app.DB, session.Account.ID, name)
         if err != nil {

admin/auth/authhttp.go

@@ -1,6 +1,7 @@
 package auth
 
 import (
+	"arimelody-web/admin/core"
 	"arimelody-web/admin/templates"
 	"arimelody-web/controller"
 	"arimelody-web/log"
@@ -135,12 +136,8 @@ func LoginHandler(app *model.AppState) http.Handler {
 
         session := r.Context().Value("session").(*model.Session)
 
-        type loginData struct {
-            Session *model.Session
-        }
-
         render := func() {
-            err := templates.LoginTemplate.Execute(w, loginData{ Session: session })
+            err := templates.LoginTemplate.Execute(w, core.AdminPageData{ Session: session })
             if err != nil {
                 fmt.Fprintf(os.Stderr, "WARN: Error rendering admin login page: %s\n", err)
                 http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
@@ -251,12 +248,8 @@ func LoginTOTPHandler(app *model.AppState) http.Handler {
             return
         }
 
-        type loginTOTPData struct {
-            Session *model.Session
-        }
-
         render := func() {
-            err := templates.LoginTOTPTemplate.Execute(w, loginTOTPData{ Session: session })
+            err := templates.LoginTOTPTemplate.Execute(w, core.AdminPageData{ Session: session })
             if err != nil {
                 fmt.Fprintf(os.Stderr, "WARN: Failed to render login TOTP page: %v\n", err)
                 http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)

admin/core/structs.go

@@ -0,0 +1,8 @@
+package core
+
+import "arimelody-web/model"
+
+type AdminPageData struct {
+    Path    string
+    Session *model.Session
+}

admin/http.go

@@ -4,7 +4,6 @@ import (
 	"fmt"
 	"net/http"
 	"os"
-	"path/filepath"
 
 	"arimelody-web/admin/account"
 	"arimelody-web/admin/auth"
@@ -14,6 +13,7 @@ import (
 	"arimelody-web/admin/templates"
 	"arimelody-web/controller"
 	"arimelody-web/model"
+	"arimelody-web/view"
 )
 
 func Handler(app *model.AppState) http.Handler {
@@ -28,7 +28,20 @@ func Handler(app *model.AppState) http.Handler {
     mux.Handle("/logs", core.RequireAccount(logs.Handler(app)))
     mux.Handle("/account/", core.RequireAccount(http.StripPrefix("/account", account.Handler(app))))
 
-    mux.Handle("/static/", http.StripPrefix("/static", staticHandler()))
+    mux.Handle("/static/", http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+        if r.URL.Path == "/static/admin.css" {
+            http.ServeFile(w, r, "./admin/static/admin.css")
+            return
+        }
+        if r.URL.Path == "/static/admin.js" {
+            http.ServeFile(w, r, "./admin/static/admin.js")
+            return
+        }
+        core.RequireAccount(
+            http.StripPrefix("/static",
+            view.ServeFiles("./admin/static"))).ServeHTTP(w, r)
+        }))
+
     mux.Handle("/", core.RequireAccount(AdminIndexHandler(app)))
 
     // response wrapper to make sure a session cookie exists
@@ -44,21 +57,63 @@ func AdminIndexHandler(app *model.AppState) http.Handler {
 
         session := r.Context().Value("session").(*model.Session)
 
-        latestRelease, err := controller.GetLatestRelease(app.DB)
+        releases, err := controller.GetAllReleases(app.DB, false, 3, true)
         if err != nil {
-            fmt.Fprintf(os.Stderr, "WARN: Failed to pull latest release: %s\n", err)
+            fmt.Fprintf(os.Stderr, "WARN: Failed to pull releases: %s\n", err)
+            http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
+            return
+        }
+        releaseCount, err := controller.GetReleaseCount(app.DB, false)
+        if err != nil {
+            fmt.Fprintf(os.Stderr, "WARN: Failed to pull releases count: %s\n", err)
+            http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
+            return
+        }
+
+        artists, err := controller.GetAllArtists(app.DB)
+        if err != nil {
+            fmt.Fprintf(os.Stderr, "WARN: Failed to pull artists: %s\n", err)
+            http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
+            return
+        }
+        artistCount, err := controller.GetArtistCount(app.DB)
+        if err != nil {
+            fmt.Fprintf(os.Stderr, "WARN: Failed to pull artist count: %s\n", err)
+            http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
+            return
+        }
+
+        tracks, err := controller.GetOrphanTracks(app.DB)
+        if err != nil {
+            fmt.Fprintf(os.Stderr, "WARN: Failed to pull orphan tracks: %s\n", err)
+            http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
+            return
+        }
+        trackCount, err := controller.GetTrackCount(app.DB)
+        if err != nil {
+            fmt.Fprintf(os.Stderr, "WARN: Failed to pull track count: %s\n", err)
             http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
             return
         }
 
         type IndexData struct {
-            Session         *model.Session
+            core.AdminPageData
-            LatestRelease   *model.Release
+            Releases        []*model.Release
+            ReleaseCount    int
+            Artists         []*model.Artist
+            ArtistCount     int
+            Tracks          []*model.Track
+            TrackCount      int
         }
 
         err = templates.IndexTemplate.Execute(w, IndexData{
-            Session: session,
+            AdminPageData: core.AdminPageData{ Path: r.URL.Path, Session: session },
-            LatestRelease: latestRelease,
+            Releases: releases,
+            ReleaseCount: releaseCount,
+            Artists: artists,
+            ArtistCount: artistCount,
+            Tracks: tracks,
+            TrackCount: trackCount,
         })
         if err != nil {
             fmt.Fprintf(os.Stderr, "WARN: Failed to render admin index: %s\n", err)
@@ -68,23 +123,23 @@ func AdminIndexHandler(app *model.AppState) http.Handler {
     })
 }
 
+/*
+//go:embed "static"
+var staticFS embed.FS
+
 func staticHandler() http.Handler {
     return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-        info, err := os.Stat(filepath.Join("admin", "static", filepath.Clean(r.URL.Path)))
+        uri := strings.TrimPrefix(r.URL.Path, "/static")
-        // does the file exist?
+        file, err := staticFS.ReadFile(filepath.Join("static", filepath.Clean(uri)))
         if err != nil {
-            if os.IsNotExist(err) {
-                http.NotFound(w, r)
-                return
-            }
-        }
-
-        // is thjs a directory? (forbidden)
-        if info.IsDir() {
             http.NotFound(w, r)
             return
         }
 
-        http.FileServer(http.Dir(filepath.Join("admin", "static"))).ServeHTTP(w, r)
+        w.Header().Set("Content-Type", mime.TypeByExtension(path.Ext(r.URL.Path)))
+        w.WriteHeader(http.StatusOK)
+
+        w.Write(file)
     })
 }
+*/

admin/logs/logshttp.go

@@ -1,6 +1,7 @@
 package logs
 
 import (
+	"arimelody-web/admin/core"
 	"arimelody-web/admin/templates"
 	"arimelody-web/log"
 	"arimelody-web/model"
@@ -51,12 +52,12 @@ func Handler(app *model.AppState) http.Handler {
         }
 
         type LogsResponse struct {
-            Session *model.Session
+            core.AdminPageData
             Logs []*log.Log
         }
 
         err = templates.LogsTemplate.Execute(w, LogsResponse{
-            Session: session,
+            AdminPageData: core.AdminPageData{ Path: r.URL.Path, Session: session },
             Logs: logs,
         })
         if err != nil {

admin/music/artisthttp.go

@@ -3,52 +3,86 @@ package music
 import (
 	"fmt"
 	"net/http"
+	"os"
 	"strings"
 
+	"arimelody-web/admin/core"
 	"arimelody-web/admin/templates"
 	"arimelody-web/controller"
 	"arimelody-web/model"
 )
 
-func serveArtist(app *model.AppState) http.Handler {
+func serveArtists(app *model.AppState) http.Handler {
     return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-        slices := strings.Split(r.URL.Path[1:], "/")
+        session := r.Context().Value("session").(*model.Session)
-        id := slices[0]
+
-        artist, err := controller.GetArtist(app.DB, id)
+        slices := strings.Split(strings.TrimPrefix(r.URL.Path, "/artists")[1:], "/")
+        artistID := slices[0]
+
+        if len(artistID) > 0 {
+            serveArtist(app, artistID).ServeHTTP(w, r)
+            return
+        }
+
+        artists, err := controller.GetAllArtists(app.DB)
+        if err != nil {
+            fmt.Fprintf(os.Stderr, "WARN: Failed to fetch artists: %s\n", err)
+            http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
+            return
+        }
+
+        type ArtistsResponse struct {
+            core.AdminPageData
+            Artists []*model.Artist
+        }
+
+        err = templates.ArtistsTemplate.Execute(w, ArtistsResponse{
+            AdminPageData: core.AdminPageData{ Path: r.URL.Path, Session: session },
+            Artists: artists,
+        })
+        if err != nil {
+            fmt.Fprintf(os.Stderr, "WARN: Failed to serve admin artists page: %s\n", err)
+            http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
+        }
+    })
+}
+
+func serveArtist(app *model.AppState, artistID string) http.Handler {
+    return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+        session := r.Context().Value("session").(*model.Session)
+
+        artist, err := controller.GetArtist(app.DB, artistID)
         if err != nil {
             if artist == nil {
                 http.NotFound(w, r)
                 return
             }
-            fmt.Printf("Error rendering admin artist page for %s: %s\n", id, err)
+            fmt.Fprintf(os.Stderr, "WARN: Failed to fetch artist %s: %s\n", artistID, err)
             http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
             return
         }
 
         credits, err := controller.GetArtistCredits(app.DB, artist.ID, true)
         if err != nil {
-            fmt.Printf("Error rendering admin track page for %s: %s\n", id, err)
+            fmt.Fprintf(os.Stderr, "WARN: Failed to serve admin artist page for %s: %s\n", artistID, err)
             http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
             return
         }
 
         type ArtistResponse struct {
-            Session *model.Session
+            core.AdminPageData
             Artist *model.Artist
             Credits []*model.Credit
         }
 
-        session := r.Context().Value("session").(*model.Session)
+        err = templates.EditArtistTemplate.Execute(w, ArtistResponse{
-
+            AdminPageData: core.AdminPageData{ Path: r.URL.Path, Session: session },
-        err = templates.ArtistTemplate.Execute(w, ArtistResponse{
-            Session: session,
             Artist: artist,
             Credits: credits,
         })
         if err != nil {
-            fmt.Printf("Error rendering admin track page for %s: %s\n", id, err)
+            fmt.Fprintf(os.Stderr, "WARN: Failed to serve admin artist page for %s: %s\n", artistID, err)
             http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
         }
     })
 }
-

admin/music/musichttp.go

@@ -1,69 +1,18 @@
 package music
 
 import (
-	"arimelody-web/admin/templates"
-	"arimelody-web/controller"
 	"arimelody-web/model"
-	"fmt"
 	"net/http"
-	"os"
 )
 
 func Handler(app *model.AppState) http.Handler {
     return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
         mux := http.NewServeMux()
 
-        mux.Handle("/release/", http.StripPrefix("/release", serveRelease(app)))
+        mux.Handle("/releases/", serveReleases(app))
-        mux.Handle("/artist/", http.StripPrefix("/artist", serveArtist(app)))
+        mux.Handle("/artists/", serveArtists(app))
-        mux.Handle("/track/", http.StripPrefix("/track", serveTrack(app)))
+        mux.Handle("/tracks/", serveTracks(app))
-        mux.Handle("/", musicHandler(app))
 
         mux.ServeHTTP(w, r)
     })
 }
-
-func musicHandler(app *model.AppState) http.Handler {
-    return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-        session := r.Context().Value("session").(*model.Session)
-
-        releases, err := controller.GetAllReleases(app.DB, false, 0, true)
-        if err != nil {
-            fmt.Fprintf(os.Stderr, "WARN: Failed to pull releases: %s\n", err)
-            http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
-            return
-        }
-
-        artists, err := controller.GetAllArtists(app.DB)
-        if err != nil {
-            fmt.Fprintf(os.Stderr, "WARN: Failed to pull artists: %s\n", err)
-            http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
-            return
-        }
-
-        tracks, err := controller.GetOrphanTracks(app.DB)
-        if err != nil {
-            fmt.Fprintf(os.Stderr, "WARN: Failed to pull orphan tracks: %s\n", err)
-            http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
-            return
-        }
-
-        type MusicData struct {
-            Session     *model.Session
-            Releases    []*model.Release
-            Artists     []*model.Artist
-            Tracks      []*model.Track
-        }
-
-        err = templates.MusicTemplate.Execute(w, MusicData{
-            Session: session,
-            Releases: releases,
-            Artists: artists,
-            Tracks: tracks,
-        })
-        if err != nil {
-            fmt.Fprintf(os.Stderr, "WARN: Failed to render admin index: %s\n", err)
-            http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
-            return
-        }
-    })
-}

admin/music/releasehttp.go

@@ -3,18 +3,61 @@ package music
 import (
 	"fmt"
 	"net/http"
+	"os"
 	"strings"
 
+	"arimelody-web/admin/core"
 	"arimelody-web/admin/templates"
 	"arimelody-web/controller"
 	"arimelody-web/model"
 )
 
-func serveRelease(app *model.AppState) http.Handler {
+func serveReleases(app *model.AppState) http.Handler {
     return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-        slices := strings.Split(r.URL.Path[1:], "/")
+        session := r.Context().Value("session").(*model.Session)
+
+        slices := strings.Split(strings.TrimPrefix(r.URL.Path, "/releases")[1:], "/")
         releaseID := slices[0]
 
+        var action string = ""
+        if len(slices) > 1 {
+            action = slices[1]
+        }
+
+        if len(releaseID) > 0 {
+            serveRelease(app, releaseID, action).ServeHTTP(w, r)
+            return
+        }
+
+        type ReleasesData struct {
+            core.AdminPageData
+            Releases    []*model.Release
+        }
+
+        releases, err := controller.GetAllReleases(app.DB, false, 0, true)
+        if err != nil {
+            fmt.Fprintf(os.Stderr, "WARN: Failed to fetch releases: %s\n", err)
+            http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
+            return
+        }
+
+        err = templates.ReleasesTemplate.Execute(w, ReleasesData{
+            AdminPageData: core.AdminPageData{
+                Path: r.URL.Path,
+                Session: session,
+            },
+            Releases: releases,
+        })
+        if err != nil {
+            fmt.Fprintf(os.Stderr, "WARN: Failed to serve releases page: %s\n", err)
+            http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
+            return
+        }
+    })
+}
+
+func serveRelease(app *model.AppState, releaseID string, action string) http.Handler {
+    return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
         session := r.Context().Value("session").(*model.Session)
 
         release, err := controller.GetRelease(app.DB, releaseID, true)
@@ -23,13 +66,13 @@ func serveRelease(app *model.AppState) http.Handler {
                 http.NotFound(w, r)
                 return
             }
-            fmt.Printf("WARN: Failed to pull full release data for %s: %s\n", releaseID, err)
+            fmt.Fprintf(os.Stderr, "WARN: Failed to fetch full release data for %s: %s\n", releaseID, err)
             http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
             return
         }
 
-        if len(slices) > 1 {
+        if len(action) > 0 {
-            switch slices[1] {
+            switch action {
             case "editcredits":
                 serveEditCredits(release).ServeHTTP(w, r)
                 return
@@ -57,16 +100,18 @@ func serveRelease(app *model.AppState) http.Handler {
         }
 
         type ReleaseResponse struct {
-            Session *model.Session
+            core.AdminPageData
             Release *model.Release
         }
 
-        err = templates.ReleaseTemplate.Execute(w, ReleaseResponse{
+        for i, track := range release.Tracks { track.Number = i + 1 }
-            Session: session,
+
+        err = templates.EditReleaseTemplate.Execute(w, ReleaseResponse{
+            AdminPageData: core.AdminPageData{ Path: r.URL.Path, Session: session },
             Release: release,
         })
         if err != nil {
-            fmt.Printf("Error rendering admin release page for %s: %s\n", release.ID, err)
+            fmt.Fprintf(os.Stderr, "WARN: Failed to serve admin release page for %s: %s\n", release.ID, err)
             http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
         }
     })
@@ -77,7 +122,7 @@ func serveEditCredits(release *model.Release) http.Handler {
         w.Header().Set("Content-Type", "text/html")
         err := templates.EditCreditsTemplate.Execute(w, release)
         if err != nil {
-            fmt.Printf("Error rendering edit credits component for %s: %s\n", release.ID, err)
+            fmt.Fprintf(os.Stderr, "WARN: Failed to serve edit credits component for %s: %s\n", release.ID, err)
             http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
         }
     })
@@ -87,7 +132,7 @@ func serveAddCredit(app *model.AppState, release *model.Release) http.Handler {
     return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
         artists, err := controller.GetArtistsNotOnRelease(app.DB, release.ID)
         if err != nil {
-            fmt.Printf("WARN: Failed to pull artists not on %s: %s\n", release.ID, err)
+            fmt.Fprintf(os.Stderr, "WARN: Failed to fetch artists not on %s: %s\n", release.ID, err)
             http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
             return
         }
@@ -103,7 +148,7 @@ func serveAddCredit(app *model.AppState, release *model.Release) http.Handler {
             Artists: artists,
         })
         if err != nil {
-            fmt.Printf("Error rendering add credits component for %s: %s\n", release.ID, err)
+            fmt.Fprintf(os.Stderr, "WARN: Failed to serve add credits component for %s: %s\n", release.ID, err)
             http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
         }
     })
@@ -114,7 +159,7 @@ func serveNewCredit(app *model.AppState) http.Handler {
         artistID := strings.Split(r.URL.Path, "/")[3]
         artist, err := controller.GetArtist(app.DB, artistID)
         if err != nil {
-            fmt.Printf("WARN: Failed to pull artists %s: %s\n", artistID, err)
+            fmt.Fprintf(os.Stderr, "WARN: Failed to fetch artist %s: %s\n", artistID, err)
             http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
             return
         }
@@ -126,7 +171,7 @@ func serveNewCredit(app *model.AppState) http.Handler {
         w.Header().Set("Content-Type", "text/html")
         err = templates.NewCreditTemplate.Execute(w, artist)
         if err != nil {
-            fmt.Printf("Error rendering new credit component for %s: %s\n", artist.ID, err)
+            fmt.Fprintf(os.Stderr, "WARN: Failed to serve new credit component for %s: %s\n", artist.ID, err)
             http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
         }
     })
@@ -137,7 +182,7 @@ func serveEditLinks(release *model.Release) http.Handler {
         w.Header().Set("Content-Type", "text/html")
         err := templates.EditLinksTemplate.Execute(w, release)
         if err != nil {
-            fmt.Printf("Error rendering edit links component for %s: %s\n", release.ID, err)
+            fmt.Fprintf(os.Stderr, "WARN: Failed to serve edit links component for %s: %s\n", release.ID, err)
             http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
         }
     })
@@ -147,17 +192,13 @@ func serveEditTracks(release *model.Release) http.Handler {
     return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
         w.Header().Set("Content-Type", "text/html")
 
-        type editTracksData struct {
+        type editTracksData struct { Release *model.Release }
-            Release *model.Release
-            Add func(a int, b int) int
-        }
 
-        err := templates.EditTracksTemplate.Execute(w, editTracksData{
+        for i, track := range release.Tracks { track.Number = i + 1 }
-            Release: release,
+
-            Add: func(a, b int) int { return a + b },
+        err := templates.EditTracksTemplate.Execute(w, editTracksData{ Release: release })
-        })
         if err != nil {
-            fmt.Printf("Error rendering edit tracks component for %s: %s\n", release.ID, err)
+            fmt.Fprintf(os.Stderr, "WARN: Failed to serve edit tracks component for %s: %s\n", release.ID, err)
             http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
         }
     })
@@ -167,7 +208,7 @@ func serveAddTrack(app *model.AppState, release *model.Release) http.Handler {
     return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
         tracks, err := controller.GetTracksNotOnRelease(app.DB, release.ID)
         if err != nil {
-            fmt.Printf("WARN: Failed to pull tracks not on %s: %s\n", release.ID, err)
+            fmt.Fprintf(os.Stderr, "WARN: Failed to fetch tracks not on %s: %s\n", release.ID, err)
             http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
             return
         }
@@ -183,10 +224,9 @@ func serveAddTrack(app *model.AppState, release *model.Release) http.Handler {
             Tracks: tracks,
         })
         if err != nil {
-            fmt.Printf("Error rendering add tracks component for %s: %s\n", release.ID, err)
+            fmt.Fprintf(os.Stderr, "WARN: Failed to add tracks component for %s: %s\n", release.ID, err)
             http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
         }
-        return
     })
 }
 
@@ -195,7 +235,7 @@ func serveNewTrack(app *model.AppState) http.Handler {
         trackID := strings.Split(r.URL.Path, "/")[3]
         track, err := controller.GetTrack(app.DB, trackID)
         if err != nil {
-            fmt.Printf("Error rendering new track component for %s: %s\n", trackID, err)
+            fmt.Fprintf(os.Stderr, "WARN: Failed to fetch track %s: %s\n", trackID, err)
             http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
             return
         }
@@ -207,9 +247,8 @@ func serveNewTrack(app *model.AppState) http.Handler {
         w.Header().Set("Content-Type", "text/html")
         err = templates.NewTrackTemplate.Execute(w, track)
         if err != nil {
-            fmt.Printf("Error rendering new track component for %s: %s\n", track.ID, err)
+            fmt.Fprintf(os.Stderr, "WARN: Failed to serve new track component for %s: %s\n", track.ID, err)
             http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
         }
-        return
     })
 }

admin/music/trackhttp.go

@@ -3,20 +3,57 @@ package music
 import (
 	"fmt"
 	"net/http"
+	"os"
 	"strings"
 
+	"arimelody-web/admin/core"
 	"arimelody-web/admin/templates"
 	"arimelody-web/controller"
 	"arimelody-web/model"
 )
 
-func serveTrack(app *model.AppState) http.Handler {
+func serveTracks(app *model.AppState) http.Handler {
     return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-        slices := strings.Split(r.URL.Path[1:], "/")
+        session := r.Context().Value("session").(*model.Session)
-        id := slices[0]
+
-        track, err := controller.GetTrack(app.DB, id)
+        slices := strings.Split(strings.TrimPrefix(r.URL.Path, "/tracks")[1:], "/")
+        trackID := slices[0]
+
+        if len(trackID) > 0 {
+            serveTrack(app, trackID).ServeHTTP(w, r)
+            return
+        }
+
+        tracks, err := controller.GetAllTracks(app.DB)
         if err != nil {
-            fmt.Printf("Error rendering admin track page for %s: %s\n", id, err)
+            fmt.Fprintf(os.Stderr, "WARN: Failed to fetch tracks: %s\n", err)
+            http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
+            return
+        }
+
+        type TracksResponse struct {
+            core.AdminPageData
+            Tracks []*model.Track
+        }
+
+        err = templates.TracksTemplate.Execute(w, TracksResponse{
+            AdminPageData: core.AdminPageData{ Path: r.URL.Path, Session: session },
+            Tracks: tracks,
+        })
+        if err != nil {
+            fmt.Fprintf(os.Stderr, "WARN: Failed to serve admin tracks page: %s\n", err)
+            http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
+        }
+    })
+}
+
+func serveTrack(app *model.AppState, trackID string) http.Handler {
+    return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+        session := r.Context().Value("session").(*model.Session)
+
+        track, err := controller.GetTrack(app.DB, trackID)
+        if err != nil {
+            fmt.Fprintf(os.Stderr, "WARN: Failed to serve admin track page for %s: %s\n", trackID, err)
             http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
             return
         }
@@ -27,28 +64,25 @@ func serveTrack(app *model.AppState) http.Handler {
 
         releases, err := controller.GetTrackReleases(app.DB, track.ID, true)
         if err != nil {
-            fmt.Printf("FATAL: Failed to pull releases for %s: %s\n", id, err)
+            fmt.Fprintf(os.Stderr, "WARN: Failed to fetch releases for track %s: %s\n", trackID, err)
             http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
             return
         }
 
         type TrackResponse struct {
-            Session     *model.Session
+            core.AdminPageData
             Track       *model.Track
             Releases    []*model.Release
         }
 
-        session := r.Context().Value("session").(*model.Session)
+        err = templates.EditTrackTemplate.Execute(w, TrackResponse{
-
+            AdminPageData: core.AdminPageData{ Path: r.URL.Path, Session: session },
-        err = templates.TrackTemplate.Execute(w, TrackResponse{
-            Session: session,
             Track: track,
             Releases: releases,
         })
         if err != nil {
-            fmt.Printf("Error rendering admin track page for %s: %s\n", id, err)
+            fmt.Fprintf(os.Stderr, "WARN: Failed to serve admin track page for %s: %s\n", trackID, err)
             http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
         }
     })
 }
-

admin/static/admin.css

@@ -1,91 +1,266 @@
 @import url("/style/prideflag.css");
 @import url("/font/inter/inter.css");
 
+:root {
+    --bg-0: #101010;
+    --bg-1: #181818;
+    --bg-2: #282828;
+    --bg-3: #404040;
+
+    --fg-0: #b0b0b0;
+    --fg-1: #c0c0c0;
+    --fg-2: #d0d0d0;
+    --fg-3: #e0e0e0;
+
+    --col-shadow-0: #0002;
+    --col-shadow-1: #0004;
+    --col-shadow-2: #0006;
+    --col-highlight-0: #ffffff08;
+    --col-highlight-1: #fff1;
+    --col-highlight-2: #fff2;
+
+    --col-new: #b3ee5b;
+    --col-on-new: #1b2013;
+    --col-save: #6fd7ff;
+    --col-on-save: #283f48;
+    --col-delete: #ff7171;
+    --col-on-delete: #371919;
+
+    --col-warn: #ffe86a;
+    --col-on-warn: var(--bg-0);
+    --col-warn-hover: #ffec81;
+
+    --shadow-sm:
+    0 1px 2px var(--col-shadow-2),
+    inset 0 1px 1px var(--col-highlight-2);
+    --shadow-md:
+    0 2px 4px var(--col-shadow-1),
+    inset 0 2px 2px var(--col-highlight-1);
+    --shadow-lg:
+    0 4px 8px var(--col-shadow-0),
+    inset 0 4px 4px var(--col-highlight-0);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --bg-0: #e8e8e8;
+        --bg-1: #f0f0f0;
+        --bg-2: #f8f8f8;
+        --bg-3: #ffffff;
+
+        --fg-0: #606060;
+        --fg-1: #404040;
+        --fg-2: #303030;
+        --fg-3: #202020;
+
+        --col-shadow-0: #0002;
+        --col-shadow-1: #0004;
+        --col-shadow-2: #0008;
+        --col-highlight-0: #fff2;
+        --col-highlight-1: #fff4;
+        --col-highlight-2: #fff8;
+
+        --col-warn: #ffe86a;
+        --col-on-warn: var(--fg-3);
+        --col-warn-hover: #ffec81;
+    }
+}
+
+@media (prefers-color-scheme: green) {
+    :root {
+        --bg-0: #d0d9c7;
+        --bg-1: #e2e5de;
+        --bg-2: #f1f1f1;
+        --bg-3: #ffffff;
+        --fg-0: #626f54;
+        --fg-1: #505c43;
+        --fg-2: #49523e;
+        --fg-3: #2c3522;
+    }
+}
+
+@media (prefers-color-scheme: purple) {
+    :root {
+        --bg-0: #15121c;
+        --bg-1: #1e1a27;
+        --bg-2: #302a3d;
+        --bg-3: #4a4358;
+        --fg-0: #9e8fbf;
+        --fg-1: #a29bb3;
+        --fg-2: #b9b0cd;
+        --fg-3: #dcd5ec;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    img.icon {
+        -webkit-filter: invert(.9);
+        filter: invert(.9);
+    }
+}
+
 body {
-    width: 100%;
+    width: calc(100% - 180px);
     height: calc(100vh - 1em);
 
-    margin: 0;
+    margin: 0 0 0 180px;
     padding: 0;
+    display: flex;
+    flex-direction: row;
 
     font-family: "Inter", sans-serif;
     font-size: 16px;
+    color: var(--fg-0);
+    background: var(--bg-0);
 
-    color: #303030;
+    transition: background .1s ease-out, color .1s ease-out;
-    background: #f0f0f0;
 }
 
-nav {
+h1, h2, h3, h4, h5, h6 {
-    width: min(720px, calc(100% - 2em));
+    color: var(--fg-3);
-    height: 2em;
+}
-    margin: 1em auto;
+
+header {
     display: flex;
-    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 180px;
+    height: calc(100vh - 2em);
+    margin: 0;
+    padding: 1em 0;
+    display: flex;
+    flex-direction: column;
     justify-content: left;
 
-    background: #f8f8f8;
+    background-color: var(--bg-1);
-    border-radius: 4px;
+    box-shadow: var(--shadow-md);
-    border: 1px solid #808080;
+    transition: background .1s ease-out, color .1s ease-out;
+
+    user-select: none;
 }
-.nav-item.icon {
+nav .icon {
+    width: fit-content;
+    height: fit-content;
     padding: 0;
-}
+    margin: 0 auto 1em auto;
-.nav-item.icon img {
-    height: 100%;
-}
-nav .title {
-    width: auto;
-    height: 100%;
-
-    margin: 0 1em 0 0;
-
     display: flex;
 
-    line-height: 2em;
+    border-radius: 100%;
-    text-decoration: none;
+    box-shadow: var(--shadow-sm);
-
+    overflow: clip;
-    color: inherit;
+}
+nav .icon img {
+    width: 3em;
+    height: 3em;
 }
 .nav-item {
-    width: auto;
-    height: 100%;
-
-    margin: 0px;
-    padding: 0 1em;
-
     display: flex;
-
+    color: var(--fg-2);
     line-height: 2em;
+    font-weight: 500;
+    transition: color .1s ease-out, background-color .1s ease-out;
 }
 .nav-item:hover {
-    background: #00000010;
+    color: var(--bg-2);
+    background-color: var(--fg-2);
     text-decoration: none;
 }
+.nav-item.active {
+    border-left: 4px solid var(--fg-2);
+}
+.nav-item.active a {
+    padding-left: calc(1em - 3.5px);
+}
 nav a {
+    padding: .2em 1em;
     text-decoration: none;
     color: inherit;
+    width: 100%;
 }
-nav #logout {
+nav a.active {
-    /* margin-left: auto; */
+    border-left: 5px solid var(--fg-0);
+    padding-left: calc(1em - 5px);
+}
+nav hr {
+    width: calc(100% - 2em);
+    margin: .5em auto;
+    border: none;
+    border-bottom: 1px solid var(--fg-0);
+}
+nav .section-label {
+    margin: .6em 0 .1em 1.6em;
+    font-size: .6em;
+    text-transform: uppercase;
+    font-weight: 600;
+}
+#toggle-nav {
+    position: fixed;
+    top: 16px;
+    left: 16px;
+    padding: 8px;
+    width: 48px;
+    height: 48px;
+    display: none;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+}
+#toggle-nav img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transform: translate(1px, 1px);
+}
+#toggle-nav img:hover {
+    -webkit-filter: invert(.9);
+    filter: invert(.9);
+}
+@media (prefers-color-scheme: dark) {
+    #toggle-nav img {
+        -webkit-filter: invert(.9);
+        filter: invert(.9);
+    }
+    #toggle-nav img:hover {
+        -webkit-filter: none;
+        filter: none;
+    }
 }
 
 main {
-    width: min(720px, calc(100% - 2em));
+    width: 720px;
+    max-width: calc(100% - 2em);
+    height: fit-content;
+    min-height: calc(100vh - 2em);
     margin: 0 auto;
     padding: 1em;
 }
+main.dashboard {
+    width: 100%;
+}
 
 a {
     color: inherit;
     text-decoration: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: color .1s ease-out, background-color .1s ease-out;
 }
 
+/*
 a:hover {
     text-decoration: underline;
 }
+*/
 
-a img.icon {
+img.icon {
     height: .8em;
+    transition: filter .1s ease-out;
 }
 
 code {
@@ -101,7 +276,24 @@ h1 {
 
 
 
+.cards {
+    width: 100%;
+    height: fit-content;
+    display: flex;
+    gap: 2em;
+    flex-wrap: wrap;
+}
+
 .card {
+    flex-basis: 40em;
+    padding: 1em;
+    background: var(--bg-1);
+    border-radius: 16px;
+    box-shadow: var(--shadow-lg);
+
+    transition: background .1s ease-out, color .1s ease-out;
+}
+main:not(.dashboard) .card {
     margin-bottom: 1em;
 }
 
@@ -109,7 +301,7 @@ h1 {
     margin: 0 0 .5em 0;
 }
 
-.card-title {
+.card-header {
     margin-bottom: 1em;
     display: flex;
     gap: 1em;
@@ -117,21 +309,31 @@ h1 {
     align-items: center;
     justify-content: space-between;
 }
-
+.card-header h1,
-.card-title h1,
+.card-header h2,
-.card-title h2,
+.card-header h3 {
-.card-title h3 {
     margin: 0;
 }
+.card-header a:hover {
+    text-decoration: underline;
+}
+
+header :is(h1, h2, h3) small,
+.card-header :is(h1, h2, h3) small {
+    display: inline-block;
+    font-size: .6em;
+    transform: translateY(-0.1em);
+    color: var(--fg-0);
+}
 
 .flex-fill {
     flex-grow: 1;
 }
 
-@media screen and (max-width: 520px) {
+.artists-group {
-    body {
+    display: grid;
-        font-size: 12px;
+    grid-template-columns: repeat(5, 1fr);
-    }
+    gap: 1em;
 }
 
 
@@ -140,17 +342,15 @@ h1 {
 #error {
     margin: 0 0 1em 0;
     padding: 1em;
-    border-radius: 4px;
+    border-radius: 8px;
+    color: #101010;
     background: #ffffff;
-    border: 1px solid #888;
 }
 #message {
     background: #a9dfff;
-    border-color: #599fdc;
 }
 #error {
     background: #ffa9b8;
-    border-color: #dc5959;
 }
 
 
@@ -159,52 +359,54 @@ a.delete:not(.button) {
     color: #d22828;
 }
 
-button, .button {
+.button, button {
     padding: .5em .8em;
     font-family: inherit;
     font-size: inherit;
-    border-radius: 4px;
+
-    border: 1px solid #a0a0a0;
-    background: #f0f0f0;
     color: inherit;
+    background: var(--bg-2);
+    border: none;
+    border-radius: 10em;
+    box-shadow: var(--shadow-sm);
+    font-weight: 500;
+    transition: background .1s ease-out, color .1s ease-out;
+
+    cursor: pointer;
+    user-select: none;
 }
 button:hover, .button:hover {
     background: #fff;
-    border-color: #d0d0d0;
 }
 button:active, .button:active {
     background: #d0d0d0;
-    border-color: #808080;
 }
 
-.button, button {
-    color: inherit;
-}
 .button.new, button.new {
-    background: #c4ff6a;
+    color: var(--col-on-new);
-    border-color: #84b141;
+    background: var(--col-new);
 }
 .button.save, button.save {
-    background: #6fd7ff;
+    color: var(--col-on-save);
-    border-color: #6f9eb0;
+    background: var(--col-save);
 }
 .button.delete, button.delete {
-    background: #ff7171;
+    color: var(--col-on-delete);
-    border-color: #7d3535;
+    background: var(--col-delete);
 }
 .button:hover, button:hover {
-    background: #fff;
+    color: var(--bg-3);
-    border-color: #d0d0d0;
+    background: var(--fg-3);
 }
 .button:active, button:active {
-    background: #d0d0d0;
+    color: var(--bg-2);
-    border-color: #808080;
+    background: var(--fg-0);
 }
 .button[disabled], button[disabled] {
-    background: #d0d0d0 !important;
+    color: var(--fg-0) !important;
-    border-color: #808080 !important;
+    background: var(--bg-3) !important;
     opacity: .5;
-    cursor: not-allowed !important;
+    cursor: default !important;
 }
 
 
@@ -212,24 +414,79 @@ button:active, .button:active {
 form {
     width: 100%;
     display: block;
+    color: var(--fg-0);
 }
 form label {
     width: 100%;
     margin: 1rem 0 .5rem 0;
     display: block;
-    color: #10101080;
 }
-form input {
+form input[type="text"],
-    margin: .5rem 0;
+form input[type="password"] {
-    padding: .3rem .5rem;
+    width: 16em;
+    max-width: 100%;
+    margin: .5em 0;
+    padding: .3em .5em;
     display: block;
     border-radius: 4px;
     border: 1px solid #808080;
     font-size: inherit;
     font-family: inherit;
     color: inherit;
+    background-color: var(--bg-0);
 }
 input[disabled] {
     opacity: .5;
     cursor: not-allowed;
 }
+
+@media screen and (max-width: 720px) {
+    main {
+        padding-top: 0;
+    }
+
+    body {
+        width: 100%;
+        margin: 0;
+        font-size: 16px;
+    }
+
+    nav {
+        width: 100%;
+        left: -100%;
+        font-size: 24px;
+        z-index: 1;
+        transition: transform .2s cubic-bezier(.2,0,.5,1);
+    }
+    nav.open {
+        transform: translateX(100%);
+    }
+
+    #toggle-nav {
+        display: flex;
+    }
+
+    main > h1:first-of-type {
+        margin-left: 68px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+    main > header {
+        margin-left: 68px;
+    }
+    main > header h1 {
+        display: flex;
+        flex-direction: column;
+        font-size: 1.5em;
+    }
+
+    .card {
+        flex-basis: 100%;
+        max-width: calc(100vw - 4em);
+    }
+
+    .artists-group {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}

admin/static/admin.js

@@ -69,3 +69,28 @@ export function makeMagicList(container, itemSelector, callback) {
         if (callback) callback();
     });
 }
+
+export function hijackClickEvent(container, link) {
+    container.addEventListener('click', event => {
+        if (event.target.tagName.toLowerCase() === 'a') return;
+        event.preventDefault();
+        link.dispatchEvent(new MouseEvent('click', {
+            bubbles: true,
+            cancelable: true,
+            view: window,
+            ctrlKey: event.ctrlKey,
+            metaKey: event.metaKey,
+            shiftKey: event.shiftKey,
+            altKey: event.altKey,
+            button: event.button,
+        }));
+    });
+}
+
+document.addEventListener("readystatechange", () => {
+    const navbar = document.getElementById("navbar");
+    document.getElementById("toggle-nav").addEventListener("click", event => {
+        event.preventDefault();
+        navbar.classList.toggle("open");
+    })
+});

admin/static/artists.css

@@ -0,0 +1,27 @@
+.artist {
+    padding: .5em;
+
+    color: var(--fg-3);
+    background: var(--bg-2);
+    box-shadow: var(--shadow-md);
+    border-radius: 16px;
+    text-align: center;
+
+    cursor: pointer;
+    transition: background .1s ease-out, color .1s ease-out;
+}
+
+.artist:hover {
+    background: var(--bg-1);
+    text-decoration: hover;
+}
+
+.artist .artist-avatar {
+    width: 100%;
+    object-fit: cover;
+    border-radius: 8px;
+}
+
+.artist .artist-name {
+    display: block;
+}

admin/static/artists.js

@@ -0,0 +1,7 @@
+import { hijackClickEvent } from "./admin.js";
+
+document.addEventListener("readystatechange", () => {
+    document.querySelectorAll(".artists-group .artist").forEach(el => {
+        hijackClickEvent(el, el.querySelector("a.artist-name"))
+    });
+});

admin/static/edit-account.css

@@ -11,8 +11,11 @@ label {
     align-items: center;
     color: inherit;
 }
-input {
+form#change-password input,
-    width: min(20rem, calc(100% - 1rem));
+form#delete-account input {
+    width: 20em;
+    min-width: auto;
+    max-width: calc(100% - 1em - 2px);
     margin: .5rem 0;
     padding: .3rem .5rem;
     display: block;
@@ -25,12 +28,14 @@ input {
 
 .mfa-device {
     padding: .75em;
-    background: #f8f8f8f8;
-    border: 1px solid #808080;
-    border-radius: 8px;
     margin-bottom: .5em;
     display: flex;
     justify-content: space-between;
+
+    color: var(--fg-3);
+    background: var(--bg-2);
+    box-shadow: var(--shadow-md);
+    border-radius: 16px;
 }
 
 .mfa-device div {
@@ -46,3 +51,14 @@ input {
 .mfa-device .mfa-device-name {
     font-weight: bold;
 }
+
+.mfa-device form input {
+    display: none !important;
+}
+
+.mfa-actions {
+    display: flex;
+    flex-direction: row;
+    gap: .5em;
+    flex-wrap: wrap;
+}

admin/static/edit-artist.css

@@ -1,7 +1,3 @@
-h1 {
-    margin: 0 0 1em 0;
-}
-
 #artist {
     margin-bottom: 1em;
     padding: 1.5em;
@@ -9,9 +5,9 @@ h1 {
     flex-direction: row;
     gap: 1.2em;
 
-    border-radius: 8px;
+    border-radius: 16px;
-    background: #f8f8f8f8;
+    background: var(--bg-2);
-    border: 1px solid #808080;
+    box-shadow: var(--shadow-md);
 }
 
 .artist-avatar {
@@ -27,7 +23,8 @@ h1 {
     cursor: pointer;
 }
 .artist-avatar #remove-avatar {
-    padding: .3em .4em;
+    margin-top: .5em;
+    padding: .3em .6em;
 }
 
 .artist-info {
@@ -53,8 +50,8 @@ input[type="text"] {
     font-family: inherit;
     font-weight: inherit;
     color: inherit;
-    background: #ffffff;
+    background: var(--bg-0);
-    border: 1px solid transparent;
+    border: none;
     border-radius: 4px;
     outline: none;
 }
@@ -74,7 +71,7 @@ input[type="text"]:focus {
     justify-content: right;
 }
 
-.card-title a.button {
+.card-header a.button {
     text-decoration: none;
 }
 
@@ -85,9 +82,17 @@ input[type="text"]:focus {
     flex-direction: row;
     gap: 1em;
     align-items: center;
-    background: #f8f8f8;
+
-    border-radius: 8px;
+    border-radius: 16px;
-    border: 1px solid #808080;
+    background: var(--bg-2);
+    box-shadow: var(--shadow-md);
+
+    cursor: pointer;
+    transition: background .1s;
+}
+
+.credit:hover {
+    background: var(--bg-1);
 }
 
 .release-artwork {
@@ -96,8 +101,14 @@ input[type="text"]:focus {
     border-radius: 4px;
 }
 
+.credit-info {
+    overflow: hidden;
+}
 .credit-info h3,
 .credit-info p {
     margin: 0;
     font-size: .9em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }

admin/static/edit-artist.js

@@ -1,3 +1,5 @@
+import { hijackClickEvent } from "./admin.js";
+
 const artistID = document.getElementById("artist").dataset.id;
 const nameInput = document.getElementById("name");
 const avatarImg = document.getElementById("avatar");
@@ -77,3 +79,9 @@ removeAvatarBtn.addEventListener("click", () => {
     avatarImg.src = "/img/default-avatar.png"
     saveBtn.disabled = false;
 });
+
+document.addEventListener('readystatechange', () => {
+    document.querySelectorAll('#releases .credit').forEach(el => {
+        hijackClickEvent(el, el.querySelector('.credit-name a'));
+    });
+});

admin/static/edit-release.css

@@ -12,8 +12,10 @@ input[type="text"] {
     gap: 1.2em;
 
     border-radius: 8px;
-    background: #f8f8f8f8;
+    background: var(--bg-2);
-    border: 1px solid #808080;
+    box-shadow: var(--shadow-md);
+
+    transition: background .1s ease-out, color .1s ease-out;
 }
 
 .release-artwork {
@@ -29,7 +31,9 @@ input[type="text"] {
     cursor: pointer;
 }
 .release-artwork #remove-artwork {
-    padding: .3em .4em;
+    margin-top: .5em;
+    padding: .3em .6em;
+    background: var(--bg-3);
 }
 
 .release-info {
@@ -54,17 +58,17 @@ input[type="text"] {
     background: transparent;
     outline: none;
     cursor: pointer;
+    transition: background .1s ease-out, border-color .1s ease-out;
 }
 
 #title:hover {
-    background: #ffffff;
+    background: var(--bg-3);
-    border-color: #80808080;
+    border-color: var(--fg-0);
 }
 
 #title:active,
 #title:focus {
-    background: #ffffff;
+    background: var(--bg-3);
-    border-color: #808080;
 }
 
 .release-title small {
@@ -75,19 +79,21 @@ input[type="text"] {
     width: 100%;
     margin: .5em 0;
     border-collapse: collapse;
+    color: var(--fg-2);
 }
 .release-info table td {
     padding: .2em;
-    border-bottom: 1px solid #d0d0d0;
+    border-bottom: 1px solid color-mix(in srgb, var(--fg-0) 25%, transparent);
+    transition: background .1s ease-out, border-color .1s ease-out;
 }
 .release-info table tr td:first-child {
     vertical-align: top;
-    opacity: .66;
+    opacity: .5;
 }
 .release-info table tr td:not(:first-child) select:hover,
 .release-info table tr td:not(:first-child) input:hover,
 .release-info table tr td:not(:first-child) textarea:hover {
-    background: #e8e8e8;
+    background: var(--bg-3);
     cursor: pointer;
 }
 .release-info table td select,
@@ -115,13 +121,25 @@ input[type="text"] {
     gap: .5em;
     flex-direction: row;
     justify-content: right;
+    color: var(--fg-3);
+}
+
+.release-actions button,
+.release-actions .button {
+    color: var(--fg-2);
+    background: var(--bg-3);
 }
 
 dialog {
     width: min(720px, calc(100% - 2em));
     padding: 2em;
-    border: 1px solid #101010;
+    border: none;
-    border-radius: 8px;
+    border-radius: 16px;
+    color: var(--fg-0);
+    background-color: var(--bg-0);
+    box-shadow: var(--shadow-lg);
+
+    transition: color .1s ease-out, background-color .1s ease-out;
 }
 
 dialog header {
@@ -144,7 +162,7 @@ dialog div.dialog-actions {
     gap: .5em;
 }
 
-.card-title a.button {
+.card-header a.button {
     text-decoration: none;
 }
 
@@ -152,7 +170,7 @@ dialog div.dialog-actions {
  * RELEASE CREDITS
  */
 
-.card.credits .credit {
+#credits .credit {
     margin-bottom: .5em;
     padding: .5em;
     display: flex;
@@ -160,28 +178,47 @@ dialog div.dialog-actions {
     align-items: center;
     gap: 1em;
 
-    border-radius: 8px;
+    border-radius: 16px;
-    background: #f8f8f8f8;
+    background-color: var(--bg-2);
-    border: 1px solid #808080;
+    box-shadow: var(--shadow-md);
+
+    cursor: pointer;
+    transition: background .1s ease-out;
+}
+#credits .credit:hover {
+    background-color: var(--bg-1);
 }
 
-.card.credits .credit p {
+#credits .credit p {
     margin: 0;
 }
 
-.card.credits .credit .artist-avatar {
+#credits .credit .artist-avatar {
-    border-radius: 8px;
+    border-radius: 12px;
 }
 
-.card.credits .credit .artist-name {
+#credits .credit .artist-name {
+    color: var(--fg-3);
     font-weight: bold;
 }
 
-.card.credits .credit .artist-role small {
+#credits .credit .artist-role small {
     font-size: inherit;
     opacity: .66;
 }
 
+#credits .credit .credit-info {
+    overflow: hidden;
+}
+
+#credits .credit .credit-info :is(h3, p) {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+
+
 #editcredits ul {
     margin: 0;
     padding: 0;
@@ -197,8 +234,8 @@ dialog div.dialog-actions {
     gap: 1em;
 
     border-radius: 8px;
-    background: #f8f8f8f8;
+    background: var(--bg-2);
-    border: 1px solid #808080;
+    box-shadow: var(--shadow-md);
 }
 
 #editcredits .credit {
@@ -232,6 +269,7 @@ dialog div.dialog-actions {
     margin: 0;
     display: flex;
     align-items: center;
+    color: inherit;
 }
 
 #editcredits .credit .credit-info .credit-attribute input[type="text"] {
@@ -239,15 +277,17 @@ dialog div.dialog-actions {
     padding: .2em .4em;
     flex-grow: 1;
     font-family: inherit;
-    border: 1px solid #8888;
+    border: none;
     border-radius: 4px;
-    color: inherit;
+    color: var(--fg-2);
+    background: var(--bg-0);
 }
 #editcredits .credit .credit-info .credit-attribute input[type="checkbox"] {
     margin: 0 .3em;
 }
 
 #editcredits .credit .artist-name {
+    color: var(--fg-2);
     font-weight: bold;
 }
 
@@ -256,8 +296,12 @@ dialog div.dialog-actions {
     opacity: .66;
 }
 
-#editcredits .credit button.delete {
+#editcredits .credit .delete {
-    margin-left: auto;
+    margin-right: .5em;
+    cursor: pointer;
+}
+#editcredits .credit .delete:hover {
+    text-decoration: underline;
 }
 
 #addcredit ul {
@@ -289,24 +333,39 @@ dialog div.dialog-actions {
  * RELEASE LINKS
  */
 
-.card.links {
+#links ul {
+    padding: 0;
     display: flex;
     gap: .2em;
 }
 
-.card.links a.button[data-name="spotify"] {
+#links a img.icon {
+    -webkit-filter: none;
+    filter: none;
+}
+
+#links a.button:hover {
+    color: var(--bg-3) !important;
+    background-color: var(--fg-3) !important;
+}
+
+#links a.button[data-name="spotify"] {
+    color: #101010;
     background-color: #8cff83
 }
 
-.card.links a.button[data-name="apple music"] {
+#links a.button[data-name="apple music"] {
+    color: #101010;
     background-color: #8cd9ff
 }
 
-.card.links a.button[data-name="soundcloud"] {
+#links a.button[data-name="soundcloud"] {
+    color: #101010;
     background-color: #fdaa6d
 }
 
-.card.links a.button[data-name="youtube"] {
+#links a.button[data-name="youtube"] {
+    color: #101010;
     background-color: #ff6e6e
 }
 
@@ -389,62 +448,6 @@ dialog div.dialog-actions {
     outline: 1px solid #808080;
 }
 
-/*
- * RELEASE TRACKS
- */
-
-.card.tracks .track {
-    margin-bottom: 1em;
-    padding: 1em;
-    display: flex;
-    flex-direction: column;
-    gap: .5em;
-
-    border-radius: 8px;
-    background: #f8f8f8f8;
-    border: 1px solid #808080;
-}
-
-.card.tracks .track h3,
-.card.tracks .track p {
-    margin: 0;
-}
-
-.card.tracks h2.track-title {
-    margin: 0;
-    display: flex;
-    gap: .5em;
-}
-
-.card.tracks h2.track-title .track-number {
-    opacity: .5;
-}
-
-.card.tracks .track-album {
-    margin-left: auto;
-    font-style: italic;
-    font-size: .75em;
-    opacity: .5;
-}
-
-.card.tracks .track-album.empty {
-    color: #ff2020;
-    opacity: 1;
-}
-
-.card.tracks .track-description {
-    font-style: italic;
-}
-
-.card.tracks .track-lyrics {
-    max-height: 10em;
-    overflow-y: scroll;
-}
-
-.card.tracks .track .empty {
-    opacity: 0.75;
-}
-
 #edittracks ul {
     padding: 0;
     list-style: none;
@@ -496,15 +499,17 @@ dialog div.dialog-actions {
     padding: .5em;
     display: flex;
     gap: .5em;
+    background-color: var(--bg-0);
     cursor: pointer;
+    transition: background-color .1s ease-out, color .1s ease-out;
 }
 
 #addtrack ul li.new-track:nth-child(even) {
-    background: #f0f0f0;
+    background: color-mix(in srgb, var(--bg-0) 95%, #fff);
 }
 
 #addtrack ul li.new-track:hover {
-    background: #e0e0e0;
+    background: color-mix(in srgb, var(--bg-0) 90%, #fff);
 }
 
 @media only screen and (max-width: 1105px) {

admin/static/edit-release.js

@@ -1,3 +1,5 @@
+import { hijackClickEvent } from "./admin.js";
+
 const releaseID = document.getElementById("release").dataset.id;
 const titleInput = document.getElementById("title");
 const artworkImg = document.getElementById("artwork");
@@ -96,3 +98,9 @@ removeArtworkBtn.addEventListener("click", () => {
     artworkData = "";
     saveBtn.disabled = false;
 });
+
+document.addEventListener("readystatechange", () => {
+    document.querySelectorAll("#credits .credit").forEach(el => {
+        hijackClickEvent(el, el.querySelector(".artist-name a"));
+    });
+});

admin/static/edit-track.css

@@ -1,9 +1,5 @@
 @import url("/admin/static/release-list-item.css");
 
-h1 {
-    margin: 0 0 .5em 0;
-}
-
 #track {
     margin-bottom: 1em;
     padding: .5em 1.5em 1.5em 1.5em;
@@ -11,9 +7,9 @@ h1 {
     flex-direction: row;
     gap: 1.2em;
 
-    border-radius: 8px;
+    border-radius: 16px;
-    background: #f8f8f8f8;
+    background: var(--bg-2);
-    border: 1px solid #808080;
+    box-shadow: var(--shadow-md);
 }
 
 .track-info {
@@ -49,7 +45,8 @@ h1 {
     font-weight: inherit;
     font-family: inherit;
     font-size: inherit;
-    border: 1px solid transparent;
+    background: var(--bg-0);
+    border: none;
     border-radius: 4px;
     outline: none;
     color: inherit;

admin/static/index.js

@@ -0,0 +1,74 @@
+const newReleaseBtn = document.getElementById("create-release");
+const newArtistBtn = document.getElementById("create-artist");
+const newTrackBtn = document.getElementById("create-track");
+
+newReleaseBtn.addEventListener("click", event => {
+    event.preventDefault();
+    const id = prompt("Enter an ID for this release:");
+    if (id == null || id == "") return;
+
+    fetch("/api/v1/music", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({id})
+    }).then(res => {
+        if (res.ok) location = "/admin/releases/" + id;
+        else {
+            res.text().then(err => {
+                alert("Request failed: " + err);
+                console.error(err);
+            });
+        }
+    }).catch(err => {
+        alert("Failed to create release. Check the console for details.");
+        console.error(err);
+    });
+});
+
+newArtistBtn.addEventListener("click", event => {
+    event.preventDefault();
+    const id = prompt("Enter an ID for this artist:");
+    if (id == null || id == "") return;
+
+    fetch("/api/v1/artist", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({id})
+    }).then(res => {
+        res.text().then(text => {
+            if (res.ok) {
+                location = "/admin/artists/" + id;
+            } else {
+                alert("Request failed: " + text);
+                console.error(text);
+            }
+        })
+    }).catch(err => {
+        alert("Failed to create artist. Check the console for details.");
+        console.error(err);
+    });
+});
+
+newTrackBtn.addEventListener("click", event => {
+    event.preventDefault();
+    const title = prompt("Enter an title for this track:");
+    if (title == null || title == "") return;
+
+    fetch("/api/v1/track", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({title})
+    }).then(res => {
+        res.text().then(text => {
+            if (res.ok) {
+                location = "/admin/tracks/" + text;
+            } else {
+                alert("Request failed: " + text);
+                console.error(text);
+            }
+        })
+    }).catch(err => {
+        alert("Failed to create track. Check the console for details.");
+        console.error(err);
+    });
+});

admin/static/logs.css

@@ -2,8 +2,14 @@ main {
     width: min(1080px, calc(100% - 2em))!important
 }
 
-form {
+form#search-form {
+    width: calc(100% - 2em);
     margin: 1em 0;
+    padding: 1em;
+    border-radius: 16px;
+    color: var(--fg-0);
+    background: var(--bg-2);
+    box-shadow: var(--shadow-md);
 }
 
 div#search {
@@ -12,24 +18,25 @@ div#search {
 
 #search input {
     margin: 0;
+    padding: .3em .8em;
     flex-grow: 1;
-
+    border: none;
-    border-right: none;
+    border-radius: 16px;
-    border-top-right-radius: 0;
+    color: var(--fg-1);
-    border-bottom-right-radius: 0;
+    background: var(--bg-0);
+    box-shadow: var(--shadow-sm);
 }
 
 #search button {
-    padding: 0 .5em;
+    margin-left: .5em;
-
+    padding: 0 .8em;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
 }
 
 form #filters p {
     margin: .5em 0 0 0;
 }
 form #filters label {
+    color: inherit;
     display: inline;
 }
 form #filters input {
@@ -39,6 +46,15 @@ form #filters input {
 
 #logs {
     width: 100%;
+    overflow: scroll;
+}
+@media screen and (max-width: 720px) {
+    #logs {
+        font-size: 12px;
+    }
+}
+
+#logs table{
     border-collapse: collapse;
 }
 
@@ -57,6 +73,10 @@ form #filters input {
     padding: .4em .8em;
 }
 
+#logs .log {
+    color: var(--fg-2);
+}
+
 td, th {
     width: 1%;
     text-align: left;
@@ -74,13 +94,14 @@ td.log-content {
     white-space: collapse;
 }
 
-.log:hover {
+#logs .log:hover {
-    background: #fff8;
+    background: color-mix(in srgb, var(--fg-3) 10%, transparent);
 }
 
-.log.warn {
+#logs .log.warn {
-    background: #ffe86a;
+    color: var(--col-on-warn);
+    background: var(--col-warn);
 }
-.log.warn:hover {
+#logs .log.warn:hover {
-    background: #ffec81;
+    background: var(--col-warn-hover);
 }

admin/static/music.js

@@ -12,7 +12,7 @@ newReleaseBtn.addEventListener("click", event => {
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({id})
     }).then(res => {
-        if (res.ok) location = "/admin/music/release/" + id;
+        if (res.ok) location = "/admin/music/releases/" + id;
         else {
             res.text().then(err => {
                 alert("Request failed: " + err);
@@ -37,7 +37,7 @@ newArtistBtn.addEventListener("click", event => {
     }).then(res => {
         res.text().then(text => {
             if (res.ok) {
-                location = "/admin/music/artist/" + id;
+                location = "/admin/music/artists/" + id;
             } else {
                 alert("Request failed: " + text);
                 console.error(text);
@@ -61,7 +61,7 @@ newTrackBtn.addEventListener("click", event => {
     }).then(res => {
         res.text().then(text => {
             if (res.ok) {
-                location = "/admin/music/track/" + text;
+                location = "/admin/music/tracks/" + text;
             } else {
                 alert("Request failed: " + text);
                 console.error(text);

admin/static/release-list-item.css

@@ -1,87 +0,0 @@
-.release {
-    margin-bottom: 1em;
-    padding: 1em;
-    display: flex;
-    flex-direction: row;
-    gap: 1em;
-
-    border-radius: 8px;
-    background: #f8f8f8f8;
-    border: 1px solid #808080;
-}
-
-.release h3,
-.release p {
-    margin: 0;
-}
-
-.release-artwork {
-    width: 96px;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.release-artwork img {
-    width: 100%;
-    aspect-ratio: 1;
-}
-
-.release-title small {
-    opacity: .75;
-}
-
-.release-links {
-    margin: .5em 0;
-    padding: 0;
-    display: flex;
-    flex-direction: row;
-    list-style: none;
-    flex-wrap: wrap;
-    gap: .5em;
-}
-
-.release-links li {
-    flex-grow: 1;
-}
-
-.release-links a {
-    padding: .5em;
-    display: block;
-
-    border-radius: 8px;
-    text-decoration: none;
-    color: #f0f0f0;
-    background: #303030;
-    text-align: center;
-
-    transition: color .1s, background .1s;
-}
-
-.release-links a:hover {
-    color: #303030;
-    background: #f0f0f0;
-}
-
-.release-actions {
-    margin-top: .5em;
-}
-
-.release-actions a {
-    margin-right: .3em;
-    padding: .3em .5em;
-    display: inline-block;
-
-    border-radius: 4px;
-    background: #e0e0e0;
-
-    transition: color .1s, background .1s;
-}
-
-.release-actions a:hover {
-    color: #303030;
-    background: #f0f0f0;
-
-    text-decoration: none;
-}

admin/static/releases.css

@@ -0,0 +1,80 @@
+.release {
+    margin-bottom: 1em;
+    padding: 1em;
+    display: flex;
+    flex-direction: row;
+    gap: 1em;
+
+    border-radius: 16px;
+    background: var(--bg-2);
+    box-shadow: var(--shadow-md);
+
+    transition: background .1s ease-out, color .1s ease-out;
+}
+
+.release h3,
+.release p {
+    margin: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.release .release-artwork {
+    margin: auto 0;
+    width: 96px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    overflow: hidden;
+    box-shadow: var(--shadow-sm);
+}
+
+.release .release-artwork img {
+    width: 100%;
+    aspect-ratio: 1;
+}
+
+.release .release-info {
+    max-width: calc(100% - 96px - 1em);
+}
+
+.release .release-title small {
+    opacity: .75;
+}
+
+.release .release-links {
+    margin: .5em 0;
+    padding: 0;
+    display: flex;
+    flex-direction: row;
+    list-style: none;
+    flex-wrap: wrap;
+    gap: .5em;
+}
+
+.release .release-actions {
+    margin-top: .5em;
+    user-select: none;
+    color: var(--fg-3);
+}
+
+.release .release-actions a {
+    margin-right: .3em;
+    padding: .3em .5em;
+    display: inline-block;
+
+    border-radius: 4px;
+    background: var(--bg-3);
+    box-shadow: var(--shadow-sm);
+
+    transition: color .1s ease-out, background .1s ease-out;
+}
+
+.release .release-actions a:hover {
+    background: var(--bg-0);
+    color: var(--fg-3);
+    text-decoration: none;
+}

admin/static/tracks.css

@@ -0,0 +1,127 @@
+#tracks h2.track-title {
+    margin: 0;
+    display: flex;
+    gap: .5em;
+}
+
+#tracks .track {
+    margin-bottom: 1em;
+    padding: 1em;
+    display: flex;
+    flex-direction: column;
+    gap: .5em;
+
+    border-radius: 16px;
+    background: var(--bg-2);
+    box-shadow: var(--shadow-md);
+
+    transition: background .1s ease-out, color .1s ease-out;
+}
+
+#tracks .track h3,
+#tracks .track p {
+    margin: 0;
+}
+
+#tracks h2.track-title {
+    margin: 0;
+    display: flex;
+    gap: .5em;
+}
+
+#tracks h2.track-title .track-number {
+    opacity: .5;
+}
+
+#tracks a:hover {
+    text-decoration: underline;
+}
+
+#tracks .track-album {
+    margin-left: auto;
+    font-style: italic;
+    font-size: .75em;
+    opacity: .5;
+}
+
+#tracks .track-album.empty {
+    color: #ff2020;
+    opacity: 1;
+}
+
+#tracks .track-description {
+    font-style: italic;
+}
+
+#tracks .track-lyrics {
+    max-height: 10em;
+    overflow-y: scroll;
+}
+
+#tracks .track .empty {
+    opacity: 0.75;
+}
+
+
+.card h2.track-title {
+    margin: 0;
+    display: flex;
+    flex-direction: row;
+    /*
+    justify-content: space-between;
+    */
+}
+
+/*
+.track {
+    margin-bottom: 1em;
+    padding: 1em;
+    display: flex;
+    flex-direction: column;
+    gap: .5em;
+
+    border-radius: 8px;
+    background-color: var(--bg-2);
+    box-shadow: var(--shadow-md);
+
+    transition: color .1s ease-out, background-color .1s ease-out;
+}
+
+.track p {
+    margin: 0;
+}
+
+.track-id {
+    width: fit-content;
+    font-family: "Monaspace Argon", monospace;
+    font-size: .8em;
+    font-style: italic;
+    line-height: 1em;
+    user-select: all;
+}
+
+.track-album {
+    margin-left: auto;
+    font-style: italic;
+    font-size: .75em;
+    opacity: .5;
+}
+
+.track-album.empty {
+    color: #ff2020;
+    opacity: 1;
+}
+
+.track-description {
+    font-style: italic;
+}
+
+.track-lyrics {
+    max-height: 10em;
+    overflow-y: scroll;
+}
+
+.track .empty {
+    opacity: 0.75;
+}
+*/

admin/templates/html/artists.html

@@ -0,0 +1,26 @@
+{{define "head"}}
+<title>Artists - ari melody 💫</title>
+<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
+<link rel="stylesheet" href="/admin/static/artists.css">
+{{end}}
+
+{{define "content"}}
+<main>
+    <header>
+        <h1>Artists <small>({{len .Artists}} total)</small></h2>
+        <a class="button new" id="create-artist">Create New</a>
+    </header>
+
+    {{if .Artists}}
+    <div class="artists-group">
+        {{range .Artists}}
+        {{block "artist" .}}{{end}}
+        {{end}}
+    </div>
+    {{else}}
+    <p>There are no artists.</p>
+    {{end}}
+</main>
+
+<script type="module" src="/admin/static/artists.js"></script>
+{{end}}

admin/templates/html/components/artist/artist.html

@@ -0,0 +1,6 @@
+{{define "artist"}}
+<div class="artist">
+    <img src="{{.GetAvatar}}" alt="" width="64" loading="lazy" class="artist-avatar">
+    <a href="/admin/music/artists/{{.ID}}" class="artist-name">{{.Name}}</a>
+</div>       
+{{end}}

admin/templates/html/components/credit/addcredit.html

@@ -7,7 +7,7 @@
         {{range $Artist := .Artists}}
         <li class="new-artist"
             data-id="{{$Artist.ID}}"
-            hx-get="/admin/music/release/{{$.ReleaseID}}/newcredit/{{$Artist.ID}}"
+            hx-get="/admin/music/releases/{{$.ReleaseID}}/newcredit/{{$Artist.ID}}"
             hx-target="#editcredits ul"
             hx-swap="beforeend"
         >

admin/templates/html/components/credit/editcredits.html

@@ -3,8 +3,8 @@
         <h2>Editing: Credits</h2>
         <a id="add-credit"
            class="button new"
-           href="/admin/music/release/{{.ID}}/addcredit"
+           href="/admin/music/releases/{{.ID}}/addcredit"
-           hx-get="/admin/music/release/{{.ID}}/addcredit"
+           hx-get="/admin/music/releases/{{.ID}}/addcredit"
            hx-target="body"
            hx-swap="beforeend"
         >Add</a>

admin/templates/html/components/release/release.html

@@ -5,7 +5,7 @@
     </div>
     <div class="release-info">
         <h3 class="release-title">
-            <a href="/admin/music/release/{{.ID}}">{{.Title}}</a>
+            <a href="/admin/music/releases/{{.ID}}">{{.Title}}</a>
             <small>
                 <span title="{{.PrintReleaseDate}}">{{.ReleaseDate.Year}}</span>
                 {{if not .Visible}}(hidden){{end}}
@@ -13,9 +13,9 @@
         </h3>
         <p class="release-artists">{{.PrintArtists true true}}</p>
         <p class="release-type-single">{{.ReleaseType}}
-        (<a href="/admin/music/release/{{.ID}}#tracks">{{len .Tracks}} track{{if not (eq (len .Tracks) 1)}}s{{end}}</a>)</p>
+        (<a href="/admin/music/releases/{{.ID}}#tracks">{{len .Tracks}} track{{if not (eq (len .Tracks) 1)}}s{{end}}</a>)</p>
         <div class="release-actions">
-            <a href="/admin/music/release/{{.ID}}">Edit</a>
+            <a href="/admin/music/releases/{{.ID}}">Edit</a>
             <a href="/music/{{.ID}}" target="_blank">Gateway <img class="icon" src="/img/external-link.svg"/></a>
         </div>
     </div>

admin/templates/html/components/track/addtrack.html

@@ -8,7 +8,7 @@
         </li>
         <li class="new-track"
             data-id="{{$Track.ID}}"
-            hx-get="/admin/music/release/{{$.ReleaseID}}/newtrack/{{$Track.ID}}"
+            hx-get="/admin/music/releases/{{$.ReleaseID}}/newtrack/{{$Track.ID}}"
             hx-target="#edittracks ul"
             hx-swap="beforeend"
         >

admin/templates/html/components/track/edittracks.html

@@ -3,8 +3,8 @@
         <h2>Editing: Tracks</h2>
         <a id="add-track"
            class="button new"
-           href="/admin/music/release/{{.Release.ID}}/addtrack"
+           href="/admin/music/releases/{{.Release.ID}}/addtrack"
-           hx-get="/admin/music/release/{{.Release.ID}}/addtrack"
+           hx-get="/admin/music/releases/{{.Release.ID}}/addtrack"
            hx-target="body"
            hx-swap="beforeend"
         >Add</a>
@@ -12,12 +12,12 @@
 
     <form action="/api/v1/music/{{.Release.ID}}/tracks">
         <ul>
-            {{range $i, $track := .Release.Tracks}}
+            {{range .Release.Tracks}}
-            <li class="track" data-track="{{$track.ID}}" data-title="{{$track.Title}}" data-number="{{$track.Add $i 1}}" draggable="true">
+            <li class="track" data-track="{{.ID}}" data-title="{{.Title}}" data-number="{{.Number}}" draggable="true">
                 <div>
                     <p class="track-name">
-                        <span class="track-number">{{.Add $i 1}}</span>
+                        <span class="track-number">{{.Number}}</span>
-                        {{$track.Title}}
+                        {{.Title}}
                     </p>
                     <a class="delete">Delete</a>
                 </div>

admin/templates/html/components/track/track.html

@@ -0,0 +1,24 @@
+{{define "track"}}
+<div class="track" data-id="{{.ID}}">
+    <h2 class="track-title">
+        {{if .Number}}
+        <span class="track-number">{{.Number}}</span>
+        {{end}}
+        <a href="/admin/music/tracks/{{.ID}}">{{.Title}}</a>
+    </h2>
+
+    <h3>Description</h3>
+    {{if .Description}}
+    <p class="track-description">{{.GetDescriptionHTML}}</p>
+    {{else}}
+    <p class="track-description empty">No description provided.</p>
+    {{end}}
+
+    <h3>Lyrics</h3>
+    {{if .Lyrics}}
+    <p class="track-lyrics">{{.GetLyricsHTML}}</p>
+    {{else}}
+    <p class="track-lyrics empty">There are no lyrics.</p>
+    {{end}}
+</div>       
+{{end}}

admin/templates/html/edit-account.html

@@ -14,10 +14,10 @@
     {{end}}
     <h1>Account Settings ({{.Session.Account.Username}})</h1>
 
-    <div class="card-title">
-        <h2>Change Password</h2>
-    </div>
     <div class="card">
+        <div class="card-header">
+            <h2>Change Password</h2>
+        </div>
         <form action="/admin/account/password" method="POST" id="change-password">
             <label for="current-password">Current Password</label>
             <input type="password" id="current-password" name="current-password" value="" autocomplete="current-password" required>
@@ -28,14 +28,16 @@
             <label for="confirm-password">Confirm Password</label>
             <input type="password" id="confirm-password" value="" autocomplete="new-password" required>
 
+            <br>
+
             <button type="submit" class="save">Change Password</button>
         </form>
     </div>
         
-    <div class="card-title">
-        <h2>MFA Devices</h2>
-    </div>
     <div class="card mfa-devices">
+        <div class="card-header">
+            <h2>MFA Devices</h2>
+        </div>
         {{if .TOTPs}}
         {{range .TOTPs}}
         <div class="mfa-device">
@@ -44,7 +46,10 @@
                 <p class="mfa-device-date">Added: {{.CreatedAtString}}</p>
             </div>
             <div>
-                <a class="button delete" href="/admin/account/totp-delete/{{.TOTP.Name}}">Delete</a>
+                <form method="POST" action="/admin/account/totp-delete">
+                    <input type="text" name="totp-name" value="{{.TOTP.Name}}" hidden>
+                    <button type="submit" class="delete">Delete</button>
+                </form>
             </div>
         </div>
         {{end}}
@@ -52,28 +57,30 @@
         <p>You have no MFA devices.</p>
         {{end}}
 
-        <div>
+        <div class="mfa-actions">
             <button type="submit" class="save" id="enable-email" disabled>Enable Email TOTP</button>
             <a class="button new" id="add-totp-device" href="/admin/account/totp-setup">Add TOTP Device</a>
         </div>
     </div>
 
-    <div class="card-title">
-        <h2>Danger Zone</h2>
-    </div>
     <div class="card danger">
+        <div class="card-header">
+            <h2>Danger Zone</h2>
+        </div>
         <p>
         Clicking the button below will delete your account.
         This action is <strong>irreversible</strong>.
         You will need to enter your password and TOTP below.
         </p>
-        <form action="/admin/account/delete" method="POST">
+        <form action="/admin/account/delete" method="POST" id="delete-account">
             <label for="password">Password</label>
             <input type="password" name="password" value="" autocomplete="current-password" required>
 
             <label for="totp">TOTP</label>
             <input type="text" name="totp" value="" autocomplete="one-time-code" required>
 
+            <br>
+
             <button type="submit" class="delete">Delete Account</button>
         </form>
     </div>

admin/templates/html/edit-artist.html

@@ -2,6 +2,7 @@
 <title>Editing {{.Artist.Name}} - ari melody 💫</title>
 <link rel="shortcut icon" href="{{.Artist.GetAvatar}}" type="image/x-icon">
 <link rel="stylesheet" href="/admin/static/edit-artist.css">
+<link rel="stylesheet" href="/admin/static/artists.css">
 {{end}}
 
 {{define "content"}}
@@ -29,16 +30,16 @@
         </div>
     </div>
 
-    <div class="card-title">
+    <div class="card" id="releases">
-        <h2>Featured in</h2>
+        <div class="card-header">
-    </div>
+            <h2>Featured in</h2>
-    <div class="card releases">
+        </div>
         {{if .Credits}}
         {{range .Credits}}
         <div class="credit">
             <img src="{{.Release.Artwork}}" alt="" width="64" loading="lazy" class="release-artwork">
             <div class="credit-info">
-                <h3 class="credit-name"><a href="/admin/music/release/{{.Release.ID}}">{{.Release.Title}}</a></h3>
+                <h3 class="credit-name"><a href="/admin/music/releases/{{.Release.ID}}">{{.Release.Title}}</a></h3>
                 <p class="credit-artists">{{.Release.PrintArtists true true}}</p>
                 <p class="artist-role">
                 Role: {{.Role}}
@@ -54,10 +55,10 @@
         {{end}}
     </div>
 
-    <div class="card-title">
+    <div class="card" id="danger">
-        <h2>Danger Zone</h2>
+        <div class="card-header">
-    </div>
+            <h2>Danger Zone</h2>
-    <div class="card danger">
+        </div>
         <p>
         Clicking the button below will delete this artist.
         This action is <strong>irreversible</strong>.

admin/templates/html/edit-release.html

@@ -2,10 +2,13 @@
 <title>Editing {{.Release.Title}} - ari melody 💫</title>
 <link rel="shortcut icon" href="{{.Release.GetArtwork}}" type="image/x-icon">
 <link rel="stylesheet" href="/admin/static/edit-release.css">
+<link rel="stylesheet" href="/admin/static/releases.css">
+<link rel="stylesheet" href="/admin/static/tracks.css">
 {{end}}
 
 {{define "content"}}
 <main>
+    <h1>Editing {{.Release.Title}}</h1>
 
     <div id="release" data-id="{{.Release.ID}}">
         <div class="release-artwork">
@@ -97,21 +100,22 @@
         </div>
     </div>
 
-    <div class="card-title">
+    <div id="credits" class="card">
-        <h2>Credits ({{len .Release.Credits}})</h2>
+        <div class="card-header">
-        <a class="button edit"
+            <h2>Credits <small>({{len .Release.Credits}} total)</small></h2>
-           href="/admin/music/release/{{.Release.ID}}/editcredits"
+            <a class="button edit"
-           hx-get="/admin/music/release/{{.Release.ID}}/editcredits"
+               href="/admin/music/releases/{{.Release.ID}}/editcredits"
-           hx-target="body"
+               hx-get="/admin/music/releases/{{.Release.ID}}/editcredits"
-           hx-swap="beforeend"
+               hx-target="body"
-           >Edit</a>
+               hx-swap="beforeend"
-    </div>
+               >Edit</a>
-    <div class="card credits">
+        </div>
+
         {{range .Release.Credits}}
         <div class="credit">
             <img src="{{.Artist.GetAvatar}}" alt="" width="64" loading="lazy" class="artist-avatar">
             <div class="credit-info">
-                <p class="artist-name"><a href="/admin/music/artist/{{.Artist.ID}}">{{.Artist.Name}}</a></p>
+                <p class="artist-name"><a href="/admin/music/artists/{{.Artist.ID}}">{{.Artist.Name}}</a></p>
                 <p class="artist-role">
                 {{.Role}}
                 {{if .Primary}}
@@ -126,59 +130,44 @@
         {{end}}
     </div>
 
-    <div class="card-title">
+    <div id="links" class="card">
-        <h2>Links ({{len .Release.Links}})</h2>
+        <div class="card-header">
-        <a class="button edit"
+            <h2>Links <small>({{len .Release.Links}} total)</small></h2>
-           href="/admin/music/release/{{.Release.ID}}/editlinks"
+            <a class="button edit"
-           hx-get="/admin/music/release/{{.Release.ID}}/editlinks"
+               href="/admin/music/releases/{{.Release.ID}}/editlinks"
-           hx-target="body"
+               hx-get="/admin/music/releases/{{.Release.ID}}/editlinks"
-           hx-swap="beforeend"
+               hx-target="body"
-           >Edit</a>
+               hx-swap="beforeend"
-    </div>
+               >Edit</a>
-    <div class="card links">
-        {{range .Release.Links}}
-        <a href="{{.URL}}" target="_blank" class="button" data-name="{{.Name}}">{{.Name}} <img class="icon" src="/img/external-link.svg"/></a>
-        {{end}}
-    </div>
-
-    <div class="card-title" id="tracks">
-        <h2>Tracklist ({{len .Release.Tracks}})</h2>
-        <a class="button edit"
-           href="/admin/music/release/{{.Release.ID}}/edittracks"
-           hx-get="/admin/music/release/{{.Release.ID}}/edittracks"
-           hx-target="body"
-           hx-swap="beforeend"
-           >Edit</a>
-    </div>
-    <div class="card tracks">
-        {{range $i, $track := .Release.Tracks}}
-        <div class="track" data-id="{{$track.ID}}">
-            <h2 class="track-title">
-                <span class="track-number">{{.Add $i 1}}</span>
-                <a href="/admin/music/track/{{$track.ID}}">{{$track.Title}}</a>
-            </h2>
-
-            <h3>Description</h3>
-            {{if $track.Description}}
-            <p class="track-description">{{$track.GetDescriptionHTML}}</p>
-            {{else}}
-            <p class="track-description empty">No description provided.</p>
-            {{end}}
-
-            <h3>Lyrics</h3>
-            {{if $track.Lyrics}}
-            <p class="track-lyrics">{{$track.GetLyricsHTML}}</p>
-            {{else}}
-            <p class="track-lyrics empty">There are no lyrics.</p>
-            {{end}}
         </div>
+
+        <ul>
+            {{range .Release.Links}}
+            <a href="{{.URL}}" target="_blank" class="button" data-name="{{.Name}}">{{.Name}} <img class="icon" src="/img/external-link.svg"/></a>
+            {{end}}
+        </ul>
+    </div>
+
+    <div id="tracks" class="card">
+        <div class="card-header">
+            <h2>Tracks <small>({{len .Release.Tracks}} total)</small></h2>
+            <a class="button edit"
+               href="/admin/music/releases/{{.Release.ID}}/edittracks"
+               hx-get="/admin/music/releases/{{.Release.ID}}/edittracks"
+               hx-target="body"
+               hx-swap="beforeend"
+               >Edit</a>
+        </div>
+
+        {{range .Release.Tracks}}
+        {{block "track" .}}{{end}}
         {{end}}
     </div>
 
-    <div class="card-title">
+    <div class="card" id="danger">
-        <h2>Danger Zone</h2>
+        <div class="card-header">
-    </div>
+            <h2>Danger Zone</h2>
-    <div class="card danger">
+        </div>
         <p>
         Clicking the button below will delete this release.
         This action is <strong>irreversible</strong>.

admin/templates/html/edit-track.html

@@ -2,6 +2,8 @@
 <title>Editing Track - ari melody 💫</title>
 <link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
 <link rel="stylesheet" href="/admin/static/edit-track.css">
+<link rel="stylesheet" href="/admin/static/tracks.css">
+<link rel="stylesheet" href="/admin/static/releases.css">
 {{end}}
 
 {{define "content"}}
@@ -39,10 +41,10 @@
         </div>
     </div>
 
-    <div class="card-title">
-        <h2>Featured in</h2>
-    </div>
     <div class="card releases">
+        <div class="card-header">
+            <h2>Featured in</h2>
+        </div>
         {{if .Releases}}
         {{range .Releases}}
         {{block "release" .}}{{end}}
@@ -52,10 +54,10 @@
         {{end}}
     </div>
 
-    <div class="card-title">
-        <h2>Danger Zone</h2>
-    </div>
     <div class="card danger">
+        <div class="card-header">
+            <h2>Danger Zone</h2>
+        </div>
         <p>
         Clicking the button below will delete this track.
         This action is <strong>irreversible</strong>.

admin/templates/html/index.html

@@ -0,0 +1,61 @@
+{{define "head"}}
+<title>Admin - ari melody 💫</title>
+<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
+<link rel="stylesheet" href="/admin/static/releases.css">
+<link rel="stylesheet" href="/admin/static/artists.css">
+<link rel="stylesheet" href="/admin/static/tracks.css">
+{{end}}
+
+{{define "content"}}
+<main class="dashboard">
+    <h1>Dashboard</h1>
+
+    <div class="cards">
+        <div class="card" id="releases">
+            <div class="card-header">
+                <h2><a href="/admin/releases/">Releases</a> <small>({{.ReleaseCount}} total)</small></h2>
+                <a class="button new" id="create-release">Create New</a>
+            </div>
+            {{if .Artists}}
+            {{range .Releases}}
+            {{block "release" .}}{{end}}
+            {{end}}
+            {{else}}
+            <p>There are no releases.</p>
+            {{end}}
+        </div>
+
+        <div class="card" id="artists">
+            <div class="card-header">
+                <h2><a href="/admin/artists/">Artists</a> <small>({{.ArtistCount}} total)</small></h2>
+                <a class="button new" id="create-artist">Create New</a>
+            </div>
+            {{if .Artists}}
+            <div class="artists-group">
+                {{range .Artists}}
+                {{block "artist" .}}{{end}}
+                {{end}}
+            </div>
+            {{else}}
+            <p>There are no artists.</p>
+            {{end}}
+        </div>
+
+        <div class="card" id="tracks">
+            <div class="card-header">
+                <h2><a href="/admin/tracks/">Tracks</a> <small>({{.TrackCount}} total)</small></h2>
+                <a class="button new" id="create-track">Create New</a>
+            </div>
+            <p><em>"Orphaned" tracks that have not yet been bound to a release.</em></p>
+            <br>
+            {{range .Tracks}}
+            {{block "track" .}}{{end}}
+            {{end}}
+        </div>
+    </div>
+
+</main>
+
+<script type="module" src="/admin/static/artists.js"></script>
+<script type="module" src="/admin/static/index.js"></script>
+{{end}}

admin/templates/html/layout.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+
+    <head>
+        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        {{block "head" .}}{{end}}
+
+        <link rel="stylesheet" href="/admin/static/admin.css">
+        <script type="module" src="/admin/static/admin.js"></script>
+        <script type="module" src="/script/vendor/htmx.min.js"></script>
+    </head>
+
+    <body>
+        <header>
+            <nav id="navbar">
+                <a href="/" class="nav icon" aria-label="ari melody" title="Return to Home">
+                    <img src="/img/favicon.png" alt="" width="64" height="64">
+                </a>
+                <div class="nav-item{{if eq .Path "/"}} active{{end}}">
+                    <a href="/admin">home</a>
+                </div>
+                {{if .Session.Account}}
+                <div class="nav-item{{if eq .Path "/logs"}} active{{end}}">
+                    <a href="/admin/logs">logs</a>
+                </div>
+                <hr>
+                <p class="section-label">music</p>
+                <div class="nav-item{{if hasPrefix .Path "/releases"}} active{{end}}">
+                    <a href="/admin/music/releases/">releases</a>
+                </div>
+                <div class="nav-item{{if hasPrefix .Path "/artists"}} active{{end}}">
+                    <a href="/admin/music/artists/">artists</a>
+                </div>
+                <div class="nav-item{{if hasPrefix .Path "/tracks"}} active{{end}}">
+                    <a href="/admin/music/tracks/">tracks</a>
+                </div>
+                {{end}}
+
+                <div class="flex-fill"></div>
+
+                {{if .Session.Account}}
+                <div class="nav-item{{if eq .Path "/account"}} active{{end}}">
+                    <a href="/admin/account">account ({{.Session.Account.Username}})</a>
+                </div>
+                <div class="nav-item">
+                    <a href="/admin/logout" id="logout">log out</a>
+                </div>
+                {{else}}
+                <div class="nav-item{{if eq .Path "/login"}} active{{end}}">
+                    <a href="/admin/login" id="login">log in</a>
+                </div>
+                <div class="nav-item{{if eq .Path "/register"}} active{{end}}">
+                    <a href="/admin/register" id="register">create account</a>
+                </div>
+                {{end}}
+            </nav>
+            <button type="button" id="toggle-nav" aria-label="Navigation toggle">
+                <img src="/img/hamburger.svg" alt="">
+            </button>
+        </header>
+
+        {{block "content" .}}{{end}}
+
+        {{template "prideflag"}}
+    </body>
+
+</html>

admin/templates/html/login-totp.html

@@ -1,7 +1,6 @@
 {{define "head"}}
 <title>Login - ari melody 💫</title>
 <link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
-<link rel="stylesheet" href="/admin/static/admin.css">
 <style>
 form#login-totp {
     width: 100%;
@@ -18,8 +17,15 @@ form button {
     margin-top: 1rem;
 }
 
-input {
+form input {
-    width: calc(100% - 1rem - 2px);
+    width: calc(100% - 1rem - 2px) !important;
+}
+
+@media screen and (max-width: 720px) {
+    h1 {
+        margin-top: 3em;
+        text-align: center;
+    }
 }
 </style>
 {{end}}

admin/templates/html/login.html

@@ -1,8 +1,14 @@
 {{define "head"}}
 <title>Login - ari melody 💫</title>
 <link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
-<link rel="stylesheet" href="/admin/static/admin.css">
 <style>
+@media screen and (max-width: 720px) {
+    h1 {
+        margin-top: 3em;
+        text-align: center;
+    }
+}
+
 form#login {
     width: 100%;
     display: flex;
@@ -18,8 +24,8 @@ form button {
     margin-top: 1rem;
 }
 
-input {
+form input {
-    width: calc(100% - 1rem - 2px);
+    width: calc(100% - 1rem - 2px) !important;
 }
 </style>
 {{end}}

admin/templates/html/logs.html

@@ -1,7 +1,6 @@
 {{define "head"}}
 <title>Audit Logs - ari melody 💫</title>
 <link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
-<link rel="stylesheet" href="/admin/static/admin.css">
 <link rel="stylesheet" href="/admin/static/logs.css">
 {{end}}
 
@@ -9,7 +8,7 @@
 <main>
     <h1>Audit Logs</h1>
 
-    <form action="/admin/logs" method="GET">
+    <form action="/admin/logs" method="GET" id="search-form">
         <div id="search">
             <input type="text" name="q" value="" placeholder="Filter by message...">
             <button type="submit" class="save">Search</button>
@@ -44,25 +43,27 @@
     
     <hr>
 
-    <table id="logs">
+    <div id="logs">
-        <thead>
+        <table>
-            <tr>
+            <thead>
-                <th class="log-time">Time</th>
+                <tr>
-                <th class="log-level">Level</th>
+                    <th class="log-time">Time</th>
-                <th class="log-type">Type</th>
+                    <th class="log-level">Level</th>
-                <th class="log-content">Message</th>
+                    <th class="log-type">Type</th>
-            </tr>
+                    <th class="log-content">Message</th>
-        </thead>
+                </tr>
-        <tbody>
+            </thead>
-            {{range .Logs}}
+            <tbody>
-            <tr class="log {{lower (parseLevel .Level)}}">
+                {{range .Logs}}
-                <td class="log-time">{{prettyTime .CreatedAt}}</td>
+                <tr class="log {{toLower (parseLevel .Level)}}">
-                <td class="log-level">{{parseLevel .Level}}</td>
+                    <td class="log-time">{{prettyTime .CreatedAt}}</td>
-                <td class="log-type">{{titleCase .Type}}</td>
+                    <td class="log-level">{{parseLevel .Level}}</td>
-                <td class="log-content">{{.Content}}</td>
+                    <td class="log-type">{{titleCase .Type}}</td>
-            </tr>
+                    <td class="log-content">{{.Content}}</td>
-            {{end}}
+                </tr>
-        </tbody>
+                {{end}}
-    </table>
+            </tbody>
+        </table>
+    </div>
 </main>
 {{end}}

admin/templates/html/register.html

@@ -1,7 +1,6 @@
 {{define "head"}}
 <title>Register - ari melody 💫</title>
 <link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
-<link rel="stylesheet" href="/admin/static/admin.css">
 <style>
 p a {
     color: #2a67c8;

admin/templates/html/releases.html

@@ -0,0 +1,24 @@
+{{define "head"}}
+<title>Releases - ari melody 💫</title>
+<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
+<link rel="stylesheet" href="/admin/static/releases.css">
+{{end}}
+
+{{define "content"}}
+<main>
+    <header>
+        <h1>Releases <small>({{len .Releases}} total)</small></h1>
+        <a class="button new" id="create-release">Create New</a>
+    </header>
+
+    {{if .Releases}}
+    <div id="releases">
+        {{range .Releases}}
+        {{block "release" .}}{{end}}
+        {{end}}
+    </div>
+    {{else}}
+    <p>There are no releases.</p>
+    {{end}}
+</main>
+{{end}}

admin/templates/html/totp-confirm.html

@@ -1,7 +1,6 @@
 {{define "head"}}
 <title>TOTP Confirmation - ari melody 💫</title>
 <link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
-<link rel="stylesheet" href="/admin/static/admin.css">
 <style>
 .qr-code {
     border: 1px solid #8888;
@@ -9,11 +8,20 @@
 code {
     user-select: all;
 }
+#totp-setup input {
+    width: 3.8em;
+    min-width: auto;
+    font-size: 32px;
+    font-family: 'Monaspace Argon', monospace;
+    text-align: center;
+}
 </style>
 {{end}}
 
 {{define "content"}}
 <main>
+    <h1>Two-Factor Authentication</h1>
+
     {{if .Session.Error.Valid}}
     <p id="error">{{html .Session.Error.String}}</p>
     {{end}}
@@ -40,7 +48,14 @@ code {
         <p><code>{{.TOTP.Secret}}</code></p>
 
         <label for="totp">TOTP:</label>
-        <input type="text" name="totp" value="" autocomplete="one-time-code" required autofocus>
+        <input type="text"
+               name="totp"
+               value=""
+               minlength="6"
+               maxlength="6"
+               autocomplete="one-time-code"
+               required
+               autofocus>
 
         <button type="submit" class="new">Create</button>
     </form>

admin/templates/html/totp-setup.html

@@ -1,11 +1,12 @@
 {{define "head"}}
 <title>TOTP Setup - ari melody 💫</title>
 <link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
-<link rel="stylesheet" href="/admin/static/admin.css">
 {{end}}
 
 {{define "content"}}
 <main>
+    <h1>Two-Factor Authentication</h1>
+
     {{if .Session.Error.Valid}}
     <p id="error">{{html .Session.Error.String}}</p>
     {{end}}

admin/templates/html/tracks.html

@@ -0,0 +1,20 @@
+{{define "head"}}
+<title>Releases - ari melody 💫</title>
+<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
+<link rel="stylesheet" href="/admin/static/tracks.css">
+{{end}}
+
+{{define "content"}}
+<main>
+    <header>
+        <h1>Tracks <small>({{len .Tracks}} total)</small></h1>
+        <a class="button new" id="create-track">Create New</a>
+    </header>
+        
+    <div id="tracks">
+        {{range $Track := .Tracks}}
+        {{block "track" $Track}}{{end}}
+        {{end}}
+    </div>
+</main>
+{{end}}

admin/templates/index.go

@@ -1,13 +0,0 @@
-package templates
-
-import (
-	"html/template"
-	"path/filepath"
-)
-
-var IndexTemplate = template.Must(template.ParseFiles(
-    filepath.Join("admin", "views", "layout.html"),
-    filepath.Join("view", "prideflag.html"),
-    filepath.Join("admin", "components", "release", "release-list-item.html"),
-    filepath.Join("admin", "views", "index.html"),
-))

admin/templates/login.go

@@ -1,42 +0,0 @@
-package templates
-
-import (
-	"html/template"
-	"path/filepath"
-)
-
-var LoginTemplate = template.Must(template.ParseFiles(
-    filepath.Join("admin", "views", "layout.html"),
-    filepath.Join("view", "prideflag.html"),
-    filepath.Join("admin", "views", "login.html"),
-))
-var LoginTOTPTemplate = template.Must(template.ParseFiles(
-    filepath.Join("admin", "views", "layout.html"),
-    filepath.Join("view", "prideflag.html"),
-    filepath.Join("admin", "views", "login-totp.html"),
-))
-var RegisterTemplate = template.Must(template.ParseFiles(
-    filepath.Join("admin", "views", "layout.html"),
-    filepath.Join("view", "prideflag.html"),
-    filepath.Join("admin", "views", "register.html"),
-))
-var LogoutTemplate = template.Must(template.ParseFiles(
-    filepath.Join("admin", "views", "layout.html"),
-    filepath.Join("view", "prideflag.html"),
-    filepath.Join("admin", "views", "logout.html"),
-))
-var AccountTemplate = template.Must(template.ParseFiles(
-    filepath.Join("admin", "views", "layout.html"),
-    filepath.Join("view", "prideflag.html"),
-    filepath.Join("admin", "views", "edit-account.html"),
-))
-var TotpSetupTemplate = template.Must(template.ParseFiles(
-    filepath.Join("admin", "views", "layout.html"),
-    filepath.Join("view", "prideflag.html"),
-    filepath.Join("admin", "views", "totp-setup.html"),
-))
-var TotpConfirmTemplate = template.Must(template.ParseFiles(
-    filepath.Join("admin", "views", "layout.html"),
-    filepath.Join("view", "prideflag.html"),
-    filepath.Join("admin", "views", "totp-confirm.html"),
-))

admin/templates/logs.go

@@ -1,41 +0,0 @@
-package templates
-
-import (
-	"arimelody-web/log"
-	"fmt"
-	"html/template"
-	"path/filepath"
-	"strings"
-	"time"
-)
-
-var LogsTemplate = template.Must(template.New("layout.html").Funcs(template.FuncMap{
-    "parseLevel": func(level log.LogLevel) string {
-        switch level {
-        case log.LEVEL_INFO:
-            return "INFO"
-        case log.LEVEL_WARN:
-            return "WARN"
-        }
-        return fmt.Sprintf("%d?", level)
-    },
-    "titleCase": func(logType string) string {
-        runes := []rune(logType)
-        for i, r := range runes {
-            if (i == 0 || runes[i - 1] == ' ') && r >= 'a' && r <= 'z' {
-                runes[i] = r + ('A' - 'a')
-            }
-        }
-        return string(runes)
-    },
-    "lower": func(str string) string { return strings.ToLower(str) },
-    "prettyTime": func(t time.Time) string {
-        // return t.Format("2006-01-02 15:04:05")
-        // return t.Format("15:04:05, 2 Jan 2006")
-        return t.Format("02 Jan 2006, 15:04:05")
-    },
-}).ParseFiles(
-    filepath.Join("admin", "views", "layout.html"),
-    filepath.Join("view", "prideflag.html"),
-    filepath.Join("admin", "views", "logs.html"),
-))

admin/templates/music.go

@@ -1,54 +0,0 @@
-package templates
-
-import (
-	"html/template"
-	"path/filepath"
-)
-
-var MusicTemplate = template.Must(template.ParseFiles(
-    filepath.Join("admin", "views", "layout.html"),
-    filepath.Join("view", "prideflag.html"),
-    filepath.Join("admin", "components", "release", "release-list-item.html"),
-    filepath.Join("admin", "views", "music.html"),
-))
-
-var ReleaseTemplate = template.Must(template.ParseFiles(
-    filepath.Join("admin", "views", "layout.html"),
-    filepath.Join("view", "prideflag.html"),
-    filepath.Join("admin", "views", "edit-release.html"),
-))
-var ArtistTemplate = template.Must(template.ParseFiles(
-    filepath.Join("admin", "views", "layout.html"),
-    filepath.Join("view", "prideflag.html"),
-    filepath.Join("admin", "views", "edit-artist.html"),
-))
-var TrackTemplate = template.Must(template.ParseFiles(
-    filepath.Join("admin", "views", "layout.html"),
-    filepath.Join("view", "prideflag.html"),
-    filepath.Join("admin", "components", "release", "release-list-item.html"),
-    filepath.Join("admin", "views", "edit-track.html"),
-))
-
-var EditCreditsTemplate = template.Must(template.ParseFiles(
-    filepath.Join("admin", "components", "credits", "editcredits.html"),
-))
-var AddCreditTemplate = template.Must(template.ParseFiles(
-    filepath.Join("admin", "components", "credits", "addcredit.html"),
-))
-var NewCreditTemplate = template.Must(template.ParseFiles(
-    filepath.Join("admin", "components", "credits", "newcredit.html"),
-))
-
-var EditLinksTemplate = template.Must(template.ParseFiles(
-    filepath.Join("admin", "components", "links", "editlinks.html"),
-))
-
-var EditTracksTemplate = template.Must(template.ParseFiles(
-    filepath.Join("admin", "components", "tracks", "edittracks.html"),
-))
-var AddTrackTemplate = template.Must(template.ParseFiles(
-    filepath.Join("admin", "components", "tracks", "addtrack.html"),
-))
-var NewTrackTemplate = template.Must(template.ParseFiles(
-    filepath.Join("admin", "components", "tracks", "newtrack.html"),
-))

admin/templates/templates.go

@@ -0,0 +1,191 @@
+package templates
+
+import (
+	"arimelody-web/log"
+	_ "embed"
+	"fmt"
+	"html/template"
+	"strings"
+	"time"
+)
+
+//go:embed "html/layout.html"
+var layoutHTML string
+//go:embed "html/prideflag.html"
+var prideflagHTML string
+
+//go:embed "html/index.html"
+var indexHTML string
+
+//go:embed "html/register.html"
+var registerHTML string
+//go:embed "html/login.html"
+var loginHTML string
+//go:embed "html/login-totp.html"
+var loginTotpHTML string
+//go:embed "html/totp-confirm.html"
+var totpConfirmHTML string
+//go:embed "html/totp-setup.html"
+var totpSetupHTML string
+//go:embed "html/logout.html"
+var logoutHTML string
+
+//go:embed "html/logs.html"
+var logsHTML string
+
+//go:embed "html/edit-account.html"
+var editAccountHTML string
+
+//go:embed "html/releases.html"
+var releasesHTML string
+//go:embed "html/artists.html"
+var artistsHTML string
+//go:embed "html/tracks.html"
+var tracksHTML string
+
+//go:embed "html/edit-release.html"
+var editReleaseHTML string
+//go:embed "html/edit-artist.html"
+var editArtistHTML string
+//go:embed "html/edit-track.html"
+var editTrackHTML string
+
+//go:embed "html/components/credit/newcredit.html"
+var componentNewCreditHTML string
+//go:embed "html/components/credit/addcredit.html"
+var componentAddCreditHTML string
+//go:embed "html/components/credit/editcredits.html"
+var componentEditCreditsHTML string
+
+//go:embed "html/components/link/editlinks.html"
+var componentEditLinksHTML string
+
+//go:embed "html/components/release/release.html"
+var componentReleaseHTML string
+//go:embed "html/components/artist/artist.html"
+var componentArtistHTML string
+//go:embed "html/components/track/track.html"
+var componentTrackHTML string
+
+//go:embed "html/components/track/newtrack.html"
+var componentNewTrackHTML string
+//go:embed "html/components/track/addtrack.html"
+var componentAddTrackHTML string
+//go:embed "html/components/track/edittracks.html"
+var componentEditTracksHTML string
+
+var BaseTemplate = template.Must(
+    template.New("base").Funcs(
+        template.FuncMap{
+            "hasPrefix": strings.HasPrefix,
+        },
+    ).Parse(strings.Join([]string{
+        layoutHTML,
+        prideflagHTML,
+    }, "\n")))
+
+var IndexTemplate = template.Must(template.Must(BaseTemplate.Clone()).Parse(
+    strings.Join([]string{
+        indexHTML,
+        componentReleaseHTML,
+        componentArtistHTML,
+        componentTrackHTML,
+    }, "\n"),
+))
+
+
+
+var LoginTemplate = template.Must(template.Must(BaseTemplate.Clone()).Parse(loginHTML))
+var LoginTOTPTemplate = template.Must(template.Must(BaseTemplate.Clone()).Parse(loginTotpHTML))
+var RegisterTemplate = template.Must(template.Must(BaseTemplate.Clone()).Parse(registerHTML))
+var LogoutTemplate = template.Must(template.Must(BaseTemplate.Clone()).Parse(logoutHTML))
+var AccountTemplate = template.Must(template.Must(BaseTemplate.Clone()).Parse(editAccountHTML))
+var TOTPSetupTemplate = template.Must(template.Must(BaseTemplate.Clone()).Parse(totpSetupHTML))
+var TOTPConfirmTemplate = template.Must(template.Must(BaseTemplate.Clone()).Parse(totpConfirmHTML))
+
+
+
+var LogsTemplate = template.Must(template.Must(BaseTemplate.Clone()).Funcs(template.FuncMap{
+    "parseLevel": parseLevel,
+    "titleCase": titleCase,
+    "toLower": toLower,
+    "prettyTime": prettyTime,
+}).Parse(logsHTML))
+
+
+
+var ReleasesTemplate = template.Must(template.Must(BaseTemplate.Clone()).Parse(
+    strings.Join([]string{
+        releasesHTML,
+        componentReleaseHTML,
+    }, "\n"),
+))
+var ArtistsTemplate = template.Must(template.Must(BaseTemplate.Clone()).Parse(
+    strings.Join([]string{
+        artistsHTML,
+        componentArtistHTML,
+    }, "\n"),
+))
+var TracksTemplate = template.Must(template.Must(BaseTemplate.Clone()).Parse(
+    strings.Join([]string{
+        tracksHTML,
+        componentTrackHTML,
+    }, "\n"),
+))
+
+
+
+var EditReleaseTemplate = template.Must(template.Must(BaseTemplate.Clone()).Parse(
+    strings.Join([]string{
+        editReleaseHTML,
+        componentTrackHTML,
+    }, "\n"),
+))
+var EditArtistTemplate = template.Must(template.Must(BaseTemplate.Clone()).Parse(editArtistHTML))
+var EditTrackTemplate = template.Must(template.Must(BaseTemplate.Clone()).Parse(
+    strings.Join([]string{
+        editTrackHTML,
+        componentReleaseHTML,
+    }, "\n"),
+))
+
+
+
+var EditCreditsTemplate = template.Must(template.Must(BaseTemplate.Clone()).Parse(componentEditCreditsHTML))
+var AddCreditTemplate = template.Must(template.Must(BaseTemplate.Clone()).Parse(componentAddCreditHTML))
+var NewCreditTemplate = template.Must(template.Must(BaseTemplate.Clone()).Parse(componentNewCreditHTML))
+
+var EditLinksTemplate = template.Must(template.Must(BaseTemplate.Clone()).Parse(componentEditLinksHTML))
+
+var EditTracksTemplate = template.Must(template.Must(BaseTemplate.Clone()).Parse(componentEditTracksHTML))
+var AddTrackTemplate = template.Must(template.Must(BaseTemplate.Clone()).Parse(componentAddTrackHTML))
+var NewTrackTemplate = template.Must(template.Must(BaseTemplate.Clone()).Parse(componentNewTrackHTML))
+
+
+
+func parseLevel(level log.LogLevel) string {
+    switch level {
+    case log.LEVEL_INFO:
+        return "INFO"
+    case log.LEVEL_WARN:
+        return "WARN"
+    }
+    return fmt.Sprintf("%d?", level)
+}
+func titleCase(logType string) string {
+    runes := []rune(logType)
+    for i, r := range runes {
+        if (i == 0 || runes[i - 1] == ' ') && r >= 'a' && r <= 'z' {
+            runes[i] = r + ('A' - 'a')
+        }
+    }
+    return string(runes)
+}
+func toLower(str string) string {
+    return strings.ToLower(str)
+}
+func prettyTime(t time.Time) string {
+    // return t.Format("2006-01-02 15:04:05")
+    // return t.Format("15:04:05, 2 Jan 2006")
+    return t.Format("02 Jan 2006, 15:04:05")
+}

admin/views/index.html

@@ -7,7 +7,7 @@
 {{define "content"}}
 <main>
     <h1>Admin Dashboard</h1>
-    <div class="card-title">
+    <div class="card-header">
         <h2>Music</h2>
         <a class="button" href="/admin/music/">Browse All</a>
     </div>

admin/views/music.html

@@ -1,73 +0,0 @@
-{{define "head"}}
-<title>Music - ari melody 💫</title>
-<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
-<link rel="stylesheet" href="/admin/static/music.css">
-{{end}}
-
-{{define "content"}}
-<main>
-    <h1>Music</h1>
-
-    <div class="card-title">
-        <h2>Releases</h2>
-        <a class="button new" id="create-release">Create New</a>
-    </div>
-    <div class="card releases">
-        {{range .Releases}}
-        {{block "release" .}}{{end}}
-        {{end}}
-        {{if not .Releases}}
-        <p>There are no releases.</p>
-        {{end}}
-    </div>
-
-    <div class="card-title">
-        <h2>Artists</h2>
-        <a class="button new" id="create-artist">Create New</a>
-    </div>
-    <div class="card artists">
-        {{range $Artist := .Artists}}
-        <div class="artist">
-            <img src="{{$Artist.GetAvatar}}" alt="" width="64" loading="lazy" class="artist-avatar">
-            <a href="/admin/music/artist/{{$Artist.ID}}" class="artist-name">{{$Artist.Name}}</a>
-        </div>       
-        {{end}}
-        {{if not .Artists}}
-        <p>There are no artists.</p>
-        {{end}}
-    </div>
-
-    <div class="card-title">
-        <h2>Tracks</h2>
-        <a class="button new" id="create-track">Create New</a>
-    </div>
-    <div class="card tracks">
-        <p><em>"Orphaned" tracks that have not yet been bound to a release.</em></p>
-        <br>
-        {{range $Track := .Tracks}}
-        <div class="track">
-            <h2 class="track-title">
-                <a href="/admin/music/track/{{$Track.ID}}">{{$Track.Title}}</a>
-            </h2>
-            {{if $Track.Description}}
-            <p class="track-description">{{$Track.GetDescriptionHTML}}</p>
-            {{else}}
-            <p class="track-description empty">No description provided.</p>
-            {{end}}
-            {{if $Track.Lyrics}}
-            <p class="track-lyrics">{{$Track.GetLyricsHTML}}</p>
-            {{else}}
-            <p class="track-lyrics empty">There are no lyrics.</p>
-            {{end}}
-        </div>       
-        {{end}}
-        {{if not .Artists}}
-        <p>There are no artists.</p>
-        {{end}}
-    </div>
-
-</main>
-
-<script type="module" src="/admin/static/admin.js"></script>
-<script type="module" src="/admin/static/music.js"></script>
-{{end}}

api/api.go

@@ -2,7 +2,6 @@ package api
 
 import (
     "context"
-    "errors"
     "fmt"
     "net/http"
     "os"
@@ -173,7 +172,7 @@ func getSession(app *model.AppState, r *http.Request) (*model.Session, error) {
     // check cookies first
     sessionCookie, err := r.Cookie(model.COOKIE_TOKEN)
     if err != nil && err != http.ErrNoCookie {
-        return nil, errors.New(fmt.Sprintf("Failed to retrieve session cookie: %v\n", err))
+        return nil, fmt.Errorf("Failed to retrieve session cookie: %v\n", err)
     }
     if sessionCookie != nil {
         token = sessionCookie.Value
@@ -188,7 +187,7 @@ func getSession(app *model.AppState, r *http.Request) (*model.Session, error) {
     session, err := controller.GetSession(app.DB, token)
 
     if err != nil && !strings.Contains(err.Error(), "no rows") {
-        return nil, errors.New(fmt.Sprintf("Failed to retrieve session: %v\n", err))
+        return nil, fmt.Errorf("Failed to retrieve session: %v\n", err)
     }
 
     if session != nil {

api/uploads.go

@@ -50,7 +50,7 @@ func HandleImageUpload(app *model.AppState, data *string, directory string, file
         return "", nil
     }
 
-    app.Log.Info(log.TYPE_FILES, "\"%s/%s.%s\" created.", directory, filename, ext)
+    app.Log.Info(log.TYPE_FILES, "\"%s\" created.", imagePath)
 
     return filename, nil
 }

controller/artist.go

@@ -29,6 +29,11 @@ func GetAllArtists(db *sqlx.DB) ([]*model.Artist, error) {
 
     return artists, nil
 }
+func GetArtistCount(db *sqlx.DB) (int, error) {
+    var count int
+    err := db.Get(&count, "SELECT count(*) FROM artist")
+    return count, err
+}
 
 func GetArtistsNotOnRelease(db *sqlx.DB, releaseID string) ([]*model.Artist, error) {
     var artists = []*model.Artist{}

controller/bluesky.go

@@ -3,7 +3,6 @@ package controller
 import (
 	"arimelody-web/model"
 	"encoding/json"
-	"errors"
 	"fmt"
 	"net/http"
 	"net/url"
@@ -32,7 +31,7 @@ func FetchThreadViewPost(actorID string, postID string) (*model.ThreadViewPost,
 
     res, err := client.Do(req)
     if err != nil {
-        return nil, errors.New(fmt.Sprintf("Failed to call Bluesky API: %v", err))
+        return nil, fmt.Errorf("Failed to call Bluesky API: %v", err)
     }
 
     type Data struct {
@@ -41,7 +40,7 @@ func FetchThreadViewPost(actorID string, postID string) (*model.ThreadViewPost,
     data := Data{}
     err = json.NewDecoder(res.Body).Decode(&data)
     if err != nil {
-        return nil, errors.New(fmt.Sprintf("Invalid response from server: %v", err))
+        return nil, fmt.Errorf("Invalid response from server: %v", err)
     }
 
     return &data.Thread, nil

controller/controller.go

@@ -5,7 +5,7 @@ import "math/rand"
 func GenerateAlnumString(length int) []byte {
     const CHARS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
     res := []byte{}
-    for i := 0; i < length; i++ {
+    for range length {
         res = append(res, CHARS[rand.Intn(len(CHARS))])
     }
     return res

controller/migrator.go

@@ -1,11 +1,12 @@
 package controller
 
 import (
-    "fmt"
+	"embed"
-    "os"
+	"fmt"
-    "time"
+	"os"
+	"time"
 
-    "github.com/jmoiron/sqlx"
+	"github.com/jmoiron/sqlx"
 )
 
 const DB_VERSION int = 5
@@ -59,10 +60,13 @@ func CheckDBVersionAndMigrate(db *sqlx.DB) {
     fmt.Printf("Database schema up to date.\n")
 }
 
+//go:embed "schema-migration"
+var schemaFS embed.FS
+
 func ApplyMigration(db *sqlx.DB, scriptFile string) {
     fmt.Printf("Applying schema migration %s...\n", scriptFile)
 
-    bytes, err := os.ReadFile("schema-migration/" + scriptFile + ".sql")
+    bytes, err := schemaFS.ReadFile("schema-migration/" + scriptFile + ".sql")
     if err != nil {
         fmt.Fprintf(os.Stderr, "FATAL: Failed to open schema file \"%s\": %v\n", scriptFile, err)
         os.Exit(1)

controller/qr.go

@@ -2,8 +2,8 @@ package controller
 
 import (
     "encoding/base64"
-    "image"
+    // "image"
-    "image/color"
+    // "image/color"
 
     "github.com/skip2/go-qrcode"
 )
@@ -18,36 +18,35 @@ func GenerateQRCode(data string) (string, error) {
 }
 
 // vvv DEPRECATED vvv
-
+// const margin = 4
-const margin = 4
+//
-
+// type QRCodeECCLevel int64
-type QRCodeECCLevel int64
+// const (
-const (
+//     LOW QRCodeECCLevel = iota
-    LOW QRCodeECCLevel = iota
+//     MEDIUM
-    MEDIUM
+//     QUARTILE
-    QUARTILE
+//     HIGH
-    HIGH
+// )
-)
+//
-
+// func drawLargeAlignmentSquare(x int, y int, img *image.Gray) {
-func drawLargeAlignmentSquare(x int, y int, img *image.Gray) {
+//     for yi := range 7 {
-    for yi := range 7 {
+//         for xi := range 7 {
-        for xi := range 7 {
+//             if (xi == 0 || xi == 6) || (yi == 0 || yi == 6) {
-            if (xi == 0 || xi == 6) || (yi == 0 || yi == 6) {
+//                 img.Set(x + xi, y + yi, color.Black)
-                img.Set(x + xi, y + yi, color.Black)
+//             } else if (xi > 1 && xi < 5) && (yi > 1 && yi < 5) {
-            } else if (xi > 1 && xi < 5) && (yi > 1 && yi < 5) {
+//                 img.Set(x + xi, y + yi, color.Black)
-                img.Set(x + xi, y + yi, color.Black)
+//             }
-            }
+//         }
-        }
+//     }
-    }
+// }
-}
+//
-
+// func drawSmallAlignmentSquare(x int, y int, img *image.Gray) {
-func drawSmallAlignmentSquare(x int, y int, img *image.Gray) {
+//     for yi := range 5 {
-    for yi := range 5 {
+//         for xi := range 5 {
-        for xi := range 5 {
+//             if (xi == 0 || xi == 4) || (yi == 0 || yi == 4) {
-            if (xi == 0 || xi == 4) || (yi == 0 || yi == 4) {
+//                 img.Set(x + xi, y + yi, color.Black)
-                img.Set(x + xi, y + yi, color.Black)
+//             }
-            }
+//         }
-        }
+//     }
-    }
+//     img.Set(x + 2, y + 2, color.Black)
-    img.Set(x + 2, y + 2, color.Black)
+// }
-}

controller/release.go

@@ -1,7 +1,6 @@
 package controller
 
 import (
-	"errors"
 	"fmt"
 	"strings"
 
@@ -22,7 +21,7 @@ func GetRelease(db *sqlx.DB, id string, full bool) (*model.Release, error) {
         // get credits
         credits, err := GetReleaseCredits(db, id)
         if err != nil {
-            return nil, errors.New(fmt.Sprintf("Credits: %s", err))
+            return nil, fmt.Errorf("Credits: %s", err)
         }
         for _, credit := range credits {
             release.Credits = append(release.Credits, credit)
@@ -31,7 +30,7 @@ func GetRelease(db *sqlx.DB, id string, full bool) (*model.Release, error) {
         // get tracks
         tracks, err := GetReleaseTracks(db, id)
         if err != nil {
-            return nil, errors.New(fmt.Sprintf("Tracks: %s", err))
+            return nil, fmt.Errorf("Tracks: %s", err)
         }
         for _, track := range tracks {
             release.Tracks = append(release.Tracks, track)
@@ -40,7 +39,7 @@ func GetRelease(db *sqlx.DB, id string, full bool) (*model.Release, error) {
         // get links
         links, err := GetReleaseLinks(db, id)
         if err != nil {
-            return nil, errors.New(fmt.Sprintf("Links: %s", err))
+            return nil, fmt.Errorf("Links: %s", err)
         }
         for _, link := range links {
             release.Links = append(release.Links, link)
@@ -72,7 +71,7 @@ func GetAllReleases(db *sqlx.DB, onlyVisible bool, limit int, full bool) ([]*mod
         // get credits
         credits, err := GetReleaseCredits(db, release.ID)
         if err != nil {
-            return nil, errors.New(fmt.Sprintf("Credits: %s", err))
+            return nil, fmt.Errorf("Credits: %s", err)
         }
         for _, credit := range credits {
             release.Credits = append(release.Credits, credit)
@@ -82,7 +81,7 @@ func GetAllReleases(db *sqlx.DB, onlyVisible bool, limit int, full bool) ([]*mod
             // get tracks
             tracks, err := GetReleaseTracks(db, release.ID)
             if err != nil {
-                return nil, errors.New(fmt.Sprintf("Tracks: %s", err))
+                return nil, fmt.Errorf("Tracks: %s", err)
             }
             for _, track := range tracks {
                 release.Tracks = append(release.Tracks, track)
@@ -91,7 +90,7 @@ func GetAllReleases(db *sqlx.DB, onlyVisible bool, limit int, full bool) ([]*mod
             // get links
             links, err := GetReleaseLinks(db, release.ID)
             if err != nil {
-                return nil, errors.New(fmt.Sprintf("Links: %s", err))
+                return nil, fmt.Errorf("Links: %s", err)
             }
             for _, link := range links {
                 release.Links = append(release.Links, link)
@@ -101,6 +100,17 @@ func GetAllReleases(db *sqlx.DB, onlyVisible bool, limit int, full bool) ([]*mod
 
     return releases, nil
 }
+func GetReleaseCount(db *sqlx.DB, onlyVisible bool) (int, error) {
+    query := "SELECT count(*) FROM musicrelease"
+    if onlyVisible {
+        query += " WHERE visible=true"
+    }
+
+    var count int
+    err := db.Get(&count, query)
+
+    return count, err
+}
 
 func GetLatestRelease(db *sqlx.DB) (*model.Release, error) {
     var release = model.Release{}
@@ -116,7 +126,7 @@ func GetLatestRelease(db *sqlx.DB) (*model.Release, error) {
     // get credits
     credits, err := GetReleaseCredits(db, release.ID)
     if err != nil {
-        return nil, errors.New(fmt.Sprintf("Credits: %s", err))
+        return nil, fmt.Errorf("Credits: %s", err)
     }
     for _, credit := range credits {
         release.Credits = append(release.Credits, credit)
@@ -125,7 +135,7 @@ func GetLatestRelease(db *sqlx.DB) (*model.Release, error) {
     // get tracks
     tracks, err := GetReleaseTracks(db, release.ID)
     if err != nil {
-        return nil, errors.New(fmt.Sprintf("Tracks: %s", err))
+        return nil, fmt.Errorf("Tracks: %s", err)
     }
     for _, track := range tracks {
         release.Tracks = append(release.Tracks, track)
@@ -134,7 +144,7 @@ func GetLatestRelease(db *sqlx.DB) (*model.Release, error) {
     // get links
     links, err := GetReleaseLinks(db, release.ID)
     if err != nil {
-        return nil, errors.New(fmt.Sprintf("Links: %s", err))
+        return nil, fmt.Errorf("Links: %s", err)
     }
     for _, link := range links {
         release.Links = append(release.Links, link)

controller/session.go

@@ -2,7 +2,6 @@ package controller
 
 import (
     "database/sql"
-    "errors"
     "fmt"
     "net/http"
     "strings"
@@ -19,7 +18,7 @@ const TOKEN_LEN = 64
 func GetSessionFromRequest(app *model.AppState, r *http.Request) (*model.Session, error) {
     sessionCookie, err := r.Cookie(model.COOKIE_TOKEN)
     if err != nil && err != http.ErrNoCookie {
-        return nil, errors.New(fmt.Sprintf("Failed to retrieve session cookie: %v", err))
+        return nil, fmt.Errorf("Failed to retrieve session cookie: %v", err)
     }
 
     var session *model.Session
@@ -29,7 +28,7 @@ func GetSessionFromRequest(app *model.AppState, r *http.Request) (*model.Session
         session, err = GetSession(app.DB, sessionCookie.Value)
 
         if err != nil && !strings.Contains(err.Error(), "no rows") {
-            return nil, errors.New(fmt.Sprintf("Failed to retrieve session: %v", err))
+            return nil, fmt.Errorf("Failed to retrieve session: %v", err)
         }
 
         if session != nil {

controller/track.go

@@ -29,6 +29,11 @@ func GetAllTracks(db *sqlx.DB) ([]*model.Track, error) {
 
     return tracks, nil
 }
+func GetTrackCount(db *sqlx.DB) (int, error) {
+    var count int
+    err := db.Get(&count, "SELECT count(*) FROM musictrack")
+    return count, err
+}
 
 func GetOrphanTracks(db *sqlx.DB) ([]*model.Track, error) {
     var tracks = []*model.Track{}

main.go

@@ -1,32 +1,33 @@
 package main
 
 import (
-    "bufio"
+	"bufio"
-    "errors"
+	"embed"
-    "fmt"
+	"errors"
-    stdLog "log"
+	"fmt"
-    "math"
+	stdLog "log"
-    "math/rand"
+	"math"
-    "net"
+	"math/rand"
-    "net/http"
+	"net"
-    "os"
+	"net/http"
-    "path/filepath"
+	"os"
-    "strconv"
+	"path/filepath"
-    "strings"
+	"strconv"
-    "time"
+	"strings"
+	"time"
 
-    "arimelody-web/admin"
+	"arimelody-web/admin"
-    "arimelody-web/api"
+	"arimelody-web/api"
-    "arimelody-web/colour"
+	"arimelody-web/colour"
-    "arimelody-web/controller"
+	"arimelody-web/controller"
-    "arimelody-web/cursor"
+	"arimelody-web/cursor"
-    "arimelody-web/log"
+	"arimelody-web/log"
-    "arimelody-web/model"
+	"arimelody-web/model"
-    "arimelody-web/view"
+	"arimelody-web/view"
 
-    "github.com/jmoiron/sqlx"
+	"github.com/jmoiron/sqlx"
-    _ "github.com/lib/pq"
+	_ "github.com/lib/pq"
-    "golang.org/x/crypto/bcrypt"
+	"golang.org/x/crypto/bcrypt"
 )
 
 // used for database migrations
@@ -35,12 +36,16 @@ const DB_VERSION = 1
 const DEFAULT_PORT int64 = 8080
 const HRT_DATE int64 = 1756478697
 
+//go:embed "public"
+var publicFS embed.FS
+
 func main() {
     fmt.Printf("made with <3 by ari melody\n\n")
 
     app := model.AppState{
         Config: controller.GetConfig(),
         Twitch: nil,
+        PublicFS: publicFS,
     }
 
     // initialise database connection
@@ -527,7 +532,7 @@ func createServeMux(app *model.AppState) *http.ServeMux {
     mux.Handle("/api/", http.StripPrefix("/api", api.Handler(app)))
     mux.Handle("/music/", http.StripPrefix("/music", view.MusicHandler(app)))
     mux.Handle("/blog/", http.StripPrefix("/blog", view.BlogHandler(app)))
-    mux.Handle("/uploads/", http.StripPrefix("/uploads", view.StaticHandler(filepath.Join(app.Config.DataDirectory, "uploads"))))
+    mux.Handle("/uploads/", http.StripPrefix("/uploads", view.ServeFiles(filepath.Join(app.Config.DataDirectory, "uploads"))))
     mux.Handle("/cursor-ws", cursor.Handler(app))
     mux.Handle("/", view.IndexHandler(app))
 

model/appstate.go

@@ -1,9 +1,11 @@
 package model
 
 import (
-    "github.com/jmoiron/sqlx"
+	"embed"
 
-    "arimelody-web/log"
+	"github.com/jmoiron/sqlx"
+
+	"arimelody-web/log"
 )
 
 type (
@@ -43,5 +45,6 @@ type (
         Config Config
         Log log.Logger
         Twitch *TwitchState
+        PublicFS embed.FS
     }
 )

model/release.go

@@ -39,7 +39,7 @@ const (
 // GETTERS
 
 func (release Release) GetDescriptionHTML() template.HTML {
-    return template.HTML(strings.Replace(release.Description, "\n", "<br>", -1))
+    return template.HTML(strings.ReplaceAll(release.Description, "\n", "<br>"))
 }
 
 func (release Release) TextReleaseDate() string {

model/track.go

@@ -13,19 +13,14 @@ type (
         Lyrics      string  `json:"lyrics" db:"lyrics"`
         PreviewURL  string  `json:"previewURL" db:"preview_url"`
 
-        Number      int
+        Number      int     `json:"-"`
     }
 )
 
 func (track Track) GetDescriptionHTML() template.HTML {
-    return template.HTML(strings.Replace(track.Description, "\n", "<br>", -1))
+    return template.HTML(strings.ReplaceAll(track.Description, "\n", "<br>"))
 }
 
 func (track Track) GetLyricsHTML() template.HTML {
-    return template.HTML(strings.Replace(track.Lyrics, "\n", "<br>", -1))
+    return template.HTML(strings.ReplaceAll(track.Lyrics, "\n", "<br>"))
-}
-
-// this function is stupid and i hate that i need it
-func (track Track) Add(a int, b int) int {
-    return a + b
 }

model/track_test.go

@@ -31,13 +31,3 @@ func Test_Track_LyricsHTML(t *testing.T) {
         t.Errorf(`track lyrics incorrectly formatted (want "%s", got "%s")`, want, got)
     }
 }
-
-func Test_Track_Add(t *testing.T) {
-    track := Track{}
-
-    want := 4
-    got := track.Add(2, 2)
-    if want != got {
-        t.Errorf(`somehow, we screwed up addition. (want %d, got %d)`, want, got)
-    }
-}

public/img/hamburger.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect id="Artboard1" x="0" y="0" width="15.36" height="15.36" style="fill:none;"/><g id="Artboard11" serif:id="Artboard1"><path d="M13.44,7.68c0,0.53 -0.43,0.96 -0.96,0.96l-9.6,0c-0.53,0 -0.96,-0.43 -0.96,-0.96c-0,-0.53 0.43,-0.96 0.96,-0.96l9.6,-0c0.53,-0 0.96,0.43 0.96,0.96Z"/><path d="M13.44,11.52c0,0.53 -0.43,0.96 -0.96,0.96l-9.6,0c-0.53,0 -0.96,-0.43 -0.96,-0.96c-0,-0.53 0.43,-0.96 0.96,-0.96l9.6,0c0.53,0 0.96,0.43 0.96,0.96Z"/><path d="M13.44,3.84c0,0.53 -0.43,0.96 -0.96,0.96l-9.6,0c-0.53,0 -0.96,-0.43 -0.96,-0.96c-0,-0.53 0.43,-0.96 0.96,-0.96l9.6,0c0.53,0 0.96,0.43 0.96,0.96Z"/></g></svg>

public/script/music-gateway.js

@@ -20,7 +20,6 @@ function update_extras_buttons() {
     const info_container = document.getElementById("info")
     info_container.addEventListener("scroll", update_extras_buttons);
     const info_rect = info_container.getBoundingClientRect();
-    const info_y = info_rect.y;
     const font_size = parseFloat(getComputedStyle(document.documentElement).fontSize);
     let current = extras_pairs[0];
     extras_pairs.forEach(pair => {
@@ -53,7 +52,7 @@ function bind_go_back_btn() {
 function bind_share_btn() {
     const share_btn = document.getElementById("share");
     if (navigator.clipboard === undefined) {
-        share_btn.onclick = event => {
+        share_btn.onclick = () => {
             console.error("clipboard is not supported by this browser!");
         };
         return;

public/style/music-gateway.css

@@ -333,7 +333,7 @@ ul#links a {
     background-color: #fff;
     text-align: center;
     text-decoration: none;
-    transition: filter .1s,-webkit-filter .1s
+    transition: filter .1s ease-out, -webkit-filter .1s ease-out;
 }
 
 #buylink {

templates/html/header.html

@@ -24,7 +24,6 @@
                 <a href="/music/" preload="mouseover">music</a>
             </li>
             <li>
-                <!-- coming later! -->
                 <a href="/blog/" preload="mouseover">blog</a>
             </li>
             <li>

templates/html/index.html

@@ -213,6 +213,9 @@
         <a href="https://girlthi.ng/~thermia/">
             <img src="/img/buttons/thermia.gif" alt="thermia web button" width="88" height="31">
         </a>
+        <a href="https://wangleline.com">
+            <img src="/img/buttons/wangleline.png" alt="WangleLine button" width="88" height="31">
+        </a>
         <a href="https://elke.cafe">
             <img src="/img/buttons/elke.gif" alt="elke web button" width="88" height="31">
         </a>

templates/html/music-gateway.html

@@ -134,7 +134,7 @@
                 <h2>TRACKS</h2>
                 {{range $i, $track := .Tracks}}
                 <details>
-                    <summary class="album-track-title">{{$track.Add $i 1}}. {{$track.Title}}</summary>
+                    <summary class="album-track-title">{{add $i 1}}. {{$track.Title}}</summary>
 
                     {{if $track.Description}}
                     <p class="album-track-subheading">DESCRIPTION</p>

templates/html/prideflag.html

@@ -0,0 +1,21 @@
+{{define "prideflag"}}
+<a href="https://github.com/arimelody/prideflag" target="_blank" id="prideflag">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120" hx-preserve="true">
+        <path id="red" d="M120,80 L100,100 L120,120 Z" style="fill:#d20605"/>
+        <path id="orange" d="M120,80 V40 L80,80 L100,100 Z" style="fill:#ef9c00"/>
+        <path id="yellow" d="M120,40 V0 L60,60 L80,80 Z" style="fill:#e5fe02"/>
+        <path id="green" d="M120,0 H80 L40,40 L60,60 Z" style="fill:#09be01"/>
+        <path id="blue" d="M80,0 H40 L20,20 L40,40 Z" style="fill:#081a9a"/>
+        <path id="purple" d="M40,0 H0 L20,20 Z" style="fill:#76008a"/>
+
+        <rect id="black" x="60" width="60" height="60" style="fill:#010101"/>
+        <rect id="brown" x="70" width="50" height="50" style="fill:#603814"/>
+        <rect id="lightblue" x="80" width="40" height="40" style="fill:#73d6ed"/>
+        <rect id="pink" x="90" width="30" height="30" style="fill:#ffafc8"/>
+        <rect id="white" x="100" width="20" height="20" style="fill:#fff"/>
+
+        <rect id="intyellow" x="110" width="10" height="10" style="fill:#fed800"/>
+        <circle id="intpurple" cx="120" cy="0" r="5" stroke="#7601ad" stroke-width="2" fill="none"/>
+    </svg>
+</a>
+{{end}}

templates/templates.go

@@ -1,42 +1,45 @@
 package templates
 
 import (
-    "html/template"
+	_ "embed"
-    "path/filepath"
+	"html/template"
+	"strings"
 )
 
-var IndexTemplate = template.Must(template.ParseFiles(
+//go:embed "html/layout.html"
-    filepath.Join("view", "layout.html"),
+var layoutHTML string
-    filepath.Join("view", "header.html"),
+//go:embed "html/header.html"
-    filepath.Join("view", "footer.html"),
+var headerHTML string
-    filepath.Join("view", "prideflag.html"),
+//go:embed "html/footer.html"
-    filepath.Join("view", "index.html"),
+var footerHTML string
-))
+//go:embed "html/prideflag.html"
-var MusicTemplate = template.Must(template.ParseFiles(
+var prideflagHTML string
-    filepath.Join("view", "layout.html"),
+//go:embed "html/index.html"
-    filepath.Join("view", "header.html"),
+var indexHTML string
-    filepath.Join("view", "footer.html"),
+//go:embed "html/music.html"
-    filepath.Join("view", "prideflag.html"),
+var musicHTML string
-    filepath.Join("view", "music.html"),
+//go:embed "html/music-gateway.html"
-))
+var musicGatewayHTML string
-var MusicGatewayTemplate = template.Must(template.ParseFiles(
+// //go:embed "html/404.html"
-    filepath.Join("view", "layout.html"),
+// var error404HTML string
-    filepath.Join("view", "header.html"),
+//go:embed "html/blog.html"
-    filepath.Join("view", "footer.html"),
+var blogHTML string
-    filepath.Join("view", "prideflag.html"),
+//go:embed "html/blogpost.html"
-    filepath.Join("view", "music-gateway.html"),
+var blogPostHTML string
-))
+
-var BlogTemplate = template.Must(template.ParseFiles(
+var BaseTemplate = template.Must(
-    filepath.Join("view", "layout.html"),
+    template.New("base").Funcs(
-    filepath.Join("view", "header.html"),
+        template.FuncMap{
-    filepath.Join("view", "footer.html"),
+            "add": func (a int, b int) int { return a + b },
-    filepath.Join("view", "prideflag.html"),
+        },
-    filepath.Join("view", "blog.html"),
+    ).Parse(strings.Join([]string{
-))
+        layoutHTML,
-var BlogPostTemplate = template.Must(template.ParseFiles(
+        headerHTML,
-    filepath.Join("view", "layout.html"),
+        footerHTML,
-    filepath.Join("view", "header.html"),
+        prideflagHTML,
-    filepath.Join("view", "footer.html"),
+    }, "\n")))
-    filepath.Join("view", "prideflag.html"),
+var IndexTemplate = template.Must(template.Must(BaseTemplate.Clone()).Parse(indexHTML))
-    filepath.Join("view", "blogpost.html"),
+var MusicTemplate  = template.Must(template.Must(BaseTemplate.Clone()).Parse(musicHTML))
-))
+var MusicGatewayTemplate = template.Must(template.Must(BaseTemplate.Clone()).Parse(musicGatewayHTML))
+var BlogTemplate = template.Must(template.Must(BaseTemplate.Clone()).Parse(blogHTML))
+var BlogPostTemplate = template.Must(template.Must(BaseTemplate.Clone()).Parse(blogPostHTML))

view/files.go

@@ -1,13 +1,31 @@
 package view
 
 import (
+	"embed"
 	"errors"
+	"mime"
 	"net/http"
 	"os"
+	"path"
 	"path/filepath"
 )
 
-func StaticHandler(directory string) http.Handler {
+func ServeEmbedFS(fs embed.FS, dir string) http.Handler {
+    return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+        file, err := fs.ReadFile(filepath.Join(dir, filepath.Clean(r.URL.Path)))
+        if err != nil {
+            http.NotFound(w, r)
+            return
+        }
+
+        w.Header().Set("Content-Type", mime.TypeByExtension(path.Ext(r.URL.Path)))
+        w.WriteHeader(http.StatusOK)
+
+        w.Write(file)
+    })
+}
+
+func ServeFiles(directory string) http.Handler {
     return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
         info, err := os.Stat(filepath.Join(directory, filepath.Clean(r.URL.Path)))
 
@@ -28,4 +46,3 @@ func StaticHandler(directory string) http.Handler {
         http.FileServer(http.Dir(directory)).ServeHTTP(w, r)
     })
 }
-

view/index.go

@@ -16,21 +16,19 @@ func IndexHandler(app *model.AppState) http.Handler {
             return
         }
 
-        type IndexData struct {
-            TwitchStatus *model.TwitchStreamInfo
-        }
-
-        var err error
-        var twitchStatus *model.TwitchStreamInfo = nil
-        if app.Twitch != nil && len(app.Config.Twitch.Broadcaster) > 0 {
-            twitchStatus, err = controller.GetTwitchStatus(app, app.Config.Twitch.Broadcaster)
-            if err != nil {
-                fmt.Fprintf(os.Stderr, "WARN: Failed to get Twitch status for %s: %v\n", app.Config.Twitch.Broadcaster, err)
-            }
-        }
-
         if r.URL.Path == "/" || r.URL.Path == "/index.html" {
-            err := templates.IndexTemplate.Execute(w, IndexData{
+            type IndexData struct {
+                TwitchStatus *model.TwitchStreamInfo
+            }
+            var err error
+            var twitchStatus *model.TwitchStreamInfo = nil
+            if app.Twitch != nil && len(app.Config.Twitch.Broadcaster) > 0 {
+                twitchStatus, err = controller.GetTwitchStatus(app, app.Config.Twitch.Broadcaster)
+                if err != nil {
+                    fmt.Fprintf(os.Stderr, "WARN: Failed to get Twitch status for %s: %v\n", app.Config.Twitch.Broadcaster, err)
+                }
+            }
+            err = templates.IndexTemplate.Execute(w, IndexData{
                 TwitchStatus: twitchStatus,
             })
             if err != nil {
@@ -40,6 +38,7 @@ func IndexHandler(app *model.AppState) http.Handler {
             return
         }
 
-        StaticHandler("public").ServeHTTP(w, r)
+        http.FileServer(http.Dir("./public")).ServeHTTP(w, r)
+        //ServeEmbedFS(app.PublicFS, "public").ServeHTTP(w, r)
     })
 }