add selection hint

client/src/components/Code/CodeFullSelectable/SelectionHint.tsx

@@ -0,0 +1,56 @@
+import React, { memo, useCallback } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { FileIcon, RangeIcon } from '../../../icons';
+import KeyboardHint from '../../KeyboardHint';
+
+type Props = {
+  currentSelection: [number, number][];
+  setCurrentSelection: (s: [number, number][]) => void;
+};
+
+const SelectionHint = ({ currentSelection, setCurrentSelection }: Props) => {
+  useTranslation();
+
+  const clearSelection = useCallback(() => {
+    setCurrentSelection([]);
+  }, []);
+
+  return (
+    <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 rounded-full flex h-8 items-center gap-2 p-2 pr-2.5 border border-bg-border bg-bg-base shadow-float body-mini text-label-title flex-shrink-0 w-fit z-20">
+      {!currentSelection.length ? (
+        <FileIcon sizeClassName="w-4.5 h-4.5" />
+      ) : (
+        <RangeIcon sizeClassName="w-4.5 h-4.5" />
+      )}
+      <p className="pointer-events-none select-none cursor-default">
+        {!currentSelection.length ? (
+          <Trans>The whole file will be used as context.</Trans>
+        ) : (
+          <Trans>Selected ranges will be used as context.</Trans>
+        )}
+      </p>
+      {currentSelection?.length > 1 && (
+        <div className="pointer-events-none select-none cursor-default flex gap-1 items-center">
+          <Trans>
+            <KeyboardHint shortcut="↑" />
+            <KeyboardHint shortcut="↓" /> to navigate.
+          </Trans>
+        </div>
+      )}
+      {!!currentSelection.length && (
+        <>
+          <div className="w-px h-2.5 bg-bg-border flex-shrink-0" />
+          <button
+            type="button"
+            className="body-mini-b text-label-muted"
+            onClick={clearSelection}
+          >
+            <Trans>Clear ranges</Trans>
+          </button>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default memo(SelectionHint);

client/src/components/Code/CodeFullSelectable/index.tsx

@@ -23,6 +23,7 @@ import { getSelectionLines } from '../../../utils';
 import RefsDefsPopup from '../../RefsDefsPopup';
 import SelectionPopup from '../CodeFull/SelectionPopup';
 import CodeContainer from './CodeContainer';
+import SelectionHint from './SelectionHint';
 
 type Props = {
   code: string;
@@ -322,6 +323,12 @@ const CodeFullSelectable = ({
           selectedLines={selectionPopupData?.selectedLines}
         />
       )}
+      {isEditingRanges && (
+        <SelectionHint
+          currentSelection={currentSelection}
+          setCurrentSelection={setCurrentSelection}
+        />
+      )}
     </div>
   );
 };

client/src/icons/File.tsx

@@ -0,0 +1,14 @@
+import IconWrapper from './Wrapper';
+
+const RawIcon = (
+  <svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3 4.5C3 2.84315 4.34315 1.5 6 1.5H9.12868C9.72542 1.5 10.2977 1.73705 10.7197 2.15901L10.4687 2.40996L10.7197 2.15901L14.341 5.78033C14.7629 6.20229 15 6.77458 15 7.37132V13.5C15 15.1569 13.6569 16.5 12 16.5H6C4.34315 16.5 3 15.1569 3 13.5V4.5ZM9 3H6C5.17157 3 4.5 3.67157 4.5 4.5V13.5C4.5 14.3284 5.17157 15 6 15H12C12.8284 15 13.5 14.3284 13.5 13.5V7.5H11.25C10.0074 7.5 9 6.49264 9 5.25V3ZM12.4393 6H11.25C10.8358 6 10.5 5.66421 10.5 5.25V4.06066L12.4393 6Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default IconWrapper(RawIcon);

client/src/icons/Range.tsx

@@ -0,0 +1,18 @@
+import IconWrapper from './Wrapper';
+
+const RawIcon = (
+  <svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M1.5 8.37205V5.04223C1.5 4.41522 2.18519 4.05027 2.67893 4.41429L4.93715 6.0792C5.35428 6.38674 5.35428 7.02755 4.93715 7.33509L2.67893 9C2.18519 9.36402 1.5 8.99906 1.5 8.37205Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6.75008 4.5C6.75008 4.08579 7.08586 3.75 7.50008 3.75H15.7501C16.1643 3.75 16.5001 4.08579 16.5001 4.5C16.5001 4.91421 16.1643 5.25 15.7501 5.25H7.50008C7.08586 5.25 6.75008 4.91421 6.75008 4.5ZM6.75008 9C6.75008 8.58579 7.08586 8.25 7.50008 8.25H12.7501C13.1643 8.25 13.5001 8.58579 13.5001 9C13.5001 9.41421 13.1643 9.75 12.7501 9.75H7.50008C7.08586 9.75 6.75008 9.41421 6.75008 9ZM6.75008 13.5C6.75008 13.0858 7.08586 12.75 7.50008 12.75H15.7501C16.1643 12.75 16.5001 13.0858 16.5001 13.5C16.5001 13.9142 16.1643 14.25 15.7501 14.25H7.50008C7.08586 14.25 6.75008 13.9142 6.75008 13.5Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default IconWrapper(RawIcon);

client/src/icons/index.ts

@@ -25,6 +25,7 @@ export { default as DocumentsIcon } from './Documents';
 export { default as DoorOutIcon } from './DoorOut';
 export { default as EyeCutIcon } from './EyeCut';
 export { default as FolderIcon } from './Folder';
+export { default as FileIcon } from './File';
 export { default as FileWithSparksIcon } from './FileWithSparks';
 export { default as GitHubLogo } from './GitHubIcon';
 export { default as GlobeIcon } from './Globe';
@@ -42,6 +43,7 @@ export { default as MoreHorizontalIcon } from './MoreHorizontal';
 export { default as PencilIcon } from './Pencil';
 export { default as PersonIcon } from './Person';
 export { default as PlusSignIcon } from './PlusSign';
+export { default as RangeIcon } from './Range';
 export { default as RefIcon } from './Ref';
 export { default as RefreshIcon } from './Refresh';
 export { default as RegexIcon } from './Regex';

client/src/locales/en.json

@@ -621,5 +621,7 @@
 	"Create ranges": "Create ranges",
 	"# tokens_one": "token",
 	"# tokens_other": "tokens",
-	"Edit ranges": "Edit ranges"
+	"Edit ranges": "Edit ranges",
+	"The whole file will be used as context.": "The whole file will be used as context.",
+	"Selected ranges will be used as context.": "Selected ranges will be used as context."
 }

client/src/locales/es.json

@@ -617,5 +617,7 @@
 	"Create ranges": "Crear rangos",
 	"# tokens_onw": "ficha",
 	"# tokens_other": "fichas",
-	"Edit ranges": "Editar rangos"
+	"Edit ranges": "Editar rangos",
+	"The whole file will be used as context.": "Todo el archivo se utilizará como contexto.",
+	"Selected ranges will be used as context.": "Los rangos seleccionados se utilizarán como contexto."
 }

client/src/locales/it.json

@@ -583,5 +583,7 @@
 	"Create ranges": "Crea gamme",
 	"# tokens_one": "token",
 	"# tokens_other": "token",
-	"Edit ranges": "Modifica intervalli"
+	"Edit ranges": "Modifica intervalli",
+	"The whole file will be used as context.": "L'intero file verrà utilizzato come contesto.",
+	"Selected ranges will be used as context.": "Gli intervalli selezionati verranno utilizzati come contesto."
 }

client/src/locales/ja.json

@@ -604,5 +604,7 @@
 	"Create ranges": "範囲を作成します",
 	"# tokens_one": "トークン",
 	"# tokens_other": "トークン",
-	"Edit ranges": "編集範囲"
+	"Edit ranges": "編集範囲",
+	"The whole file will be used as context.": "ファイル全体がコンテキストとして使用されます。",
+	"Selected ranges will be used as context.": "選択した範囲はコンテキストとして使用されます。"
 }

client/src/locales/zh-CN.json

@@ -613,5 +613,7 @@
 	"Create ranges": "创建范围",
 	"# tokens_one": "代币",
 	"# tokens_other": "代币",
-	"Edit ranges": "编辑范围"
+	"Edit ranges": "编辑范围",
+	"The whole file will be used as context.": "整个文件将用作上下文。",
+	"Selected ranges will be used as context.": "选定的范围将用作上下文。"
 }