fix: allow null username (#8552)

Author: alexnm

packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxCard.tsx

@@ -284,13 +284,15 @@ export const SandboxCard = ({
         <CardContent selected={selected}>
           <Stack direction="vertical" gap={0}>
             <SandboxTitle brightness={thumbnail.brightness} {...props} />
-            <Text
-              size={12}
-              truncate
-              css={{ marginLeft: 28, color: userNameTextColor }}
-            >
-              Created by {username}
-            </Text>
+            {username ? (
+              <Text
+                size={12}
+                truncate
+                css={{ marginLeft: 28, color: userNameTextColor }}
+              >
+                Created by {username}
+              </Text>
+            ) : null}
           </Stack>
           <SandboxStats
             noDrag={noDrag}

packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxListItem.tsx

@@ -175,7 +175,7 @@ export const SandboxListItem = ({
               variant={selected ? 'body' : 'muted'}
               maxWidth="100%"
             >
-              {timeAgo} by {username}
+              {timeAgo} {username ? `by ${username}` : ''}
             </Text>
           )}
         </Column>

packages/app/src/app/pages/Dashboard/Components/Sandbox/index.tsx

@@ -308,9 +308,10 @@ const GenericSandbox = ({ isScrolling, item, page }: GenericSandboxProps) => {
         {...interactionProps}
         isScrolling={isScrolling}
         username={
+          sandboxProps.sandbox.author &&
           sandboxProps.sandbox.author.username === user?.username
             ? 'you'
-            : sandboxProps.sandbox.author.username
+            : sandboxProps.sandbox.author?.username || null
         }
       />
     </div>

packages/app/src/app/pages/Dashboard/Components/Sandbox/types.ts

@@ -15,7 +15,7 @@ export interface SandboxItemComponentProps {
   PrivacyIcon: React.FC;
   screenshotUrl: string | null;
   restricted: boolean;
-  username: string;
+  username: string | null;
   interaction: 'button' | 'link';
   isScrolling: boolean;
   selected: boolean;