Merge Upstream 20.01.2025 (2)

[ss220app]

This pull request merges upstream/master. Resolve possible conflicts manually and make sure all the changes are applied correctly.

Changelog

🆑 tgstation
qol: Торговым автоматам добавлен новый дизайн с двумя вариантами расположения: Список и Сетка (по умолчанию используется Список).
/:cl:

Summary by Sourcery

New Features:

• Introduce a new design for vending machines with two layout options: list and grid.

[sourcery-ai]

Reviewer's Guide by Sourcery

This pull request merges the upstream master branch into the current branch. It includes a new vending machine layout with list and grid options.

Class diagram for updated vending machine components

classDiagram
  class Vending {
    -width: number
    -height: number
    +render()
  }

  class UserDetails {
    +render()
  }

  class ProductDisplay {
    -stockSearch: string
    -toggleLayout: boolean
    +setToggleLayout()
    +render()
  }

  class Product {
    -colorable: boolean
    -free: boolean
    -discount: boolean
    -remaining: number
    +render()
  }

  class ProductGrid {
    +render()
  }

  class ProductList {
    +render()
  }

  Vending --> UserDetails
  Vending --> ProductDisplay
  ProductDisplay --> Product
  Product --> ProductGrid
  Product --> ProductList

  note for Product "New component that handles both grid and list layouts"
  note for ProductDisplay "Added layout toggle functionality"

Loading

File-Level Changes

Change	Details	Files
Updated vending machine window layout and styles.	Adjusted the window width and height. Modified the user details section to display user information in a NoticeBox. Added a toggle button to switch between list and grid layouts. Refactored the product display to use a Product component instead of a table. Implemented ProductGrid and ProductList components for different layouts. Modified the ProductColorSelect component to use a transparent background. Added a ProductPrice component to display the price of a product. Removed the ProductStock component. Added a new ImageButton component to display the product image.	tgui/packages/tgui/interfaces/Vending.tsx
Added a new changelog file.	Added a new changelog file for the vending machine changes.	html/changelogs/AutoChangeLog-pr-89137.yml
Modified the statbrowser css file.	Modified the grid-item:hover .grid-item-text to have a height of 100%.	html/statbrowser.css

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time. You can also use
  this command to specify where the summary should be inserted.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

We have skipped reviewing this pull request. It seems to have been created by a bot (hey, ss220app[bot]!). We assume it knows what it's doing!

[github-actions]

This PR causes following conflicts on translate branch:

tgui/packages/tgui/interfaces/Vending.tsx

++<<<<<<< HEAD
 +  return (
 +    <NoticeBox m={0} color={user && 'blue'}>
 +      <Stack align="center">
 +        <Stack.Item>
 +          <Icon name="id-card" size={1.5} />
 +        </Stack.Item>
 +        <Stack.Item>
 +          {user
 +            ? `${user.name || 'Unknown'} | ${user.job}`
 +            : 'No ID detected! Contact the Head of Personnel.'}
 +        </Stack.Item>
 +      </Stack>
 +    </NoticeBox>
 +  );
++||||||| aa82cd08971
++  if (!user) {
++    return (
++      <Section>
++        <NoticeBox>No ID detected! Contact the Head of Personnel.</NoticeBox>
++      </Section>
++    );
++  } else {
++    return (
++      <Section>
++        <Stack>
++          <Stack.Item>
++            <Icon name="id-card" size={3} mr={1} />
++          </Stack.Item>
++          <Stack.Item>
++            <LabeledList>
++              <LabeledList.Item label="User">{user.name}</LabeledList.Item>
++              <LabeledList.Item label="Occupation">
++                {user.job || 'Unemployed'}
++              </LabeledList.Item>
++            </LabeledList>
++          </Stack.Item>
++        </Stack>
++      </Section>
++    );
++  }
++=======
+   if (!user) {
+     return (
+       <Section>
+         <NoticeBox>
+           ID-карта не обнаружена! Обратитесь к главе персонала.
+         </NoticeBox>
+       </Section>
+     );
+   } else {
+     return (
+       <Section>
+         <Stack>
+           <Stack.Item>
+             <Icon name="id-card" size={3} mr={1} />
+           </Stack.Item>
+           <Stack.Item>
+             <LabeledList>
+               <LabeledList.Item label="Пользователь">
+                 {user.name}
+               </LabeledList.Item>
+               <LabeledList.Item label="Должность">
+                 {JOBS_RU[user.job] || user.job || 'Без работы'}
+               </LabeledList.Item>
+             </LabeledList>
+           </Stack.Item>
+         </Stack>
+       </Section>
+     );
+   }
++>>>>>>> origin/translate
++<<<<<<< HEAD
++||||||| aa82cd08971
++/** Displays a colored indicator for remaining stock */
++const ProductStock = (props) => {
++  const { custom, product, remaining } = props;
++
++  return (
++    <Box
++      color={
++        (remaining <= 0 && 'bad') ||
++        (!custom && remaining <= product.max_amount / 2 && 'average') ||
++        'good'
++      }
++    >
++      {remaining} left
++    </Box>
++  );
++};
++
++=======
+ /** Displays a colored indicator for remaining stock */
+ const ProductStock = (props) => {
+   const { custom, product, remaining } = props;
+ 
+   return (
+     <Box
+       color={
+         (remaining <= 0 && 'bad') ||
+         (!custom && remaining <= product.max_amount / 2 && 'average') ||
+         'good'
+       }
+     >
+       {remaining} ост.
+     </Box>
+   );
+ };
+ 
++>>>>>>> origin/translate
++<<<<<<< HEAD
 +    standardPrice = 'Free';
++||||||| aa82cd08971
++    standardPrice = 'FREE';
++=======
+     standardPrice = 'БЕСПЛАТНО';
++>>>>>>> origin/translate