refactor(sonar): mark component props as read-only (typescript:S6759) (#3448)

Author: setchy

src/renderer/components/AllRead.tsx

@@ -12,7 +12,7 @@ interface AllReadProps {
   fullHeight?: boolean;
 }
 
-export function AllRead({ fullHeight = true }: AllReadProps) {
+export function AllRead({ fullHeight = true }: Readonly<AllReadProps>) {
   const hasFilters = useFiltersStore((s) => s.hasActiveFilters());
 
   const emoji = useMemo(() => randomElement(Constants.EMOJIS.ALL_READ), []);

src/renderer/components/Oops.tsx

@@ -15,7 +15,7 @@ interface OopsProps {
   fullHeight?: boolean;
 }
 
-export function Oops({ error, fullHeight = true }: OopsProps) {
+export function Oops({ error, fullHeight = true }: Readonly<OopsProps>) {
   const navigate = useNavigate();
 
   const err = error ?? Errors.UNKNOWN;

src/renderer/components/avatars/AvatarWithFallback.tsx

@@ -26,7 +26,7 @@ export function AvatarWithFallback({
   size = Size.MEDIUM,
   userType = 'User',
   icon,
-}: AvatarWithFallbackProps) {
+}: Readonly<AvatarWithFallbackProps>) {
   const [hasBrokenAvatarSource, setHasBrokenAvatarSource] = useState(false);
 
   const isNonHuman = isNonHumanUser(userType);

src/renderer/components/fields/FieldLabel.tsx

@@ -3,7 +3,7 @@ export interface FieldLabelProps {
   label: string;
 }
 
-export function FieldLabel(props: FieldLabelProps) {
+export function FieldLabel(props: Readonly<FieldLabelProps>) {
   return (
     <label className={'mr-1 font-medium cursor-pointer'} htmlFor={props.name}>
       {props.label}

src/renderer/components/fields/RadioGroup.tsx

@@ -16,7 +16,7 @@ export interface RadioGroupProps {
   tooltip?: ReactNode | string;
 }
 
-export function RadioGroup(props: RadioGroupProps) {
+export function RadioGroup(props: Readonly<RadioGroupProps>) {
   return (
     <Stack align="center" className="text-sm" direction="horizontal" gap="condensed">
       <FieldLabel label={props.label} name={props.name} />

src/renderer/components/fields/Tooltip.tsx

@@ -10,7 +10,7 @@ export interface TooltipProps {
   tooltip: ReactNode | string;
 }
 
-export function Tooltip(props: TooltipProps) {
+export function Tooltip(props: Readonly<TooltipProps>) {
   const [shouldShowTooltipContents, setShouldShowTooltipContents] = useState(false);
 
   const scrollContainerRef = useRef<HTMLElement | null>(null);

src/renderer/components/filters/FilterSection.tsx

@@ -30,7 +30,7 @@ function FilterSectionComponent<K extends keyof FiltersState>({
   filterSetting,
   tooltip,
   layout = 'vertical',
-}: FilterSectionProps<K>) {
+}: Readonly<FilterSectionProps<K>>) {
   const { notifications } = useNotifications();
   const updateFilter = useFiltersStore((s) => s.updateFilter);
 

src/renderer/components/filters/SearchFilterSuggestions.tsx

@@ -17,7 +17,10 @@ interface SearchFilterSuggestionsProps {
   inputValue: string;
 }
 
-export function SearchFilterSuggestions({ open, inputValue }: SearchFilterSuggestionsProps) {
+export function SearchFilterSuggestions({
+  open,
+  inputValue,
+}: Readonly<SearchFilterSuggestionsProps>) {
   const detailedNotifications = useSettingsStore((s) => s.detailedNotifications);
 
   if (!open) {

src/renderer/components/filters/TokenSearchInput.tsx

@@ -27,7 +27,7 @@ export function TokenSearchInput({
   showSuggestionsOnFocusIfEmpty,
   onAdd,
   onRemove,
-}: TokenSearchInputProps) {
+}: Readonly<TokenSearchInputProps>) {
   const [inputValue, setInputValue] = useState('');
   const [shouldShowFilterSuggestions, setShouldShowFilterSuggestions] = useState(false);
 

src/renderer/components/layout/AppLayout.tsx

@@ -10,7 +10,7 @@ interface AppLayoutProps {
  * AppLayout is the main container for the application.
  * It handles the basic layout with sidebar and content area.
  */
-export function AppLayout({ children }: AppLayoutProps) {
+export function AppLayout({ children }: Readonly<AppLayoutProps>) {
   const setFocusRef = (el: HTMLButtonElement | null) => {
     if (el) {
       el.focus();