feat: refine quick wins workflow and calendar layout

app/static/css/style.css

@@ -188,19 +188,32 @@ p {
 .app-footer {
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 10px;
+  justify-content: space-between;
+  gap: 14px;
+  flex-wrap: wrap;
   padding: 18px 0 8px;
   color: var(--muted);
   font-size: 0.88rem;
-  text-align: center;
+  text-align: left;
+}
+
+.app-footer__left,
+.app-footer__right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.app-footer__right {
+  margin-left: auto;
 }
 
 .app-footer a {
   color: inherit;
 }
 
-.app-footer span {
+.app-footer__left span {
   opacity: 0.7;
 }
 
@@ -857,26 +870,28 @@ p {
 }
 
 .calendar-task__title {
-  display: -webkit-box;
-  overflow: hidden;
+  display: block;
+  overflow: visible;
   min-width: 0;
   font-size: 0.96rem;
   line-height: 1.15;
   font-weight: 600;
   color: var(--text);
-  word-break: break-word;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
+  word-break: normal;
+  overflow-wrap: break-word;
+  hyphens: manual;
 }
 
 .calendar-task__person {
   display: block;
-  overflow: hidden;
+  overflow: visible;
   min-width: 0;
   font-size: 0.74rem;
   line-height: 1.2;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+  white-space: normal;
+  word-break: normal;
+  overflow-wrap: break-word;
+  hyphens: manual;
 }
 
 .calendar-task--open {
@@ -1035,8 +1050,7 @@ p {
   gap: 12px;
 }
 
-.quick-win-manage-card,
-.quick-win-card {
+.quick-win-manage-card {
   display: grid;
   gap: 12px;
   padding: 18px;
@@ -1046,8 +1060,18 @@ p {
 }
 
 .quick-win-manage-card {
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
+  align-items: stretch;
+}
+
+.quick-win-manage-form {
+  display: grid;
+  gap: 12px;
+}
+
+.quick-win-manage-card__actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
 }
 
 .quick-win-grid {
@@ -1055,44 +1079,138 @@ p {
   gap: 12px;
 }
 
-.quick-win-card__actions,
-.quick-win-custom__body {
+.quick-win-dialog-header {
   display: grid;
-  gap: 10px;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 14px;
+  align-items: start;
 }
 
-.quick-win-card__actions .button,
-.quick-win-custom__body .button {
-  width: 100%;
+.quick-win-dialog-header__badge {
+  width: 52px;
+  height: 52px;
+  border-radius: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(52, 211, 153, 0.24));
+  border: 1px solid rgba(132, 152, 190, 0.22);
+  color: var(--primary-strong);
+  box-shadow: 0 16px 30px rgba(37, 99, 235, 0.16);
+}
+
+.quick-win-dialog-header__badge svg {
+  width: 24px;
+  height: 24px;
 }
 
-.quick-win-card p,
 .quick-win-manage-card p {
   color: var(--muted);
 }
 
-.quick-win-card--custom {
-  cursor: pointer;
-  grid-template-columns: minmax(0, 1fr) auto;
+.quick-win-tag-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.quick-win-tag {
+  position: relative;
+  min-width: 0;
+  flex: 0 0 auto;
+  max-width: 100%;
+}
+
+.quick-win-tag input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.quick-win-tag span {
+  display: inline-flex;
   align-items: center;
-  list-style: none;
+  justify-content: center;
+  min-height: 0;
+  max-width: 100%;
+  padding: 10px 16px;
+  border-radius: 999px;
+  border: 1px solid rgba(132, 152, 190, 0.22);
+  background: var(--surface-soft);
+  color: var(--text);
+  font-weight: 700;
+  font-size: 0.97rem;
+  text-align: center;
+  line-height: 1.2;
+  white-space: nowrap;
+  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
+  cursor: pointer;
 }
 
-.quick-win-card--custom::-webkit-details-marker {
-  display: none;
+.quick-win-tag input:checked + span {
+  background: linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(52, 211, 153, 0.16));
+  border-color: rgba(37, 99, 235, 0.34);
+  color: var(--primary-strong);
+  box-shadow: 0 16px 28px rgba(37, 99, 235, 0.16);
+  transform: translateY(-1px);
 }
 
-.quick-win-custom {
+.quick-win-tag--custom span {
+  border-style: dashed;
+}
+
+.quick-win-tag--custom {
+  flex-basis: 100%;
+}
+
+.quick-win-tag--custom span {
+  width: fit-content;
+}
+
+.quick-win-custom-fields {
   display: grid;
-  gap: 10px;
+  gap: 14px;
 }
 
-.quick-win-custom[open] .quick-win-card--custom {
-  border-color: rgba(37, 99, 235, 0.24);
+.quick-win-custom-fields[hidden] {
+  display: none !important;
 }
 
-.quick-win-custom__body {
-  padding: 4px 2px 0;
+.dialog-actions--stack {
+  display: grid;
+  gap: 12px;
+}
+
+@media (max-width: 640px) {
+  .quick-win-dialog-header {
+    grid-template-columns: 1fr;
+  }
+
+  .quick-win-dialog-header__badge {
+    width: 48px;
+    height: 48px;
+  }
+
+  .quick-win-tag-grid {
+    gap: 10px;
+  }
+
+  .quick-win-tag {
+    max-width: 100%;
+  }
+
+  .quick-win-tag span {
+    width: auto;
+    max-width: 100%;
+    white-space: normal;
+    text-align: left;
+    justify-content: flex-start;
+  }
+
+  .quick-win-tag--custom span {
+    width: auto;
+  }
 }
 
 .push-box__state {

app/static/icons/quick-wins-sparkles.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path opacity=".4" fill="currentColor" d="M376 512L448 544L480 616L512 544L584 512L512 480L480 408L448 480L376 512zM408 128L480 160L512 232L544 160L616 128L544 96L512 24L480 96L408 128z"/><path fill="currentColor" d="M160 256L224 112L288 256L432 320L288 384L224 528L160 384L16 320L160 256z"/></svg>

app/static/js/app.js

@@ -7,6 +7,12 @@
   const quickTaskDialog = document.getElementById("quickTaskDialog");
   const quickTaskOpen = document.getElementById("quickTaskOpen");
   const quickTaskClose = document.getElementById("quickTaskClose");
+  const quickWinsSubmit = document.getElementById("quickWinsSubmit");
+  const quickWinInputs = document.querySelectorAll("[data-quick-win-input]");
+  const quickWinCustomToggle = document.querySelector("[data-quick-win-custom-toggle]");
+  const quickWinCustomFields = document.getElementById("quickWinCustomFields");
+  const quickWinTitle = document.getElementById("quick-title");
+  const quickWinEffort = document.getElementById("quick-effort");
 
   document.querySelectorAll("[data-complete-action]").forEach((button) => {
     button.addEventListener("click", () => {
@@ -39,6 +45,48 @@
     quickTaskClose.addEventListener("click", () => quickTaskDialog.close());
   }
 
+  function updateQuickWinsState() {
+    const selectedPresetCount = [...quickWinInputs].filter((input) => input.checked).length;
+    const customSelected = quickWinCustomToggle?.checked === true;
+    const totalCount = selectedPresetCount + (customSelected ? 1 : 0);
+
+    if (quickWinCustomFields) {
+      quickWinCustomFields.hidden = !customSelected;
+    }
+
+    if (quickWinTitle) {
+      quickWinTitle.disabled = !customSelected;
+      quickWinTitle.required = customSelected;
+    }
+
+    if (quickWinEffort) {
+      quickWinEffort.disabled = !customSelected;
+      quickWinEffort.required = customSelected;
+    }
+
+    if (quickWinsSubmit) {
+      quickWinsSubmit.disabled = totalCount === 0;
+      quickWinsSubmit.textContent = totalCount <= 1 ? "Quick-Win sichern" : "Quick Wins sichern";
+    }
+  }
+
+  quickWinInputs.forEach((input) => input.addEventListener("change", updateQuickWinsState));
+  if (quickWinCustomToggle) {
+    quickWinCustomToggle.addEventListener("change", updateQuickWinsState);
+  }
+  updateQuickWinsState();
+
+  if (quickTaskDialog) {
+    quickTaskDialog.addEventListener("close", () => {
+      const quickWinsForm = document.getElementById("quickWinsForm");
+      if (!quickWinsForm) {
+        return;
+      }
+      quickWinsForm.reset();
+      updateQuickWinsState();
+    });
+  }
+
   const pushButton = document.getElementById("pushToggle");
   const pushHint = document.getElementById("pushHint");
   const vapidKey = document.body.dataset.pushKey;