frontend implementation of iconURL

packages/frontend/src/components/account.tsx

@@ -3,6 +3,7 @@ import type { ReactNode } from "react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { useAuthenticatedSession } from "@/components/session-provider";
+import ThemeToggle from "@/components/theme-toggle";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { Field } from "@/components/ui/field";
@@ -13,7 +14,6 @@ import { UploadAvatar } from "@/components/upload-avatar";
 import { useUpdateUser } from "@/lib/query/hooks";
 import { parseError } from "@/lib/server";
 import { cn } from "@/lib/utils";
-import ThemeToggle from "./theme-toggle";
 
 function Account({ trigger }: { trigger?: ReactNode }) {
     const { user: currentUser, setUser } = useAuthenticatedSession();

packages/frontend/src/components/organisation-form.tsx

@@ -18,6 +18,7 @@ import {
 } from "@/components/ui/dialog";
 import { Field } from "@/components/ui/field";
 import { Label } from "@/components/ui/label";
+import { UploadOrgIcon } from "@/components/upload-org-icon";
 import { useCreateOrganisation, useUpdateOrganisation } from "@/lib/query/hooks";
 import { parseError } from "@/lib/server";
 import { cn } from "@/lib/utils";
@@ -59,6 +60,7 @@ export function OrganisationForm({
     const [name, setName] = useState("");
     const [slug, setSlug] = useState("");
     const [description, setDescription] = useState("");
+    const [iconURL, setIconURL] = useState<string | null>(null);
     const [slugManuallyEdited, setSlugManuallyEdited] = useState(false);
     const [submitAttempted, setSubmitAttempted] = useState(false);
     const [submitting, setSubmitting] = useState(false);
@@ -71,6 +73,7 @@ export function OrganisationForm({
             setName(existingOrganisation.name);
             setSlug(existingOrganisation.slug);
             setDescription(existingOrganisation.description ?? "");
+            setIconURL(existingOrganisation.iconURL ?? null);
             setSlugManuallyEdited(true);
         }
     }, [isEdit, existingOrganisation, open]);
@@ -79,6 +82,7 @@ export function OrganisationForm({
         setName("");
         setSlug("");
         setDescription("");
+        setIconURL(null);
         setSlugManuallyEdited(false);
         setSubmitAttempted(false);
         setSubmitting(false);
@@ -161,6 +165,16 @@ export function OrganisationForm({
 
             <form onSubmit={handleSubmit}>
                 <div className="grid mt-2">
+                    {isEdit && existingOrganisation && (
+                        <UploadOrgIcon
+                            name={name || existingOrganisation.name}
+                            slug={slug || existingOrganisation.slug}
+                            iconURL={iconURL}
+                            organisationId={existingOrganisation.id}
+                            onIconUploaded={setIconURL}
+                            className="mb-4"
+                        />
+                    )}
                     <Field
                         label="Name"
                         value={name}

packages/frontend/src/components/organisations.tsx

@@ -3,6 +3,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { type ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { AddMember } from "@/components/add-member";
+import OrgIcon from "@/components/org-icon";
 import { OrganisationForm } from "@/components/organisation-form";
 import { OrganisationSelect } from "@/components/organisation-select";
 import { ProjectForm } from "@/components/project-form";
@@ -44,7 +45,6 @@ import {
 import { queryKeys } from "@/lib/query/keys";
 import { issue } from "@/lib/server";
 import { capitalise } from "@/lib/utils";
-import OrgIcon from "./org-icon";
 
 function Organisations({ trigger }: { trigger?: ReactNode }) {
     const { user } = useAuthenticatedSession();
@@ -490,6 +490,7 @@ function Organisations({ trigger }: { trigger?: ReactNode }) {
                                         <OrgIcon
                                             name={selectedOrganisation.Organisation.name}
                                             slug={selectedOrganisation.Organisation.slug}
+                                            iconURL={selectedOrganisation.Organisation.iconURL}
                                             size={16}
                                             textClass="text-2xl"
                                             className="rounded-lg"