Add visual feedback for copied tasks and improve sticky mode behavior in the home panel

Author: robertpiosik

packages/ui/src/components/editor/panel/Tasks/Tasks.module.scss

@@ -19,6 +19,10 @@
     background-color: var(--vscode-list-hoverBackground);
   }
 
+  &--copied {
+    background-color: var(--vscode-list-inactiveSelectionBackground);
+  }
+
   &__left {
     display: flex;
     flex-direction: column;
@@ -40,14 +44,15 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-
+cursor: grab;
     margin-bottom: 2px;
   }
 
   &__header-left {
     display: flex;
     align-items: center;
     padding-top: 3px;
+    
   }
 
   &__time {

packages/ui/src/components/editor/panel/Tasks/Tasks.tsx

@@ -42,6 +42,9 @@ export const Tasks: React.FC<Props> = (props) => {
   const [editing_timestamp, set_editing_timestamp] = useState<number | null>(
     null
   )
+  const [last_copied_timestamp, set_last_copied_timestamp] = useState<
+    number | null
+  >(null)
   const prevent_edit_ref = useRef(false)
 
   const tree = useMemo(() => add_ids(props.tasks), [props.tasks])
@@ -61,6 +64,7 @@ export const Tasks: React.FC<Props> = (props) => {
     depth: number
   ) => {
     const is_editing = editing_timestamp == task.created_at
+    const is_copied = last_copied_timestamp == task.created_at
     const has_children = task.children && task.children.length > 0
 
     const checked_children_count = has_children
@@ -69,7 +73,9 @@ export const Tasks: React.FC<Props> = (props) => {
 
     return (
       <div
-        className={styles.item}
+        className={cn(styles.item, {
+          [styles['item--copied']]: is_copied
+        })}
         style={{ paddingLeft: `${10 + depth * 20}px` }}
       >
         {[...Array(depth)].map((_, i) => (
@@ -140,8 +146,9 @@ export const Tasks: React.FC<Props> = (props) => {
                   on_click={(e) => {
                     e.stopPropagation()
                     props.on_copy(task.text)
+                    set_last_copied_timestamp(task.created_at)
                   }}
-                  title="Copy task text"
+                  title="Copy Task"
                 />
               )}
               <IconButton

packages/vscode/src/views/panel/frontend/Home/Home.module.scss

@@ -81,22 +81,25 @@
     margin: 0;
   }
 
-  &__mode {
-    display: flex;
-    position: relative;
-    background-color: var(--vscode-sideBar-background);
-    border-radius: 10px;
-    border: 1px solid var(--cwc-border-color);
-    overflow: hidden;
+  &__mode-wrapper {
     margin: 0 12px;
-    z-index: 10;
+    z-index: 1;
 
     &--sticky {
       position: sticky;
       top: 10px;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-      animation: stickyFadeIn var(--transition-duration-150) var(--transition-timing-function)
+      animation: stickyFadeIn var(--transition-duration-150)
+        var(--transition-timing-function);
     }
+  }
+
+  &__mode {
+    position: relative;
+    display: flex;
+    background-color: var(--vscode-sideBar-background);
+    border-radius: 10px;
+    border: 1px solid var(--cwc-border-color);
+    overflow: hidden;
 
     > button {
       flex: 1;
@@ -113,6 +116,14 @@
       background-color: var(--cwc-border-color-dimmed);
       pointer-events: none;
     }
+
+    &--sticky {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+
+      &::after {
+        height: 20px;
+      }
+    }
   }
 
   &__empty {

packages/vscode/src/views/panel/frontend/Home/Home.tsx

@@ -45,6 +45,7 @@ type Props = {
 export const Home: React.FC<Props> = (props) => {
   const { t } = use_translation()
   const [is_mode_sticky, set_is_mode_sticky] = useState(false)
+  const full_mode_height_ref = useRef<number>(0)
   const responses_ref = useRef<HTMLDivElement>(null)
   const mode_ref = useRef<HTMLDivElement>(null)
 
@@ -100,8 +101,15 @@ export const Home: React.FC<Props> = (props) => {
       <Scrollable
         on_scroll={(top) => {
           const responses_height = responses_ref.current?.clientHeight || 0
-          const mode_height = mode_ref.current?.clientHeight || 0
-          set_is_mode_sticky(top > responses_height + mode_height + 4)
+          const current_mode_height = mode_ref.current?.offsetHeight || 0
+
+          if (!is_mode_sticky && current_mode_height > 0) {
+            full_mode_height_ref.current = current_mode_height
+          }
+
+          const height_to_use = is_mode_sticky ? full_mode_height_ref.current : current_mode_height
+
+          set_is_mode_sticky(top > responses_height + height_to_use + 4)
         }}
       >
         <div className={styles.content}>
@@ -127,23 +135,22 @@ export const Home: React.FC<Props> = (props) => {
             )}
 
             <div
-              className={cn(styles.inner__mode, {
-                [styles['inner__mode--sticky']]: is_mode_sticky
+              className={cn(styles['inner__mode-wrapper'], {
+                [styles['inner__mode-wrapper--sticky']]: is_mode_sticky
               })}
-              ref={mode_ref}
+              style={{
+                minHeight: is_mode_sticky ? full_mode_height_ref.current : undefined
+              }}
             >
-              <ModeButton
-                pre="Autofill"
-                label="Chatbots"
-                on_click={props.on_chatbots_click}
-                is_compact={is_mode_sticky}
-              />
-              <ModeButton
-                pre="Make"
-                label="API calls"
-                on_click={props.on_api_calls_click}
-                is_compact={is_mode_sticky}
-              />
+              <div
+                className={cn(styles.inner__mode, {
+                  [styles['inner__mode--sticky']]: is_mode_sticky
+                })}
+                ref={mode_ref}
+              >
+                <ModeButton pre="Autofill" label="Chatbots" on_click={props.on_chatbots_click} is_compact={is_mode_sticky} />
+                <ModeButton pre="Make" label="API calls" on_click={props.on_api_calls_click} is_compact={is_mode_sticky} />
+              </div>
             </div>
 
             <Separator height={8} />