Fix soapstone and engraved messages (#60055)

This PR fixes and improves a few things regarding soapstones and engraved messages:

- Observers can now interact with the engraved messages from any distance instead of having to be next to them to rate them, which was rather unintuitive and unnecessary. This also solves problems where admin observers were unable to delete them without being next to them or activating AI interact mode.
- Fixed a case where you could make more engraved messages than your soapstone had uses by queing them fast enough.
- Cleaned up engraved message UI code a little bit - removed an unnecessary section and replaced deprecated <Grid> with <Stack>. Looks practically the same.
- Minor code improvements.

code/modules/library/soapstone.dm

@@ -65,7 +65,7 @@
 			remove_use()
 
 /obj/item/soapstone/proc/can_use()
-	return remaining_uses == -1 || remaining_uses >= 0
+	return remaining_uses == -1 || remaining_uses > 0
 
 /obj/item/soapstone/proc/remove_use()
 	if(remaining_uses <= 0)
@@ -205,11 +205,16 @@ but only permanently removed with the curator's soapstone.
 	if(persists)
 		SSpersistence.SaveChiselMessage(src)
 	SSpersistence.chisel_messages -= src
-	. = ..()
+	return ..()
 
 /obj/structure/chisel_message/interact()
 	return
 
+/obj/structure/chisel_message/ui_status(mob/user)
+	if(isobserver(user)) // ignore proximity restrictions if we're an observer
+		return UI_INTERACTIVE
+	return ..()
+
 /obj/structure/chisel_message/ui_state(mob/user)
 	return GLOB.always_state
 
@@ -234,6 +239,10 @@ but only permanently removed with the curator's soapstone.
 		data["admin_mode"] = TRUE
 		data["creator_key"] = creator_key
 		data["creator_name"] = creator_name
+	else
+		data["admin_mode"] = FALSE
+		data["creator_key"] = null
+		data["creator_name"] = null
 
 	return data
 

tgui/packages/tgui/interfaces/EngravedMessage.js

@@ -1,6 +1,6 @@
 import { decodeHtmlEntities } from 'common/string';
 import { useBackend } from '../backend';
-import { Box, Button, Grid, LabeledList, Section } from '../components';
+import { Box, Button, LabeledList, Section, Stack } from '../components';
 import { Window } from '../layouts';
 
 export const EngravedMessage = (props, context) => {
@@ -30,8 +30,8 @@ export const EngravedMessage = (props, context) => {
             mb={2}>
             {decodeHtmlEntities(hidden_message)}
           </Box>
-          <Grid>
-            <Grid.Column>
+          <Stack>
+            <Stack.Item grow={1.05}>
               <Button
                 fluid
                 icon="arrow-up"
@@ -42,8 +42,8 @@ export const EngravedMessage = (props, context) => {
                 fontSize="16px"
                 lineHeight="24px"
                 onClick={() => act('like')} />
-            </Grid.Column>
-            <Grid.Column>
+            </Stack.Item>
+            <Stack.Item grow={1}>
               <Button
                 fluid
                 icon="circle"
@@ -53,8 +53,8 @@ export const EngravedMessage = (props, context) => {
                 fontSize="16px"
                 lineHeight="24px"
                 onClick={() => act('neutral')} />
-            </Grid.Column>
-            <Grid.Column>
+            </Stack.Item>
+            <Stack.Item grow={1.05}>
               <Button
                 fluid
                 icon="arrow-down"
@@ -65,8 +65,8 @@ export const EngravedMessage = (props, context) => {
                 fontSize="16px"
                 lineHeight="24px"
                 onClick={() => act('dislike')} />
-            </Grid.Column>
-          </Grid>
+            </Stack.Item>
+          </Stack>
         </Section>
         <Section>
           <LabeledList>
@@ -75,7 +75,6 @@ export const EngravedMessage = (props, context) => {
             </LabeledList.Item>
           </LabeledList>
         </Section>
-        <Section />
         {!!admin_mode && (
           <Section
             title="Admin Panel"