Improve button appearance

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,33 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Version information (please complete the following information):**
+ - OS: [e.g. NixOS 23.11]
+ - Browser [e.g. firefox, chrome]
+ - Empede version [e.g. v0.2.1]
+ - MPD version [e.g. 0.23.15]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

CODE_OF_CONDUCT.md

@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+coc@vijf.life.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,  harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

static/style.css

@@ -33,10 +33,18 @@ button {
   display: flex;
   line-height: 24px;
   cursor: pointer;
+  padding: 0.25rem 0.5rem;
 }
+
+button:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 0.25rem;
+}
+
 button .material-symbols-outlined {
   margin-right: 0.25rem;
 }
+
 .active {
   color: #99f;
 }
@@ -81,10 +89,6 @@ ul {
   align-items: center;
 }
 
-.queue-header button {
-  margin-left: 0.75rem;
-}
-
 .queue-next {
   font-weight: bold;
   flex: 1;
@@ -93,6 +97,7 @@ ul {
 .queue {
   margin-top: 0.5rem;
   overflow: auto;
+  scroll-behavior: smooth;
 }
 
 .queue ul li {
@@ -100,6 +105,10 @@ ul {
   border-radius: .25rem;
   display: flex;
   align-items: center;
+  cursor: move;
+}
+.queue ul li:hover {
+  background-color: #223;
 }
 
 .queue ul li.playing {
@@ -131,28 +140,33 @@ ul {
   display: none;
 }
 
+.queue .remove button {
+  padding: 0.25rem;
+}
+
 .browser .header {
   display: flex;
   flex-flow: column;
   background-color: #334;
   border-radius: 0.25rem;
-  padding: 0.75rem 1rem;
+  padding: 0.75rem 0.5rem;
   margin: 16px 16px 0;
 }
 
 .browser .buttons {
   display: flex;
   flex-flow: row;
-  margin-top: 0.75rem;
+  margin-top: 0.25rem;
 }
 .browser .buttons button {
-  margin-right: 1.0rem;
+  margin-right: 0.5rem;
 }
 
 ul.breadcrumb {
   display: flex;
   flex-wrap: wrap;
   list-style: none;
+  margin-left: 0.5rem;
 }
 @media (prefers-contrast: more) {
   ul.breadcrumb {
@@ -273,7 +287,11 @@ ul.dir li .material-symbols-outlined {
 .player .settings {
   display: flex;
   justify-content: space-around;
-  padding: 0 0.5rem 1.0rem;
+  padding: 0 0.5rem 0.25rem;
+}
+
+.player .settings {
+  margin-bottom: 0.5rem;
 }
 
 .player .controls button {

templates/queue.html

@@ -25,6 +25,14 @@
 </ul>
 
 <script>
+const scrollCurrentSongIntoView = () => {
+  const hoveredSong = document.querySelector(".queue li:hover");
+  if (hoveredSong === null) {
+    const currentSong = document.querySelector(".queue li.playing");
+    currentSong.scrollIntoView({ block: "nearest" });
+  }
+}
+
 htmx.onLoad(() => {
   const isReduced = window
     .matchMedia("(prefers-reduced-motion: reduce)")
@@ -38,5 +46,7 @@ htmx.onLoad(() => {
       body: JSON.stringify({from: event.oldIndex, to: event.newIndex}),
     }),
   });
+
+  scrollCurrentSongIntoView();
 });
 </script>