💄 Improve shared link modal

2025-04-13 15:31:26 -05:00 · 2022-06-16 12:56:22 +02:00 · 2022-06-16 12:56:22 +02:00 · 0f04398e61
commit 0f04398e61
parent f132651175
23 changed files with 453 additions and 521 deletions
--- a/backend/src/app/migrations.clj
+++ b/backend/src/app/migrations.clj
@ -229,6 +229,9 @@

   {:name "0073-mod-file-media-object-constraints"
    :fn (mg/resource "app/migrations/sql/0073-mod-file-media-object-constraints.sql")}
+   
+   {:name "0073-mod-share-link-table"
+    :fn (mg/resource "app/migrations/sql/0073-mod-share-link-table.sql")}

   {:name "0074-mod-file-library-rel-constraints"
    :fn (mg/resource "app/migrations/sql/0074-mod-file-library-rel-constraints.sql")}
--- a/backend/src/app/migrations/sql/0073-mod-share-link-table.sql
+++ b/backend/src/app/migrations/sql/0073-mod-share-link-table.sql
@ -0,0 +1,4 @@
+ALTER TABLE share_link
+  ADD COLUMN who_comment text NOT NULL DEFAULT('team'),
+  ADD COLUMN who_inspect text NOT NULL DEFAULT('team'),
+  DROP COLUMN flags;
--- a/backend/src/app/rpc/mutations/share_link.clj
+++ b/backend/src/app/rpc/mutations/share_link.clj
@ -19,7 +19,8 @@
 (s/def ::id ::us/uuid)
 (s/def ::profile-id ::us/uuid)
 (s/def ::file-id ::us/uuid)
-(s/def ::flags (s/every ::us/string :kind set?))
+(s/def ::who-comment ::us/string)
+(s/def ::who-inspect ::us/string)
 (s/def ::pages (s/every ::us/uuid :kind set?))

 ;; --- Mutation: Create Share Link
@ -27,14 +28,13 @@
 (declare create-share-link)

 (s/def ::create-share-link
-  (s/keys :req-un [::profile-id ::file-id ::flags]
-          :opt-un [::pages]))
+  (s/keys :req-un [::profile-id ::file-id ::who-comment ::who-inspect ::pages]))

 (sv/defmethod ::create-share-link
  "Creates a share-link object.

-  Share links are resources that allows external users access to
-  specific files with specific permissions (flags)."
+  Share links are resources that allows external users access to specific
+  pages of a file with specific permissions (who-comment and who-inspect)."

  [{:keys [pool] :as cfg} {:keys [profile-id file-id] :as params}]
  (db/with-atomic [conn pool]
@ -42,19 +42,17 @@
    (create-share-link conn params)))

 (defn create-share-link
-  [conn {:keys [profile-id file-id pages flags]}]
+  [conn {:keys [profile-id file-id pages who-comment who-inspect]}]
  (let [pages (db/create-array conn "uuid" pages)
-        flags (->> (map name flags)
-                   (db/create-array conn "text"))
        slink (db/insert! conn :share-link
                          {:id (uuid/next)
                           :file-id file-id
-                           :flags flags
+                           :who-comment who-comment
+                           :who-inspect who-inspect
                           :pages pages
                           :owner-id profile-id})]
    (-> slink
-        (update :pages db/decode-pgarray #{})
-        (update :flags db/decode-pgarray #{}))))
+        (update :pages db/decode-pgarray #{}))))

 ;; --- Mutation: Delete Share Link

--- a/backend/src/app/rpc/queries/share_link.clj
+++ b/backend/src/app/rpc/queries/share_link.clj
@ -11,7 +11,6 @@
 (defn decode-share-link-row
  [row]
  (-> row
-      (update :flags db/decode-pgarray #{})
      (update :pages db/decode-pgarray #{})))

 (defn retrieve-share-link
--- a/frontend/resources/styles/main/partials/share-link.scss
+++ b/frontend/resources/styles/main/partials/share-link.scss
@ -1,139 +1,240 @@
-.share-link-dialog {
-  width: 475px;
-  background-color: $color-white;
+.share-modal {
+  display: block;
+  top: 50px;
+  left: calc(100vw - 500px);

-  .modal-footer {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    height: unset;
-    padding: 16px 26px;
+  .share-link-dialog {
+    width: 480px;
+    background-color: $color-white;

-    .btn-primary,
-    .btn-secondary,
-    .btn-warning {
-      width: 126px;
-      margin-bottom: 0px;
-
-      &:not(:last-child) {
-        margin-right: 10px;
-      }
-    }
-
-    .confirm-dialog {
-      display: flex;
-      flex-direction: column;
-      background-color: unset;
-
-      .description {
-        font-size: $fs14;
-
-        margin-bottom: 16px;
-      }
-      .actions {
+    .modal-content {
+      padding: 16px 32px;
+      &:first-child {
+        border-top: 0px;
+        padding: 0;
+        height: 50px;
        display: flex;
-        justify-content: flex-end;
+        justify-content: center;
      }
-    }
-  }
-
-  .modal-content {
-    padding: 26px;
-
-    &:first-child {
-      border-top: 0px;
-    }
-
-    .title {
-      display: flex;
-      justify-content: space-between;
-
-      h2 {
-        font-size: $fs18;
-        color: $color-black;
-      }
-
-      .modal-close-button {
-        margin-right: 0px;
-      }
-    }
-
-    .share-link-section {
-      margin-top: 12px;
-      label {
-        font-size: $fs12;
-        color: $color-black;
-      }
-
-      .hint {
-        padding-top: 10px;
-        font-size: $fs14;
-        color: $color-gray-40;
-      }
-
-      .help-icon {
-        cursor: pointer;
-      }
-    }
-
-    .view-mode,
-    .access-mode {
-      display: flex;
-      flex-direction: column;

      .title {
-        color: $color-black;
-        font-weight: 400;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 100%;
+        margin-left: 32px;
+        h2 {
+          font-size: $fs18;
+          color: $color-black;
+        }
+
+        .modal-close-button {
+          margin-right: 16px;
+        }
      }

-      .items {
-        padding-left: 20px;
-        display: flex;
-
-        > .input-checkbox,
-        > .input-radio {
+      .share-link-section {
+        .custom-input {
          display: flex;
-          user-select: none;
-
-          /* input { */
-          /*   appearance: checkbox; */
-          /* } */
-
-          label {
+          flex-direction: row;
+          margin-bottom: 15px;
+          border: 1px solid $color-gray-20;
+          input {
+            padding: 0 0 0 15px;
+            border: none;
+          }
+        }
+        .hint-wrapper {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          .hint {
+            font-size: $fs12;
+            color: $color-gray-40;
+          }
+          .confirm-dialog {
            display: flex;
-            align-items: center;
-            color: $color-black;
+            flex-direction: column;
+            background-color: unset;
+            .actions {
+              display: flex;
+              justify-content: flex-end;
+              gap: 16px;
+            }
+            .description {
+              font-size: $fs12;
+              margin-bottom: 16px;
+              color: $color-black;
+            }
+            .btn-primary,
+            .btn-secondary,
+            .btn-warning {
+              width: 126px;
+              margin-bottom: 0px;

-            .hint {
-              margin-left: 5px;
+              &:not(:last-child) {
+                margin-right: 10px;
+              }
+            }
+          }
+        }
+
+        label {
+          font-size: $fs12;
+          color: $color-black;
+        }
+
+        .help-icon {
+          height: 40px;
+          width: 40px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+          position: relative;
+          right: 0;
+          top: 0;
+          background-color: $color-gray-10;
+          border-left: 1px solid $color-gray-20;
+          svg {
+            fill: $color-gray-30;
+          }
+          &:hover {
+            background-color: $color-primary;
+            svg {
+              fill: $color-gray-60;
+            }
+          }
+        }
+        input {
+          margin: 0;
+        }
+      }
+
+      &.ops-section {
+        .manage-permissions {
+          display: flex;
+          color: $color-primary-dark;
+          font-size: $fs12;
+          cursor: pointer;
+          .icon {
+            svg {
+              height: 16px;
+              width: 16px;
+              fill: $color-primary-dark;
+            }
+          }
+          .title {
+            margin-left: 8px;
+          }
+        }
+        .view-mode {
+          min-height: 34px;
+          .subtitle {
+            height: 32px;
+          }
+          .row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .count-pages {
+              font-size: $fs12;
              color: $color-gray-30;
            }
          }
-
-          &.disabled {
-            label {
-              color: $color-gray-30;
+          .current-tag {
+            font-size: $fs12;
+            color: $color-gray-30;
+          }
+          label {
+            color: $color-black;
+          }
+        }
+        .access-mode,
+        .inspect-mode {
+          display: grid;
+          grid-template-columns: auto 1fr;
+          .items {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+          }
+        }
+        .view-mode,
+        .access-mode,
+        .inspect-mode {
+          margin: 8px 0;
+          .subtitle {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            color: $color-black;
+            font-size: $fs16;
+            .icon {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              margin-right: 10px;
+              svg {
+                height: 16px;
+                width: 16px;
+              }
            }
          }
+          .items {
+            .input-select {
+              background-image: url("/images/icons/arrow-down.svg");
+              margin: 0;
+              padding-right: 28px;
+              border: 1px solid $color-gray-10;
+              max-width: 227px;
+              text-overflow: ellipsis;
+              overflow: hidden;
+              white-space: nowrap;
+            }
+            > .input-radio {
+              display: flex;
+              user-select: none;
+              margin-top: 0;
+              margin-bottom: 0;
+              label {
+                display: flex;
+                align-items: center;
+                color: $color-black;
+                max-width: 115px;
+
+                &::before {
+                  height: 16px;
+                  width: 16px;
+                }
+                .hint {
+                  margin-left: 5px;
+                  color: $color-gray-30;
+                }
+              }
+
+              &.disabled {
+                label {
+                  color: $color-gray-30;
+                }
+              }
+            }
+          }
+        }
+
+        .pages-selection {
+          border-top: 1px solid $color-gray-10;
+          border-bottom: 1px solid $color-gray-10;
+          padding-left: 20px;
+          max-height: 200px;
+          overflow-y: scroll;
+          user-select: none;
+
+          label {
+            color: $color-black;
+          }
        }
      }
    }
-
-    .pages-selection {
-      padding-left: 20px;
-      max-height: 200px;
-      overflow-y: scroll;
-      user-select: none;
-
-      label {
-        color: $color-black;
-      }
-    }
-
-    .custom-input {
-      input {
-        padding: 0 40px 0 15px;
-      }
-    }
  }
 }
--- a/frontend/src/app/main/ui/modal.cljs
+++ b/frontend/src/app/main/ui/modal.cljs
@ -84,5 +84,6 @@
  []
  (let [modal (mf/deref modal-ref)]
    (when modal
+      (.log js/console "modal"(clj->js modal))
      [:& modal-wrapper {:data modal
                         :key (:id modal)}])))
--- a/frontend/src/app/main/ui/share_link.cljs
+++ b/frontend/src/app/main/ui/share_link.cljs
@ -24,53 +24,68 @@
 (log/set-level! :warn)

 (defn prepare-params
-  [{:keys [sections pages pages-mode]}]
-  {:pages pages
-   :flags (-> #{}
-              (into (map #(str "section-" %)) sections)
-              (into (map #(str "pages-" %)) [pages-mode]))})
+  [{:keys [pages who-comment who-inspect]}]
+  
+   {:pages pages
+    :who-comment who-comment
+    :who-inspect who-inspect})
+
+

 (mf/defc share-link-dialog
  {::mf/register modal/components
   ::mf/register-as :share-link}
  [{:keys [file page]}]
-  (let [slinks  (mf/deref refs/share-links)
-        router  (mf/deref refs/router)
-        route   (mf/deref refs/route)
+  (let [current-page page
+        slinks   (mf/deref refs/share-links)
+        router   (mf/deref refs/router)
+        route    (mf/deref refs/route)

-        link    (mf/use-state nil)
-        confirm (mf/use-state false)
+        link     (mf/use-state nil)
+        confirm  (mf/use-state false)
+        open-ops (mf/use-state false)
+
+        opts     (mf/use-state
+                  {:pages-mode "current"
+                   :all-pages false
+                   :pages #{(:id page)}
+                   :who-comment "team"
+                   :who-inspect "team"})

-        opts    (mf/use-state
-                 {:sections #{"viewer"}
-                  :pages-mode "current"
-                  :pages #{(:id page)}})

        close
        (fn [event]
          (dom/prevent-default event)
-          (st/emit! (modal/hide)))
+          (st/emit! (modal/hide))
+          (modal/disallow-click-outside!))

-        select-pages-mode
-        (fn [mode]
+        toggle-all
+        (fn []
          (reset! confirm false)
          (swap! opts
                 (fn [state]
-                   (-> state
-                       (assoc :pages-mode mode)
-                       (cond-> (= mode "current") (assoc :pages #{(:id page)}))
-                       (cond-> (= mode "all") (assoc :pages (into #{} (get-in file [:data :pages]))))))))
+                   (if (= true (:all-pages state))
+                     (-> state
+                         (assoc :all-pages false)
+                         (assoc :pages #{(:id page)}))
+                     (-> state
+                         (assoc :all-pages true)
+                         (assoc :pages (into #{} (get-in file [:data :pages]))))))))

        mark-checked-page
        (fn [event id]
          (let [target   (dom/get-target event)
-                checked? (.-checked ^js target)]
-            (reset! confirm false)
-            (swap! opts update :pages
-                   (fn [pages]
-                     (if checked?
-                       (conj pages id)
-                       (disj pages id))))))
+                checked? (.-checked ^js target)
+                dif-pages? (not= id (first (:pages @opts)))
+                no-one-page (< 1 (count (:pages @opts)))
+                should-change (or no-one-page dif-pages?)]
+            (when should-change
+              (reset! confirm false)
+              (swap! opts update :pages
+                     (fn [pages]
+                       (if checked?
+                         (conj pages id)
+                         (disj pages id)))))))

        create-link
        (fn [_]
@ -83,7 +98,7 @@
          (wapi/write-to-clipboard @link)
          (st/emit! (dm/show {:type :info
                              :content (tr "common.share-link.link-copied-success")
-                              :timeout 3000})))
+                              :timeout 1000})))

        try-delete-link
        (fn [_]
@ -94,17 +109,27 @@
          (let [params (prepare-params @opts)
                slink  (d/seek #(= (:flags %) (:flags params)) slinks)]
            (reset! confirm false)
-            (st/emit! (dc/delete-share-link slink)
-                      (dm/show {:type :info
-                                :content (tr "common.share-link.link-deleted-success")
-                                :timeout 3000}))))
-        ]
+            (st/emit! (dc/delete-share-link slink))))
+
+        manage-open-ops
+        (fn [_]
+          (swap! open-ops not))
+
+        on-who-change
+        (fn [type event]
+          (let [target  (dom/get-target event)
+                value   (dom/get-value target)
+                value   (keyword value)]
+            (reset! confirm false)
+            (if (= type :comment)
+              (swap! opts assoc :who-comment (d/name value))
+              (swap! opts assoc :who-inspect (d/name value)))))]

    (mf/use-effect
     (mf/deps file slinks @opts)
     (fn []
-       (let [{:keys [flags pages] :as params} (prepare-params @opts)
-             slink  (d/seek #(and (= (:flags %) flags) (= (:pages %) pages)) slinks)
+       (let [{:keys [pages who-comment who-inspect] :as params} (prepare-params @opts)
+             slink  (d/seek #(and (= (:who-inspect %) who-inspect) (= (:who-comment %) who-comment) (= (:pages %) pages)) slinks)
             href   (when slink
                      (let [pparams (:path-params route)
                            qparams (-> (:query-params route)
@ -114,123 +139,123 @@
                        (assoc cf/public-uri :fragment href)))]
         (reset! link (some-> href str)))))

-    [:div.modal-overlay
+    [:div.modal-overlay.share-modal
     [:div.modal-container.share-link-dialog
-      [:div.modal-content
+      [:div.modal-content.initial
       [:div.title
        [:h2 (tr "common.share-link.title")]
        [:div.modal-close-button
         {:on-click close
          :title (tr "labels.close")}
-         i/close]]
-
-       [:div.share-link-section
-        [:label (tr "labels.link")]
-        [:div.custom-input.with-icon
-         [:input {:type "text"
-                  :value (or @link "")
-                  :placeholder (tr "common.share-link.placeholder")
-                  :read-only true}]
-         (when (some? @link)
-           [:div.help-icon {:title (tr "labels.copy")
-                            :on-click copy-link}
-            i/copy])]
-
-        [:div.hint (tr "common.share-link.permissions-hint")]]]
-
+         i/close]]]
      [:div.modal-content
-       (let [sections (:sections @opts)]
-         [:div.access-mode
-          [:div.title (tr "common.share-link.permissions-can-access")]
-          [:div.items
-           [:div.input-checkbox.check-primary.disabled
-            [:input.check-primary.input-checkbox {:type "checkbox" :disabled true}]
-            [:label (tr "labels.workspace")]]
+       [:div.share-link-section
+        (when (and (not @confirm) (some? @link))
+          [:div.custom-input.with-icon
+           [:input {:type "text"
+                    :value (or @link "")
+                    :placeholder (tr "common.share-link.placeholder")
+                    :read-only true}]
+           [:div.help-icon {:title (tr "viewer.header.share.copy-link")
+                            :on-click copy-link}
+            i/copy]])
+        [:div.hint-wrapper
+         (when (not @confirm) [:div.hint (tr "common.share-link.permissions-hint")])
+         (cond
+           (true? @confirm)
+           [:div.confirm-dialog
+            [:div.description (tr "common.share-link.confirm-deletion-link-description")]
+            [:div.actions
+             [:input.btn-secondary
+              {:type "button"
+               :on-click #(reset! confirm false)
+               :value (tr "labels.cancel")}]
+             [:input.btn-warning
+              {:type "button"
+               :on-click delete-link
+               :value (tr "common.share-link.destroy-link")}]]]

-           [:div.input-checkbox.check-primary
-            [:input {:type "checkbox"
-                     :default-checked (contains? sections "viewer")}]
-            [:label (tr "labels.viewer")
-             [:span.hint "(" (tr "labels.default") ")"]]]
-
-           ;; [:div.input-checkbox.check-primary
-           ;;  [:input.check-primary.input-checkbox {:type "checkbox"}]
-           ;;  [:label "Handoff" ]]
-           ]])
-
-       (let [mode (:pages-mode @opts)]
-         [:*
-          [:div.view-mode
-           [:div.title (tr "common.share-link.permissions-can-view")]
-           [:div.items
-            [:div.input-radio.radio-primary
-             [:input {:type "radio"
-                      :id "view-all"
-                      :checked (= "all" mode)
-                      :name "pages-mode"
-                      :on-change #(select-pages-mode "all")}]
-             [:label {:for "view-all"} (tr "common.share-link.view-all-pages")]]
-
-            [:div.input-radio.radio-primary
-             [:input {:type "radio"
-                      :id "view-current"
-                      :name "pages-mode"
-                      :checked (= "current" mode)
-                      :on-change #(select-pages-mode "current")}]
-             [:label {:for "view-current"} (tr "common.share-link.view-current-page")]]
-
-            [:div.input-radio.radio-primary
-             [:input {:type "radio"
-                      :id "view-selected"
-                      :name "pages-mode"
-                      :checked (= "selected" mode)
-                      :on-change #(select-pages-mode "selected")}]
-             [:label {:for "view-selected"} (tr "common.share-link.view-selected-pages")]]]]
-
-          (when (= "selected" mode)
-            (let [pages   (->> (get-in file [:data :pages])
-                               (map #(get-in file [:data :pages-index %])))
-                  selected (:pages @opts)]
-              [:ul.pages-selection
-               (for [page pages]
-                 [:li.input-checkbox.check-primary {:key (str (:id page))}
-                  [:input {:type "checkbox"
-                           :id (str "page-" (:id page))
-                           :on-change #(mark-checked-page % (:id page))
-                           :checked (contains? selected (:id page))}]
-                  [:label {:for (str "page-" (:id page))} (:name page)]])]))])]
-
-      [:div.modal-footer
-       (cond
-         (true? @confirm)
-         [:div.confirm-dialog
-          [:div.description (tr "common.share-link.confirm-deletion-link-description")]
-          [:div.actions
+           (some? @link)
           [:input.btn-secondary
            {:type "button"
-             :on-click #(reset! confirm false)
-             :value (tr "labels.cancel")}]
-           [:input.btn-warning
+             :class "primary"
+             :on-click try-delete-link
+             :value (tr "common.share-link.destroy-link")}]
+
+           :else
+           [:input.btn-primary
            {:type "button"
-             :on-click delete-link
-             :value (tr "common.share-link.remove-link")
-             }]]]
+             :class "primary"
+             :on-click create-link
+             :value (tr "common.share-link.get-link")}])]]]
+      [:div.modal-content.ops-section
+       [:div.manage-permissions
+        {:on-click manage-open-ops}
+        [:span.icon i/picker-hsv]
+        [:div.title (tr "common.share-link.manage-ops")]]
+       (when @open-ops
+         [:*
+          (let [all-selected? (:all-pages @opts)
+                pages   (->> (get-in file [:data :pages])
+                             (map #(get-in file [:data :pages-index %])))
+                selected (:pages @opts)]

-         (some? @link)
-         [:input.btn-secondary
-          {:type "button"
-           :class "primary"
-           :on-click try-delete-link
-           :value (tr "common.share-link.remove-link")}]
+            [:*
+             [:div.view-mode
+              [:div.subtitle
+               [:span.icon i/play]
+               (tr "common.share-link.permissions-pages")]
+              [:div.items
+               (if (= 1 (count pages))
+                 [:div.input-checkbox.check-primary
+                  [:input {:type "checkbox"
+                           :id (str "page-" (:id current-page))
+                           :on-change #(mark-checked-page % (:id current-page))
+                           :checked true}]
+                  [:label {:for (str "page-" (:id current-page))} (:name current-page)]
+                  [:span  (str  " " (tr "common.share-link.current-tag"))]]

-         :else
-         [:input.btn-primary
-          {:type "button"
-           :class "primary"
-           :on-click create-link
-           :value (tr "common.share-link.get-link")}])]
+                 [:*
+                  [:div.row
+                   [:div.input-checkbox.check-primary
+                    [:input {:type "checkbox"
+                             :id "view-all"
+                             :checked all-selected?
+                             :name "pages-mode"
+                             :on-change toggle-all}]
+                    [:label {:for "view-all"} (tr "common.share-link.view-all")]]
+                   [:span.count-pages (tr "common.share-link.page-shared" (i18n/c (count selected)))]]

-      ]]))
+                  [:ul.pages-selection
+                   (for [page pages]
+                     [:li.input-checkbox.check-primary {:key (str (:id page))}
+                      [:input {:type "checkbox"
+                               :id (str "page-" (:id page))
+                               :on-change #(mark-checked-page % (:id page))
+                               :checked (contains? selected (:id page))}]
+                      (if (= (:id current-page) (:id page))
+                        [:*
+                         [:label {:for (str "page-" (:id page))} (:name page)]
+                         [:span.current-tag  (str  " " (tr "common.share-link.current-tag"))]]
+                        [:label {:for (str "page-" (:id page))} (:name page)])])]])]]])
+          [:div.access-mode
+           [:div.subtitle
+            [:span.icon i/chat]
+            (tr "common.share-link.permissions-can-comment")]
+           [:div.items
+            [:select.input-select {:on-change (partial on-who-change :comment)
+                                   :value (:who-comment @opts)}
+             [:option {:value "team"}  (tr "common.share-link.team-members")]
+             [:option {:value "all"}  (tr "common.share-link.all-users")]]]]
+          [:div.inspect-mode
+           [:div.subtitle
+            [:span.icon i/code]
+            (tr "common.share-link.permissions-can-inspect")]
+           [:div.items
+            [:select.input-select {:on-change (partial on-who-change :inspect)
+                                   :value (:who-inspect @opts)}
+             [:option {:value "team"}  (tr "common.share-link.team-members")]
+             [:option {:value "all"}  (tr "common.share-link.all-users")]]]]])]]]))



--- a/frontend/src/app/main/ui/viewer/header.cljs
+++ b/frontend/src/app/main/ui/viewer/header.cljs
@ -77,7 +77,8 @@
        (mf/use-callback
         (mf/deps page)
         (fn []
-           (modal/show! :share-link {:page page :file file})))]
+           (modal/show! :share-link {:page page :file file})
+           (modal/allow-click-outside!)))]

    [:div.options-zone
     (case section
--- a/frontend/translations/ca.po
+++ b/frontend/translations/ca.po
@ -185,33 +185,15 @@ msgstr "S'ha copiat l'enllaç correctament"
 msgid "common.share-link.link-deleted-success"
 msgstr "S'ha eliminat l'enllaç correctament"

-msgid "common.share-link.permissions-can-access"
-msgstr "Pot accedir"
-
-msgid "common.share-link.permissions-can-view"
-msgstr "Lector"
-
 msgid "common.share-link.permissions-hint"
 msgstr "Qualsevol persona amb l'enllaç hi tindrà accés"

 msgid "common.share-link.placeholder"
 msgstr "L'enllaç per a compartir apareixerà aquí"

-msgid "common.share-link.remove-link"
-msgstr "Elimina l'enllaç"
-
 msgid "common.share-link.title"
 msgstr "Compartiu prototips"

-msgid "common.share-link.view-all-pages"
-msgstr "Totes les pàgines"
-
-msgid "common.share-link.view-current-page"
-msgstr "Només aquesta pàgina"
-
-msgid "common.share-link.view-selected-pages"
-msgstr "Pàgines seleccionades"
-
 #: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
 msgid "dashboard.add-shared"
 msgstr "Afegeix a la biblioteca compartida"
--- a/frontend/translations/de.po
+++ b/frontend/translations/de.po
@ -188,33 +188,15 @@ msgstr "Link wurde erfolgreich kopiert"
 msgid "common.share-link.link-deleted-success"
 msgstr "Link wurde erfolgreich gelöscht"

-msgid "common.share-link.permissions-can-access"
-msgstr "Freigabe für"
-
-msgid "common.share-link.permissions-can-view"
-msgstr "Sichtbar"
-
 msgid "common.share-link.permissions-hint"
 msgstr "Jeder mit dem Link kann auf die Datei zugreifen"

 msgid "common.share-link.placeholder"
 msgstr "Link zum Teilen wird hier erscheinen"

-msgid "common.share-link.remove-link"
-msgstr "Link entfernen"
-
 msgid "common.share-link.title"
 msgstr "Prototypen teilen"

-msgid "common.share-link.view-all-pages"
-msgstr "Alle Seiten"
-
-msgid "common.share-link.view-current-page"
-msgstr "Nur diese Seite"
-
-msgid "common.share-link.view-selected-pages"
-msgstr "Ausgewählte Seiten"
-
 #: src/app/main/ui/workspace/header.cljs,
 #: src/app/main/ui/dashboard/file_menu.cljs
 msgid "dashboard.add-shared"
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@ -183,11 +183,14 @@ msgstr "Link copied successfully"
 msgid "common.share-link.link-deleted-success"
 msgstr "Link deleted successfully"

-msgid "common.share-link.permissions-can-access"
-msgstr "Can access"
+msgid "common.share-link.permissions-can-comment"
+msgstr "Can comment"

-msgid "common.share-link.permissions-can-view"
-msgstr "Can view"
+msgid "common.share-link.permissions-can-inspect"
+msgstr "Can inspect code"
+
+msgid "common.share-link.permissions-pages"
+msgstr "Pages shared"

 msgid "common.share-link.permissions-hint"
 msgstr "Anyone with link will have access"
@ -195,20 +198,31 @@ msgstr "Anyone with link will have access"
 msgid "common.share-link.placeholder"
 msgstr "Shareable link will appear here"

-msgid "common.share-link.remove-link"
-msgstr "Remove link"
+msgid "common.share-link.destroy-link"
+msgstr "Destroy link"

 msgid "common.share-link.title"
 msgstr "Share prototypes"

-msgid "common.share-link.view-all-pages"
-msgstr "All pages"
+msgid "common.share-link.view-all"
+msgstr "Select All"

-msgid "common.share-link.view-current-page"
-msgstr "Only this page"
+msgid "common.share-link.current-tag"
+msgstr "(current)"

-msgid "common.share-link.view-selected-pages"
-msgstr "Selected pages"
+msgid "common.share-link.manage-ops"
+msgstr "Manage permissions"
+
+msgid "common.share-link.team-members"
+msgstr "Only team members"
+
+msgid "common.share-link.all-users"
+msgstr "All Penpot users"
+
+msgid "common.share-link.page-shared"
+msgid_plural "common.share-link.page-shared"
+msgstr[0] "1 page shared"
+msgstr[1] "%s pages shared"

 #: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
 msgid "dashboard.add-shared"
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@ -188,11 +188,14 @@ msgstr "Enlace copiado satisfactoriamente"
 msgid "common.share-link.link-deleted-success"
 msgstr "Enlace eliminado correctamente"

-msgid "common.share-link.permissions-can-access"
-msgstr "Puede acceder a"
+msgid "common.share-link.permissions-can-comment"
+msgstr "Pueden comentar"

-msgid "common.share-link.permissions-can-view"
-msgstr "Puede ver"
+msgid "common.share-link.permissions-can-inspect"
+msgstr "Pueden ver código"
+
+msgid "common.share-link.permissions-pages"
+msgstr "Páginas compartidas"

 msgid "common.share-link.permissions-hint"
 msgstr "Cualquiera con el enlace puede acceder"
@ -200,20 +203,31 @@ msgstr "Cualquiera con el enlace puede acceder"
 msgid "common.share-link.placeholder"
 msgstr "El enlace para compartir aparecerá aquí"

-msgid "common.share-link.remove-link"
+msgid "common.share-link.destroy-link"
 msgstr "Eliminar enlace"

 msgid "common.share-link.title"
 msgstr "Compartir prototipos"

-msgid "common.share-link.view-all-pages"
-msgstr "Todas las paginas"
+msgid "common.share-link.view-all"
+msgstr "Selecctionar todas"

-msgid "common.share-link.view-current-page"
-msgstr "Solo esta pagina"
+msgid "common.share-link.current-tag"
+msgstr "(actual)"

-msgid "common.share-link.view-selected-pages"
-msgstr "Paginas seleccionadas"
+msgid "common.share-link.manage-ops"
+msgstr "Gestionar permisos"
+
+msgid "common.share-link.team-members"
+msgstr "Sólo integrantes del equipo"
+
+msgid "common.share-link.all-users"
+msgstr "Todo usario de Penpot"
+
+msgid "common.share-link.page-shared"
+msgid_plural "common.share-link.page-shared"
+msgstr[0] "1 página compartida"
+msgstr[1] "%s páginas compartidas"

 #: src/app/main/ui/workspace/header.cljs,
 #: src/app/main/ui/dashboard/file_menu.cljs
--- a/frontend/translations/fa.po
+++ b/frontend/translations/fa.po
@ -189,30 +189,12 @@ msgstr "لینک با موفقیت کپی شد"
 msgid "common.share-link.link-deleted-success"
 msgstr "لینک با موفقیت حذف شد"

-msgid "common.share-link.permissions-can-access"
-msgstr "می‌تواند دسترسی داشته باشد"
-
-msgid "common.share-link.permissions-can-view"
-msgstr "می‌تواند مشاهده کند"
-
 msgid "common.share-link.permissions-hint"
 msgstr "هر کسی که لینک داشته باشد دسترسی خواهد داشت"

-msgid "common.share-link.remove-link"
-msgstr "حذف لینک"
-
 msgid "common.share-link.title"
 msgstr "اشتراک‌گذاری پروتوتایپ‌ها"

-msgid "common.share-link.view-all-pages"
-msgstr "تمام صفحات"
-
-msgid "common.share-link.view-current-page"
-msgstr "فقط این صفحه"
-
-msgid "common.share-link.view-selected-pages"
-msgstr "صفحات انتخاب‌شده"
-
 #: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
 msgid "dashboard.add-shared"
 msgstr "افزودن به‌عنوان کتابخانه مشترک"
--- a/frontend/translations/fr.po
+++ b/frontend/translations/fr.po
@ -186,33 +186,15 @@ msgstr "Lien copié avec succès"
 msgid "common.share-link.link-deleted-success"
 msgstr "Lien supprimé avec succès"

-msgid "common.share-link.permissions-can-access"
-msgstr "Peut y accéder"
-
-msgid "common.share-link.permissions-can-view"
-msgstr "Peut le visionner"
-
 msgid "common.share-link.permissions-hint"
 msgstr "N'importe qui possédant ce lien peut y accéder"

 msgid "common.share-link.placeholder"
 msgstr "Le lien à partager apparaîtra ici"

-msgid "common.share-link.remove-link"
-msgstr "Supprimer le lien"
-
 msgid "common.share-link.title"
 msgstr "Partager les prototypes"

-msgid "common.share-link.view-all-pages"
-msgstr "Toutes les pages"
-
-msgid "common.share-link.view-current-page"
-msgstr "Seulement cette page"
-
-msgid "common.share-link.view-selected-pages"
-msgstr "Pages sélectionnées"
-
 #: src/app/main/ui/workspace/header.cljs,
 #: src/app/main/ui/dashboard/file_menu.cljs
 msgid "dashboard.add-shared"
--- a/frontend/translations/he.po
+++ b/frontend/translations/he.po
@ -179,33 +179,15 @@ msgstr "הקישור הועתק בהצלחה"
 msgid "common.share-link.link-deleted-success"
 msgstr "הקישור נמחק בהצלחה"

-msgid "common.share-link.permissions-can-access"
-msgstr "יש גישה"
-
-msgid "common.share-link.permissions-can-view"
-msgstr "אפשר לצפות"
-
 msgid "common.share-link.permissions-hint"
 msgstr "כל מי שיש לו את הקישור יכול לגשת"

 msgid "common.share-link.placeholder"
 msgstr "הקישור לשיתוף יופיע כאן"

-msgid "common.share-link.remove-link"
-msgstr "הסרת קישור"
-
 msgid "common.share-link.title"
 msgstr "שיתוף אבות טיפוס"

-msgid "common.share-link.view-all-pages"
-msgstr "כל העמודים"
-
-msgid "common.share-link.view-current-page"
-msgstr "רק העמוד הזה"
-
-msgid "common.share-link.view-selected-pages"
-msgstr "עמודים נבחרים"
-
 #: src/app/main/ui/workspace/header.cljs,
 #: src/app/main/ui/dashboard/file_menu.cljs
 msgid "dashboard.add-shared"
--- a/frontend/translations/id.po
+++ b/frontend/translations/id.po
@ -189,20 +189,10 @@ msgstr "Tautan berhasil disalin"
 msgid "common.share-link.link-deleted-success"
 msgstr "Tautan berhasil dihapus"

-msgid "common.share-link.permissions-can-access"
-msgstr "Dapat mengakses"
-
-msgid "common.share-link.permissions-can-view"
-msgstr "Dapat melihat"

 msgid "common.share-link.permissions-hint"
 msgstr "Siapapun yang memiliki tautan dapat mengakses"

-msgid "common.share-link.view-current-page"
-msgstr "Hanya halaman ini"
-
-msgid "common.share-link.view-selected-pages"
-msgstr "Halaman yang dipilih"

 #: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
 msgid "dashboard.add-shared"
--- a/frontend/translations/lt.po
+++ b/frontend/translations/lt.po
@ -188,33 +188,15 @@ msgstr "Nuoroda sėkmingai nukopijuota"
 msgid "common.share-link.link-deleted-success"
 msgstr "Nuoroda sėkmingai ištrinta"

-msgid "common.share-link.permissions-can-access"
-msgstr "Gali pasiekti"
-
-msgid "common.share-link.permissions-can-view"
-msgstr "Galima peržiūrėti"
-
 msgid "common.share-link.permissions-hint"
 msgstr "Kiekvienas, turintis nuorodą, turės prieigą"

 msgid "common.share-link.placeholder"
 msgstr "Bendrinama nuoroda bus rodoma čia"

-msgid "common.share-link.remove-link"
-msgstr "Pašalinti nuorodą"
-
 msgid "common.share-link.title"
 msgstr "Dalinkitės prototipais"

-msgid "common.share-link.view-all-pages"
-msgstr "Visi puslapiai"
-
-msgid "common.share-link.view-current-page"
-msgstr "Tik šis puslapis"
-
-msgid "common.share-link.view-selected-pages"
-msgstr "Parinkti puslapiai"
-
 #: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
 msgid "dashboard.add-shared"
 msgstr "Pridėti kaip bendrinamą biblioteką"
--- a/frontend/translations/ml.po
+++ b/frontend/translations/ml.po
@ -189,33 +189,15 @@ msgstr "കണ്ണി വിജയകരമായി പകർത്തി"
 msgid "common.share-link.link-deleted-success"
 msgstr "കണ്ണി വിജയകരമായി മായിച്ചു"

-msgid "common.share-link.permissions-can-access"
-msgstr "പ്രാപ്യമാണ്"
-
-msgid "common.share-link.permissions-can-view"
-msgstr "കാണാവുന്നതാണ്"
-
 msgid "common.share-link.permissions-hint"
 msgstr "കണ്ണിയുള്ള ആർക്കും പ്രാപ്യമാകും"

 msgid "common.share-link.placeholder"
 msgstr "പങ്കുവെക്കാവുന്ന കണ്ണി ഇവിടെ ലഭ്യമാകും"

-msgid "common.share-link.remove-link"
-msgstr "കണ്ണി നീക്കുക"
-
 msgid "common.share-link.title"
 msgstr "പ്രോട്ടോടൈപ്പുകൾ പങ്കുവെയ്ക്കുക"

-msgid "common.share-link.view-all-pages"
-msgstr "എല്ലാ താളുകളും"
-
-msgid "common.share-link.view-current-page"
-msgstr "ഈ താൾ മാത്രം"
-
-msgid "common.share-link.view-selected-pages"
-msgstr "തിരഞ്ഞെടുത്ത താളുകൾ"
-
 #: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
 msgid "dashboard.add-shared"
 msgstr "പങ്കിട്ട ലൈബ്രറിയായി ചേർക്കുക"
--- a/frontend/translations/pl.po
+++ b/frontend/translations/pl.po
@ -186,33 +186,15 @@ msgstr "Link skopiowano pomyślnie"
 msgid "common.share-link.link-deleted-success"
 msgstr "Link usunięto pomyślnie"

-msgid "common.share-link.permissions-can-access"
-msgstr "Można uzyskać dostęp"
-
-msgid "common.share-link.permissions-can-view"
-msgstr "Można zobaczyć"
-
 msgid "common.share-link.permissions-hint"
 msgstr "Każdy, kto ma link, będzie miał dostęp"

 msgid "common.share-link.placeholder"
 msgstr "Tutaj pojawi się link do udostępniania"

-msgid "common.share-link.remove-link"
-msgstr "Usuń link"
-
 msgid "common.share-link.title"
 msgstr "Udostępnij prototypy"

-msgid "common.share-link.view-all-pages"
-msgstr "Wszystkie strony"
-
-msgid "common.share-link.view-current-page"
-msgstr "Tylko ta strona"
-
-msgid "common.share-link.view-selected-pages"
-msgstr "Wybrane strony"
-
 #: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
 msgid "dashboard.add-shared"
 msgstr "Dodaj jako Udostępnioną Bibliotekę"
--- a/frontend/translations/ru.po
+++ b/frontend/translations/ru.po
@ -186,35 +186,16 @@ msgstr "Ссылка скопирована"
 msgid "common.share-link.link-deleted-success"
 msgstr "Ссылка удалена"

-#, fuzzy
-msgid "common.share-link.permissions-can-access"
-msgstr "Могут зайти"
-
-msgid "common.share-link.permissions-can-view"
-msgstr "Могут видеть"
-
 msgid "common.share-link.permissions-hint"
 msgstr "Доступ открыт для получателей ссылки"

 msgid "common.share-link.placeholder"
 msgstr "Ссылка появится здесь"

-msgid "common.share-link.remove-link"
-msgstr "Удалить ссылку"
-
 #, fuzzy
 msgid "common.share-link.title"
 msgstr "Поделиться прототипами"

-msgid "common.share-link.view-all-pages"
-msgstr "Все страницы"
-
-msgid "common.share-link.view-current-page"
-msgstr "Только эту страницу"
-
-msgid "common.share-link.view-selected-pages"
-msgstr "Выбранные страницы"
-
 #: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
 msgid "dashboard.add-shared"
 msgstr "Добавить как общую библиотеку"
--- a/frontend/translations/tr.po
+++ b/frontend/translations/tr.po
@ -186,33 +186,15 @@ msgstr "Bağlantı başarıyla kopyalandı"
 msgid "common.share-link.link-deleted-success"
 msgstr "Bağlantı başarıyla silindi"

-msgid "common.share-link.permissions-can-access"
-msgstr "Erişebilir"
-
-msgid "common.share-link.permissions-can-view"
-msgstr "Görüntüleyebilir"
-
 msgid "common.share-link.permissions-hint"
 msgstr "Bağlantıya sahip olan herkes erişebilir"

 msgid "common.share-link.placeholder"
 msgstr "Paylaşılabilir bağlantı burada görünecek"

-msgid "common.share-link.remove-link"
-msgstr "Bağlantıyı kaldır"
-
 msgid "common.share-link.title"
 msgstr "Prototipleri paylaş"

-msgid "common.share-link.view-all-pages"
-msgstr "Tüm sayfalar"
-
-msgid "common.share-link.view-current-page"
-msgstr "Yalnızca bu sayfa"
-
-msgid "common.share-link.view-selected-pages"
-msgstr "Seçili sayfalar"
-
 #: src/app/main/ui/workspace/header.cljs,
 #: src/app/main/ui/dashboard/file_menu.cljs
 msgid "dashboard.add-shared"
--- a/frontend/translations/zh_CN.po
+++ b/frontend/translations/zh_CN.po
@ -177,13 +177,6 @@ msgstr "链接已复制"
 msgid "common.share-link.link-deleted-success"
 msgstr "链接已移除"

-#, fuzzy
-msgid "common.share-link.permissions-can-access"
-msgstr "可访问"
-
-msgid "common.share-link.permissions-can-view"
-msgstr "可浏览"
-
 #, fuzzy
 msgid "common.share-link.permissions-hint"
 msgstr "任何人通过此链接都可访问"
@ -191,21 +184,9 @@ msgstr "任何人通过此链接都可访问"
 msgid "common.share-link.placeholder"
 msgstr "可分享的链接会在此处显示"

-msgid "common.share-link.remove-link"
-msgstr "移除链接"
-
 msgid "common.share-link.title"
 msgstr "分享原型"

-msgid "common.share-link.view-all-pages"
-msgstr "全部页面"
-
-msgid "common.share-link.view-current-page"
-msgstr "仅此页面"
-
-msgid "common.share-link.view-selected-pages"
-msgstr "选中的页面"
-
 #: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
 msgid "dashboard.add-shared"
 msgstr "添加为共享库"
--- a/frontend/translations/zh_Hant.po
+++ b/frontend/translations/zh_Hant.po
@ -181,33 +181,15 @@ msgstr "成功複製連結"
 msgid "common.share-link.link-deleted-success"
 msgstr "成功刪除連結"

-msgid "common.share-link.permissions-can-access"
-msgstr "能夠存取"
-
-msgid "common.share-link.permissions-can-view"
-msgstr "能夠檢視"
-
 msgid "common.share-link.permissions-hint"
 msgstr "任何有連結的人皆能存取"

 msgid "common.share-link.placeholder"
 msgstr "可分享的連結將會在此顯示"

-msgid "common.share-link.remove-link"
-msgstr "移除連結"
-
 msgid "common.share-link.title"
 msgstr "分享原型"

-msgid "common.share-link.view-all-pages"
-msgstr "所有頁面"
-
-msgid "common.share-link.view-current-page"
-msgstr "僅此頁面"
-
-msgid "common.share-link.view-selected-pages"
-msgstr "選擇的頁面"
-
 #: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
 #, fuzzy
 msgid "dashboard.add-shared"