🎉 Add prototype tab UI tweaks (#7832)

* 🎉 Add prototype tab UI tweaks

* 📎 PR changes

frontend/src/app/main/data/workspace/interactions.cljs

@@ -119,21 +119,6 @@
       (let [page (dsh/lookup-page state)]
         (rx/of (update-flow (:id page) flow-id #(assoc % :name name)))))))
 
-(defn start-rename-flow
-  [id]
-  (dm/assert! (uuid? id))
-  (ptk/reify ::start-rename-flow
-    ptk/UpdateEvent
-    (update [_ state]
-      (assoc-in state [:workspace-local :flow-for-rename] id))))
-
-(defn end-rename-flow
-  []
-  (ptk/reify ::end-rename-flow
-    ptk/UpdateEvent
-    (update [_ state]
-      (update state :workspace-local dissoc :flow-for-rename))))
-
 ;; --- Interactions
 
 (defn- connected-frame?

frontend/src/app/main/ui/ds.cljs

@@ -9,6 +9,7 @@
    [app.config :as cf]
    [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.ds.controls.checkbox :refer [checkbox*]]
    [app.main.ui.ds.controls.combobox :refer [combobox*]]
    [app.main.ui.ds.controls.input :refer [input*]]
    [app.main.ui.ds.controls.numeric-input :refer [numeric-input*]]
@@ -62,6 +63,7 @@
     :RawSvg raw-svg*
     :Select select*
     :Switch switch*
+    :Checkbox checkbox*
     :Combobox combobox*
     :Text text*
     :TabSwitcher tab-switcher*

frontend/src/app/main/ui/ds/buttons/_buttons.scss

@@ -11,12 +11,18 @@
 %base-button {
   --button-bg-color: initial;
   --button-fg-color: initial;
+
   --button-hover-bg-color: initial;
   --button-hover-fg-color: initial;
+
   --button-active-bg-color: initial;
+  --button-active-fg-color: initial;
+
   --button-disabled-bg-color: initial;
   --button-disabled-fg-color: initial;
+
   --button-border-color: var(--button-bg-color);
+
   --button-focus-inner-ring-color: initial;
   --button-focus-outer-ring-color: initial;
 
@@ -38,8 +44,10 @@
     --button-fg-color: var(--button-hover-fg-color);
   }
 
-  &:active {
+  &:active,
+  &[aria-pressed="true"] {
     --button-bg-color: var(--button-active-bg-color);
+    --button-fg-color: var(--button-active-fg-color);
   }
 
   &:focus-visible {
@@ -63,6 +71,7 @@
   --button-hover-fg-color: var(--color-background-secondary);
 
   --button-active-bg-color: var(--color-accent-tertiary);
+  --button-active-fg-color: var(--color-background-secondary);
 
   --button-disabled-bg-color: var(--color-accent-primary-muted);
   --button-disabled-fg-color: var(--color-background-secondary);
@@ -72,7 +81,8 @@
   --button-focus-inner-ring-color: var(--color-background-secondary);
   --button-focus-outer-ring-color: var(--color-accent-primary);
 
-  &:active {
+  &:active,
+  &[aria-pressed="true"] {
     box-shadow: inset 0 0 #{px2rem(10)} #{px2rem(2)} rgba(0, 0, 0, 0.2);
   }
 }
@@ -85,6 +95,7 @@
   --button-hover-fg-color: var(--color-accent-primary);
 
   --button-active-bg-color: var(--color-background-quaternary);
+  --button-active-fg-color: var(--color-accent-primary);
 
   --button-disabled-bg-color: transparent;
   --button-disabled-fg-color: var(--color-foreground-secondary);
@@ -103,6 +114,7 @@
   --button-hover-fg-color: var(--color-accent-primary);
 
   --button-active-bg-color: var(--color-background-quaternary);
+  --button-active-fg-color: var(--color-accent-primary);
 
   --button-disabled-bg-color: transparent;
   --button-disabled-fg-color: var(--color-accent-primary-muted);
@@ -121,6 +133,7 @@
   --button-hover-fg-color: var(--color-foreground-primary);
 
   --button-active-bg-color: var(--color-accent-error);
+  --button-active-fg-color: var(--color-foreground-primary);
 
   --button-disabled-bg-color: var(--color-background-error);
   --button-disabled-fg-color: var(--color-accent-error);
@@ -130,7 +143,8 @@
   --button-focus-inner-ring-color: var(--color-background-primary);
   --button-focus-outer-ring-color: var(--color-accent-primary);
 
-  &:active {
+  &:active,
+  &[aria-pressed="true"] {
     box-shadow: inset 0 0 #{px2rem(10)} #{px2rem(2)} rgba(0, 0, 0, 0.2);
   }
 }

frontend/src/app/main/ui/ds/controls/checkbox.cljs

@@ -0,0 +1,45 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.ds.controls.checkbox
+  (:require-macros
+   [app.main.style :as stl])
+  (:require
+   [app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]]
+   [rumext.v2 :as mf]))
+
+(def ^:private schema:checkbox
+  [:map
+   [:id {:optional true} :string]
+   [:label {:optional true} :string]
+   [:checked {:optional true} :boolean]
+   [:on-change {:optional true} fn?]
+   [:disabled {:optional true} :boolean]])
+
+(mf/defc checkbox*
+  {::mf/schema schema:checkbox}
+  [{:keys [id class label checked on-change disabled] :rest props}]
+  (let [props
+        (mf/spread-props props {:type "checkbox"
+                                :class (stl/css :checkbox-input)
+                                :id id
+                                :checked checked
+                                :on-change on-change
+                                :disabled disabled})]
+
+    [:div {:class [class (stl/css :checkbox)]}
+     [:label {:for id
+              :class (stl/css :checkbox-label)}
+      [:div {:class (stl/css-case :checkbox-box true
+                                  :checked checked
+                                  :disabled disabled)}
+       (when checked
+         [:> icon* {:icon-id i/tick
+                    :size "s"}])]
+
+      [:div {:class (stl/css :checkbox-text)} label]
+
+      [:> :input props]]]))

frontend/src/app/main/ui/ds/controls/checkbox.mdx

@@ -0,0 +1,40 @@
+{ /* This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+  Copyright (c) KALEIDOS INC */ }
+
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import * as Checkbox from "./checkbox.stories";
+
+<Meta title="Controls/Checkbox" />
+
+# Checkbox
+
+The `checkbox*` component is a toggle control. It allows users to switch between boolean states (`false` or `true`).
+
+<Canvas of={Checkbox.Default} />
+
+<Canvas of={Checkbox.Checked} />
+
+## Anatomy
+
+The checkbox component consists of three main parts:
+
+- **Label** (optional): the text that describes what the checkbox controls. Clicking on this text also works for toggling.
+- **Box**: the box which shows the current state. Contains a check if the state is `true`.
+- **Native element**: the native HTML element which holds the state. It remains hidden to the user.
+
+## Usage Guidelines
+
+### When to Use
+
+- For boolean settings that take effect immediately.
+- In preference panels and configuration screens.
+
+### When Not to Use
+
+- For actions that require confirmation (use buttons instead).
+- For multiple choice selections (use radio buttons or select).
+- For temporary states that need explicit "Apply" action.
+- For ternary states.

frontend/src/app/main/ui/ds/controls/checkbox.scss

@@ -0,0 +1,86 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/typography.scss" as *;
+
+.checkbox {
+  --input-checkbox-border-color: var(--color-foreground-secondary);
+  --input-checkbox-border-color-focus: var(--color-accent-primary);
+  --input-checkbox-border-color-hover: var(--color-accent-primary-muted);
+  --input-checkbox-foreground-color: var(--color-foreground-primary);
+  --input-checkbox-background-color: var(--color-background-quaternary);
+
+  --input-checkbox-border-color-checked: var(--color-background-quaternary);
+  --input-checkbox-foreground-color-checked: var(--color-background-primary);
+  --input-checkbox-background-color-checked: var(--color-accent-primary);
+
+  --input-checkbox-foreground-color-disabled: var(--color-background-primary);
+  --input-checkbox-background-color-disabled: var(--color-foreground-secondary);
+
+  --input-checkbox-text-color: var(--color-foreground-secondary);
+}
+
+.checkbox-label {
+  display: grid;
+  grid-template-columns: var(--sp-l) 1fr 0;
+  align-items: center;
+
+  &:hover {
+    .checkbox-box {
+      border-color: var(--input-checkbox-border-color-hover);
+    }
+  }
+
+  &:focus,
+  &:focus-within {
+    .checkbox-box {
+      border-color: var(--input-checkbox-border-color-focus);
+    }
+  }
+}
+
+.checkbox-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: $sz-16;
+  block-size: $sz-16;
+  border-radius: $br-4;
+  border: $b-1 solid var(--input-checkbox-border-color);
+  color: var(--input-checkbox-foreground-color);
+  background-color: var(--input-checkbox-background-color);
+
+  &.disabled {
+    border: 0;
+  }
+
+  &.checked {
+    --input-checkbox-border-color: var(--input-checkbox-border-color-checked);
+    --input-checkbox-foreground-color: var(--input-checkbox-foreground-color-checked);
+    --input-checkbox-background-color: var(--input-checkbox-background-color-checked);
+
+    &.disabled {
+      --input-checkbox-foreground-color: var(--input-checkbox-foreground-color-disabled);
+      --input-checkbox-background-color: var(--input-checkbox-background-color-disabled);
+    }
+  }
+}
+
+.checkbox-text {
+  @include use-typography("body-small");
+  padding-inline-start: var(--sp-s);
+  color: var(--input-checkbox-text-color);
+}
+
+.checkbox-input {
+  &:focus {
+    outline: 0;
+    inline-size: 0;
+    block-size: 0;
+  }
+}

frontend/src/app/main/ui/ds/controls/checkbox.stories.jsx

@@ -0,0 +1,76 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+import * as React from "react";
+import Components from "@target/components";
+
+const { Checkbox } = Components;
+
+export default {
+  title: "Controls/Checkbox",
+  component: Checkbox,
+  argTypes: {
+    label: {
+      control: { type: "text" },
+      description: "Label text displayed next to the checkbox",
+    },
+    checked: {
+      control: { type: "boolean" },
+      description: "Whether the checkbox is checked",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Whether the checkbox is disabled",
+    },
+  },
+  args: {
+    checked: false,
+    disabled: false,
+  },
+  parameters: {
+    controls: {
+      exclude: ["id", "on-change"],
+    },
+  },
+  render: ({ ...args }) => <Checkbox {...args} />,
+};
+
+export const Default = {
+  args: {
+    label: "Toggle something",
+    disabled: false,
+  },
+  render: ({ ...args }) => <Checkbox {...args} />,
+};
+
+export const Checked = {
+  args: {
+    label: "Toggle something",
+    checked: true,
+    disabled: false,
+  },
+  render: ({ ...args }) => <Checkbox {...args} />,
+};
+
+export const WithoutLabel = {
+  args: {
+    disabled: false,
+  },
+  render: ({ ...args }) => <Checkbox {...args} />,
+};
+
+export const WithLongLabel = {
+  args: {
+    label:
+      "This is a very long label that demonstrates how the checkbox component handles text wrapping and layout when the label content is extensive",
+    disabled: false,
+  },
+  render: ({ ...args }) => (
+    <div style={{ maxWidth: "300px" }}>
+      <Checkbox {...args} />
+    </div>
+  ),
+};

frontend/src/app/main/ui/ds/foundations/assets/icon.cljs

@@ -300,6 +300,7 @@
   "A collection of all icons"
   (collect-icons))
 
+(def ^:private ^:const icon-size-l 32)
 (def ^:private ^:const icon-size-m 16)
 (def ^:private ^:const icon-size-s 12)
 
@@ -308,7 +309,7 @@
    [:class {:optional true} [:maybe :string]]
    [:icon-id [:and :string [:fn #(contains? icon-list %)]]]
    [:size  {:optional true}
-    [:maybe [:enum "s" "m"]]]])
+    [:maybe [:enum "s" "m" "l"]]]])
 
 (mf/defc icon*
   {::mf/schema schema:icon}
@@ -317,10 +318,14 @@
                                  {:class [class (stl/css :icon)]
                                   :width icon-size-m
                                   :height icon-size-m})
-        size-px (if (= size "s")
-                  icon-size-s
-                  icon-size-m)
-        offset  (/ (- icon-size-m size-px) 2)]
+
+        size-px (cond (= size "l") icon-size-l
+                      (= size "s") icon-size-s
+                      :else        icon-size-m)
+
+        offset  (if (or (= size "s") (= size "m"))
+                  (/ (- icon-size-m size-px) 2)
+                  0)]
 
     [:> :svg props
      [:use {:href (dm/str "#icon-" icon-id)

frontend/src/app/main/ui/workspace/sidebar/options.cljs

@@ -25,7 +25,7 @@
    [app.main.ui.workspace.sidebar.options.menus.bool :refer [bool-options*]]
    [app.main.ui.workspace.sidebar.options.menus.component :refer [component-menu*]]
    [app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell]
-   [app.main.ui.workspace.sidebar.options.menus.interactions :refer [interactions-menu]]
+   [app.main.ui.workspace.sidebar.options.menus.interactions :refer [interactions-menu*]]
    [app.main.ui.workspace.sidebar.options.menus.layout-container :as layout-container]
    [app.main.ui.workspace.sidebar.options.page :as page]
    [app.main.ui.workspace.sidebar.options.shapes.bool :as bool]
@@ -215,7 +215,7 @@
         (case options-mode
           :prototype
           [:div {:class (stl/css :element-options :interaction-options)}
-           [:& interactions-menu {:shape (first shapes)}]]
+           [:> interactions-menu* {:shape (first shapes)}]]
 
           :inspect
           [:div {:class (stl/css :element-options :inspect-options)}

frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss

@@ -4,22 +4,51 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/_utils.scss" as *;
+@use "ds/mixins.scss" as *;
+@use "ds/typography.scss" as t;
+@use "../../../sidebar/common/sidebar.scss" as sidebar;
 
-.interactions-content {
+.wrapper {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-8;
-  padding-left: var(--sp-m);
+  gap: var(--sp-s);
+  padding-inline-start: var(--sp-m);
 }
 
-.interaction-options {
-  @include deprecated.flexColumn;
+.section {
+  @include sidebar.option-grid-structure;
 }
 
-.help-content {
-  padding: deprecated.$s-32 0;
-  width: deprecated.$s-200;
+.title {
+  grid-column: span 8;
+}
+
+.title-bar {
+  padding-inline-start: var(--sp-xxs);
+}
+
+.content {
+  grid-column: span 8;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-xs);
+  margin-block-start: var(--sp-xs);
+}
+
+.content-interactions {
+  gap: var(--sp-l);
+}
+
+.help {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-xxxl);
+  inline-size: $sz-200;
+  padding: var(--sp-xxxl) 0;
   margin: 0 auto;
 }
 
@@ -27,130 +56,168 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-bottom: deprecated.$s-40;
-  gap: deprecated.$s-12;
+  gap: var(--sp-m);
 }
 
-.interactions-help-icon {
-  @include deprecated.flexCenter;
-  width: deprecated.$s-48;
-  height: deprecated.$s-48;
-  border-radius: deprecated.$br-circle;
-  background-color: var(--pill-background-color);
-  svg {
-    @extend .button-icon;
-    stroke: var(--icon-foreground);
-    height: deprecated.$s-32;
-    width: deprecated.$s-32;
+.help-text {
+  @include t.use-typography("body-small");
+  text-align: center;
+  color: var(--color-foreground-secondary);
+}
+
+.help-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  inline-size: $sz-48;
+  block-size: $sz-48;
+}
+
+.help-icon-inner {
+  color: var(--color-foreground-secondary);
+  inline-size: $sz-32;
+  block-size: $sz-32;
+}
+
+.interaction-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-xs);
+}
+
+.prototype-pill {
+  display: flex;
+  align-items: center;
+  gap: px2rem(1);
+  border-radius: $br-8;
+  padding: var(--sp-s) var(--sp-m);
+  block-size: $sz-32;
+  padding: 0;
+
+  &.double {
+    block-size: $sz-48;
+    .prototype-pill-button {
+      block-size: $sz-48;
+    }
+  }
+
+  &:has(.prototype-pill-input:focus) {
+    outline: $b-1 solid var(--color-accent-primary);
   }
 }
 
-.after {
-  @include deprecated.bodySmallTypography;
-  margin-top: deprecated.$s-1;
+.prototype-pill-button {
+  &.left {
+    border-end-end-radius: 0;
+    border-start-end-radius: 0;
+  }
+
+  &.right {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
 }
 
-.interactions-help {
-  @include deprecated.bodySmallTypography;
-  text-align: center;
-  color: var(--title-foreground-color);
-}
-
-.element-set {
-  @include deprecated.flexColumn;
-}
-
-.interactions-info {
+.prototype-pill-main {
+  display: flex;
   flex-grow: 1;
-  display: grid;
+  block-size: 100%;
+  inline-size: 100%;
 }
 
-.trigger-name {
+.prototype-pill-center {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  block-size: 100%;
+  padding: 0 var(--sp-s);
+  background-color: var(--color-background-tertiary);
   color: var(--color-foreground-primary);
 }
 
-.action-summary {
-  color: var(--color-foreground-secondary);
-  @include deprecated.textEllipsis;
-}
-
-.groups {
-  @include deprecated.flexColumn(deprecated.$s-12);
-}
-
-.element-set-options-group-open {
-  @include deprecated.flexColumn;
-}
-
-.extended-options {
-  @include deprecated.flexColumn;
-}
-
-.property-list {
-  list-style: none;
-  margin: 0;
+.prototype-pill-info {
   display: grid;
-  row-gap: deprecated.$s-16;
-  margin-block: calc(#{deprecated.$s-16} - #{deprecated.$s-4});
+  inline-size: 100%;
 }
 
-.property-row {
-  @extend .attr-row;
-  height: auto;
-  &.big-row {
-    height: 100%;
-  }
-  .interaction-name {
-    @include deprecated.twoLineTextEllipsis;
-    @include deprecated.bodySmallTypography;
-    padding-left: deprecated.$s-4;
-    width: deprecated.$s-92;
-    margin: auto 0;
-    grid-area: name;
-    color: var(--title-foreground-color);
-  }
-  .select-wrapper {
-    display: flex;
-    align-items: center;
-    grid-area: content;
-    .easing-select {
-      width: deprecated.$s-156;
-      padding: 0 deprecated.$s-8;
-      .dropdown-upwards {
-        bottom: deprecated.$s-36;
-        width: deprecated.$s-156;
-        top: unset;
-      }
+.prototype-pill-input {
+  @include t.use-typography("body-small");
+  border: none;
+  background: none;
+  outline: none;
+  block-size: 100%;
+  inline-size: 100%;
+  flex-grow: 1;
+  margin: var(--sp-xxs) 0;
+  padding: 0 0 0 var(--sp-s);
+  margin: 0;
+  background-color: var(--color-background-tertiary);
+  color: var(--color-foreground-primary);
+  display: grid;
+  inline-size: 100%;
+
+  &:hover {
+    background-color: var(--color-background-quaternary);
+    &:active {
+      background-color: var(--color-background-quaternary);
     }
   }
-  .input-element-wrapper {
-    @extend .input-element;
-    @include deprecated.bodySmallTypography;
-    grid-area: content;
-  }
-  .buttons-wrapper {
-    grid-area: content;
-    .right svg {
-      transform: rotate(-90deg);
-    }
-    .left svg {
-      transform: rotate(90deg);
-    }
-    .up svg {
-      transform: rotate(180deg);
-    }
-  }
-  .inputs-wrapper {
-    grid-area: content;
-    @include deprecated.flexRow;
-    .radio-btn {
-      @extend .input-checkbox;
-    }
+
+  &:focus {
+    background-color: var(--color-background-tertiary);
   }
 }
 
-.position-btns-wrapper {
-  grid-area: content;
+.prototype-pill-name {
+  @include t.use-typography("body-small");
+  @include textEllipsis;
+  color: var(--color-foreground-primary);
+}
+
+.prototype-pill-description {
+  @include t.use-typography("body-small");
+  @include textEllipsis;
+  color: var(--color-foreground-secondary);
+}
+
+.interaction-row {
+  @include sidebar.option-grid-structure;
+}
+
+.interaction-row-label {
+  grid-column: span 3;
+  display: flex;
+  align-items: center;
+  color: var(--color-foreground-secondary);
+}
+
+.interaction-row-name {
+  @include twoLineTextEllipsis;
+  @include t.use-typography("body-small");
+  color: var(--color-foreground-secondary);
+}
+
+.interaction-row-select {
+  grid-column: span 5;
+}
+
+.interaction-row-checkbox {
+  grid-column: 4 / span 5;
+  min-block-size: $sz-32;
+  display: flex;
+  align-items: center;
+}
+
+.interaction-row-input {
+  grid-column: span 5;
+}
+
+.interaction-row-radio {
+  grid-column: 4 / span 5;
+}
+
+.interaction-row-position {
+  grid-column: 4 / span 5;
   display: grid;
   grid-template-areas:
     "topleft top topright"
@@ -158,191 +225,30 @@
     "bottomleft bottom bottomright";
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 1fr);
-  width: deprecated.$s-84;
-  height: deprecated.$s-84;
-  border-radius: deprecated.$br-8;
+  inline-size: calc($sz-32 * 3);
+  block-size: calc($sz-32 * 3);
+  border-radius: $br-8;
   background-color: var(--color-background-tertiary);
-  .center-btn {
+
+  .center {
     grid-area: center;
   }
-  .top-left-btn {
+  .top-left {
     grid-area: topleft;
   }
-  .top-right-btn {
-    grid-area: topright;
-  }
-  .top-center-btn {
+  .top-center {
     grid-area: top;
   }
-  .bottom-left-btn {
+  .top-right {
+    grid-area: topright;
+  }
+  .bottom-left {
     grid-area: bottomleft;
   }
-  .bottom-right-btn {
-    grid-area: bottomright;
-  }
-  .bottom-center-btn {
+  .bottom-center {
     grid-area: bottom;
   }
-}
-
-.direction-btn {
-  @extend .button-tertiary;
-  height: deprecated.$s-28;
-  width: deprecated.$s-28;
-
-  &.active {
-    @extend .button-icon-selected;
-  }
-}
-
-.checkbox-option {
-  @extend .input-checkbox;
-  grid-area: content;
-  line-height: 1.2;
-  label {
-    align-items: start;
-  }
-}
-
-.interactions-summary {
-  @extend .asset-element;
-  height: deprecated.$s-44;
-  padding: 0;
-  gap: deprecated.$s-8;
-
-  .remove-btn {
-    @extend .button-tertiary;
-    height: deprecated.$s-32;
-    width: deprecated.$s-28;
-    svg {
-      @extend .button-icon-small;
-    }
-  }
-}
-
-.extend-btn {
-  @extend .button-tertiary;
-  --button-tertiary-border-width: var(--expand-button-icon-border-width);
-  height: 100%;
-  width: deprecated.$s-28;
-  border-end-end-radius: 0;
-  border-start-end-radius: 0;
-  padding: 0;
-  svg {
-    @extend .button-icon;
-  }
-  position: relative;
-  &:after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-inline-end: deprecated.$s-1 solid var(--panel-background-color);
-  }
-  &.extended {
-    @extend .button-icon-selected;
-    --button-tertiary-border-width: var(--expand-button-icon-border-width-selected);
-  }
-}
-
-.corner-icon {
-  fill: none;
-  stroke: currentColor;
-  width: deprecated.$s-12;
-  height: deprecated.$s-12;
-}
-
-.flow-element {
-  @include deprecated.flexRow;
-}
-
-.flow-info {
-  display: flex;
-  align-items: center;
-  gap: deprecated.$s-2;
-  border-radius: deprecated.$s-8;
-  background-color: var(--input-details-color);
-  height: deprecated.$s-32;
-  width: 100%;
-  flex-grow: 1;
-}
-
-.flow-name-wrapper {
-  @include deprecated.bodySmallTypography;
-  @include deprecated.focusInput;
-  display: flex;
-  align-items: center;
-  gap: deprecated.$s-4;
-  flex-grow: 1;
-  height: deprecated.$s-32;
-  width: 100%;
-  border-radius: deprecated.$br-8;
-  padding: 0;
-  margin-right: 0;
-  background-color: var(--input-background-color);
-  border: deprecated.$s-1 solid var(--input-border-color);
-  color: var(--input-foreground-color);
-  .start-flow-btn {
-    @include deprecated.buttonStyle;
-    height: deprecated.$s-32;
-    width: deprecated.$s-28;
-    padding: 0 deprecated.$s-2 0 deprecated.$s-8;
-    border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
-    background-color: transparent;
-    svg {
-      @extend .button-icon;
-      stroke: var(--icon-foreground);
-      &:hover {
-        stroke: var(--input-foreground-color-active);
-      }
-    }
-  }
-
-  .flow-input {
-    @extend .input-base;
-    @include deprecated.bodySmallTypography;
-    background-color: transparent;
-    height: deprecated.$s-28;
-  }
-
-  .flow-input-wrapper {
-    @include deprecated.bodySmallTypography;
-    display: flex;
-    align-items: center;
-    height: deprecated.$s-28;
-    padding: 0;
-    width: 100%;
-    margin: 0;
-    flex-grow: 1;
-    background-color: transparent;
-    color: var(--input-foreground-color);
-    border-radius: deprecated.$br-8;
-  }
-
-  &:hover {
-    background-color: var(--input-background-color-hover);
-    border: deprecated.$s-1 solid var(--input-border-color-hover);
-    &:active {
-      background-color: var(--input-background-color-hover);
-      .flow-input-wrapper {
-        background-color: var(--input-background-color-hover);
-      }
-    }
-  }
-
-  &:focus,
-  &:focus-within {
-    background-color: var(--input-background-color-focus);
-    border: deprecated.$s-1 solid var(--input-border-color-focus);
-    &:hover {
-      border: deprecated.$s-1 solid var(--input-border-color-focus);
-    }
-  }
-
-  &.editing {
-    background-color: var(--input-background-color-active);
-    border: deprecated.$s-1 solid var(--input-border-color-active);
+  .bottom-right {
+    grid-area: bottomright;
   }
 }

frontend/src/app/main/ui/workspace/viewport/interactions.cljs

@@ -100,8 +100,8 @@
   [{:keys [x y stroke action-type arrow-dir zoom] :as props}]
   (let [icon-pdata (case action-type
                      :navigate (case arrow-dir
-                                 :right "M -6.5 0 l 12 0 l -6 -6 m 6 6 l -6 6"
-                                 :left "M 6.5 0 l -12 0 l 6 -6 m -6 6 l 6 6"
+                                 :right "M -6.5 0 L 5.5 0 M 6.715 0.715 L -0.5 -6.5 M 6.715 -0.715 L -0.365 6.635"
+                                 :left "M 6.5 0 l -12 0 m -0.715 0.715 l 6.5 -6.9 m -6 6 l 6 6.35"
                                  nil)
 
                      :open-overlay "M-5 -5 h7 v7 h-7 z M2 -2 h3.5 v7 h-7 v-2.5"

frontend/src/app/main/ui/workspace/viewport/widgets.cljs

@@ -17,7 +17,6 @@
    [app.common.uuid :as uuid]
    [app.main.data.common :as dcm]
    [app.main.data.workspace :as dw]
-   [app.main.data.workspace.interactions :as dwi]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.streams :as ms]
@@ -277,7 +276,6 @@
         pos       (gpt/point x (- y (/ 35 zoom)))
 
         frame-id  (:id frame)
-        flow-id   (:id flow)
         flow-name (:name flow)
 
         on-pointer-down
@@ -291,11 +289,6 @@
                (dom/stop-propagation event)
                (st/emit! (dcm/go-to-viewer params))))))
 
-        on-double-click
-        (mf/use-fn
-         (mf/deps flow-id)
-         #(st/emit! (dwi/start-rename-flow flow-id)))
-
         on-pointer-enter
         (mf/use-fn
          (mf/deps frame-id on-frame-enter)
@@ -319,7 +312,6 @@
       [:div {:class (stl/css-case :frame-flow-badge-content true
                                   :selected is-selected)
              :on-pointer-down on-pointer-down
-             :on-double-click on-double-click
              :on-pointer-enter on-pointer-enter
              :on-pointer-leave on-pointer-leave}
        [:> icon* {:icon-id i/play