🆕 Infostand Borders

src/api/room/widgets/AvatarInfoUser.ts

@@ -24,6 +24,7 @@ export class AvatarInfoUser implements IAvatarInfo
     public standId: number = 0;
     public overlayId: number = 0;
     public cardBackgroundId: number = 0;
+    public borderId: number = 0;
     public webID: number = 0;
     public xp: number = 0;
     public userType: number = -1;

src/api/room/widgets/AvatarInfoUtilities.ts

@@ -194,6 +194,7 @@ export class AvatarInfoUtilities
         userInfo.standId = userData.stand;
         userInfo.overlayId = userData.overlay;
         userInfo.cardBackgroundId = userData.cardBackground ?? 0;
+        userInfo.borderId = (userData as any).borderId ?? 0;
         userInfo.achievementScore = userData.activityPoints;
         userInfo.webID = userData.webID;
         userInfo.roomIndex = userData.roomIndex;

src/components/backgrounds/BackgroundsView.tsx

@@ -18,12 +18,14 @@ interface BackgroundsViewProps {
     setSelectedOverlay: Dispatch<SetStateAction<number>>;
     selectedCardBackground: number;
     setSelectedCardBackground: Dispatch<SetStateAction<number>>;
+    selectedBorder: number;
+    setSelectedBorder: Dispatch<SetStateAction<number>>;
 }
 
-const TABS = ['backgrounds', 'stands', 'overlays', 'cards'] as const;
+const TABS = ['backgrounds', 'stands', 'overlays', 'cards', 'borders'] as const;
 type TabType = typeof TABS[number];
 
-type RemoteData = Partial<Record<'backgrounds.data' | 'stands.data' | 'overlays.data' | 'cards.data', any[]>>;
+type RemoteData = Partial<Record<'backgrounds.data' | 'stands.data' | 'overlays.data' | 'cards.data' | 'borders.data', any[]>>;
 
 export const BackgroundsView: FC<BackgroundsViewProps> = ({
     setIsVisible,
@@ -34,7 +36,9 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
     selectedOverlay,
     setSelectedOverlay,
     selectedCardBackground,
-    setSelectedCardBackground
+    setSelectedCardBackground,
+    selectedBorder,
+    setSelectedBorder
 }) => {
     const [activeTab, setActiveTab] = useState<TabType>('backgrounds');
     const [remoteData, setRemoteData] = useState<RemoteData | null>(null);
@@ -55,7 +59,7 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
         return configData.map(item => ({ id: typeof item === 'number' ? item : item[idField] }));
     }, []);
 
-    const readData = useCallback((key: 'backgrounds.data' | 'stands.data' | 'overlays.data' | 'cards.data'): any[] => {
+    const readData = useCallback((key: 'backgrounds.data' | 'stands.data' | 'overlays.data' | 'cards.data' | 'borders.data'): any[] => {
         const fromRemote = remoteData?.[key];
         if(Array.isArray(fromRemote)) return fromRemote;
         return GetOptionalConfigurationValue<any[]>(key, []) || [];
@@ -65,20 +69,27 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
         backgrounds: processData(readData('backgrounds.data'), 'backgroundId'),
         stands: processData(readData('stands.data'), 'standId'),
         overlays: processData(readData('overlays.data'), 'overlayId'),
-        cards: processData(readData('cards.data').length ? readData('cards.data') : readData('backgrounds.data'), 'backgroundId')
+        cards: processData(readData('cards.data').length ? readData('cards.data') : readData('backgrounds.data'), 'backgroundId'),
+        borders: processData(readData('borders.data'), 'borderId')
     }), [processData, readData]);
 
     const handleSelection = useCallback((id: number) => {
         if (!roomSession) return;
 
-        const setters = { backgrounds: setSelectedBackground, stands: setSelectedStand, overlays: setSelectedOverlay, cards: setSelectedCardBackground };
+        const setters = { backgrounds: setSelectedBackground, stands: setSelectedStand, overlays: setSelectedOverlay, cards: setSelectedCardBackground, borders: setSelectedBorder };
 
-        const currentValues = { backgrounds: selectedBackground, stands: selectedStand, overlays: selectedOverlay, cards: selectedCardBackground };
+        const currentValues = { backgrounds: selectedBackground, stands: selectedStand, overlays: selectedOverlay, cards: selectedCardBackground, borders: selectedBorder };
 
         setters[activeTab](id);
         const newValues = { ...currentValues, [activeTab]: id };
-        roomSession.sendBackgroundMessage( newValues.backgrounds, newValues.stands, newValues.overlays, newValues.cards );
+        roomSession.sendBackgroundMessage( newValues.backgrounds, newValues.stands, newValues.overlays, newValues.cards, newValues.borders );
-    }, [activeTab, roomSession, selectedBackground, selectedStand, selectedOverlay, selectedCardBackground, setSelectedBackground, setSelectedStand, setSelectedOverlay, setSelectedCardBackground]);
+    }, [activeTab, roomSession, selectedBackground, selectedStand, selectedOverlay, selectedCardBackground, selectedBorder, setSelectedBackground, setSelectedStand, setSelectedOverlay, setSelectedCardBackground, setSelectedBorder]);
+
+    const itemTypeFor = (tab: TabType): string => {
+        if(tab === 'cards') return 'card-background';
+        if(tab === 'borders') return 'border';
+        return tab.slice(0, -1);
+    };
 
     const renderItem = useCallback((item: ItemData, type: string) => (
         <Flex
@@ -89,7 +100,11 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
         >
             <Base
                 className={`profile-${type} ${type}-${item.id}`}
-                style={type === 'card-background' ? { width: 60, height: 80, borderRadius: 4 } : undefined}
+                style={
+                    type === 'card-background' ? { width: 60, height: 80, borderRadius: 4 }
+                    : type === 'border' ? { width: 60, height: 76, backgroundSize: 'contain', backgroundRepeat: 'no-repeat', backgroundPosition: 'center' }
+                    : undefined
+                }
             />
         </Flex>
     ), [handleSelection]);
@@ -111,7 +126,7 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
             <NitroCardContentView gap={1}>
                 <Text bold center>Select an Option</Text>
                 <Grid gap={1} columnCount={7} overflow="auto">
-                    {allData[activeTab].map(item => renderItem(item, activeTab === 'cards' ? 'card-background' : activeTab.slice(0, -1)))}
+                    {allData[activeTab].map(item => renderItem(item, itemTypeFor(activeTab)))}
                 </Grid>
             </NitroCardContentView>
         </NitroCardView>

src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx

@@ -25,6 +25,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
   const [standId, setStandId] = useState<number>(null);
   const [overlayId, setOverlayId] = useState<number>(null);
   const [cardBackgroundId, setCardBackgroundId] = useState<number>(null);
+  const [borderId, setBorderId] = useState<number>(null);
   const [isVisible, setIsVisible] = useState(false);
   const { roomSession = null } = useRoom();
 
@@ -32,6 +33,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
   const infostandStandClass = `stand-${standId ?? 'default'}`;
   const infostandOverlayClass = `overlay-${overlayId ?? 'default'}`;
   const infostandCardBackgroundClass = cardBackgroundId ? `card-background-${cardBackgroundId}` : '';
+  const infostandBorderClass = borderId ? `border-${borderId}` : '';
   const handleProfileClick = useCallback(() => { GetUserProfile(avatarInfo.webID); }, [avatarInfo.webID]);
 
   const handleEditClick = useCallback((event: React.MouseEvent) => { event.stopPropagation(); setIsVisible(prev => !prev); }, []);
@@ -99,6 +101,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
       newValue.standId = event.standId;
       newValue.overlayId = event.overlayId;
       newValue.cardBackgroundId = event.cardBackgroundId ?? 0;
+      newValue.borderId = event.borderId ?? 0;
       return newValue;
     });
   });
@@ -134,6 +137,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
     setStandId(avatarInfo.standId);
     setOverlayId(avatarInfo.overlayId);
     setCardBackgroundId(avatarInfo.cardBackgroundId ?? 0);
+    setBorderId(avatarInfo.borderId ?? 0);
 
     SendMessageComposer(new UserRelationshipsComposer(avatarInfo.webID));
 
@@ -146,7 +150,9 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
 
   return (
     <>
-      <Column className={`relative min-w-[190px] max-w-[190px] z-30 pointer-events-auto ${cardBackgroundId ? '' : 'bg-[rgba(28,28,32,0.95)]'} [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] rounded overflow-hidden profile-card-background ${infostandCardBackgroundClass}`}>
+      <div className="relative min-w-[190px] max-w-[190px] pointer-events-auto z-30">
+        {borderId ? <Base className={`infostand-border ${infostandBorderClass}`} /> : null}
+        <Column className={`relative min-w-[190px] max-w-[190px] ${cardBackgroundId ? '' : 'bg-[rgba(28,28,32,0.95)]'} [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] rounded overflow-hidden profile-card-background ${infostandCardBackgroundClass}`}>
         <Column className="h-full p-[8px] overflow-auto" gap={1} overflow="visible">
           <div className="flex flex-col gap-1">
             <div className="flex items-center justify-between">
@@ -281,6 +287,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
           )}
         </Column>
       </Column>
+      </div>
       {isVisible && avatarInfo.type === AvatarInfoUser.OWN_USER && (
         <div className="backgrounds-view-container">
           <BackgroundsView
@@ -293,6 +300,8 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
             setSelectedOverlay={setOverlayId}
             selectedCardBackground={cardBackgroundId}
             setSelectedCardBackground={setCardBackgroundId}
+            selectedBorder={borderId}
+            setSelectedBorder={setBorderId}
           />
         </div>
       )}

src/css/backgrounds/BackgroundsView.css

@@ -1595,3 +1595,128 @@
     background-image: url('@/assets/images/backgrounds/overlay/overlay_8.png');
   }
 }
+
+/* Infostand-only colored border. A thin CSS-drawn rounded ring drawn 5px
+   outside the card on each side. Pure CSS — no artwork files. */
+.infostand-border {
+  position: absolute;
+  top: -5px;
+  bottom: -5px;
+  left: -5px;
+  right: -5px;
+  pointer-events: none;
+  z-index: 5;
+  border-width: 5px;
+  border-style: solid;
+  border-radius: 10px;
+  box-sizing: content-box;
+}
+
+.infostand-border.border-1  { border-color: #ef4444; } /* Red */
+.infostand-border.border-2  { border-color: #f97316; } /* Orange */
+.infostand-border.border-3  { border-color: #eab308; } /* Yellow */
+.infostand-border.border-4  { border-color: #84cc16; } /* Lime */
+.infostand-border.border-5  { border-color: #22c55e; } /* Green */
+.infostand-border.border-6  { border-color: #14b8a6; } /* Teal */
+.infostand-border.border-7  { border-color: #06b6d4; } /* Cyan */
+.infostand-border.border-8  { border-color: #3b82f6; } /* Blue */
+.infostand-border.border-9  { border-color: #6366f1; } /* Indigo */
+.infostand-border.border-10 { border-color: #a855f7; } /* Purple */
+.infostand-border.border-11 { border-color: #ec4899; } /* Pink */
+.infostand-border.border-12 { border-color: #f43f5e; } /* Rose */
+.infostand-border.border-13 { border-color: #92400e; } /* Brown */
+.infostand-border.border-14 { border-color: #d4a020; } /* Gold */
+.infostand-border.border-15 { border-color: #cbd5e1; } /* Silver */
+.infostand-border.border-16 { border-color: #1f2937; } /* Black */
+
+/* Image-based borders (17-25). These override the colour-border insets and
+   strip the CSS border so the artwork sits ~22px outside the card and
+   stretches to fill the frame area. */
+.infostand-border.border-17,
+.infostand-border.border-18,
+.infostand-border.border-19,
+.infostand-border.border-20,
+.infostand-border.border-21,
+.infostand-border.border-22,
+.infostand-border.border-23,
+.infostand-border.border-24,
+.infostand-border.border-25 {
+  top: -22px;
+  bottom: -22px;
+  left: -22px;
+  right: -22px;
+  border: none;
+  border-radius: 0;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100% 100%;
+}
+
+.infostand-border.border-17 { background-image: url('@/assets/images/backgrounds/borders/border_17.webp'); }
+.infostand-border.border-18 { background-image: url('@/assets/images/backgrounds/borders/border_18.webp'); }
+.infostand-border.border-19 { background-image: url('@/assets/images/backgrounds/borders/border_19.webp'); }
+.infostand-border.border-20 { background-image: url('@/assets/images/backgrounds/borders/border_20.webp'); }
+.infostand-border.border-21 { background-image: url('@/assets/images/backgrounds/borders/border_21.webp'); }
+.infostand-border.border-22 { background-image: url('@/assets/images/backgrounds/borders/border_22.webp'); }
+.infostand-border.border-23 { background-image: url('@/assets/images/backgrounds/borders/border_23.webp'); }
+.infostand-border.border-24 { background-image: url('@/assets/images/backgrounds/borders/border_24.webp'); }
+.infostand-border.border-25 { background-image: url('@/assets/images/backgrounds/borders/border_25.webp'); }
+
+/* Picker thumbnails inside the BackgroundsView "Borders" tab.
+   Each thumbnail is a small rounded box outlined in its border colour. */
+.profile-border {
+  width: 60px;
+  height: 76px;
+  border-width: 4px;
+  border-style: solid;
+  border-radius: 8px;
+  box-sizing: border-box;
+  background: rgba(255, 255, 255, 0.05);
+}
+
+/* border-0 = no border (default) — show as a dashed translucent outline */
+.profile-border.border-0  { border: 2px dashed rgba(255, 255, 255, 0.25); }
+
+.profile-border.border-1  { border-color: #ef4444; }
+.profile-border.border-2  { border-color: #f97316; }
+.profile-border.border-3  { border-color: #eab308; }
+.profile-border.border-4  { border-color: #84cc16; }
+.profile-border.border-5  { border-color: #22c55e; }
+.profile-border.border-6  { border-color: #14b8a6; }
+.profile-border.border-7  { border-color: #06b6d4; }
+.profile-border.border-8  { border-color: #3b82f6; }
+.profile-border.border-9  { border-color: #6366f1; }
+.profile-border.border-10 { border-color: #a855f7; }
+.profile-border.border-11 { border-color: #ec4899; }
+.profile-border.border-12 { border-color: #f43f5e; }
+.profile-border.border-13 { border-color: #92400e; }
+.profile-border.border-14 { border-color: #d4a020; }
+.profile-border.border-15 { border-color: #cbd5e1; }
+.profile-border.border-16 { border-color: #1f2937; }
+
+/* Image-border picker thumbnails — drop the CSS frame and show the artwork. */
+.profile-border.border-17,
+.profile-border.border-18,
+.profile-border.border-19,
+.profile-border.border-20,
+.profile-border.border-21,
+.profile-border.border-22,
+.profile-border.border-23,
+.profile-border.border-24,
+.profile-border.border-25 {
+  border: none;
+  background: transparent;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+
+.profile-border.border-17 { background-image: url('@/assets/images/backgrounds/borders/border_17.webp'); }
+.profile-border.border-18 { background-image: url('@/assets/images/backgrounds/borders/border_18.webp'); }
+.profile-border.border-19 { background-image: url('@/assets/images/backgrounds/borders/border_19.webp'); }
+.profile-border.border-20 { background-image: url('@/assets/images/backgrounds/borders/border_20.webp'); }
+.profile-border.border-21 { background-image: url('@/assets/images/backgrounds/borders/border_21.webp'); }
+.profile-border.border-22 { background-image: url('@/assets/images/backgrounds/borders/border_22.webp'); }
+.profile-border.border-23 { background-image: url('@/assets/images/backgrounds/borders/border_23.webp'); }
+.profile-border.border-24 { background-image: url('@/assets/images/backgrounds/borders/border_24.webp'); }
+.profile-border.border-25 { background-image: url('@/assets/images/backgrounds/borders/border_25.webp'); }