feat: refine widget interactions

packages/widgets/src/notebook/notebook.css

@@ -70,3 +70,31 @@
 .ProseMirror {
   height: 100%;
 }
+
+.homarr-notebook-action {
+  opacity: 0;
+  transform: translateX(2px);
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease;
+}
+
+.homarr-notebook:hover .homarr-notebook-action,
+.homarr-notebook:focus-within .homarr-notebook-action,
+.homarr-notebook-action[data-visible="true"] {
+  opacity: 1;
+  transform: none;
+}
+
+@media (any-pointer: coarse) {
+  .homarr-notebook-action {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .homarr-notebook-action {
+    transition: none;
+  }
+}

packages/widgets/src/notebook/notebook.tsx

@@ -341,7 +341,7 @@ export function Notebook({
   };
 
   return (
-    <Box h="100%" onDoubleClick={handleDoubleClick}>
+    <Box className="homarr-notebook" h="100%" onDoubleClick={handleDoubleClick}>
       <RichTextEditor
         p={0}
         mt={0}
@@ -528,6 +528,8 @@ export function Notebook({
       {canChange && (
         <>
           <ActionIcon
+            className="homarr-notebook-action"
+            data-visible={isEditing || displayMode === "advanced" || undefined}
             title={isEditing ? t("common.action.save") : t("common.action.edit")}
             aria-label={isEditing ? t("common.action.save") : t("common.action.edit")}
             style={{
@@ -547,6 +549,8 @@ export function Notebook({
           </ActionIcon>
           {isEditing && (
             <ActionIcon
+              className="homarr-notebook-action"
+              data-visible
               title={t("common.action.cancel")}
               aria-label={t("common.action.cancel")}
               style={{