Feat: Fotofilter + Fotobox/graf user

backend/static/styles.css

@@ -1269,6 +1269,129 @@ input[type="file"]:focus {
   gap: 1rem;
 }
 
+.gallery-filter-controls {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.65rem;
+  margin: 0 0 1rem;
+}
+
+.gallery-item.is-filtered-out {
+  display: none;
+}
+
+.gallery-filter-empty {
+  margin: 1.25rem 0 0;
+  color: rgba(31, 26, 23, 0.7);
+}
+
+.gallery-uploader-filter {
+  position: relative;
+  width: min(100%, 22rem);
+}
+
+.gallery-uploader-trigger {
+  width: 100%;
+  min-height: 2.75rem;
+  padding: 0 0.9rem 0 1rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.3rem;
+  border: 1px solid rgba(31, 58, 47, 0.2);
+  border-radius: 999px;
+  color: var(--forest);
+  background: rgba(255, 253, 248, 0.92);
+  box-shadow: 0 5px 15px rgba(31, 58, 47, 0.08);
+  font: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.gallery-uploader-trigger:hover,
+.gallery-uploader-trigger:focus-visible,
+.gallery-uploader-trigger[aria-expanded="true"] {
+  border-color: var(--gold);
+  box-shadow: 0 0 0 3px rgba(178, 137, 70, 0.14);
+  outline: none;
+}
+
+.gallery-uploader-trigger svg {
+  width: 1.1rem;
+  height: 1.1rem;
+  flex: 0 0 auto;
+  fill: currentColor;
+}
+
+.gallery-uploader-chevron {
+  margin-left: 0.15rem;
+  transition: transform 0.18s ease;
+}
+
+.gallery-uploader-trigger[aria-expanded="true"] .gallery-uploader-chevron {
+  transform: rotate(180deg);
+}
+
+.gallery-uploader-search {
+  opacity: 0.72;
+}
+
+.gallery-uploader-menu {
+  position: absolute;
+  z-index: 50;
+  top: calc(100% + 0.45rem);
+  left: 50%;
+  width: max-content;
+  min-width: 14rem;
+  max-width: min(20rem, calc(100vw - 2rem));
+  max-height: min(22rem, 60vh);
+  padding: 0.45rem;
+  overflow: auto;
+  transform: translateX(-50%);
+  border: 1px solid rgba(31, 58, 47, 0.16);
+  border-radius: 16px;
+  background: #fffdf8;
+  box-shadow: 0 14px 32px rgba(31, 58, 47, 0.2);
+}
+
+.gallery-uploader-menu[hidden] {
+  display: none;
+}
+
+.gallery-uploader-options {
+  padding-top: 0.25rem;
+  border-top: 1px solid rgba(31, 58, 47, 0.1);
+}
+
+.gallery-uploader-option {
+  min-height: 2.4rem;
+  padding: 0.45rem 0.55rem;
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.gallery-uploader-option:hover {
+  background: rgba(232, 219, 196, 0.42);
+}
+
+.gallery-uploader-option input {
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  flex: 0 0 auto;
+  accent-color: var(--forest);
+}
+
+.gallery-uploader-option-all {
+  font-weight: 700;
+}
+
 .gallery-item {
   margin: 0;
 }
@@ -1298,6 +1421,14 @@ input[type="file"]:focus {
 .gallery-item figcaption {
   margin-top: 0.55rem;
   margin-bottom: 0.55rem;
+  text-align: center;
+  color: rgba(31, 58, 47, 0.68);
+  font-size: 0.94rem;
+}
+
+.gallery-item figcaption strong {
+  color: var(--forest);
+  font-weight: 700;
 }
 
 .gallery-delete-form {