WIP Upload multiple photos

app/styles/app.css

@@ -210,6 +210,118 @@ body {
   height: auto;
 }
 
+.dropzone {
+  border: 2px dashed #3a4b5c;
+  border-radius: 8px;
+  padding: 30px 20px;
+  text-align: center;
+  transition: all 0.2s ease;
+  margin-bottom: 20px;
+  background-color: rgb(255 255 255 / 2%);
+  cursor: pointer;
+}
+
+.dropzone.is-dragging {
+  border-color: #61afef;
+  background-color: rgb(97 175 239 / 5%);
+}
+
+.dropzone-label {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  color: #a0aec0;
+}
+
+.dropzone-label p {
+  margin: 0;
+  font-size: 1.1rem;
+}
+
+.file-input-hidden {
+  display: none;
+}
+
+.photo-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.photo-item {
+  position: relative;
+  aspect-ratio: 1 / 1;
+  border-radius: 6px;
+  overflow: hidden;
+  background: #1e262e;
+}
+
+.photo-item-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.photo-item-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgb(0 0 0 / 60%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.error-overlay {
+  background: rgb(224 108 117 / 80%);
+}
+
+.success-overlay {
+  background: rgb(152 195 121 / 60%);
+}
+
+.btn-remove-photo {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  background: rgb(0 0 0 / 70%);
+  border: none;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: white;
+  padding: 0;
+}
+
+.btn-remove-photo:hover {
+  background: rgb(224 108 117 / 90%);
+}
+
+.spin-animation {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.btn-publish {
+  width: 100%;
+}
+
 /* User Menu Popover */
 .user-menu-container {
   position: relative;