move the group of new tab (rightmost position when click + on tab bar…

…) to the rightmost position

src/background.ts

@@ -4,6 +4,7 @@ import { DEFAULT_GROUP, DEFAULT_PROMPT, getStorage, setStorage } from "./utils";
 chrome.runtime.onInstalled.addListener((details) => {
   if (details.reason === chrome.runtime.OnInstalledReason.INSTALL) {
     setStorage<boolean>("isOn", true);
+    setStorage<boolean>("isAutoPosition", false);
     setStorage<string[]>("types", DEFAULT_GROUP);
     setStorage<string>("prompt", DEFAULT_PROMPT);
   }
@@ -120,6 +121,17 @@ async function processTabAndGroup(tab: chrome.tabs.Tab, types: any) {
   if (groupId !== undefined) {
     // Existing group is valid, add tab to this group.
     await chrome.tabs.group({ tabIds: tab.id, groupId });
+
+    const isAutoPosition = await getStorage<boolean>("isAutoPosition");
+
+    const currentWindowTabs = await chrome.tabs.query({
+      windowId: tab.windowId,
+    });
+    const isRightmost =
+      tab.index == Math.max(...currentWindowTabs.map((tab) => tab.index));
+    if (isAutoPosition && isRightmost) {
+      await chrome.tabGroups.move(groupId, { index: -1 });
+    }
   } else {
     // If no valid group is found, create a new group for this type
     await createGroupWithTitle(tab.id, type);

src/popup.tsx

@@ -11,12 +11,16 @@ const Popup = () => {
   const [openAIKey, setOpenAIKey] = useState<string | undefined>("");
   const [types, setTypes] = useState<string[]>([]);
   const [isOn, setIsOn] = useState<boolean | undefined>(true);
+  const [isAutoPosition, setIsAutoPosition] = useState<boolean | undefined>(
+    false
+  );
   const [newType, setNewType] = useState<string>("");
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
   useEffect(() => {
     getStorage<string>("openai_key").then(setOpenAIKey);
     getStorage<boolean>("isOn").then(setIsOn);
+    getStorage<boolean>("isAutoPosition").then(setIsAutoPosition);
     getStorage<string[]>("types").then((types) => {
       if (!types) {
         setTypes(DEFAULT_GROUP);
@@ -59,6 +63,13 @@ const Popup = () => {
     });
   };
 
+  const enableAutoPosition = () => {
+    setIsAutoPosition((isAutoGroupPosition) => {
+      setStorage("isAutoPosition", !isAutoPosition);
+      return !isAutoPosition;
+    });
+  };
+
   const ungroup = async () => {
     try {
       const tabs = await chrome.tabs.query({ currentWindow: true });
@@ -201,6 +212,23 @@ const Popup = () => {
           Allow automatic grouping
         </span>
       </div>
+
+      <div className="flex items-center mt-2">
+        <label className="relative inline-flex cursor-pointer items-center">
+          <input
+            id="autoPosition"
+            type="checkbox"
+            checked={isAutoPosition}
+            className="peer sr-only"
+            onClick={enableAutoPosition}
+          />
+          <label htmlFor="autoPosition" className="hidden"></label>
+          <div className="peer h-6 w-11 rounded-full border bg-slate-200 after:absolute after:left-[2px] after:top-0.5 after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-primary peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-green-300"></div>
+        </label>
+        <span className="ml-3 text-gray-900 text-sm">
+          Allow automatic position
+        </span>
+      </div>
     </div>
   );
 };