feat: card attachments (#247)

* feat: add card attachment schema

* feat: setup s3 util funcs

* feat: add attachments router and repo funcs

* feat: add upload button

* feat: add thumbnails and attachment viewer

* feat: add download and delete button

* feat: add file viewer and downloads

* feat: update compose and readme

* chore: build lang

* feat: display attachments on public boards

* chore: update compiled translations

apps/web/src/views/card/index.tsx

@@ -20,6 +20,8 @@ import { api } from "~/utils/api";
 import { formatMemberDisplayName, getAvatarUrl } from "~/utils/helpers";
 import { DeleteLabelConfirmation } from "../../components/DeleteLabelConfirmation";
 import ActivityList from "./components/ActivityList";
+import { AttachmentThumbnails } from "./components/AttachmentThumbnails";
+import { AttachmentUpload } from "./components/AttachmentUpload";
 import Checklists from "./components/Checklists";
 import { DeleteCardConfirmation } from "./components/DeleteCardConfirmation";
 import { DeleteChecklistConfirmation } from "./components/DeleteChecklistConfirmation";
@@ -286,6 +288,21 @@ export default function CardPage({ isTemplate }: { isTemplate?: boolean }) {
                     activeChecklistForm={activeChecklistForm}
                     setActiveChecklistForm={setActiveChecklistForm}
                   />
+                  {!isTemplate && (
+                    <>
+                      {card?.attachments.length > 0 && (
+                        <div className="mt-6">
+                          <AttachmentThumbnails
+                            attachments={card.attachments}
+                            cardPublicId={cardId ?? ""}
+                          />
+                        </div>
+                      )}
+                      <div className="mt-6">
+                        <AttachmentUpload cardPublicId={cardId} />
+                      </div>
+                    </>
+                  )}
                   <div className="border-t-[1px] border-light-300 pt-12 dark:border-dark-300">
                     <h2 className="text-md pb-4 font-medium text-light-1000 dark:text-dark-1000">
                       {t`Activity`}