Add clipboard mode setting

web/src/shared/lib/clipboard/index.ts

@@ -0,0 +1,26 @@
+import { createEffect, createEvent, createStore, sample } from "effector";
+
+const CLIPBOARD_MODE_KEY = "clipboard_mode";
+
+type ClipboardMode = "copy" | "no-copy";
+
+export const $clipboardMode = createStore<ClipboardMode>("no-copy");
+export const $shouldCopyToClipboard = $clipboardMode.map((mode) => mode === "copy");
+export const clipboardModeChanged = createEvent<ClipboardMode>();
+
+export const loadClipboardFromStorageFx = createEffect(() => {
+  const clipboardMode: ClipboardMode = localStorage.getItem(CLIPBOARD_MODE_KEY) as ClipboardMode;
+
+  return clipboardMode;
+});
+
+const setClipboardModeToStorageFx = createEffect((clipboardMode: ClipboardMode) => {
+  if (!clipboardMode) return;
+
+  return localStorage.setItem(CLIPBOARD_MODE_KEY, clipboardMode);
+});
+
+sample({
+  clock: [clipboardModeChanged, loadClipboardFromStorageFx.doneData],
+  target: [setClipboardModeToStorageFx, $clipboardMode],
+});

web/src/shared/lib/i18n/translations/en.ts

@@ -9,6 +9,7 @@ export const en: Translation = {
     tags: "Tags",
     language: "Language",
     theme: "Theme",
+    clipboard_mode: "Clipboard mode",
   },
   log_groups: {
     label: "Log groups",

web/src/shared/lib/i18n/translations/ru.ts

@@ -9,6 +9,7 @@ export const ru: Translation = {
     tags: "Теги",
     language: "Язык",
     theme: "Тема",
+    clipboard_mode: "Режим буфера обмена",
   },
   log_groups: {
     label: "Группы логов",

web/src/shared/lib/i18n/translations/types.ts

@@ -25,6 +25,7 @@ export type Translation = {
     tags: string;
     language: string;
     theme: string;
+    clipboard_mode: string;
   };
   log_groups: {
     label: string;

web/src/shared/lib/index.ts

@@ -4,6 +4,7 @@ export { trigger } from "./trigger";
 export { hashCode } from "./hash";
 export { isObjectPresent } from "./presence";
 export { themeChanged, $currentTheme, loadThemeFromStorageFx } from "./theming";
+export { clipboardModeChanged, $clipboardMode, $shouldCopyToClipboard } from "./clipboard";
 export { objectToQueryString, queryStringToObject } from "./parsing/query";
 export { intersection } from "./intersection";
 export { i18n, $preferredLanguage, setLanguage } from "./i18n";

web/src/shared/ui/diff-text/index.ts

@@ -3,6 +3,7 @@ import { Change, diffWords } from "diff";
 import { Store, createEffect, createEvent, restore, sample } from "effector";
 import { h, list, node, remap, spec } from "forest";
 import { triggerTooltip } from "../general-tooltip";
+import { $shouldCopyToClipboard } from "@/shared/lib";
 
 type ComparePayload = { oldText: string | undefined; newText: string | undefined };
 
@@ -46,9 +47,10 @@ export const DiffText = ({ oldText, newText }: { oldText: Store<string>; newText
       });
 
       sample({
-        source: $before.map((parts) => parts.map((p) => p.value).join("")),
+        source: [$before.map((parts) => parts.map((p) => p.value).join("")), $shouldCopyToClipboard] as const,
         clock: beforeClicked,
-        filter: () => !Boolean(window.getSelection()?.toString()),
+        filter: ([, shouldCopy]) => !Boolean(window.getSelection()?.toString()) && shouldCopy,
+        fn: ([text]) => text,
         target: copyTextFx,
       });
 
@@ -58,7 +60,7 @@ export const DiffText = ({ oldText, newText }: { oldText: Store<string>; newText
           classList: {
             "whitespace-pre-wrap": true,
             "break-words": true,
-            "cursor-pointer": true,
+            "cursor-pointer": $shouldCopyToClipboard,
             "bg-red-200": before.map((p) => Boolean(p.removed)),
             "dark:bg-red-800": before.map((p) => Boolean(p.removed)),
           },
@@ -85,7 +87,7 @@ export const DiffText = ({ oldText, newText }: { oldText: Store<string>; newText
           classList: {
             "whitespace-pre-wrap": true,
             "break-words": true,
-            "cursor-pointer": true,
+            "cursor-pointer": $shouldCopyToClipboard,
             "bg-green-200": after.map((p) => Boolean(p.added)),
             "dark:bg-green-800": after.map((p) => Boolean(p.added)),
           },

web/src/widgets/logs-table/index.ts

@@ -1,7 +1,7 @@
 import { h, list, remap, spec } from "forest";
 import { Event, Store, createEffect, createEvent, sample } from "effector";
 import { Log } from "@/shared/api";
-import { isObjectPresent } from "@/shared/lib";
+import { $shouldCopyToClipboard, isObjectPresent } from "@/shared/lib";
 import { i18n } from "@/shared/lib/i18n";
 import { DiffText, KBD, LevelBadge, triggerTooltip } from "@/shared/ui";
 
@@ -98,9 +98,10 @@ export const LogsTable = ({
                 });
 
                 sample({
-                  source: $formattedText,
+                  source: [$formattedText, $shouldCopyToClipboard] as const,
                   clock: textClicked,
-                  filter: () => !Boolean(window.getSelection()?.toString()),
+                  filter: ([, shouldCopy]) => !Boolean(window.getSelection()?.toString()) && shouldCopy,
+                  fn: ([text]) => text,
                   target: copyTextFx,
                 });
 

web/src/widgets/user-profile/index.ts

@@ -1,6 +1,6 @@
 import { tagModel } from "@/entities/tag";
 import { userModel } from "@/entities/user";
-import { $currentTheme, themeChanged } from "@/shared/lib";
+import { $currentTheme, themeChanged, $clipboardMode, clipboardModeChanged } from "@/shared/lib";
 import { i18n } from "@/shared/lib/i18n";
 import { Select } from "@/shared/ui";
 import { combine, createStore } from "effector";
@@ -71,7 +71,7 @@ export const UserProfile = () => {
       });
 
       h("div", () => {
-        spec({ classList: ["py-3", "max-w-5"] });
+        spec({ classList: ["py-3", "max-w-xs"] });
 
         h("p", { text: i18n("profile.language") });
 
@@ -84,7 +84,7 @@ export const UserProfile = () => {
       });
 
       h("div", () => {
-        spec({ classList: ["py-3", "max-w-5"] });
+        spec({ classList: ["py-3", "max-w-xs"] });
 
         h("p", { text: i18n("profile.theme") });
 
@@ -95,6 +95,19 @@ export const UserProfile = () => {
           withBlank: createStore(false),
         });
       });
+
+      h("div", () => {
+        spec({ classList: ["py-3", "max-w-xs"] });
+
+        h("p", { text: i18n("profile.clipboard_mode") });
+
+        Select({
+          value: $clipboardMode,
+          options: createStore(["copy", "no-copy"]),
+          optionSelected: clipboardModeChanged,
+          withBlank: createStore(false),
+        });
+      });
     });
   });
 };