diff --git a/bootstrapping-lambda/local/index.html b/bootstrapping-lambda/local/index.html index d59ca1b8..a7afb7f6 100644 --- a/bootstrapping-lambda/local/index.html +++ b/bootstrapping-lambda/local/index.html @@ -59,9 +59,11 @@

Override unread notifications bubble

Fronts Integration

Composer Buttons etc. (under trail image in furniture)
- +
+ +
Fronts Clipboard Card:
diff --git a/client/src/fronts/suggestAlternateCrops.tsx b/client/src/fronts/suggestAlternateCrops.tsx index 9192167a..31dcb93e 100644 --- a/client/src/fronts/suggestAlternateCrops.tsx +++ b/client/src/fronts/suggestAlternateCrops.tsx @@ -12,6 +12,8 @@ import { useGlobalStateContext } from "../globalState"; import { CreateItemInput } from "shared/graphql/graphql"; import { gqlCreateItem } from "../../gql"; import { isPinboardData, PinboardData } from "shared/graphql/extraTypes"; +import { agateSans } from "../../fontNormaliser"; +import { pinMetal } from "../../colours"; export const SUGGEST_ALTERNATE_CROP_QUERY_SELECTOR = "pinboard-suggest-alternate-crops"; @@ -41,7 +43,6 @@ export const SuggestAlternateCrops = ({ alternateCropSuggestionElements, }: { alternateCropSuggestionElements: HTMLElement[]; - // TODO take in some count of existing crops (so people know it doesn't need doing again) }) => { // FIXME handle the piece not being tracked in workflow @@ -55,6 +56,7 @@ export const SuggestAlternateCrops = ({ openPinboard, setPayloadToBeSent, clearSelectedPinboard, + cropsOnPreselectedPinboard, } = useGlobalStateContext(); const apolloClient = useApolloClient(); @@ -130,6 +132,33 @@ export const SuggestAlternateCrops = ({ return () => window.removeEventListener("message", handleGridMessage); // Cleanup/unmount function } }, [maybeGridIFrameUrl]); + + const AlreadySuggestedCropsForRatio = ({ + customRatio, + }: { + customRatio: string; + }) => { + if (!cropsOnPreselectedPinboard) return null; + const cropsMatchingRatio = cropsOnPreselectedPinboard.reduce( + (acc, crop) => (crop.aspectRatio === customRatio ? acc + 1 : acc), + 0 + ); + return ( + + {cropsMatchingRatio} crop{cropsMatchingRatio === 1 ? "" : "s"} at{" "} + {customRatio} already suggested + + ); + }; + return ( <> {alternateCropSuggestionElements.map((htmlElement) => @@ -140,20 +169,23 @@ export const SuggestAlternateCrops = ({ flex-direction: column; gap: 5px; margin: 5px 0; + align-items: center; `} > {Object.entries(SUGGESTIBLE_CROP_RATIOS).map( ([customRatio, cropType]) => ( - - Suggest an alternate {customRatio} crop - + <> + + Suggest an alternate {customRatio} crop + + + ) )} , diff --git a/client/src/globalState.tsx b/client/src/globalState.tsx index 201d279b..b382b091 100644 --- a/client/src/globalState.tsx +++ b/client/src/globalState.tsx @@ -18,7 +18,10 @@ import { gqlGetPinboardsByIds, gqlRemoveManuallyOpenedPinboardIds, } from "../gql"; -import type { PayloadAndType } from "./types/PayloadAndType"; +import type { + PayloadAndType, + PayloadWithThumbnail, +} from "./types/PayloadAndType"; import type { PerPinboard } from "./types/PerPinboard"; import type { PinboardData } from "../../shared/graphql/extraTypes"; import { isPinboardData } from "../../shared/graphql/extraTypes"; @@ -64,6 +67,8 @@ interface GlobalStateContextShape { openPinboardInNewTab: (pinboardData: PinboardData) => void; closePinboard: (pinboardId: string) => void; preselectedPinboard: PreselectedPinboard; + cropsOnPreselectedPinboard: PayloadWithThumbnail[]; + setCropsOnPreselectedPinboard: (crops: PayloadWithThumbnail[]) => void; selectedPinboardId: string | null | undefined; clearSelectedPinboard: () => void; @@ -181,6 +186,10 @@ export const GlobalStateProvider = ({ const preselectedPinboardId = isPinboardData(preselectedPinboard) && preselectedPinboard.id; + const [cropsOnPreselectedPinboard, setCropsOnPreselectedPinboard] = useState< + PayloadWithThumbnail[] + >([]); + const [ maybeOpenPinboardIdBasedOnQueryParam, setMaybeOpenPinboardIdBasedOnQueryParam, @@ -556,6 +565,8 @@ export const GlobalStateProvider = ({ openPinboardInNewTab, closePinboard, preselectedPinboard, + cropsOnPreselectedPinboard, + setCropsOnPreselectedPinboard, selectedPinboardId, clearSelectedPinboard, diff --git a/client/src/pinboard.tsx b/client/src/pinboard.tsx index ac777d9a..434c3e42 100644 --- a/client/src/pinboard.tsx +++ b/client/src/pinboard.tsx @@ -18,9 +18,13 @@ import { AssetView } from "./assetView"; import { Feedback } from "./feedback"; import { PINBOARD_TELEMETRY_TYPE, TelemetryContext } from "./types/Telemetry"; import { ModalBackground } from "./modal"; -import { maybeConstructPayloadAndType } from "./types/PayloadAndType"; +import { + maybeConstructPayloadAndType, + PayloadWithThumbnail, +} from "./types/PayloadAndType"; import { useTourProgress, useTourStepRef } from "./tour/tourState"; import { Reply } from "./reply"; +import { isPinboardData } from "shared/graphql/extraTypes"; export interface ItemsMap { [id: string]: Item | PendingItem; } @@ -56,7 +60,9 @@ export const Pinboard = ({ payloadToBeSent, setPayloadToBeSent, - clearPayloadToBeSent, + + preselectedPinboard, + setCropsOnPreselectedPinboard, showNotification, @@ -145,6 +151,20 @@ export const Pinboard = ({ const lastItemIndex = items.length - 1; const lastItem = items[lastItemIndex]; + useEffect(() => { + isPinboardData(preselectedPinboard) && + preselectedPinboard.id === pinboardId && + setCropsOnPreselectedPinboard( + items.reduce( + (acc, item) => + item.type === "grid-crop" && item.payload + ? [...acc, JSON.parse(item.payload)] + : acc, + [] as PayloadWithThumbnail[] + ) + ); + }, [preselectedPinboard, items]); + const initialLastItemSeenByUsersQuery = useQuery( gqlGetLastItemSeenByUsers(pinboardId), {