feat: implement room list reordering and animation hooks; add scroll to latest behavior settings

src/app/styles/CustomHtml.css.ts

@@ -51,15 +51,56 @@ const CodeFont = style({
   fontFamily: 'monospace',
 });
 
+export const InlineCodeWrapper = style({
+  position: 'relative',
+  display: 'inline-block',
+});
+
 export const Code = style([
   DefaultReset,
   BaseCode,
   CodeFont,
   {
     padding: `0 ${config.space.S100}`,
+    display: 'inline-block',
   },
 ]);
 
+export const InlineCodeCopyButton = style({
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  transform: 'translateY(-100%)',
+  opacity: 0,
+  transition: 'opacity 0.15s ease-in-out',
+  background: color.SurfaceVariant.Container,
+  border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
+  borderBottom: 'none',
+  borderTopLeftRadius: config.radii.R300,
+  borderTopRightRadius: config.radii.R300,
+  padding: `${config.space.S200} ${config.space.S300}`,
+  cursor: 'pointer',
+  fontSize: toRem(11),
+  color: color.SurfaceVariant.OnContainer,
+  fontWeight: config.fontWeight.W500,
+  whiteSpace: 'nowrap',
+  zIndex: 1,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  selectors: {
+    [`${InlineCodeWrapper}:hover &`]: {
+      opacity: 1,
+    },
+    '&:hover': {
+      background: color.SurfaceVariant.ContainerHover,
+    },
+    '&:active': {
+      background: color.SurfaceVariant.ContainerActive,
+    },
+  },
+});
+
 export const Spoiler = recipe({
   base: [
     DefaultReset,