fix(settings): improve sidebar skeleton fidelity and fix credit purchase org cache invalidation

- Bump skeleton icon and text from 16/14px to 24px to better match real nav item visual weight
- Add orgId support to usePurchaseCredits so org billing/subscription caches are invalidated on credit purchase, matching the pattern used by useUpgradeSubscription
- Polish ColorInput in whitelabeling settings with auto-prefix and select-on-focus UX

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx

@@ -284,8 +284,8 @@ export function SettingsSidebar({
                 <div className='flex flex-col gap-0.5 px-2'>
                   {Array.from({ length: count }, (_, j) => (
                     <div key={j} className='mx-0.5 flex h-[30px] items-center gap-2 px-2'>
-                      <Skeleton className='h-[16px] w-[16px] flex-shrink-0 rounded-sm' />
-                      <Skeleton className='sidebar-collapse-hide h-[14px] w-full rounded-sm' />
+                      <Skeleton className='h-[24px] w-[24px] flex-shrink-0 rounded-sm' />
+                      <Skeleton className='sidebar-collapse-hide h-[24px] w-full rounded-sm' />
                     </div>
                   ))}
                 </div>

apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx

@@ -79,6 +79,22 @@ interface ColorInputProps {
 function ColorInput({ label, value, onChange, placeholder = '#000000' }: ColorInputProps) {
   const isValidHex = !value || HEX_COLOR_REGEX.test(value)
 
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      let v = e.target.value.trim()
+      if (v && !v.startsWith('#')) {
+        v = `#${v}`
+      }
+      v = v.slice(0, 1) + v.slice(1).replace(/[^0-9a-fA-F]/g, '')
+      onChange(v.slice(0, 7))
+    },
+    [onChange]
+  )
+
+  const handleFocus = useCallback((e: React.FocusEvent<HTMLInputElement>) => {
+    e.target.select()
+  }, [])
+
   return (
     <div className='flex flex-col gap-1.5'>
       <Label className='text-[13px] text-[var(--text-primary)]'>{label}</Label>
@@ -92,7 +108,8 @@ function ColorInput({ label, value, onChange, placeholder = '#000000' }: ColorIn
         </div>
         <Input
           value={value}
-          onChange={(e) => onChange(e.target.value)}
+          onChange={handleChange}
+          onFocus={handleFocus}
           placeholder={placeholder}
           className={cn(
             'h-[36px] font-mono text-[13px]',

apps/sim/hooks/queries/subscription.ts

@@ -303,6 +303,7 @@ export function useUpgradeSubscription() {
 interface PurchaseCreditsParams {
   amount: number
   requestId: string
+  orgId?: string
 }
 
 export function usePurchaseCredits() {
@@ -324,9 +325,13 @@ export function usePurchaseCredits() {
 
       return data
     },
-    onSuccess: () => {
+    onSuccess: (_data, variables) => {
       queryClient.invalidateQueries({ queryKey: subscriptionKeys.users() })
       queryClient.invalidateQueries({ queryKey: subscriptionKeys.usage() })
+      if (variables.orgId) {
+        queryClient.invalidateQueries({ queryKey: organizationKeys.billing(variables.orgId) })
+        queryClient.invalidateQueries({ queryKey: organizationKeys.subscription(variables.orgId) })
+      }
     },
   })
 }