feat: Pin issue of current active tab to the top

Author: CrawlerCode

src/components/issues/IssuesList.tsx

@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import clsx from "clsx";
 import { Fragment, useState } from "react";
 import { FormattedMessage } from "react-intl";
+import useActiveRedmineTab from "../../hooks/useActiveRedmineTab";
 import useIssuePriorities from "../../hooks/useIssuePriorities";
 import useMyProjectRoles from "../../hooks/useMyProjectRoles";
 import useMyProjects from "../../hooks/useMyProjects";
@@ -35,19 +36,27 @@ type PropTypes = {
 const IssuesList = ({ issues: rawIssues, issuePriorities, projectVersions, issuesData: { data: issuesData, setData: setIssuesData }, onSearchInProject }: PropTypes) => {
   const { settings } = useSettings();
 
+  const activeTab = useActiveRedmineTab();
+
   const myUser = useMyUser();
   const projects = useMyProjects();
   const projectRoles = useMyProjectRoles([...new Set(rawIssues.map((i) => i.project.id))]);
-  const groupedIssues = getGroupedIssues(getSortedIssues(rawIssues, settings.style.sortIssuesByPriority ? issuePriorities.data : [], issuesData), projectVersions?.data ?? {}, issuesData, settings);
+  const groupedIssues = getGroupedIssues({
+    issues: getSortedIssues(rawIssues, settings.style.sortIssuesByPriority ? issuePriorities.data : [], issuesData),
+    projectVersions: projectVersions?.data ?? {},
+    issuesData,
+    settings,
+    activeTabIssueId: activeTab?.data?.type === "issue" ? activeTab?.data?.id : undefined,
+  });
 
   const [createIssue, setCreateIssue] = useState<number | undefined>(undefined);
 
   return (
     <>
-      {groupedIssues.map(({ type, project: projectRef, versions, groups }) => {
+      {groupedIssues.map(({ id, project: projectRef, versions, groups }) => {
         const project: TProject | TReference | undefined = projects.data?.find((p) => p.id === projectRef?.id) ?? projectRef;
         return (
-          <Fragment key={type}>
+          <Fragment key={id}>
             {project && (
               <div
                 className={clsx("flex justify-between gap-x-2", {

src/hooks/useActiveRedmineTab.ts

@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+import useSettings from "./useSettings";
+
+function useActiveRedmineTab() {
+  const { settings } = useSettings();
+  const [currentUrl, setCurrentUrl] = useState<
+    | {
+        url: string;
+        data?: {
+          type: "issue";
+          id: number;
+        };
+      }
+    | undefined
+  >();
+
+  useEffect(() => {
+    const onActivated = () => {
+      (async () => {
+        const tabs = await chrome.tabs.query({ active: true, lastFocusedWindow: true, url: `${settings.redmineURL}/*` });
+        const currentTab = tabs[0];
+        if (currentTab?.url) {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const [_, issueId] = currentTab.url.match(new RegExp(`^${settings.redmineURL}/issues/(\\d+)$`)) || [];
+          if (issueId) {
+            setCurrentUrl({ url: currentTab.url, data: { type: "issue", id: Number(issueId) } });
+          } else {
+            setCurrentUrl({ url: currentTab.url });
+          }
+        } else {
+          setCurrentUrl(undefined);
+        }
+      })();
+    };
+
+    // Initial load
+    onActivated();
+
+    // Listen to tab change
+    chrome.tabs.onActivated.addListener(onActivated);
+    return () => chrome.tabs.onActivated.removeListener(onActivated);
+  }, [settings.redmineURL]);
+
+  return currentUrl;
+}
+
+export default useActiveRedmineTab;

src/lang/de.json

@@ -136,6 +136,7 @@
   "settings.style.show-issues-priority.title": "Tickets Priorität anzeigen",
   "settings.style.sort-issues-by-priority.title": "Tickets nach Priorität sortieren",
   "settings.style.pin-tracked-issues.title": "Aktive Tickets oben anheften",
+  "settings.style.pin-active-tab-issue.title": "Ticket des aktiven Tabs oben anheften",
   "settings.style.show-tooltips.title": "Tooltips anzeigen",
   "settings.style.time-format.title": "Format für Zeitspannen",
   "settings.save-settings": "Einstellungen speichern",

src/lang/en.json

@@ -136,6 +136,7 @@
   "settings.style.show-issues-priority.title": "Show issues priority",
   "settings.style.sort-issues-by-priority.title": "Sort issues by priority",
   "settings.style.pin-tracked-issues.title": "Pin tracked issues to the top",
+  "settings.style.pin-active-tab-issue.title": "Pin issue of active tab to the top",
   "settings.style.show-tooltips.title": "Show tooltips",
   "settings.style.time-format.title": "Time span format",
   "settings.save-settings": "Save settings",

src/lang/ru.json

@@ -136,6 +136,7 @@
   "settings.style.show-issues-priority.title": "Показывать приоритет задач",
   "settings.style.sort-issues-by-priority.title": "Сортировать задачи по приоритету",
   "settings.style.pin-tracked-issues.title": "Pin tracked issues to the top",
+  "settings.style.pin-active-tab-issue.title": "Pin issue of active tab to the top",
   "settings.style.show-tooltips.title": "Показывать всплывающие подсказки",
   "settings.style.time-format.title": "Формат времени",
   "settings.save-settings": "Сохранить настройки",

src/manifest.json

@@ -20,7 +20,9 @@
         "open_in_tab": false
     },
     "permissions": [
-        "storage"
+        "storage",
+        "tabs",
+        "activeTab"
     ],
     "host_permissions": [
         "http://*/*",

src/pages/SettingsPage.tsx

@@ -240,6 +240,7 @@ const SettingsPage = () => {
                     <Field type="checkbox" name="style.showIssuesPriority" title={formatMessage({ id: "settings.style.show-issues-priority.title" })} as={CheckBox} />
                     <Field type="checkbox" name="style.sortIssuesByPriority" title={formatMessage({ id: "settings.style.sort-issues-by-priority.title" })} as={CheckBox} />
                     <Field type="checkbox" name="style.pinTrackedIssues" title={formatMessage({ id: "settings.style.pin-tracked-issues.title" })} as={CheckBox} />
+                    <Field type="checkbox" name="style.pinActiveTabIssue" title={formatMessage({ id: "settings.style.pin-active-tab-issue.title" })} as={CheckBox} />
                     <Field type="checkbox" name="style.showTooltips" title={formatMessage({ id: "settings.style.show-tooltips.title" })} as={CheckBox} />
                     <Field
                       name="style.timeFormat"

src/provider/SettingsProvider.tsx

@@ -20,6 +20,7 @@ export type Settings = {
     showIssuesPriority: boolean;
     sortIssuesByPriority: boolean;
     pinTrackedIssues: boolean;
+    pinActiveTabIssue: boolean;
     showTooltips: boolean;
     timeFormat: "decimal" | "minutes";
   };
@@ -43,6 +44,7 @@ const defaultSettings: Settings = {
     showIssuesPriority: true,
     sortIssuesByPriority: true,
     pinTrackedIssues: false,
+    pinActiveTabIssue: true,
     showTooltips: true,
     timeFormat: "decimal",
   },

src/utils/issue.ts

@@ -2,6 +2,7 @@ import { IssuesData } from "../components/issues/IssuesList";
 import { Settings } from "../provider/SettingsProvider";
 import { TIssue, TIssuePriority, TReference, TVersion } from "../types/redmine";
 
+type GroupId = "active-tab" | "active" | "paused" | `${number}`;
 type GroupType = "pinned" | "version" | "no-version";
 
 type IssueGroup = {
@@ -11,7 +12,7 @@ type IssueGroup = {
 };
 
 type GroupedIssues = {
-  type: string;
+  id: GroupId;
   project?: TReference;
   versions: TVersion[];
   groups: {
@@ -24,7 +25,7 @@ type GroupedIssues = {
 type GroupedIssuesHelper = Record<
   number | string,
   {
-    type: string;
+    id: GroupId;
     // The project reference
     project?: TReference;
     // Pinned issues
@@ -72,13 +73,36 @@ export const getSortedIssues = (issues: TIssue[], issuePriorities: TIssuePriorit
  * - group pinned issues
  * - group issues by version
  */
-export const getGroupedIssues = (issues: TIssue[], projectVersions: Record<number, TVersion[]>, issuesData: IssuesData, settings: Settings): GroupedIssues => {
+export const getGroupedIssues = ({
+  issues,
+  projectVersions,
+  issuesData,
+  settings,
+  activeTabIssueId,
+}: {
+  issues: TIssue[];
+  projectVersions: Record<number, TVersion[]>;
+  issuesData: IssuesData;
+  settings: Settings;
+  activeTabIssueId?: number;
+}): GroupedIssues => {
   const grouped = issues.reduce((result: GroupedIssuesHelper, issue) => {
+    if (settings.style.pinActiveTabIssue && activeTabIssueId && issue.id === activeTabIssueId) {
+      result["active-tab"] = {
+        id: "active-tab",
+        pinnedIssues: [],
+        versions: {},
+        issues: [issue],
+        sort: -3,
+      };
+      return result;
+    }
+
     if (settings.style.pinTrackedIssues) {
       if (issuesData[issue.id]?.active) {
         if (!("active" in result)) {
           result["active"] = {
-            type: "active",
+            id: "active",
             pinnedIssues: [],
             versions: {},
             issues: [],
@@ -93,7 +117,7 @@ export const getGroupedIssues = (issues: TIssue[], projectVersions: Record<numbe
       if (issuesData[issue.id]?.time) {
         if (!("paused" in result)) {
           result["paused"] = {
-            type: "paused",
+            id: "paused",
             pinnedIssues: [],
             versions: {},
             issues: [],
@@ -108,7 +132,7 @@ export const getGroupedIssues = (issues: TIssue[], projectVersions: Record<numbe
 
     if (!(issue.project.id in result)) {
       result[issue.project.id] = {
-        type: issue.project.id.toString(),
+        id: issue.project.id.toString() as GroupId,
         project: issue.project,
         pinnedIssues: [],
         versions: {},
@@ -149,9 +173,9 @@ export const getGroupedIssues = (issues: TIssue[], projectVersions: Record<numbe
 
   return Object.values(grouped)
     .sort((a, b) => a.sort - b.sort)
-    .map(({ type, project, pinnedIssues, versions, issues }) => ({
-      type,
-      project: project,
+    .map(({ id, project, pinnedIssues, versions, issues }) => ({
+      id,
+      project,
       versions: (project ? projectVersions[project.id] : undefined) ?? [],
       groups: [
         ...(pinnedIssues.length > 0