@stoker-platform/web-app 0.5.47 → 0.5.49

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @stoker-platform/web-app
 
+## 0.5.49
+
+### Patch Changes
+
+- feat: add relation record assignment feature
+    - @stoker-platform/node-client@0.5.32
+    - @stoker-platform/utils@0.5.26
+    - @stoker-platform/web-client@0.5.28
+
+## 0.5.48
+
+### Patch Changes
+
+- feat: add parent relation args to admin options
+    - @stoker-platform/node-client@0.5.31
+    - @stoker-platform/utils@0.5.25
+    - @stoker-platform/web-client@0.5.27
+
 ## 0.5.47
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stoker-platform/web-app",
-    "version": "0.5.47",
+    "version": "0.5.49",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE.md",
     "scripts": {
@@ -51,9 +51,9 @@
         "@radix-ui/react-tooltip": "^1.2.8",
         "@react-google-maps/api": "^2.20.8",
         "@sentry/react": "^10.38.0",
-        "@stoker-platform/node-client": "0.5.30",
-        "@stoker-platform/utils": "0.5.24",
-        "@stoker-platform/web-client": "0.5.26",
+        "@stoker-platform/node-client": "0.5.32",
+        "@stoker-platform/utils": "0.5.26",
+        "@stoker-platform/web-client": "0.5.28",
         "@tanstack/react-table": "^8.21.3",
         "@types/react": "18.3.13",
         "@types/react-dom": "18.3.1",

package/src/Collection.tsx

@@ -1,4 +1,5 @@
 import {
+    Assignable,
     CalendarConfig,
     CardsConfig,
     CollectionField,
@@ -28,6 +29,7 @@ import {
     GetSomeOptions,
     getTimezone,
     keepTimezone,
+    onStokerSignOut,
     subscribeMany,
     SubscribeManyOptions,
     updateRecord,
@@ -110,6 +112,8 @@ interface CollectionProps {
     relationList?: RelationList
     relationCollection?: CollectionSchema
     relationParent?: StokerRecord
+    isAssigning?: boolean
+    assignable?: Assignable
 }
 
 export interface Query {
@@ -120,7 +124,11 @@ export interface Query {
     }[]
 }
 
-const hasFirstPageLoaded: { [key: StokerCollection]: boolean } = {}
+let hasFirstPageLoaded: { [key: StokerCollection]: boolean } = {}
+
+onStokerSignOut(() => {
+    hasFirstPageLoaded = {}
+})
 
 function Collection({
     collection,
@@ -131,6 +139,8 @@ function Collection({
     relationList,
     relationCollection,
     relationParent,
+    isAssigning,
+    assignable,
 }: CollectionProps) {
     const navigate = useNavigate()
     const location = useLocation()
@@ -216,6 +226,8 @@ function Collection({
     const { filters, setFilters, order, setOrder, getFilterConstraints } = useFilters()
     const { orderByField, orderByDirection } = useMemo(() => getOrderBy(collection, order), [order])
     const searchResults = useRef<{ [key: string | number]: string[] | undefined }>({})
+    const additionalConstraintsRef = useRef(additionalConstraints)
+    additionalConstraintsRef.current = additionalConstraints
     const { currentField: currentFieldAll } = useCache()
     const currentField = currentFieldAll[labels.collection]
     const [backToStartKey, setBackToStartKey] = useState(0)
@@ -335,6 +347,31 @@ function Collection({
         serverListRef.current = serverList
     }, [serverList])
 
+    useEffect(() => {
+        if (isAssigning !== undefined) {
+            setBackToStartKey((prev) => prev + 1)
+        }
+        if (!relationList || !isInitialized) return
+        setFilters((prev) => {
+            let next = prev
+                .filter((filter) => !(filter.type === "relation" && filter.field === relationList.field))
+                .map((filter: Filter) => {
+                    if (filter.type === "status" || filter.type === "range") return filter
+                    if (filter.type === "select" && filter.defaultValue && isAssigning !== undefined) {
+                        return {
+                            ...filter,
+                            value: tryFunction(filter.defaultValue, [relationCollection, relationParent, isAssigning]),
+                        }
+                    }
+                    return filter
+                })
+            if (!isAssigning) {
+                next = [...next, { type: "relation", field: relationList.field, value: relationParent?.id }]
+            }
+            return next
+        })
+    }, [isAssigning])
+
     // This is to ensure that the optimistic list is set in cases where cached documents exactly match the downloaded server documents
     // In this case, the cache-only snapshot listener does not fire a second time when the cache has loaded because there is no change to the list
     useEffect(() => {
@@ -562,7 +599,7 @@ function Collection({
                             [labels.collection],
                             [
                                 ...(currentQuery.constraints as QueryConstraint[]),
-                                ...(additionalConstraints?.map((constraint) =>
+                                ...(additionalConstraintsRef.current?.map((constraint) =>
                                     where(constraint[0], constraint[1] as WhereFilterOp, constraint[2]),
                                 ) || []),
                             ],
@@ -612,7 +649,7 @@ function Collection({
                         [labels.collection],
                         [
                             ...(query.queries[0].constraints as [string, WhereFilterOp, unknown][]),
-                            ...(additionalConstraints || []),
+                            ...(additionalConstraintsRef.current || []),
                         ],
                         options as GetSomeOptions,
                     )
@@ -698,7 +735,7 @@ function Collection({
             const statusFilterState = state[`collection-status-filter-${labels.collection.toLowerCase()}`]
             const cacheState = state[`collection-range-field-${labels.collection.toLowerCase()}`]
             const rangeState = state[`collection-range-${labels.collection.toLowerCase()}`]
-            const defaultView = tryFunction(customization.admin?.defaultView)
+            const defaultView = tryFunction(customization.admin?.defaultView, [relationCollection, relationParent])
             if (!relationList) {
                 if (tabState) {
                     setTab(tabState)
@@ -734,8 +771,14 @@ function Collection({
                     setState(`collection-range-${labels.collection.toLowerCase()}`, "range", rangeState)
                 }
             } else {
-                setTab("list")
-                tabRef.current = "list"
+                if (defaultView) {
+                    setTab(defaultView)
+                    tabRef.current = defaultView
+                    setState(`collection-tab-${labels.collection.toLowerCase()}`, "tab", defaultView)
+                } else {
+                    setTab("list")
+                    tabRef.current = "list"
+                }
             }
             if (rangeSelectorState) {
                 setRangeSelector(rangeSelectorState as "range" | "week" | "month" | undefined)
@@ -861,6 +904,36 @@ function Collection({
                         }
                     })
                 }
+            } else {
+                filtersClone.forEach((filter: Filter) => {
+                    if (filter.type === "status" || filter.type === "range") {
+                        return
+                    }
+                    if (
+                        filter.type === "relation" &&
+                        filter.field === relationList.field &&
+                        relationParent &&
+                        !isAssigning
+                    ) {
+                        filter.value = relationParent.id
+                    }
+                    if (filter.type === "select" && filter.defaultValue) {
+                        filter.value = tryFunction(filter.defaultValue, [
+                            relationCollection,
+                            relationParent,
+                            isAssigning,
+                        ])
+                    }
+                })
+                if (
+                    relationParent &&
+                    !isAssigning &&
+                    !filtersClone.some(
+                        (filter: Filter) => filter.type === "relation" && filter.field === relationList.field,
+                    )
+                ) {
+                    filtersClone.push({ type: "relation", field: relationList.field, value: relationParent.id })
+                }
             }
 
             if (statusField || softDelete) {
@@ -1043,7 +1116,10 @@ function Collection({
                 setOrder({ field: recordTitleField, direction: "asc" })
             }
 
-            hasFirstPageLoaded[labels.collection] = true
+            if (!relationList) {
+                hasFirstPageLoaded[labels.collection] = true
+            }
+
             setIsInitialized(true)
         }
 
@@ -1115,17 +1191,19 @@ function Collection({
         return (
             filters
                 .filter((filter) => filter.type !== "status" && filter.type !== "range")
+                .filter((filter) => !relationList || filter.field !== relationList.field)
                 .filter(
                     (filter) =>
                         (filter.value ||
                             (filter.type === "select" &&
                                 filter.defaultValue &&
-                                tryFunction(filter.defaultValue) &&
+                                tryFunction(filter.defaultValue, [relationCollection, relationParent, isAssigning]) &&
                                 !filter.value)) &&
                         !(
                             filter.type === "select" &&
                             filter.defaultValue &&
-                            tryFunction(filter.defaultValue) === filter.value
+                            tryFunction(filter.defaultValue, [relationCollection, relationParent, isAssigning]) ===
+                                filter.value
                         ),
                 )
                 .filter((filter) => !excludedFilters.includes(filter.field)).length > 0
@@ -1941,7 +2019,7 @@ function Collection({
                                                     <Filters
                                                         collection={collection}
                                                         excluded={excludedFilters}
-                                                        relationList={!!relationList}
+                                                        relationList={relationList}
                                                     />
                                                 </SheetContent>
                                             </Sheet>
@@ -2274,8 +2352,12 @@ function Collection({
                                                 unsubscribe={unsubscribe}
                                                 search={search}
                                                 backToStartKey={backToStartKey}
-                                                relationList={!!relationList}
+                                                relationList={relationList}
+                                                relationCollection={relationCollection}
+                                                relationParent={relationParent}
                                                 formList={!!formList}
+                                                isAssigning={isAssigning}
+                                                assignable={assignable}
                                             />
                                         </TabsContent>
                                         <TabsContent value="map">

package/src/Filters.tsx

@@ -1,4 +1,11 @@
-import { CollectionField, CollectionSchema, Filter, StokerCollection, StokerRecord } from "@stoker-platform/types"
+import {
+    CollectionField,
+    CollectionSchema,
+    Filter,
+    RelationList,
+    StokerCollection,
+    StokerRecord,
+} from "@stoker-platform/types"
 import {
     collectionAccess,
     getCachedConfigValue,
@@ -40,7 +47,7 @@ import { useConnection } from "./providers/ConnectionProvider"
 interface FiltersProps {
     collection: CollectionSchema
     excluded: string[]
-    relationList?: boolean
+    relationList?: RelationList
 }
 
 export function Filters({ collection, excluded, relationList }: FiltersProps) {
@@ -83,6 +90,7 @@ export function Filters({ collection, excluded, relationList }: FiltersProps) {
         const fullCollectionAccess = collectionPermissions && collectionAccess("Read", collectionPermissions)
         const dependencyAccess = hasDependencyAccess(relationCollection, schema, permissions)
         if (!fullCollectionAccess && dependencyAccess.length === 0) return false
+        if (relationList && relationList.field === filter.field) return false
         return true
     }, [])
 

package/src/Images.tsx

@@ -1,13 +1,16 @@
 import {
+    Assignable,
     CollectionMeta,
     CollectionSchema,
     ImagesConfig,
+    RelationList,
     StokerCollection,
     StokerPermissions,
     StokerRecord,
 } from "@stoker-platform/types"
-import { getCachedConfigValue } from "@stoker-platform/utils"
+import { getCachedConfigValue, getField, getFieldCustomization, tryFunction } from "@stoker-platform/utils"
 import {
+    callFunction,
     Cursor,
     getCollectionConfigModule,
     getCurrentUserPermissions,
@@ -35,6 +38,11 @@ import { localFullTextSearch } from "./utils/localFullTextSearch"
 import { Helmet } from "react-helmet"
 import { useConnection } from "./providers/ConnectionProvider"
 import { getSafeUrl } from "./utils/isSafeUrl"
+import { Switch } from "./components/ui/switch"
+import { Label } from "./components/ui/label"
+import { Badge } from "./components/ui/badge"
+import { useGlobalLoading } from "./providers/LoadingProvider"
+import { useToast } from "./hooks/use-toast"
 
 export const description = "A list of records as cards. The content area has a search bar in the header."
 
@@ -91,6 +99,11 @@ interface RowData {
     lineClamp: string
     recordTitleField: string | undefined
     imagesConfig: ImagesConfig
+    isAssigning: boolean | undefined
+    assignable: Assignable | undefined
+    relationList: RelationList | undefined
+    relationCollection: CollectionSchema | undefined
+    relationParent: StokerRecord | undefined
 }
 
 interface RowProps {
@@ -101,14 +114,107 @@ interface RowProps {
 
 const Row = ({ index, style, data }: RowProps) => {
     const goToRecord = useGoToRecord()
-    const { collection, groupedRecords, size, cols, lineClamp, recordTitleField, imagesConfig } = data
+    const {
+        collection,
+        groupedRecords,
+        size,
+        cols,
+        lineClamp,
+        recordTitleField,
+        imagesConfig,
+        isAssigning,
+        assignable,
+        relationList,
+        relationCollection,
+        relationParent,
+    } = data
     // eslint-disable-next-line security/detect-object-injection
     const group = groupedRecords[index]
+    const customization = getCollectionConfigModule(collection.labels.collection)
+    const { setGlobalLoading } = useGlobalLoading()
+    const { toast } = useToast()
+
+    const [checkedDisabled, setCheckedDisabled] = useState(false)
+
+    const handleCheckedChange = useCallback(async (checked: boolean, record: StokerRecord) => {
+        if (!relationCollection) return
+        setCheckedDisabled(true)
+        setGlobalLoading("+", record.id, true)
+        await callFunction(
+            `stoker-assign${relationCollection.labels.record.toLowerCase()}${collection.labels.collection.toLowerCase()}`,
+            {
+                operation: checked ? "add" : "remove",
+                parentId: relationParent?.id,
+                recordId: record.id,
+            },
+        ).catch(() => {
+            toast({
+                title: "Error",
+                description: `Error assigning ${collection.labels.record} to ${relationCollection.labels.record}`,
+                variant: "destructive",
+                duration: 10000000,
+            })
+        })
+        setGlobalLoading("-", record.id, true)
+        setCheckedDisabled(false)
+    }, [])
+
     return (
         <div style={style} className={cn("grid", "gap-4", "pb-4", cols)}>
             {group.map((record) => {
                 // eslint-disable-next-line security/detect-object-injection
                 const title = recordTitleField ? record[recordTitleField] : record.id
+                const checked =
+                    isAssigning && relationList?.field && relationParent
+                        ? !!record[relationList.field]?.[relationParent.id]
+                        : undefined
+                let unavailable
+                if (isAssigning) {
+                    if (assignable?.unavailableField) {
+                        const unavailableFieldSchema = getField(collection.fields, assignable?.unavailableField)
+                        const unavailableFieldCustomization = getFieldCustomization(
+                            unavailableFieldSchema,
+                            customization,
+                        )
+                        const badge = tryFunction(unavailableFieldCustomization.admin?.badge, [record])
+                        if (badge === true) {
+                            unavailable = (
+                                <Badge variant="outline" className="text-xs text-center">
+                                    {record[assignable.unavailableField]
+                                        ? record[assignable.unavailableField]
+                                        : "Not available"}
+                                </Badge>
+                            )
+                        } else {
+                            unavailable = (
+                                <Badge
+                                    variant={
+                                        ["outline", "destructive", "primary", "secondary"].includes(badge)
+                                            ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                              (badge as any)
+                                            : "outline"
+                                    }
+                                    className={cn(
+                                        "text-xs text-center",
+                                        !["outline", "destructive", "primary", "secondary", true, false].includes(
+                                            badge,
+                                        ) && badge,
+                                    )}
+                                >
+                                    {record[assignable.unavailableField]
+                                        ? record[assignable.unavailableField]
+                                        : "Not available"}
+                                </Badge>
+                            )
+                        }
+                    } else {
+                        unavailable = (
+                            <Badge variant="outline" className="text-xs text-center">
+                                Not available
+                            </Badge>
+                        )
+                    }
+                }
                 return (
                     <Card key={record.id}>
                         <CardHeader
@@ -122,7 +228,30 @@ const Row = ({ index, style, data }: RowProps) => {
                             </button>
                         </CardHeader>
                         <CardContent className="pb-3 md:pb-4">
-                            <div className={cn("grid", "gap-2", size)}>
+                            <div className={cn("grid", "gap-4", size)}>
+                                {isAssigning && assignable && (assignable.isAvailable(record) || checked) && (
+                                    <div>
+                                        <div className="flex items-center justify-center space-x-3 min-h-8">
+                                            <Switch
+                                                id={`${record.id}-assigned`}
+                                                className="data-[state=checked]:bg-blue-500"
+                                                checked={checked}
+                                                disabled={checkedDisabled}
+                                                onCheckedChange={(checked) => handleCheckedChange(checked, record)}
+                                            />
+                                            {imagesConfig.size !== "sm" && (
+                                                <Label htmlFor={`${record.id}-assigned`}>Assigned</Label>
+                                            )}
+                                        </div>
+                                    </div>
+                                )}
+                                {isAssigning && assignable && !assignable.isAvailable(record) && !checked && (
+                                    <div>
+                                        <div className="flex items-center justify-center space-x-3 min-h-8">
+                                            {unavailable}
+                                        </div>
+                                    </div>
+                                )}
                                 <button
                                     className="relative w-full h-full flex items-center justify-center overflow-hidden"
                                     onClick={() => goToRecord(collection, record)}
@@ -130,7 +259,10 @@ const Row = ({ index, style, data }: RowProps) => {
                                     {record[imagesConfig.imageField] ? (
                                         <RowImage alt={title} src={record[imagesConfig.imageField]} />
                                     ) : (
-                                        <Image size={100} className="text-muted-foreground stroke-1 opacity-50" />
+                                        <Image
+                                            size={imagesConfig.size === "sm" ? 30 : 100}
+                                            className="text-muted-foreground stroke-1 opacity-50"
+                                        />
                                     )}
                                 </button>
                             </div>
@@ -158,8 +290,12 @@ interface ImagesProps {
     unsubscribe: React.MutableRefObject<{ [key: string | number]: (() => void)[] }>
     search: string | undefined
     backToStartKey: number
-    relationList?: boolean
+    relationList?: RelationList
+    relationCollection?: CollectionSchema
+    relationParent?: StokerRecord
     formList?: boolean
+    isAssigning?: boolean
+    assignable?: Assignable
 }
 
 export const Images = memo(
@@ -175,7 +311,11 @@ export const Images = memo(
         search,
         backToStartKey,
         relationList,
+        relationCollection,
+        relationParent,
         formList,
+        isAssigning,
+        assignable,
     }: ImagesProps) => {
         const { labels, recordTitleField, fullTextSearch } = collection
         const customization = getCollectionConfigModule(labels.collection)
@@ -582,6 +722,7 @@ export const Images = memo(
 
         const lineClamp = imagesConfig.maxHeaderLines === 2 ? "line-clamp-2" : "line-clamp-1"
         const headerSize = imagesConfig.maxHeaderLines === 2 ? 116 : 82
+        const assignedHeight = isAssigning ? 40 : 0
 
         const itemData = {
             collection,
@@ -591,6 +732,11 @@ export const Images = memo(
             lineClamp,
             recordTitleField,
             imagesConfig,
+            isAssigning,
+            assignable,
+            relationList,
+            relationCollection,
+            relationParent,
         }
 
         const Meta = () => (
@@ -622,7 +768,7 @@ export const Images = memo(
                     <List
                         height={height}
                         width="100%"
-                        itemSize={itemSize + headerSize}
+                        itemSize={itemSize + headerSize + assignedHeight}
                         itemCount={itemCount}
                         overscanCount={5}
                         itemKey={itemKey}
@@ -647,7 +793,7 @@ export const Images = memo(
                             <List
                                 height={height}
                                 width="100%"
-                                itemSize={itemSize + headerSize}
+                                itemSize={itemSize + headerSize + assignedHeight}
                                 itemCount={itemCount}
                                 overscanCount={5}
                                 itemKey={itemKey}
@@ -663,6 +809,10 @@ export const Images = memo(
             )
         }
     },
-    (prevProps, nextProps) => prevProps.list === nextProps.list && prevProps.search === nextProps.search,
+    (prevProps, nextProps) =>
+        prevProps.list === nextProps.list &&
+        prevProps.search === nextProps.search &&
+        prevProps.isAssigning === nextProps.isAssigning &&
+        prevProps.backToStartKey === nextProps.backToStartKey,
 )
 Images.displayName = "Images"

package/src/Record.tsx

@@ -1,4 +1,5 @@
 import {
+    Assignable,
     CollectionSchema,
     CustomRecordPage,
     RelationField,
@@ -79,6 +80,9 @@ export const Record = ({ collection }: { collection: CollectionSchema }) => {
     const [breadcrumbs, setBreadcrumbs] = useState<string[] | undefined>(undefined)
     const [customRecordPages, setCustomRecordPages] = useState<CustomRecordPage[] | undefined>(undefined)
 
+    const [isAssigning, setIsAssigning] = useState<Record<string, boolean>>({})
+    const [assignable, setAssignable] = useState<Assignable[] | undefined>(undefined)
+
     useEffect(() => {
         if (id && record && record.id !== id) {
             setRecord(location?.state?.relationField?.includeFields ? undefined : recordFromState)
@@ -108,6 +112,10 @@ export const Record = ({ collection }: { collection: CollectionSchema }) => {
                 | CustomRecordPage[]
                 | undefined
             setCustomRecordPages(pages || [])
+            const assignable = (await getCachedConfigValue(customization, [...collectionAdminPath, "assignable"])) as
+                | Assignable[]
+                | undefined
+            setAssignable(assignable)
 
             setIsRouteLoading("+", location.pathname)
 
@@ -195,7 +203,12 @@ export const Record = ({ collection }: { collection: CollectionSchema }) => {
                     {record && (
                         <CardContent className="px-0">
                             <SidebarProvider defaultOpen={true} open={true} className="flex flex-col lg:flex-row">
-                                <RecordSidebar collection={collection} customRecordPages={customRecordPages} />
+                                <RecordSidebar
+                                    collection={collection}
+                                    customRecordPages={customRecordPages}
+                                    isAssigning={isAssigning}
+                                    setIsAssigning={setIsAssigning}
+                                />
                                 <Routes>
                                     <Route
                                         path="edit"
@@ -256,18 +269,13 @@ export const Record = ({ collection }: { collection: CollectionSchema }) => {
                                                                 relationList={relationList}
                                                                 relationCollection={collection}
                                                                 relationParent={record}
-                                                                additionalConstraints={(() => {
-                                                                    if (record) {
-                                                                        return [
-                                                                            [
-                                                                                `${relationList.field}_Array`,
-                                                                                "array-contains",
-                                                                                record.id,
-                                                                            ],
-                                                                        ]
-                                                                    }
-                                                                    return []
-                                                                })()}
+                                                                isAssigning={
+                                                                    isAssigning?.[relationList.collection.toLowerCase()]
+                                                                }
+                                                                assignable={assignable?.find(
+                                                                    (item: Assignable) =>
+                                                                        item.collection === relationList.collection,
+                                                                )}
                                                             />
                                                         </FiltersProvider>
                                                     </main>

package/src/RecordSidebar.tsx

@@ -1,4 +1,4 @@
-import { FileIcon, EditIcon, List as ListIcon, Book, ArrowDown } from "lucide-react"
+import { FileIcon, EditIcon, List as ListIcon, Book, ArrowDown, Pencil, List } from "lucide-react"
 import {
     Sidebar,
     SidebarContent,
@@ -10,7 +10,7 @@ import {
 } from "./components/ui/sidebar"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./components/ui/dropdown-menu"
 import { useLocation, useNavigate, useParams } from "react-router"
-import { CollectionPermissions, CollectionSchema, CustomRecordPage } from "@stoker-platform/types"
+import { Assignable, CollectionPermissions, CollectionSchema, CustomRecordPage } from "@stoker-platform/types"
 import { collectionAccess, getField, isRelationField, tryFunction, tryPromise } from "@stoker-platform/utils"
 import { getCurrentUserPermissions, getCollectionConfigModule, getSchema } from "@stoker-platform/web-client"
 import { runViewTransition } from "./utils/runViewTransition"
@@ -20,14 +20,19 @@ interface SidebarItem {
     title: string
     page: string
     icon: React.FC
+    assignable?: Assignable
 }
 
 export const RecordSidebar = ({
     collection,
     customRecordPages,
+    isAssigning,
+    setIsAssigning,
 }: {
     collection: CollectionSchema
     customRecordPages?: CustomRecordPage[]
+    isAssigning: Record<string, boolean>
+    setIsAssigning: (isAssigning: Record<string, boolean>) => void
 }) => {
     const { labels } = collection
     const { path, id } = useParams()
@@ -35,8 +40,11 @@ export const RecordSidebar = ({
     const location = useLocation()
 
     const schema = getSchema()
+    const customization = getCollectionConfigModule(collection.labels.collection)
     const permissions = getCurrentUserPermissions()
     const [relationTitles, setRelationTitles] = useState<Record<string, string>>({})
+    const [relationIcons, setRelationIcons] = useState<Record<string, React.FC>>({})
+    const [assignable, setAssignable] = useState<Assignable[]>([])
 
     useEffect(() => {
         ;(async () => {
@@ -51,7 +59,14 @@ export const RecordSidebar = ({
                         ...prev,
                         [relationList.collection]: title || relationList.collection,
                     }))
+                    const icon = await tryPromise(relationCustomization.admin?.icon)
+                    setRelationIcons((prev) => ({
+                        ...prev,
+                        [relationList.collection]: icon as React.FC,
+                    }))
                 })
+                const assignable = await tryPromise(customization.admin?.assignable)
+                setAssignable(assignable)
             }
         })()
     }, [])
@@ -95,7 +110,8 @@ export const RecordSidebar = ({
             relationItems.push({
                 title: relationTitles[relationList.collection],
                 page: relationList.collection.toLowerCase(),
-                icon: ListIcon,
+                icon: relationIcons[relationList.collection] || (() => null),
+                assignable: assignable?.find((item) => item.collection === relationList.collection),
             })
         })
     }
@@ -126,13 +142,38 @@ export const RecordSidebar = ({
                                         return (
                                             <SidebarMenuItem key={item.page}>
                                                 <SidebarMenuButton asChild onClick={() => goToRecordPage(item.page)}>
-                                                    <button
-                                                        className={isActive ? "bg-sidebar-accent" : "cursor-pointer"}
-                                                        type="button"
-                                                    >
+                                                    <div className={isActive ? "bg-sidebar-accent" : "cursor-pointer"}>
                                                         <item.icon />
-                                                        <span>{item.title}</span>
-                                                    </button>
+                                                        <button type="button">{item.title}</button>
+                                                        {item.assignable && isActive && !isAssigning?.[item.page] && (
+                                                            <button
+                                                                className="ml-auto"
+                                                                onClick={() =>
+                                                                    setIsAssigning({
+                                                                        ...isAssigning,
+                                                                        [item.page]: true,
+                                                                    })
+                                                                }
+                                                                type="button"
+                                                            >
+                                                                <Pencil className="w-4 h-4" />
+                                                            </button>
+                                                        )}
+                                                        {item.assignable && isActive && isAssigning?.[item.page] && (
+                                                            <button
+                                                                className="ml-auto"
+                                                                onClick={() =>
+                                                                    setIsAssigning({
+                                                                        ...isAssigning,
+                                                                        [item.page]: false,
+                                                                    })
+                                                                }
+                                                                type="button"
+                                                            >
+                                                                <List className="w-4 h-4" />
+                                                            </button>
+                                                        )}
+                                                    </div>
                                                 </SidebarMenuButton>
                                             </SidebarMenuItem>
                                         )
@@ -174,6 +215,35 @@ export const RecordSidebar = ({
                                                         onClick={() => goToRecordPage(item.page)}
                                                     >
                                                         {item.title}
+
+                                                        {item.assignable && !isAssigning?.[item.page] && (
+                                                            <button
+                                                                className="ml-auto"
+                                                                onClick={() =>
+                                                                    setIsAssigning({
+                                                                        ...isAssigning,
+                                                                        [item.page]: true,
+                                                                    })
+                                                                }
+                                                                type="button"
+                                                            >
+                                                                <Pencil className="w-4 h-4" />
+                                                            </button>
+                                                        )}
+                                                        {item.assignable && isAssigning?.[item.page] && (
+                                                            <button
+                                                                className="ml-auto"
+                                                                onClick={() =>
+                                                                    setIsAssigning({
+                                                                        ...isAssigning,
+                                                                        [item.page]: false,
+                                                                    })
+                                                                }
+                                                                type="button"
+                                                            >
+                                                                <List className="w-4 h-4" />
+                                                            </button>
+                                                        )}
                                                     </DropdownMenuItem>
                                                 ))}
                                             </DropdownMenuContent>