Add form to add a comment to PdfViewer

src/components/project/client-brief/PdfViewer.vue

@@ -89,7 +89,18 @@
             </footer>
           </article>
         </div>
+        <!-- Ajouter un commentaire -->
         <button id="add-comment" class="btn btn--white-20 | w-full">Ajouter un commentaire</button>
+        <!--
+        <form action="" method="post" class="flow">
+          <label class="sr-only" for="comment">Votre commentaire</label>
+          <textarea name="comment" id="comment" placeholder="Ajouter un commentaire" rows="3" class="text-sm | rounded-lg bg-black p-12"></textarea>
+          <footer class="flex">
+            <button class="btn btn--white-20">Annuler</button>
+            <input type="submit" class="btn btn--tranparent">
+          </footer>
+        </form>
+        -->
       </aside>
     </div>
   </Dialog>
@@ -262,6 +273,31 @@ const onPdfLoaded = () => {
 .comment[data-status="unread"] header time {
   color: var(--color-primary);
 }
+#comments-container form {
+  --flow-space: .5rem;
+  flex-direction: column;
+  position: -webkit-sticky;
+  position: sticky;
+  bottom: 4.5rem;
+  background: black;
+  padding: var(--space-24) 0;
+}
+#comments-container textarea {
+  position: sticky;
+  bottom: 0;
+  margin: 0;
+  resize: none;
+  color: var(--color-white);
+}
+::placeholder {
+  color: var(--color-white-50);
+}
+#comments-container form footer {
+  gap: var(--space-12);
+}
+#comments-container form footer > * {
+  flex-grow: 1;
+}
 </style>
 
 <style scoped>