feat(arf): add resizable image inputs by diffiii · Pull Request #225 · Solvro/web-topwr

diffiii · 2026-01-08T18:39:20Z

Resolves #89

This pull request adds support for specifying image size variants in the image upload input component and updates resource metadata to use these new size options. The changes improve flexibility and consistency in how images are displayed throughout the application.

Image upload component enhancements:

Added a new ImageSize type with options "small", "medium", "large", and "wide", and updated the ImageUpload component to accept a size prop for controlling image display size. [1] [2] [3] [4] [5]
Refactored the InputBox component to apply different CSS classes based on the selected image size, ensuring images are rendered appropriately for their context.
Updated usages of InputBox within ImageUpload to pass the new size prop. [1] [2]

Resource form and metadata updates:

Extended resource form input types to allow specifying the size property for image inputs.
Updated resource metadata in RESOURCE_METADATA to specify appropriate image sizes for various image fields, such as using "wide" for banners and "small" for logos. [1] [2] [3]

Type and export adjustments:

Exported the new ImageSize type from the abstract resource form module for use in other parts of the codebase.

Copilot

Pull request overview

This pull request adds support for resizable image inputs by introducing a new ImageSize type with four size variants ("small", "medium", "large", "wide") and updating the image upload component to accept and apply size-specific styling.

Key changes:

Added ImageSize type and integrated it into the abstract resource form input system
Updated ImageUpload component to support size prop with responsive CSS classes
Applied appropriate size specifications to image fields in resource metadata

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
`src/features/abstract-resource-form/types/inputs.ts`	Defines new `ImageSize` type and adds optional size property to image input configuration
`src/features/abstract-resource-form/index.ts`	Exports `ImageSize` type for use throughout the application
`src/components/inputs/image-upload.tsx`	Implements size prop with responsive styling through `getImageSizeClasses` function and updated `InputBox` component
`src/features/resources/data/resource-metadata.ts`	Applies size specifications to banner and logo image fields (wide for banners, small for logos)

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-08T18:43:33Z

src/components/inputs/image-upload.tsx

-      className="aspect-video h-fit max-h-48 w-full overflow-hidden rounded-lg md:size-48"
+      className={cn(
+        "h-fit w-full overflow-hidden rounded-lg",
+        size !== "wide" && "aspect-video max-h-48",


There's a potential CSS conflict for small/medium/large sizes. The aspect-video class (line 55) applies at all breakpoints, while size-specific classes like md:size-32 (line 56) set explicit square dimensions at md+ breakpoint. This creates competing constraints where aspect-video requests a 16:9 ratio but md:size-32 sets equal width and height. Consider applying aspect-video only below the md breakpoint by using max-md:aspect-video, or clarify if the current behavior where explicit dimensions override aspect ratio is intentional.

Suggested change

size !== "wide" && "aspect-video max-h-48",

size !== "wide" && "max-md:aspect-video max-h-48",

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-14T07:12:16Z

src/components/inputs/image-upload.tsx

+      return "md:size-64";
+    }
+    case "wide": {
+      return "md:h-48 md:w-full aspect-video";


The "wide" size applies md:h-48, md:w-full, and aspect-video simultaneously. This creates a conflict: md:w-full makes the element full width, aspect-video wants to maintain a 16:9 ratio, but md:h-48 fixes the height at 48px. These constraints cannot all be satisfied simultaneously. Consider either removing md:h-48 to let the aspect ratio control the height based on the full width, or replacing aspect-video with a max-height constraint if a fixed height is desired.

Suggested change

return "md:h-48 md:w-full aspect-video";

return "md:w-full aspect-video";

kguzek

w sumie wydaje mi się że ta cała implementacja z rozmiarami jest zbędna. lepiej będzie zrobić żeby wszystkie zdjęcia typu ImageType.Banner wyświetlały się na górze formularza nad wszystkimi pozostałymi inputami, a tylko Logo żeby były z boku na desktopie. dodanie dodatkowego atrybutu size tylko namiesza, a to nie warto bo mamy zdjęcia dosłownie chyba tylko w trzech formularzach

kguzek · 2026-02-24T12:01:26Z

src/components/inputs/image-upload.tsx

+function getImageSizeClasses(size: ImageSize): string {
+  switch (size) {
+    case "small": {
+      return "md:size-32";
+    }
+    case "medium": {
+      return "md:size-48";
+    }
+    case "large": {
+      return "md:size-64";
+    }
+    case "wide": {
+      return "md:h-48 md:w-full aspect-video";
+    }
+  }
+}
+


to nie powinna być funkcja ze switchem tylko obiekt jako mapa

kguzek · 2026-02-24T12:02:37Z

src/components/inputs/image-upload.tsx

-      className="aspect-video h-fit max-h-48 w-full overflow-hidden rounded-lg md:size-48"
+      className={cn(
+        "h-fit w-full overflow-hidden rounded-lg",
+        size !== "wide" && "aspect-video max-h-48",


użyj notacji { "aspect-vide max-h-48": size !== "wide" } zamiast && dla spójności z resztą kodu

kguzek · 2026-02-24T12:03:00Z

src/components/inputs/image-upload.tsx

  value,
  label,
  type = ImageType.Logo,
+  size = "medium",


to zły pomysł żeby to były string literały. zmień to na enuma

kguzek · 2026-02-24T12:06:55Z

żeby na desktopie ImageType.Bannery wyglądały tak jak obecnie zdjęcia na mobilce:

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-24T12:12:41Z

src/components/inputs/image-upload.tsx

+    }
+    case "wide": {
+      return "md:h-48 md:w-full aspect-video";
+    }


getImageSizeClasses is declared to return string, but with no default/exhaustive guard the function can return undefined at runtime if an unexpected size value slips through (or if the ImageSize union is extended later). Consider adding an explicit fallback return, or an exhaustive never check to make this function total.

Suggested change

}

}

default: {

const _exhaustiveCheck: never = size;

throw new Error(`Unhandled image size: ${_exhaustiveCheck}`);

}

Copilot · 2026-02-24T12:12:42Z

src/features/abstract-resource-form/index.ts


 export * from "./providers/arf-sheet-provider";
+
+export type { ImageSize } from "./types/inputs";


ImageSize is being re-exported from the feature root, but most consumers import ARF types from @/features/abstract-resource-form/types (e.g. src/features/resources/types/internal.ts:6). To keep the public type surface consistent, consider also re-exporting ImageSize from src/features/abstract-resource-form/types/index.ts (or switching call sites to import from the same barrel).

Suggested change

export type { ImageSize } from "./types/inputs";

diffiii self-assigned this Jan 8, 2026

Copilot AI review requested due to automatic review settings January 8, 2026 18:39

diffiii requested a review from kguzek as a code owner January 8, 2026 18:39

pull-request-size bot added the size/M label Jan 8, 2026

Copilot started reviewing on behalf of diffiii January 8, 2026 18:39 View session

Copilot AI reviewed Jan 8, 2026

View reviewed changes

diffiii force-pushed the feat/resizable-images branch from 28ea9c7 to 5742571 Compare January 13, 2026 22:19

kguzek requested a review from Copilot January 14, 2026 07:08

Copilot started reviewing on behalf of kguzek January 14, 2026 07:08 View session

Copilot AI reviewed Jan 14, 2026

View reviewed changes

kguzek force-pushed the feat/resizable-images branch from 5742571 to 1250677 Compare February 24, 2026 00:02

kguzek requested changes Feb 24, 2026

View reviewed changes

feat(arf): add resizable image inputs

28a3a12

Copilot AI review requested due to automatic review settings February 24, 2026 12:07

kguzek force-pushed the feat/resizable-images branch from 1250677 to 28a3a12 Compare February 24, 2026 12:07

Copilot started reviewing on behalf of kguzek February 24, 2026 12:07 View session

Copilot AI reviewed Feb 24, 2026

View reviewed changes

	size !== "wide" && "aspect-video max-h-48",
	size !== "wide" && "max-md:aspect-video max-h-48",

	return "md:h-48 md:w-full aspect-video";
	return "md:w-full aspect-video";

-    }
+    }
+    default: {
+      const _exhaustiveCheck: never = size;
+      throw new Error(`Unhandled image size: ${_exhaustiveCheck}`);
+    }


		export * from "./providers/arf-sheet-provider";

		export type { ImageSize } from "./types/inputs";

Conversation

diffiii commented Jan 8, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

kguzek left a comment

Choose a reason for hiding this comment

Uh oh!

kguzek Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

kguzek Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

kguzek Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

kguzek commented Feb 24, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants