From 45218b66fdb7ff54d043f3d505114f6bd49671a8 Mon Sep 17 00:00:00 2001
From: Ronaldo93 <51114190+Ronaldo93@users.noreply.github.com>
Date: Tue, 14 Oct 2025 05:37:57 +0000
Subject: [PATCH 01/18] feat(ui): add (non-working) trello provider button to
 the providers list

---
 .../issue-provider-setup-overview.component.html          | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/app/features/issue-panel/issue-provider-setup-overview/issue-provider-setup-overview.component.html b/src/app/features/issue-panel/issue-provider-setup-overview/issue-provider-setup-overview.component.html
index e2dae3a9f..d30a6cf28 100644
--- a/src/app/features/issue-panel/issue-provider-setup-overview/issue-provider-setup-overview.component.html
+++ b/src/app/features/issue-panel/issue-provider-setup-overview/issue-provider-setup-overview.component.html
@@ -33,6 +33,14 @@
     <mat-icon svgIcon="jira"></mat-icon>
     <span>Jira</span>
   </button>
+  <button
+    mat-raised-button
+    (click)="openSetupDialog('TRELLO')"
+  >
+    <!-- TODO: implement Trello icon - not available for now -->
+    <!-- <mat-icon svgIcon="trello"></mat-icon> -->
+    <span>Trello</span>
+  </button>
   <button
     mat-raised-button
     (click)="openSetupDialog('GITHUB')"

From e7f0980338ac05d21c1ca6a8eb27a9abfed47c29 Mon Sep 17 00:00:00 2001
From: Ronaldo93 <51114190+Ronaldo93@users.noreply.github.com>
Date: Tue, 14 Oct 2025 13:10:16 +0000
Subject: [PATCH 02/18] feat(trello_integration): non-functional stub for
 trello configuration.

---
 src/app/features/issue/issue.model.ts              | 14 +++++++++++++-
 .../issue/providers/trello/trello.model.ts         | 13 +++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 src/app/features/issue/providers/trello/trello.model.ts

diff --git a/src/app/features/issue/issue.model.ts b/src/app/features/issue/issue.model.ts
index 0bc724b03..495c15510 100644
--- a/src/app/features/issue/issue.model.ts
+++ b/src/app/features/issue/issue.model.ts
@@ -15,6 +15,7 @@ import { GiteaCfg } from './providers/gitea/gitea.model';
 import { GiteaIssue } from './providers/gitea/gitea-issue.model';
 import { RedmineCfg } from './providers/redmine/redmine.model';
 import { RedmineIssue } from './providers/redmine/redmine-issue.model';
+import { TrelloCfg } from './providers/trello/trello.model';
 import { EntityState } from '@ngrx/entity';
 import {
   CalendarProviderCfg,
@@ -26,6 +27,8 @@ export interface BaseIssueProviderCfg {
   isEnabled: boolean;
 }
 
+// TODO: trello is currently non-functional stub
+// qq feat(providerkey): add non-functional stub trello provider
 export type IssueProviderKey =
   | 'JIRA'
   | 'GITHUB'
@@ -34,6 +37,7 @@ export type IssueProviderKey =
   | 'ICAL'
   | 'OPEN_PROJECT'
   | 'GITEA'
+  | 'TRELLO'
   | 'REDMINE';
 
 export type IssueIntegrationCfg =
@@ -60,6 +64,7 @@ export interface IssueIntegrationCfgs {
   CALDAV?: CaldavCfg;
   CALENDAR?: CalendarProviderCfg;
   OPEN_PROJECT?: OpenProjectCfg;
+  TRELLO?: TrelloCfg;
   GITEA?: GiteaCfg;
   REDMINE?: RedmineCfg;
 }
@@ -172,6 +177,11 @@ export interface IssueProviderCalendar extends IssueProviderBase, CalendarProvid
   issueProviderKey: 'ICAL';
 }
 
+// trello is currently a non-functional stub
+export interface IssueProviderTrello extends IssueProviderBase, TrelloCfg {
+  issueProviderKey: 'TRELLO';
+}
+
 export type IssueProvider =
   | IssueProviderJira
   | IssueProviderGithub
@@ -198,4 +208,6 @@ export type IssueProviderTypeMap<T extends IssueProviderKey> = T extends 'JIRA'
               ? IssueProviderCaldav
               : T extends 'ICAL'
                 ? IssueProviderCalendar
-                : never;
+                : T extends 'TRELLO'
+                  ? IssueProviderTrello
+                  : never;
diff --git a/src/app/features/issue/providers/trello/trello.model.ts b/src/app/features/issue/providers/trello/trello.model.ts
new file mode 100644
index 000000000..77e23e10a
--- /dev/null
+++ b/src/app/features/issue/providers/trello/trello.model.ts
@@ -0,0 +1,13 @@
+/**
+ * Trello is currently a non-functional stub
+ * Configuration for setting up trello
+ */
+
+import { BaseIssueProviderCfg } from '../../issue.model';
+
+// TODO: currently setting this up for connecting trello first, then figure things out later
+export interface TrelloCfg extends BaseIssueProviderCfg {
+  isEnabled: boolean;
+  token: string | null;
+  boardId: string | null;
+}

From 4902c9874dbd37b5b5c92e1e07787fc67ffdc396 Mon Sep 17 00:00:00 2001
From: Ronaldo93 <51114190+Ronaldo93@users.noreply.github.com>
Date: Tue, 14 Oct 2025 13:37:37 +0000
Subject: [PATCH 03/18] fix: lint error.

---
 src/app/features/issue/issue.model.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/features/issue/issue.model.ts b/src/app/features/issue/issue.model.ts
index 495c15510..3e650ce44 100644
--- a/src/app/features/issue/issue.model.ts
+++ b/src/app/features/issue/issue.model.ts
@@ -190,7 +190,8 @@ export type IssueProvider =
   | IssueProviderCalendar
   | IssueProviderOpenProject
   | IssueProviderGitea
-  | IssueProviderRedmine;
+  | IssueProviderRedmine
+  | IssueProviderTrello;
 
 export type IssueProviderTypeMap<T extends IssueProviderKey> = T extends 'JIRA'
   ? IssueProviderJira

From 271ebee73d00bd9543bca73d03279239686651e9 Mon Sep 17 00:00:00 2001
From: Ronaldo93 <51114190+Ronaldo93@users.noreply.github.com>
Date: Wed, 15 Oct 2025 10:59:19 +0000
Subject: [PATCH 04/18] feat(trello): wip - integrate trello with super
 productivity

---
 src/app/features/issue/issue.const.ts         |  11 +
 src/app/features/issue/issue.model.ts         |   3 +
 src/app/features/issue/issue.service.ts       |   5 +
 .../trello/is-trello-enabled.util.ts          |   3 +
 .../providers/trello/trello-api.service.ts    | 750 ++++++++++++++++++
 .../trello-common-interfaces.service.ts       | 182 +++++
 .../providers/trello/trello-issue-map.util.ts |   0
 .../providers/trello/trello-issue.model.ts    |  13 +
 .../issue/providers/trello/trello.const.ts    |  48 ++
 src/assets/icons/trello.svg                   |   5 +
 10 files changed, 1020 insertions(+)
 create mode 100644 src/app/features/issue/providers/trello/is-trello-enabled.util.ts
 create mode 100644 src/app/features/issue/providers/trello/trello-api.service.ts
 create mode 100644 src/app/features/issue/providers/trello/trello-common-interfaces.service.ts
 create mode 100644 src/app/features/issue/providers/trello/trello-issue-map.util.ts
 create mode 100644 src/app/features/issue/providers/trello/trello-issue.model.ts
 create mode 100644 src/app/features/issue/providers/trello/trello.const.ts
 create mode 100644 src/assets/icons/trello.svg

diff --git a/src/app/features/issue/issue.const.ts b/src/app/features/issue/issue.const.ts
index 2391be884..efca8c83e 100644
--- a/src/app/features/issue/issue.const.ts
+++ b/src/app/features/issue/issue.const.ts
@@ -29,6 +29,10 @@ import {
   CALENDAR_FORM_CFG_NEW,
   DEFAULT_CALENDAR_CFG,
 } from './providers/calendar/calendar.const';
+import {
+  DEFAULT_TRELLO_CFG,
+  TRELLO_CONFIG_FORM_SECTION,
+} from './providers/trello/trello.const';
 
 export const DELAY_BEFORE_ISSUE_POLLING = 8000;
 
@@ -40,6 +44,7 @@ export const OPEN_PROJECT_TYPE: IssueProviderKey = 'OPEN_PROJECT';
 export const GITEA_TYPE: IssueProviderKey = 'GITEA';
 export const REDMINE_TYPE: IssueProviderKey = 'REDMINE';
 export const ICAL_TYPE: IssueProviderKey = 'ICAL';
+export const TRELLO_TYPE: IssueProviderKey = 'TRELLO';
 
 export const ISSUE_PROVIDER_TYPES: IssueProviderKey[] = [
   GITLAB_TYPE,
@@ -49,6 +54,7 @@ export const ISSUE_PROVIDER_TYPES: IssueProviderKey[] = [
   ICAL_TYPE,
   OPEN_PROJECT_TYPE,
   GITEA_TYPE,
+  TRELLO_TYPE,
   REDMINE_TYPE,
 ] as const;
 
@@ -60,6 +66,7 @@ export const ISSUE_PROVIDER_ICON_MAP = {
   [ICAL_TYPE]: 'calendar',
   [OPEN_PROJECT_TYPE]: 'open_project',
   [GITEA_TYPE]: 'gitea',
+  [TRELLO_TYPE]: 'trello',
   [REDMINE_TYPE]: 'redmine',
 } as const;
 
@@ -71,6 +78,7 @@ export const ISSUE_PROVIDER_HUMANIZED = {
   [ICAL_TYPE]: 'Calendar',
   [OPEN_PROJECT_TYPE]: 'OpenProject',
   [GITEA_TYPE]: 'Gitea',
+  [TRELLO_TYPE]: 'Trello',
   [REDMINE_TYPE]: 'Redmine',
 } as const;
 
@@ -82,6 +90,7 @@ export const DEFAULT_ISSUE_PROVIDER_CFGS = {
   [ICAL_TYPE]: DEFAULT_CALENDAR_CFG,
   [OPEN_PROJECT_TYPE]: DEFAULT_OPEN_PROJECT_CFG,
   [GITEA_TYPE]: DEFAULT_GITEA_CFG,
+  [TRELLO_TYPE]: DEFAULT_TRELLO_CFG,
   [REDMINE_TYPE]: DEFAULT_REDMINE_CFG,
 } as const;
 
@@ -93,6 +102,7 @@ export const ISSUE_PROVIDER_FORM_CFGS_MAP = {
   [ICAL_TYPE]: CALENDAR_FORM_CFG_NEW as any,
   [OPEN_PROJECT_TYPE]: OPEN_PROJECT_CONFIG_FORM_SECTION,
   [GITEA_TYPE]: GITEA_CONFIG_FORM_SECTION,
+  [TRELLO_TYPE]: TRELLO_CONFIG_FORM_SECTION,
   [REDMINE_TYPE]: REDMINE_CONFIG_FORM_SECTION,
 } as const;
 
@@ -116,6 +126,7 @@ export const ISSUE_STR_MAP: { [key: string]: { ISSUE_STR: string; ISSUES_STR: st
       ISSUES_STR: T.F.OPEN_PROJECT.ISSUE_STRINGS.ISSUES_STR,
     },
     [GITEA_TYPE]: DEFAULT_ISSUE_STRS,
+    [TRELLO_TYPE]: DEFAULT_ISSUE_STRS,
     [REDMINE_TYPE]: DEFAULT_ISSUE_STRS,
   } as const;
 
diff --git a/src/app/features/issue/issue.model.ts b/src/app/features/issue/issue.model.ts
index 3e650ce44..abe8579a0 100644
--- a/src/app/features/issue/issue.model.ts
+++ b/src/app/features/issue/issue.model.ts
@@ -48,6 +48,7 @@ export type IssueIntegrationCfg =
   | CalendarProviderCfg
   | OpenProjectCfg
   | GiteaCfg
+  | TrelloCfg
   | RedmineCfg;
 
 export enum IssueLocalState {
@@ -109,6 +110,8 @@ export type IssueDataReducedMap = {
                   : never;
 };
 
+// TODO: add issue model to the IssueDataReducedMap
+
 export interface SearchResultItem<
   T extends keyof IssueDataReducedMap = keyof IssueDataReducedMap,
 > {
diff --git a/src/app/features/issue/issue.service.ts b/src/app/features/issue/issue.service.ts
index be9ce5e77..27191e99c 100644
--- a/src/app/features/issue/issue.service.ts
+++ b/src/app/features/issue/issue.service.ts
@@ -20,6 +20,7 @@ import {
   ISSUE_STR_MAP,
   JIRA_TYPE,
   OPEN_PROJECT_TYPE,
+  TRELLO_TYPE,
   REDMINE_TYPE,
 } from './issue.const';
 import { TaskService } from '../tasks/task.service';
@@ -56,6 +57,7 @@ import typia from 'typia';
 export class IssueService {
   private _taskService = inject(TaskService);
   private _jiraCommonInterfacesService = inject(JiraCommonInterfacesService);
+  private _trelloCommonInterfacesService = inject(TrelloCommonInterfacesService);
   private _githubCommonInterfacesService = inject(GithubCommonInterfacesService);
   private _gitlabCommonInterfacesService = inject(GitlabCommonInterfacesService);
   private _caldavCommonInterfaceService = inject(CaldavCommonInterfacesService);
@@ -80,6 +82,9 @@ export class IssueService {
     [GITEA_TYPE]: this._giteaInterfaceService,
     [REDMINE_TYPE]: this._redmineInterfaceService,
     [ICAL_TYPE]: this._calendarCommonInterfaceService,
+
+    // trello
+    [TRELLO_TYPE]: this._trelloCommonInterfacesService,
   };
 
   ISSUE_REFRESH_MAP: {
diff --git a/src/app/features/issue/providers/trello/is-trello-enabled.util.ts b/src/app/features/issue/providers/trello/is-trello-enabled.util.ts
new file mode 100644
index 000000000..2f6399314
--- /dev/null
+++ b/src/app/features/issue/providers/trello/is-trello-enabled.util.ts
@@ -0,0 +1,3 @@
+import { TrelloCfg } from './trello.model';
+
+export const isTrelloEnabled = (cfg: TrelloCfg): boolean => cfg.isEnabled;
diff --git a/src/app/features/issue/providers/trello/trello-api.service.ts b/src/app/features/issue/providers/trello/trello-api.service.ts
new file mode 100644
index 000000000..78a0849fe
--- /dev/null
+++ b/src/app/features/issue/providers/trello/trello-api.service.ts
@@ -0,0 +1,750 @@
+import { inject, Injectable } from '@angular/core';
+import { nanoid } from 'nanoid';
+import { ChromeExtensionInterfaceService } from '../../../../core/chrome-extension-interface/chrome-extension-interface.service';
+import {
+  JIRA_ADDITIONAL_ISSUE_FIELDS,
+  JIRA_MAX_RESULTS,
+  JIRA_REQUEST_TIMEOUT_DURATION,
+} from './jira.const';
+import {
+  mapIssueResponse,
+  mapIssuesResponse,
+  mapResponse,
+  mapToSearchResults,
+  mapToSearchResultsForJQL,
+  mapTransitionResponse,
+} from './jira-issue-map.util';
+import {
+  JiraOriginalStatus,
+  JiraOriginalTransition,
+  JiraOriginalUser,
+} from './jira-api-responses';
+import { JiraCfg } from './jira.model';
+import { IPC } from '../../../../../../electron/shared-with-frontend/ipc-events.const';
+import { SnackService } from '../../../../core/snack/snack.service';
+import { HANDLED_ERROR_PROP_STR, IS_ELECTRON } from '../../../../app.constants';
+import { Observable, of, throwError } from 'rxjs';
+import { SearchResultItem } from '../../issue.model';
+import {
+  catchError,
+  concatMap,
+  finalize,
+  first,
+  mapTo,
+  shareReplay,
+  take,
+  timeoutWith,
+} from 'rxjs/operators';
+import { JiraIssue, JiraIssueReduced } from './jira-issue.model';
+import { BannerService } from '../../../../core/banner/banner.service';
+import { BannerId } from '../../../../core/banner/banner.model';
+import { T } from '../../../../t.const';
+import { stringify } from 'query-string';
+import { fromPromise } from 'rxjs/internal-compatibility';
+import { getErrorTxt } from '../../../../util/get-error-text';
+import { isOnline } from '../../../../util/is-online';
+import { GlobalProgressBarService } from '../../../../core-ui/global-progress-bar/global-progress-bar.service';
+import { IpcRendererEvent } from 'electron';
+import { SS } from '../../../../core/persistence/storage-keys.const';
+import { MatDialog } from '@angular/material/dialog';
+import { DialogPromptComponent } from '../../../../ui/dialog-prompt/dialog-prompt.component';
+import { stripTrailing } from '../../../../util/strip-trailing';
+import { IS_ANDROID_WEB_VIEW } from '../../../../util/is-android-web-view';
+import { formatJiraDate } from '../../../../util/format-jira-date';
+import { IssueLog } from '../../../../core/log';
+
+const BLOCK_ACCESS_KEY = 'SUP_BLOCK_JIRA_ACCESS';
+const API_VERSION = 'latest';
+
+interface JiraRequestLogItem {
+  transform: (res: any, cfg: any) => any;
+  requestInit: RequestInit;
+  timeoutId: number;
+  jiraCfg: JiraCfg;
+
+  resolve(res: any): Promise<void>;
+
+  reject(reason?: any): Promise<unknown>;
+}
+
+interface JiraRequestCfg {
+  pathname: string;
+  followAllRedirects?: boolean;
+  method?: 'GET' | 'POST' | 'PUT';
+  query?: {
+    [key: string]: string | boolean | number | string[];
+  };
+  transform?: (res: any, jiraCfg?: JiraCfg) => any;
+  body?: Record<string, unknown>;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TrelloApiService {
+  private _chromeExtensionInterfaceService = inject(ChromeExtensionInterfaceService);
+  private _globalProgressBarService = inject(GlobalProgressBarService);
+  private _snackService = inject(SnackService);
+  private _bannerService = inject(BannerService);
+  private _matDialog = inject(MatDialog);
+
+  private _requestsLog: { [key: string]: JiraRequestLogItem } = {};
+  private _isBlockAccess: boolean = !!sessionStorage.getItem(BLOCK_ACCESS_KEY);
+  private _isExtension: boolean = false;
+  private _isInterfacesReadyIfNeeded$: Observable<boolean> =
+    IS_ELECTRON || IS_ANDROID_WEB_VIEW
+      ? of(true).pipe()
+      : this._chromeExtensionInterfaceService.onReady$.pipe(
+          mapTo(true),
+          shareReplay(1),
+          timeoutWith(
+            500,
+            throwError({
+              [HANDLED_ERROR_PROP_STR]: 'Trello: Extension not installed or not ready',
+            }),
+          ),
+        );
+
+  constructor() {
+    // set up callback listener for electron
+    if (IS_ELECTRON) {
+      window.ea.on(IPC.JIRA_CB_EVENT, (ev: IpcRendererEvent, res: any) => {
+        this._handleResponse(res);
+      });
+    }
+
+    this._chromeExtensionInterfaceService.onReady$.subscribe(() => {
+      this._isExtension = true;
+      this._chromeExtensionInterfaceService.addEventListener(
+        'SP_JIRA_RESPONSE',
+        (ev: unknown, data: any) => {
+          this._handleResponse(data);
+        },
+      );
+    });
+  }
+
+  unblockAccess(): void {
+    this._isBlockAccess = false;
+    sessionStorage.removeItem(BLOCK_ACCESS_KEY);
+  }
+
+  search$(searchTermJQL: string, cfg: JiraCfg): Observable<SearchResultItem[]> {
+    return this._sendRequest$({
+      jiraReqCfg: {
+        pathname: 'search/jql',
+        followAllRedirects: true,
+        query: {
+          jql: searchTermJQL,
+          // fields: [
+          //   ...JIRA_ADDITIONAL_ISSUE_FIELDS,
+          //   ...(cfg.storyPointFieldId ? [cfg.storyPointFieldId] : []),
+          // ],
+        },
+        transform: mapToSearchResultsForJQL,
+        // NOTE: we pass the cfg as well to avoid race conditions
+      },
+      cfg,
+      suppressErrorSnack: true,
+    }).pipe(
+      // switchMap((res) =>
+      //   res.length > 0 ? of(res) : this.issuePicker$(searchTerm, cfg),
+      // ),
+      catchError((err) => {
+        const code = err?.error?.statusCode ?? err?.status ?? err?.error?.status;
+        if (code === 404) {
+          // Fallback for Server/DC: /search?jql=...
+          return this._sendRequest$({
+            jiraReqCfg: {
+              pathname: 'search',
+              followAllRedirects: true,
+              query: { jql: searchTermJQL },
+              transform: mapToSearchResultsForJQL,
+            },
+            cfg,
+          });
+        }
+        return throwError(() => err);
+      }),
+    );
+  }
+
+  issuePicker$(searchTerm: string, cfg: JiraCfg): Observable<SearchResultItem[]> {
+    const searchStr = `${searchTerm}`;
+
+    return this._sendRequest$({
+      jiraReqCfg: {
+        pathname: 'issue/picker',
+        followAllRedirects: true,
+        query: {
+          showSubTasks: true,
+          showSubTaskParent: true,
+          query: searchStr,
+          currentJQL: cfg.searchJqlQuery || '',
+        },
+        transform: mapToSearchResults,
+        // NOTE: we pass the cfg as well to avoid race conditions
+      },
+      cfg,
+    })
+      .pipe
+      // switchMap((res) =>
+      //   res.length > 0 ? of(res) : this.fallBackSearch$(searchTerm, cfg),
+      // ),
+      ();
+  }
+
+  listFields$(cfg: JiraCfg): Observable<any> {
+    return this._sendRequest$({
+      jiraReqCfg: {
+        pathname: 'field',
+      },
+      cfg,
+    });
+  }
+
+  findAutoImportIssues$(
+    cfg: JiraCfg,
+    isFetchAdditional?: boolean,
+    maxResults: number = JIRA_MAX_RESULTS,
+  ): Observable<JiraIssueReduced[]> {
+    const options = {
+      maxResults,
+      fields: [
+        ...JIRA_ADDITIONAL_ISSUE_FIELDS,
+        ...(cfg.storyPointFieldId ? [cfg.storyPointFieldId] : []),
+      ],
+    };
+    const searchQuery = cfg.autoAddBacklogJqlQuery;
+
+    if (!searchQuery) {
+      this._snackService.open({
+        type: 'ERROR',
+        msg: T.F.JIRA.S.NO_AUTO_IMPORT_JQL,
+      });
+      return throwError({
+        [HANDLED_ERROR_PROP_STR]: 'JiraApi: No search query for auto import',
+      });
+    }
+
+    return this._sendRequest$({
+      jiraReqCfg: {
+        transform: mapIssuesResponse as (res: any, cfg?: JiraCfg) => any,
+        pathname: 'search/jql',
+        method: 'POST',
+        body: {
+          ...options,
+          jql: searchQuery,
+        },
+      },
+      cfg,
+      suppressErrorSnack: true,
+    }).pipe(
+      catchError((err) => {
+        const code = err?.error?.statusCode ?? err?.status ?? err?.error?.status;
+        if (code === 401 || code === 403) return throwError(() => err);
+        // Fallback for Server/DC: POST /search with jql in body
+        return this._sendRequest$({
+          jiraReqCfg: {
+            transform: mapIssuesResponse as (res: any, cfg?: JiraCfg) => any,
+            pathname: 'search',
+            method: 'POST',
+            body: { ...options, jql: searchQuery },
+          },
+          cfg,
+        });
+      }),
+    );
+  }
+
+  getIssueById$(issueId: string, cfg: JiraCfg): Observable<JiraIssue> {
+    return this._getIssueById$(issueId, cfg, true);
+  }
+
+  getReducedIssueById$(issueId: string, cfg: JiraCfg): Observable<JiraIssueReduced> {
+    return this._getIssueById$(issueId, cfg, false);
+  }
+
+  getCurrentUser$(cfg: JiraCfg, isForce: boolean = false): Observable<JiraOriginalUser> {
+    return this._sendRequest$({
+      jiraReqCfg: {
+        pathname: `myself`,
+        transform: mapResponse,
+      },
+      cfg,
+      isForce,
+    });
+  }
+
+  listStatus$(cfg: JiraCfg): Observable<JiraOriginalStatus[]> {
+    return this._sendRequest$({
+      jiraReqCfg: {
+        pathname: `status`,
+        transform: mapResponse,
+      },
+      cfg,
+    });
+  }
+
+  getTransitionsForIssue$(
+    issueId: string,
+    cfg: JiraCfg,
+  ): Observable<JiraOriginalTransition[]> {
+    return this._sendRequest$({
+      jiraReqCfg: {
+        pathname: `issue/${issueId}/transitions`,
+        method: 'GET',
+        query: {
+          expand: 'transitions.fields',
+        },
+        transform: mapTransitionResponse,
+      },
+      cfg,
+    });
+  }
+
+  transitionIssue$(issueId: string, transitionId: string, cfg: JiraCfg): Observable<any> {
+    return this._sendRequest$({
+      jiraReqCfg: {
+        pathname: `issue/${issueId}/transitions`,
+        method: 'POST',
+        body: {
+          transition: {
+            id: transitionId,
+          },
+        },
+        transform: mapResponse,
+      },
+      cfg,
+    });
+  }
+
+  updateAssignee$(issueId: string, accountId: string, cfg: JiraCfg): Observable<any> {
+    return this._sendRequest$({
+      jiraReqCfg: {
+        pathname: `issue/${issueId}/assignee`,
+        method: 'PUT',
+        body: {
+          accountId,
+        },
+      },
+      cfg,
+    });
+  }
+
+  addWorklog$({
+    issueId,
+    started,
+    timeSpent,
+    comment,
+    cfg,
+  }: {
+    issueId: string;
+    started: string;
+    timeSpent: number;
+    comment: string;
+    cfg: JiraCfg;
+  }): Observable<any> {
+    const worklog = {
+      started: formatJiraDate(started),
+      timeSpentSeconds: Math.floor(timeSpent / 1000),
+      comment,
+    };
+    return this._sendRequest$({
+      jiraReqCfg: {
+        pathname: `issue/${issueId}/worklog`,
+        method: 'POST',
+        body: worklog,
+        transform: mapResponse,
+      },
+      cfg,
+    });
+  }
+
+  private _getIssueById$(
+    issueId: string,
+    cfg: JiraCfg,
+    isGetChangelog: boolean = false,
+  ): Observable<JiraIssue> {
+    return this._sendRequest$({
+      jiraReqCfg: {
+        transform: mapIssueResponse as (res: any, cfg?: JiraCfg) => any,
+        pathname: `issue/${issueId}`,
+        query: {
+          expand: isGetChangelog ? ['changelog', 'description'] : ['description'],
+        },
+      },
+      cfg,
+    });
+  }
+
+  // Complex Functions
+
+  // --------
+  private _isMinimalSettings(settings: JiraCfg): boolean {
+    return !!(
+      settings &&
+      settings.host &&
+      settings.userName &&
+      settings.password &&
+      (IS_ELECTRON || this._isExtension || IS_ANDROID_WEB_VIEW)
+    );
+  }
+
+  private _sendRequest$({
+    jiraReqCfg,
+    cfg,
+    isForce = false,
+    suppressErrorSnack = false,
+  }: {
+    jiraReqCfg: JiraRequestCfg;
+    cfg: JiraCfg;
+    isForce?: boolean;
+    suppressErrorSnack?: boolean;
+  }): Observable<any> {
+    return this._isInterfacesReadyIfNeeded$.pipe(
+      take(1),
+      concatMap(() => {
+        // assign uuid to request to know which responsive belongs to which promise
+        const requestId = `${jiraReqCfg.pathname}__${
+          jiraReqCfg.method || 'GET'
+        }__${nanoid()}`;
+
+        if (!isOnline()) {
+          this._snackService.open({
+            type: 'CUSTOM',
+            msg: T.G.NO_CON,
+            ico: 'cloud_off',
+          });
+          return throwError({ [HANDLED_ERROR_PROP_STR]: 'Jira Offline ' + requestId });
+        }
+
+        if (!this._isMinimalSettings(cfg)) {
+          this._snackService.open({
+            type: 'ERROR',
+            msg:
+              !IS_ELECTRON && !this._isExtension && !IS_ANDROID_WEB_VIEW
+                ? T.F.JIRA.S.EXTENSION_NOT_LOADED
+                : T.F.JIRA.S.INSUFFICIENT_SETTINGS,
+          });
+          return throwError({
+            [HANDLED_ERROR_PROP_STR]: 'Insufficient Settings for Jira ' + requestId,
+          });
+        }
+
+        if (this._isBlockAccess && !isForce) {
+          IssueLog.err('Blocked Jira Access to prevent being shut out');
+          this._bannerService.open({
+            id: BannerId.JiraUnblock,
+            msg: T.F.JIRA.BANNER.BLOCK_ACCESS_MSG,
+            svgIco: 'jira',
+            action: {
+              label: T.F.JIRA.BANNER.BLOCK_ACCESS_UNBLOCK,
+              fn: () => this.unblockAccess(),
+            },
+          });
+          return throwError({
+            [HANDLED_ERROR_PROP_STR]:
+              'Blocked access to prevent being shut out ' + requestId,
+          });
+        }
+
+        // BUILD REQUEST START
+        // -------------------
+        const requestInit = this._makeRequestInit(jiraReqCfg, cfg);
+
+        const queryStr = jiraReqCfg.query
+          ? `?${stringify(jiraReqCfg.query, { arrayFormat: 'comma' })}`
+          : '';
+        const base = `${stripTrailing(cfg.host || 'null', '/')}/rest/api/${API_VERSION}`;
+        const url = `${base}/${jiraReqCfg.pathname}${queryStr}`.trim();
+
+        return this._sendRequestToExecutor$(
+          requestId,
+          url,
+          requestInit,
+          jiraReqCfg.transform,
+          cfg,
+          suppressErrorSnack,
+        );
+        // NOTE: offline is sexier & easier than cache, but in case we change our mind...
+        // const args = [requestId, url, requestInit, jiraReqCfg.transform];
+        // return this._issueCacheService.cache(url, requestInit, this._sendRequestToExecutor$.bind(this), args);
+      }),
+    );
+  }
+
+  private _sendRequestToExecutor$(
+    requestId: string,
+    url: string,
+    requestInit: RequestInit,
+    transform: any,
+    jiraCfg: JiraCfg,
+    suppressErrorSnack: boolean,
+  ): Observable<any> {
+    // TODO refactor to observable for request canceling etc
+    let promiseResolve;
+    let promiseReject;
+    const promise = new Promise((resolve, reject) => {
+      promiseResolve = resolve;
+      promiseReject = reject;
+    });
+
+    // save to request log (also sets up timeout)
+    // since we don't use the requestLog anyway on android web view we can just use the requestId
+    if (!IS_ANDROID_WEB_VIEW) {
+      this._requestsLog[requestId] = this._makeJiraRequestLogItem({
+        promiseResolve,
+        promiseReject,
+        requestId,
+        requestInit,
+        transform,
+        jiraCfg,
+      });
+    }
+
+    const requestToSend = { requestId, requestInit, url };
+    if (IS_ELECTRON) {
+      window.ea.makeJiraRequest({
+        ...requestToSend,
+        jiraCfg,
+      });
+    } else if (this._isExtension) {
+      this._chromeExtensionInterfaceService.dispatchEvent(
+        'SP_JIRA_REQUEST',
+        requestToSend,
+      );
+    } else if (IS_ANDROID_WEB_VIEW) {
+      return fromPromise(
+        fetch(url, requestInit)
+          .then((response) => response.body)
+          .then(streamToJsonIfPossible as any)
+          .then((res) => {
+            if ((res as any)?.errorMessages?.length) {
+              throw new Error((res as any).errorMessages.join(', '));
+            }
+            return transform ? transform({ response: res }, jiraCfg) : { response: res };
+          }),
+      ).pipe(
+        catchError((err) => {
+          IssueLog.log(err);
+          IssueLog.log(getErrorTxt(err));
+          const errTxt = `Jira: ${getErrorTxt(err)}`;
+          if (!suppressErrorSnack) {
+            this._snackService.open({ type: 'ERROR', msg: errTxt });
+          }
+          return throwError({ [HANDLED_ERROR_PROP_STR]: errTxt });
+        }),
+      );
+    } else {
+      throw new Error('Jira: No valid interface found');
+    }
+
+    this._globalProgressBarService.countUp(url);
+    return fromPromise(promise).pipe(
+      catchError((err) => {
+        IssueLog.log(err);
+        IssueLog.log(getErrorTxt(err));
+        const errTxt = `Jira: ${getErrorTxt(err)}`;
+        if (!suppressErrorSnack) {
+          this._snackService.open({ type: 'ERROR', msg: errTxt });
+        }
+        return throwError({ [HANDLED_ERROR_PROP_STR]: errTxt });
+      }),
+      first(),
+      finalize(() => this._globalProgressBarService.countDown()),
+    );
+  }
+
+  private _makeRequestInit(jr: JiraRequestCfg, cfg: JiraCfg): RequestInit {
+    return {
+      method: jr.method || 'GET',
+
+      ...(jr.body ? { body: JSON.stringify(jr.body) } : {}),
+
+      headers: {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        'Content-Type': 'application/json',
+        ...(cfg.usePAT
+          ? {
+              Cookie: '',
+              authorization: `Bearer ${cfg.password}`,
+            }
+          : {
+              Cookie: '',
+              authorization: `Basic ${this._b64EncodeUnicode(
+                `${cfg.userName}:${cfg.password}`,
+              )}`,
+            }),
+      },
+    };
+  }
+
+  private async _checkSetWonkyCookie(cfg: JiraCfg): Promise<string | null> {
+    const ssVal = sessionStorage.getItem(SS.JIRA_WONKY_COOKIE);
+    if (ssVal && ssVal.length > 0) {
+      return ssVal;
+    } else {
+      const loginUrl = `${cfg.host}`;
+      const apiUrl = `${cfg.host}/rest/api/${API_VERSION}/myself`;
+
+      const val = await this._matDialog
+        .open(DialogPromptComponent, {
+          data: {
+            // TODO add message to translations
+            placeholder: 'Insert Cookie String',
+            message: `<h3>Jira Wonky Cookie Authentication</h3>
+<ol>
+  <li><a href="${loginUrl}">Log into Jira from your browser</a></li>
+  <li><a href="${apiUrl}" target="_blank">Go to this api url</a></li>
+  <li>Open up the dev tools (Ctrl+Shift+i)</li>
+  <li>Navigate to the "Network" tab and reload page</li>
+  <li>Click the "myself" file on the left side.</li>
+  <li>In the "Headers" tab, scroll down and locate the "Request Headers" section.</li>
+  <li>Locate the "cookie" header and right click to copy the value</li>
+  <li>Fill this form with the cookie as "cookie: {paste-cookie-value}"</li>
+</ol>`,
+          },
+        })
+        .afterClosed()
+        .toPromise();
+
+      if (typeof val === 'string') {
+        sessionStorage.setItem(SS.JIRA_WONKY_COOKIE, val);
+        return val;
+      }
+    }
+
+    this._blockAccess();
+    return null;
+  }
+
+  private _makeJiraRequestLogItem({
+    promiseResolve,
+    promiseReject,
+    requestId,
+    requestInit,
+    transform,
+    jiraCfg,
+  }: {
+    promiseResolve: any;
+    promiseReject: any;
+    requestId: string;
+    requestInit: RequestInit;
+    transform: any;
+    jiraCfg: JiraCfg;
+  }): JiraRequestLogItem {
+    return {
+      transform,
+      resolve: promiseResolve,
+      reject: promiseReject,
+      // NOTE: only needed for debug
+      requestInit,
+      jiraCfg,
+
+      timeoutId: window.setTimeout(() => {
+        IssueLog.log('ERROR', 'Jira Request timed out', requestInit);
+        this._blockAccess();
+        // delete entry for promise
+        this._snackService.open({
+          msg: T.F.JIRA.S.TIMED_OUT,
+          type: 'ERROR',
+        });
+        this._requestsLog[requestId].reject('Request timed out');
+        delete this._requestsLog[requestId];
+      }, JIRA_REQUEST_TIMEOUT_DURATION),
+    };
+  }
+
+  private _handleResponse(res: { requestId?: string; error?: any }): void {
+    // check if proper id is given in callback and if exists in requestLog
+    if (res.requestId && this._requestsLog[res.requestId]) {
+      const currentRequest = this._requestsLog[res.requestId];
+      // cancel timeout for request
+      window.clearTimeout(currentRequest.timeoutId);
+
+      // resolve saved promise
+      if (!res || res.error) {
+        IssueLog.err('JIRA_RESPONSE_ERROR', res, currentRequest);
+        // let msg =
+        if (
+          res?.error &&
+          (res.error.statusCode === 401 ||
+            res.error === 401 ||
+            res.error.message === 'Forbidden' ||
+            res.error.message === 'Unauthorized')
+        ) {
+          this._blockAccess();
+        }
+
+        currentRequest.reject(res);
+      } else {
+        // IssueLog.log('JIRA_RESPONSE', res);
+        if (currentRequest.transform) {
+          // data can be invalid, that's why we check
+          try {
+            currentRequest.resolve(currentRequest.transform(res, currentRequest.jiraCfg));
+          } catch (e) {
+            IssueLog.log(res);
+            IssueLog.log(currentRequest);
+            IssueLog.err(e);
+            this._snackService.open({
+              type: 'ERROR',
+              msg: T.F.JIRA.S.INVALID_RESPONSE,
+            });
+          }
+        } else {
+          currentRequest.resolve(res);
+        }
+      }
+      // delete entry for promise afterwards
+      delete this._requestsLog[res.requestId];
+    } else {
+      IssueLog.err('Jira: Response Request ID not existing', res && res.requestId);
+    }
+  }
+
+  private _blockAccess(): void {
+    // TODO also shut down all existing requests
+    this._isBlockAccess = true;
+    sessionStorage.setItem(BLOCK_ACCESS_KEY, 'true');
+    sessionStorage.removeItem(SS.JIRA_WONKY_COOKIE);
+  }
+
+  private _b64EncodeUnicode(str: string): string {
+    if (typeof (btoa as any) === 'function') {
+      return btoa(str);
+    }
+    throw new Error('Jira: btoo not supported');
+  }
+}
+
+// eslint-disable-next-line prefer-arrow/prefer-arrow-functions
+async function streamToString(stream: ReadableStream): Promise<string> {
+  const reader = stream.getReader();
+  const decoder = new TextDecoder();
+  let result = '';
+  let done = false;
+
+  while (!done) {
+    const { value, done: doneReading } = await reader.read();
+    done = doneReading;
+    if (value) {
+      result += decoder.decode(value, { stream: true });
+    }
+  }
+
+  result += decoder.decode(); // flush the decoder
+  return result;
+}
+
+// eslint-disable-next-line prefer-arrow/prefer-arrow-functions
+async function streamToJsonIfPossible(stream: ReadableStream): Promise<any> {
+  const text = await streamToString(stream);
+  try {
+    return JSON.parse(text);
+  } catch (e) {
+    IssueLog.err('Jira: Could not parse response', text);
+    return text;
+  }
+}
diff --git a/src/app/features/issue/providers/trello/trello-common-interfaces.service.ts b/src/app/features/issue/providers/trello/trello-common-interfaces.service.ts
new file mode 100644
index 000000000..837a3a43c
--- /dev/null
+++ b/src/app/features/issue/providers/trello/trello-common-interfaces.service.ts
@@ -0,0 +1,182 @@
+/**
+ * Service for trello
+ */
+
+import { Injectable, inject } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { Task } from 'src/app/features/tasks/task.model';
+import { first, map, switchMap, tap } from 'rxjs/operators';
+import { IssueServiceInterface } from '../../issue-service-interface';
+import { TrelloApiService } from './trello-api.service';
+import { IssueProviderTrello, SearchResultItem } from '../../issue.model';
+import { TrelloIssue, TrelloIssueReduced } from './trello-issue.model';
+import { TaskAttachment } from '../../../tasks/task-attachment/task-attachment.model';
+// import { mapJiraAttachmentToAttachment } from './jira-issue-map.util';
+import { TrelloCfg } from './trello.model';
+import { isTrelloEnabled } from './is-trello-enabled.util';
+import { IssueProviderService } from '../../issue-provider.service';
+import { assertTruthy } from '../../../../util/assert-truthy';
+import { IssueLog } from '../../../../core/log';
+import { TRELLO_POLL_INTERVAL } from './trello.const';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TrelloCommonInterfacesService implements IssueServiceInterface {
+  // trello service interval
+  private readonly _trelloApiService = inject(TrelloApiService);
+  private readonly _issueProviderService = inject(IssueProviderService);
+
+  pollInterval: number = TRELLO_POLL_INTERVAL;
+
+  isEnabled(cfg: TrelloCfg): boolean {
+    return isTrelloEnabled(cfg);
+  }
+
+  testConnection(cfg: JiraCfg): Promise<boolean> {
+    return this._trelloApiService
+      .issuePicker$('', cfg)
+      .pipe(
+        map((res) => Array.isArray(res)),
+        first(),
+      )
+      .toPromise()
+      .then((result) => result ?? false);
+  }
+
+  // NOTE: we're using the issueKey instead of the real issueId
+  getById(issueId: string | number, issueProviderId: string): Promise<TrelloIssue> {
+    return this._getCfgOnce$(issueProviderId)
+      .pipe(
+        switchMap((jiraCfg) =>
+          this._trelloApiService.getIssueById$(assertTruthy(issueId).toString(), jiraCfg),
+        ),
+      )
+      .toPromise()
+      .then((result) => {
+        if (!result) {
+          throw new Error('Failed to get Jira issue');
+        }
+        return result;
+      });
+  }
+
+  // NOTE: this gives back issueKey instead of issueId
+  searchIssues(searchTerm: string, issueProviderId: string): Promise<SearchResultItem[]> {
+    return this._getCfgOnce$(issueProviderId)
+      .pipe(
+        switchMap((jiraCfg) =>
+          this.isEnabled(jiraCfg)
+            ? this._trelloApiService
+                .issuePicker$(searchTerm, jiraCfg)
+                .pipe(tap((v) => IssueLog.log('jira.issuePicker$', v)))
+            : of([]),
+        ),
+      )
+      .toPromise()
+      .then((result) => result ?? []);
+  }
+
+  async getFreshDataForIssueTask(task: Task): Promise<{
+    taskChanges: Partial<Task>;
+    issue: TrelloIssue;
+    issueTitle: string;
+  } | null> {
+    if (!task.issueProviderId) {
+      throw new Error('No issueProviderId');
+    }
+    if (!task.issueId) {
+      throw new Error('No issueId');
+    }
+
+    const cfg = await this._getCfgOnce$(task.issueProviderId).toPromise();
+    const issue = (await this._trelloApiService
+      .getIssueById$(task.issueId, cfg)
+      .toPromise()) as TrelloIssue;
+
+    // @see https://developer.atlassian.com/cloud/jira/platform/jira-expressions-type-reference/#date
+    const newUpdated = new Date(issue.updated).getTime();
+    const wasUpdated = newUpdated > (task.issueLastUpdated || 0);
+
+    if (wasUpdated) {
+      return {
+        taskChanges: {
+          ...this.getAddTaskData(issue),
+          issueWasUpdated: true,
+        },
+        issue,
+        issueTitle: issue.key,
+      };
+    }
+    return null;
+  }
+
+  async getFreshDataForIssueTasks(
+    tasks: Task[],
+  ): Promise<{ task: Task; taskChanges: Partial<Task>; issue: TrelloIssue }[]> {
+    return Promise.all(
+      tasks.map((task) =>
+        this.getFreshDataForIssueTask(task).then((refreshDataForTask) => ({
+          task,
+          refreshDataForTask,
+        })),
+      ),
+    ).then((items) => {
+      return items
+        .filter(({ refreshDataForTask, task }) => !!refreshDataForTask)
+        .map(({ refreshDataForTask, task }) => {
+          if (!refreshDataForTask) {
+            throw new Error('No refresh data for task js error');
+          }
+          return {
+            task,
+            taskChanges: refreshDataForTask.taskChanges,
+            issue: refreshDataForTask.issue,
+          };
+        });
+    });
+  }
+
+  getAddTaskData(issue: TrelloIssueReduced): Partial<Task> & { title: string } {
+    return {
+      title: `${issue.key} ${issue.summary}`,
+      issuePoints: issue.storyPoints,
+      // circumvent errors for old jira versions #652
+      issueAttachmentNr: issue.attachments ? issue.attachments.length : 0,
+      issueWasUpdated: false,
+      issueLastUpdated: new Date(issue.updated).getTime(),
+    };
+  }
+
+  issueLink(issueId: string | number, issueProviderId: string): Promise<string> {
+    if (!issueId || !issueProviderId) {
+      throw new Error('No issueId or no issueProviderId');
+    }
+    // const isIssueKey = isNaN(Number(issueId));
+    return this._getCfgOnce$(issueProviderId)
+      .pipe(
+        first(),
+        map((jiraCfg) => jiraCfg.host + '/browse/' + issueId),
+      )
+      .toPromise()
+      .then((result) => result ?? '');
+  }
+
+  async getNewIssuesToAddToBacklog(
+    issueProviderId: string,
+    allExistingIssueIds: number[] | string[],
+  ): Promise<TrelloIssueReduced[]> {
+    const cfg = await this._getCfgOnce$(issueProviderId).toPromise();
+    return await this._trelloApiService.findAutoImportIssues$(cfg).toPromise();
+  }
+
+  getMappedAttachments(issueData: TrelloIssue): TaskAttachment[] {
+    return issueData?.attachments?.length
+      ? issueData.attachments.map(mapJiraAttachmentToAttachment)
+      : [];
+  }
+
+  private _getCfgOnce$(issueProviderId: string): Observable<IssueProviderTrello> {
+    return this._issueProviderService.getCfgOnce$(issueProviderId, 'JIRA');
+  }
+}
diff --git a/src/app/features/issue/providers/trello/trello-issue-map.util.ts b/src/app/features/issue/providers/trello/trello-issue-map.util.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/issue/providers/trello/trello-issue.model.ts b/src/app/features/issue/providers/trello/trello-issue.model.ts
new file mode 100644
index 000000000..fd03e724c
--- /dev/null
+++ b/src/app/features/issue/providers/trello/trello-issue.model.ts
@@ -0,0 +1,13 @@
+// trello issue model
+
+export type TrelloIssueReduced = Readonly<{
+  id: string;
+  name: string;
+  desc: string;
+  due: string;
+  closed: boolean;
+  url: string;
+}>;
+
+// will find additional field later
+export type TrelloIssue = TrelloIssueReduced;
diff --git a/src/app/features/issue/providers/trello/trello.const.ts b/src/app/features/issue/providers/trello/trello.const.ts
new file mode 100644
index 000000000..da8ebfbbe
--- /dev/null
+++ b/src/app/features/issue/providers/trello/trello.const.ts
@@ -0,0 +1,48 @@
+import {
+  ConfigFormSection,
+  LimitedFormlyFieldConfig,
+} from '../../../config/global-config.model';
+import { ISSUE_PROVIDER_COMMON_FORM_FIELDS } from '../../common-issue-form-stuff.const';
+import { IssueProviderTrello } from '../../issue.model';
+import { TrelloCfg } from './trello.model';
+
+export const DEFAULT_TRELLO_CFG: TrelloCfg = {
+  isEnabled: false,
+  token: null,
+  boardId: null,
+};
+
+export const TRELLO_POLL_INTERVAL = 5 * 60 * 1000;
+export const TRELLO_CONFIG_FORM: LimitedFormlyFieldConfig<IssueProviderTrello>[] = [
+  {
+    key: 'boardId',
+    type: 'input',
+    props: {
+      label: 'Trello board ID',
+      description: 'Specify the board to sync when the integration becomes available.',
+      type: 'text',
+    },
+  },
+  {
+    key: 'token',
+    type: 'input',
+    props: {
+      label: 'Trello API token',
+      description:
+        'Generate a token via Trello developer tools. This stub does not use it yet.',
+      type: 'password',
+    },
+  },
+  {
+    type: 'collapsible',
+    props: { label: 'Advanced Config' },
+    fieldGroup: [...ISSUE_PROVIDER_COMMON_FORM_FIELDS],
+  },
+];
+
+export const TRELLO_CONFIG_FORM_SECTION: ConfigFormSection<IssueProviderTrello> = {
+  title: 'Trello',
+  key: 'TRELLO',
+  items: TRELLO_CONFIG_FORM,
+  help: 'Trello integration is currently a non-functional stub.',
+};
diff --git a/src/assets/icons/trello.svg b/src/assets/icons/trello.svg
new file mode 100644
index 000000000..f8f4ec1cc
--- /dev/null
+++ b/src/assets/icons/trello.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <rect x="2.5" y="2.5" width="19" height="19" rx="2.5" ry="2.5" fill="none" stroke="currentColor" stroke-width="1.5" />
+  <rect x="6" y="6" width="5.5" height="12" rx="1.2" ry="1.2" fill="currentColor" opacity="0.85" />
+  <rect x="12.5" y="6" width="5.5" height="8" rx="1.2" ry="1.2" fill="currentColor" opacity="0.55" />
+</svg>

From af77acaff9435b813b07e46dcb37c6b888cc44c5 Mon Sep 17 00:00:00 2001
From: Ronaldo93 <51114190+Ronaldo93@users.noreply.github.com>
Date: Thu, 16 Oct 2025 09:55:30 +0000
Subject: [PATCH 05/18] feat(trello): initial working on trello integration.

This is still pretty much WIP; things may break and it still needs to do several thing manually, so I need your feedback

I have tested this and so far it can retrieve the card from trello and added it. Minor visual bugs here and there is seen, so that is one aspect. Automation and ease of task creation should be next.
---
 src/app/core/theme/global-theme.service.ts    |   2 +
 .../issue-content-configs.const.ts            |   2 +
 src/app/features/issue/issue.model.ts         |  19 +-
 src/app/features/issue/issue.service.ts       |   1 +
 .../get-issue-provider-tooltip.ts             |   6 +
 .../trello/is-trello-enabled.util.ts          |   3 +-
 .../providers/trello/trello-api.service.ts    | 941 +++++-------------
 .../trello-common-interfaces.service.ts       |  43 +-
 .../trello/trello-issue-content.const.ts      |  60 ++
 .../providers/trello/trello-issue-map.util.ts | 219 ++++
 .../providers/trello/trello-issue.model.ts    |  66 +-
 .../issue/providers/trello/trello.const.ts    |  32 +-
 .../issue/providers/trello/trello.model.ts    |   6 +-
 13 files changed, 639 insertions(+), 761 deletions(-)
 create mode 100644 src/app/features/issue/providers/trello/trello-issue-content.const.ts

diff --git a/src/app/core/theme/global-theme.service.ts b/src/app/core/theme/global-theme.service.ts
index a3b829672..b8c76d26f 100644
--- a/src/app/core/theme/global-theme.service.ts
+++ b/src/app/core/theme/global-theme.service.ts
@@ -146,6 +146,8 @@ export class GlobalThemeService {
       ['repeat', 'assets/icons/repeat.svg'],
       ['gitea', 'assets/icons/gitea.svg'],
       ['redmine', 'assets/icons/redmine.svg'],
+      // trello icon
+      ['trello', 'assets/icons/trello.svg'],
       ['calendar', 'assets/icons/calendar.svg'],
       ['early_on', 'assets/icons/early-on.svg'],
       ['tomorrow', 'assets/icons/tomorrow.svg'],
diff --git a/src/app/features/issue/issue-content/issue-content-configs.const.ts b/src/app/features/issue/issue-content/issue-content-configs.const.ts
index a6a49c34e..0e331fc6f 100644
--- a/src/app/features/issue/issue-content/issue-content-configs.const.ts
+++ b/src/app/features/issue/issue-content/issue-content-configs.const.ts
@@ -12,6 +12,7 @@ import { CALDAV_ISSUE_CONTENT_CONFIG } from '../providers/caldav/caldav-issue-co
 import { GITEA_ISSUE_CONTENT_CONFIG } from '../providers/gitea/gitea-issue-content.const';
 import { REDMINE_ISSUE_CONTENT_CONFIG } from '../providers/redmine/redmine-issue-content.const';
 import { OPEN_PROJECT_ISSUE_CONTENT_CONFIG } from '../providers/open-project/open-project-issue-content.const';
+import { TRELLO_ISSUE_CONTENT_CONFIG } from '../providers/trello/trello-issue-content.const';
 
 // Re-export types for backwards compatibility
 export { IssueFieldType, IssueFieldConfig, IssueCommentConfig, IssueContentConfig };
@@ -24,6 +25,7 @@ export const ISSUE_CONTENT_CONFIGS: Record<IssueProviderKey, IssueContentConfig<
   GITEA: GITEA_ISSUE_CONTENT_CONFIG,
   REDMINE: REDMINE_ISSUE_CONTENT_CONFIG,
   OPEN_PROJECT: OPEN_PROJECT_ISSUE_CONTENT_CONFIG,
+  TRELLO: TRELLO_ISSUE_CONTENT_CONFIG,
   ICAL: {
     issueType: 'ICAL',
     fields: [],
diff --git a/src/app/features/issue/issue.model.ts b/src/app/features/issue/issue.model.ts
index abe8579a0..20812a9ec 100644
--- a/src/app/features/issue/issue.model.ts
+++ b/src/app/features/issue/issue.model.ts
@@ -16,6 +16,7 @@ import { GiteaIssue } from './providers/gitea/gitea-issue.model';
 import { RedmineCfg } from './providers/redmine/redmine.model';
 import { RedmineIssue } from './providers/redmine/redmine-issue.model';
 import { TrelloCfg } from './providers/trello/trello.model';
+import { TrelloIssue, TrelloIssueReduced } from './providers/trello/trello-issue.model';
 import { EntityState } from '@ngrx/entity';
 import {
   CalendarProviderCfg,
@@ -27,8 +28,7 @@ export interface BaseIssueProviderCfg {
   isEnabled: boolean;
 }
 
-// TODO: trello is currently non-functional stub
-// qq feat(providerkey): add non-functional stub trello provider
+// Trello integration is available alongside other providers
 export type IssueProviderKey =
   | 'JIRA'
   | 'GITHUB'
@@ -78,7 +78,8 @@ export type IssueData =
   | ICalIssue
   | OpenProjectWorkPackage
   | GiteaIssue
-  | RedmineIssue;
+  | RedmineIssue
+  | TrelloIssue;
 
 export type IssueDataReduced =
   | GithubIssueReduced
@@ -88,7 +89,8 @@ export type IssueDataReduced =
   | CaldavIssueReduced
   | ICalIssueReduced
   | GiteaIssue
-  | RedmineIssue;
+  | RedmineIssue
+  | TrelloIssueReduced;
 
 export type IssueDataReducedMap = {
   [K in IssueProviderKey]: K extends 'JIRA'
@@ -105,9 +107,11 @@ export type IssueDataReducedMap = {
               ? OpenProjectWorkPackageReduced
               : K extends 'GITEA'
                 ? GiteaIssue
-                : K extends 'REDMINE'
-                  ? RedmineIssue
-                  : never;
+                : K extends 'TRELLO'
+                  ? TrelloIssueReduced
+                  : K extends 'REDMINE'
+                    ? RedmineIssue
+                    : never;
 };
 
 // TODO: add issue model to the IssueDataReducedMap
@@ -180,7 +184,6 @@ export interface IssueProviderCalendar extends IssueProviderBase, CalendarProvid
   issueProviderKey: 'ICAL';
 }
 
-// trello is currently a non-functional stub
 export interface IssueProviderTrello extends IssueProviderBase, TrelloCfg {
   issueProviderKey: 'TRELLO';
 }
diff --git a/src/app/features/issue/issue.service.ts b/src/app/features/issue/issue.service.ts
index 27191e99c..16845ca7c 100644
--- a/src/app/features/issue/issue.service.ts
+++ b/src/app/features/issue/issue.service.ts
@@ -28,6 +28,7 @@ import { IssueTask, Task, TaskCopy } from '../tasks/task.model';
 import { IssueServiceInterface } from './issue-service-interface';
 import { JiraCommonInterfacesService } from './providers/jira/jira-common-interfaces.service';
 import { GithubCommonInterfacesService } from './providers/github/github-common-interfaces.service';
+import { TrelloCommonInterfacesService } from './providers/trello/trello-common-interfaces.service';
 import { catchError, map, switchMap } from 'rxjs/operators';
 import { IssueLog } from '../../core/log';
 import { GitlabCommonInterfacesService } from './providers/gitlab/gitlab-common-interfaces.service';
diff --git a/src/app/features/issue/mapping-helper/get-issue-provider-tooltip.ts b/src/app/features/issue/mapping-helper/get-issue-provider-tooltip.ts
index 66711fc50..cfe014d63 100644
--- a/src/app/features/issue/mapping-helper/get-issue-provider-tooltip.ts
+++ b/src/app/features/issue/mapping-helper/get-issue-provider-tooltip.ts
@@ -19,6 +19,10 @@ export const getIssueProviderTooltip = (issueProvider: IssueProvider): string =>
         return issueProvider.projectId;
       case 'OPEN_PROJECT':
         return issueProvider.projectId;
+      case 'TRELLO':
+        return issueProvider.boardId;
+      default:
+        return undefined;
     }
   })();
   return v || issueProvider.issueProviderKey;
@@ -82,6 +86,8 @@ export const getIssueProviderInitials = (
       return getRepoInitials(issueProvider.project);
     case 'GITEA':
       return getRepoInitials(issueProvider.repoFullname);
+    case 'TRELLO':
+      return issueProvider.boardId?.substring(0, 2).toUpperCase();
   }
   return undefined;
 };
diff --git a/src/app/features/issue/providers/trello/is-trello-enabled.util.ts b/src/app/features/issue/providers/trello/is-trello-enabled.util.ts
index 2f6399314..74cf95c4a 100644
--- a/src/app/features/issue/providers/trello/is-trello-enabled.util.ts
+++ b/src/app/features/issue/providers/trello/is-trello-enabled.util.ts
@@ -1,3 +1,4 @@
 import { TrelloCfg } from './trello.model';
 
-export const isTrelloEnabled = (cfg: TrelloCfg): boolean => cfg.isEnabled;
+export const isTrelloEnabled = (cfg: TrelloCfg): boolean =>
+  !!cfg && cfg.isEnabled && !!cfg.apiKey && !!cfg.token && !!cfg.boardId;
diff --git a/src/app/features/issue/providers/trello/trello-api.service.ts b/src/app/features/issue/providers/trello/trello-api.service.ts
index 78a0849fe..858c68f9c 100644
--- a/src/app/features/issue/providers/trello/trello-api.service.ts
+++ b/src/app/features/issue/providers/trello/trello-api.service.ts
@@ -1,750 +1,263 @@
-import { inject, Injectable } from '@angular/core';
-import { nanoid } from 'nanoid';
-import { ChromeExtensionInterfaceService } from '../../../../core/chrome-extension-interface/chrome-extension-interface.service';
-import {
-  JIRA_ADDITIONAL_ISSUE_FIELDS,
-  JIRA_MAX_RESULTS,
-  JIRA_REQUEST_TIMEOUT_DURATION,
-} from './jira.const';
-import {
-  mapIssueResponse,
-  mapIssuesResponse,
-  mapResponse,
-  mapToSearchResults,
-  mapToSearchResultsForJQL,
-  mapTransitionResponse,
-} from './jira-issue-map.util';
-import {
-  JiraOriginalStatus,
-  JiraOriginalTransition,
-  JiraOriginalUser,
-} from './jira-api-responses';
-import { JiraCfg } from './jira.model';
-import { IPC } from '../../../../../../electron/shared-with-frontend/ipc-events.const';
+import { Injectable, inject } from '@angular/core';
+import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http';
+import { Observable, throwError } from 'rxjs';
+import { catchError, map } from 'rxjs/operators';
+import { TrelloCfg } from './trello.model';
 import { SnackService } from '../../../../core/snack/snack.service';
-import { HANDLED_ERROR_PROP_STR, IS_ELECTRON } from '../../../../app.constants';
-import { Observable, of, throwError } from 'rxjs';
 import { SearchResultItem } from '../../issue.model';
 import {
-  catchError,
-  concatMap,
-  finalize,
-  first,
-  mapTo,
-  shareReplay,
-  take,
-  timeoutWith,
-} from 'rxjs/operators';
-import { JiraIssue, JiraIssueReduced } from './jira-issue.model';
-import { BannerService } from '../../../../core/banner/banner.service';
-import { BannerId } from '../../../../core/banner/banner.model';
+  TrelloCardResponse,
+  TrelloSearchResponse,
+  mapTrelloCardReduced,
+  mapTrelloCardToIssue,
+  mapTrelloSearchResults,
+} from './trello-issue-map.util';
+import { TrelloIssue, TrelloIssueReduced } from './trello-issue.model';
+import { throwHandledError } from '../../../../util/throw-handled-error';
+import { ISSUE_PROVIDER_HUMANIZED, TRELLO_TYPE } from '../../issue.const';
 import { T } from '../../../../t.const';
-import { stringify } from 'query-string';
-import { fromPromise } from 'rxjs/internal-compatibility';
+import { HANDLED_ERROR_PROP_STR } from '../../../../app.constants';
 import { getErrorTxt } from '../../../../util/get-error-text';
-import { isOnline } from '../../../../util/is-online';
-import { GlobalProgressBarService } from '../../../../core-ui/global-progress-bar/global-progress-bar.service';
-import { IpcRendererEvent } from 'electron';
-import { SS } from '../../../../core/persistence/storage-keys.const';
-import { MatDialog } from '@angular/material/dialog';
-import { DialogPromptComponent } from '../../../../ui/dialog-prompt/dialog-prompt.component';
-import { stripTrailing } from '../../../../util/strip-trailing';
-import { IS_ANDROID_WEB_VIEW } from '../../../../util/is-android-web-view';
-import { formatJiraDate } from '../../../../util/format-jira-date';
-import { IssueLog } from '../../../../core/log';
 
-const BLOCK_ACCESS_KEY = 'SUP_BLOCK_JIRA_ACCESS';
-const API_VERSION = 'latest';
-
-interface JiraRequestLogItem {
-  transform: (res: any, cfg: any) => any;
-  requestInit: RequestInit;
-  timeoutId: number;
-  jiraCfg: JiraCfg;
-
-  resolve(res: any): Promise<void>;
-
-  reject(reason?: any): Promise<unknown>;
-}
-
-interface JiraRequestCfg {
-  pathname: string;
-  followAllRedirects?: boolean;
-  method?: 'GET' | 'POST' | 'PUT';
-  query?: {
-    [key: string]: string | boolean | number | string[];
-  };
-  transform?: (res: any, jiraCfg?: JiraCfg) => any;
-  body?: Record<string, unknown>;
-}
+const BASE_URL = 'https://api.trello.com/1';
+const DEFAULT_CARD_FIELDS = [
+  'id',
+  'idShort',
+  'shortLink',
+  'name',
+  'url',
+  'desc',
+  'due',
+  'dueComplete',
+  'closed',
+  'idBoard',
+  'idList',
+  'dateLastActivity',
+].join(',');
+const DEFAULT_ATTACHMENT_FIELDS = [
+  'id',
+  'name',
+  'url',
+  'bytes',
+  'date',
+  'mimeType',
+  'previews',
+  'edgeColor',
+  'pos',
+  'idMember',
+].join(',');
+const DEFAULT_MEMBER_FIELDS = ['fullName', 'username', 'avatarUrl'].join(',');
 
 @Injectable({
   providedIn: 'root',
 })
 export class TrelloApiService {
-  private _chromeExtensionInterfaceService = inject(ChromeExtensionInterfaceService);
-  private _globalProgressBarService = inject(GlobalProgressBarService);
+  private _http = inject(HttpClient);
   private _snackService = inject(SnackService);
-  private _bannerService = inject(BannerService);
-  private _matDialog = inject(MatDialog);
 
-  private _requestsLog: { [key: string]: JiraRequestLogItem } = {};
-  private _isBlockAccess: boolean = !!sessionStorage.getItem(BLOCK_ACCESS_KEY);
-  private _isExtension: boolean = false;
-  private _isInterfacesReadyIfNeeded$: Observable<boolean> =
-    IS_ELECTRON || IS_ANDROID_WEB_VIEW
-      ? of(true).pipe()
-      : this._chromeExtensionInterfaceService.onReady$.pipe(
-          mapTo(true),
-          shareReplay(1),
-          timeoutWith(
-            500,
-            throwError({
-              [HANDLED_ERROR_PROP_STR]: 'Trello: Extension not installed or not ready',
-            }),
-          ),
-        );
+  testConnection$(cfg: TrelloCfg): Observable<boolean> {
+    return this._request$<{ id: string }>(`/boards/${cfg.boardId}`, cfg, {
+      fields: 'id',
+    }).pipe(map(() => true));
+  }
 
-  constructor() {
-    // set up callback listener for electron
-    if (IS_ELECTRON) {
-      window.ea.on(IPC.JIRA_CB_EVENT, (ev: IpcRendererEvent, res: any) => {
-        this._handleResponse(res);
-      });
+  issuePicker$(
+    searchTerm: string,
+    cfg: TrelloCfg,
+    maxResults: number = 25,
+  ): Observable<SearchResultItem<'TRELLO'>[]> {
+    const trimmed = searchTerm.trim();
+
+    if (!trimmed) {
+      return this._fetchBoardCards$(cfg, maxResults).pipe(
+        map((cards) => mapTrelloSearchResults(cards)),
+      );
     }
 
-    this._chromeExtensionInterfaceService.onReady$.subscribe(() => {
-      this._isExtension = true;
-      this._chromeExtensionInterfaceService.addEventListener(
-        'SP_JIRA_RESPONSE',
-        (ev: unknown, data: any) => {
-          this._handleResponse(data);
-        },
-      );
-    });
-  }
+    const params = {
+      query: trimmed,
+      idBoards: cfg.boardId ?? undefined,
+      modelTypes: 'cards',
+      cards_limit: Math.min(maxResults, 100),
+      card_fields: DEFAULT_CARD_FIELDS,
+      card_attachments: 'true',
+      card_attachment_fields: DEFAULT_ATTACHMENT_FIELDS,
+      card_members: 'true',
+      card_member_fields: DEFAULT_MEMBER_FIELDS,
+      partial: 'true',
+    } as const;
 
-  unblockAccess(): void {
-    this._isBlockAccess = false;
-    sessionStorage.removeItem(BLOCK_ACCESS_KEY);
-  }
-
-  search$(searchTermJQL: string, cfg: JiraCfg): Observable<SearchResultItem[]> {
-    return this._sendRequest$({
-      jiraReqCfg: {
-        pathname: 'search/jql',
-        followAllRedirects: true,
-        query: {
-          jql: searchTermJQL,
-          // fields: [
-          //   ...JIRA_ADDITIONAL_ISSUE_FIELDS,
-          //   ...(cfg.storyPointFieldId ? [cfg.storyPointFieldId] : []),
-          // ],
-        },
-        transform: mapToSearchResultsForJQL,
-        // NOTE: we pass the cfg as well to avoid race conditions
-      },
-      cfg,
-      suppressErrorSnack: true,
-    }).pipe(
-      // switchMap((res) =>
-      //   res.length > 0 ? of(res) : this.issuePicker$(searchTerm, cfg),
-      // ),
-      catchError((err) => {
-        const code = err?.error?.statusCode ?? err?.status ?? err?.error?.status;
-        if (code === 404) {
-          // Fallback for Server/DC: /search?jql=...
-          return this._sendRequest$({
-            jiraReqCfg: {
-              pathname: 'search',
-              followAllRedirects: true,
-              query: { jql: searchTermJQL },
-              transform: mapToSearchResultsForJQL,
-            },
-            cfg,
-          });
-        }
-        return throwError(() => err);
-      }),
+    return this._request$<TrelloSearchResponse>('/search', cfg, params).pipe(
+      map((res) => mapTrelloSearchResults(res.cards || [])),
     );
   }
 
-  issuePicker$(searchTerm: string, cfg: JiraCfg): Observable<SearchResultItem[]> {
-    const searchStr = `${searchTerm}`;
-
-    return this._sendRequest$({
-      jiraReqCfg: {
-        pathname: 'issue/picker',
-        followAllRedirects: true,
-        query: {
-          showSubTasks: true,
-          showSubTaskParent: true,
-          query: searchStr,
-          currentJQL: cfg.searchJqlQuery || '',
-        },
-        transform: mapToSearchResults,
-        // NOTE: we pass the cfg as well to avoid race conditions
-      },
-      cfg,
-    })
-      .pipe
-      // switchMap((res) =>
-      //   res.length > 0 ? of(res) : this.fallBackSearch$(searchTerm, cfg),
-      // ),
-      ();
-  }
-
-  listFields$(cfg: JiraCfg): Observable<any> {
-    return this._sendRequest$({
-      jiraReqCfg: {
-        pathname: 'field',
-      },
-      cfg,
-    });
-  }
-
   findAutoImportIssues$(
-    cfg: JiraCfg,
-    isFetchAdditional?: boolean,
-    maxResults: number = JIRA_MAX_RESULTS,
-  ): Observable<JiraIssueReduced[]> {
-    const options = {
-      maxResults,
-      fields: [
-        ...JIRA_ADDITIONAL_ISSUE_FIELDS,
-        ...(cfg.storyPointFieldId ? [cfg.storyPointFieldId] : []),
-      ],
-    };
-    const searchQuery = cfg.autoAddBacklogJqlQuery;
+    cfg: TrelloCfg,
+    maxResults: number = 200,
+  ): Observable<TrelloIssueReduced[]> {
+    return this._fetchBoardCards$(cfg, maxResults).pipe(
+      map((cards) => cards.map((card) => mapTrelloCardReduced(card))),
+    );
+  }
 
-    if (!searchQuery) {
+  getIssueById$(issueId: string, cfg: TrelloCfg): Observable<TrelloIssue> {
+    return this._request$<TrelloCardResponse>(`/cards/${issueId}`, cfg, {
+      fields: `${DEFAULT_CARD_FIELDS},labels`,
+      attachments: 'true',
+      attachment_fields: DEFAULT_ATTACHMENT_FIELDS,
+      members: 'true',
+      member_fields: DEFAULT_MEMBER_FIELDS,
+    }).pipe(map((card) => mapTrelloCardToIssue(card)));
+  }
+
+  getReducedIssueById$(issueId: string, cfg: TrelloCfg): Observable<TrelloIssueReduced> {
+    return this._request$<TrelloCardResponse>(`/cards/${issueId}`, cfg, {
+      fields: DEFAULT_CARD_FIELDS,
+      attachments: 'true',
+      attachment_fields: DEFAULT_ATTACHMENT_FIELDS,
+      members: 'true',
+      member_fields: DEFAULT_MEMBER_FIELDS,
+    }).pipe(map((card) => mapTrelloCardReduced(card)));
+  }
+
+  getCardUrl$(issueId: string, cfg: TrelloCfg): Observable<string> {
+    return this._request$<{ url: string; shortLink: string }>(`/cards/${issueId}`, cfg, {
+      fields: 'url,shortLink',
+    }).pipe(map((card) => card.url || `https://trello.com/c/${card.shortLink}`));
+  }
+
+  private _fetchBoardCards$(
+    cfg: TrelloCfg,
+    maxResults: number,
+  ): Observable<TrelloCardResponse[]> {
+    const limit = Math.min(Math.max(maxResults, 1), 500);
+    return this._request$<TrelloCardResponse[]>(`/boards/${cfg.boardId}/cards`, cfg, {
+      filter: 'open',
+      limit,
+      fields: `${DEFAULT_CARD_FIELDS},labels`,
+      attachments: 'true',
+      attachment_fields: DEFAULT_ATTACHMENT_FIELDS,
+      members: 'true',
+      member_fields: DEFAULT_MEMBER_FIELDS,
+    }).pipe(
+      map((cards) => (Array.isArray(cards) ? cards : [])),
+      map((cards) =>
+        cards
+          .slice()
+          .sort(
+            (a, b) =>
+              new Date(b.dateLastActivity).getTime() -
+              new Date(a.dateLastActivity).getTime(),
+          )
+          .slice(0, limit),
+      ),
+    );
+  }
+
+  private _request$<T>(
+    path: string,
+    cfg: TrelloCfg,
+    params?: Record<string, unknown>,
+  ): Observable<T> {
+    this._checkSettings(cfg);
+    const httpParams = this._createParams(cfg, params);
+    return this._http
+      .get<T>(`${BASE_URL}${path}`, {
+        params: httpParams,
+      })
+      .pipe(catchError((err) => this._handleError$(err)));
+  }
+
+  private _createParams(cfg: TrelloCfg, params?: Record<string, unknown>): HttpParams {
+    let httpParams = new HttpParams()
+      .set('key', cfg.apiKey as string)
+      .set('token', cfg.token as string);
+
+    if (!params) {
+      return httpParams;
+    }
+
+    Object.entries(params).forEach(([key, value]) => {
+      if (value === undefined || value === null) {
+        return;
+      }
+
+      if (Array.isArray(value)) {
+        value.forEach((v) => {
+          httpParams = httpParams.append(key, String(v));
+        });
+      } else {
+        httpParams = httpParams.set(key, String(value));
+      }
+    });
+
+    return httpParams;
+  }
+
+  private _checkSettings(cfg: TrelloCfg): void {
+    if (!cfg || !cfg.apiKey || !cfg.token || !cfg.boardId) {
       this._snackService.open({
         type: 'ERROR',
-        msg: T.F.JIRA.S.NO_AUTO_IMPORT_JQL,
-      });
-      return throwError({
-        [HANDLED_ERROR_PROP_STR]: 'JiraApi: No search query for auto import',
+        msg: T.F.ISSUE.S.ERR_NOT_CONFIGURED,
+        translateParams: {
+          issueProviderName: ISSUE_PROVIDER_HUMANIZED[TRELLO_TYPE],
+        },
       });
+      throwHandledError('Trello: Not enough settings');
     }
 
-    return this._sendRequest$({
-      jiraReqCfg: {
-        transform: mapIssuesResponse as (res: any, cfg?: JiraCfg) => any,
-        pathname: 'search/jql',
-        method: 'POST',
-        body: {
-          ...options,
-          jql: searchQuery,
-        },
-      },
-      cfg,
-      suppressErrorSnack: true,
-    }).pipe(
-      catchError((err) => {
-        const code = err?.error?.statusCode ?? err?.status ?? err?.error?.status;
-        if (code === 401 || code === 403) return throwError(() => err);
-        // Fallback for Server/DC: POST /search with jql in body
-        return this._sendRequest$({
-          jiraReqCfg: {
-            transform: mapIssuesResponse as (res: any, cfg?: JiraCfg) => any,
-            pathname: 'search',
-            method: 'POST',
-            body: { ...options, jql: searchQuery },
-          },
-          cfg,
-        });
-      }),
-    );
-  }
-
-  getIssueById$(issueId: string, cfg: JiraCfg): Observable<JiraIssue> {
-    return this._getIssueById$(issueId, cfg, true);
-  }
-
-  getReducedIssueById$(issueId: string, cfg: JiraCfg): Observable<JiraIssueReduced> {
-    return this._getIssueById$(issueId, cfg, false);
-  }
-
-  getCurrentUser$(cfg: JiraCfg, isForce: boolean = false): Observable<JiraOriginalUser> {
-    return this._sendRequest$({
-      jiraReqCfg: {
-        pathname: `myself`,
-        transform: mapResponse,
-      },
-      cfg,
-      isForce,
-    });
-  }
-
-  listStatus$(cfg: JiraCfg): Observable<JiraOriginalStatus[]> {
-    return this._sendRequest$({
-      jiraReqCfg: {
-        pathname: `status`,
-        transform: mapResponse,
-      },
-      cfg,
-    });
-  }
-
-  getTransitionsForIssue$(
-    issueId: string,
-    cfg: JiraCfg,
-  ): Observable<JiraOriginalTransition[]> {
-    return this._sendRequest$({
-      jiraReqCfg: {
-        pathname: `issue/${issueId}/transitions`,
-        method: 'GET',
-        query: {
-          expand: 'transitions.fields',
-        },
-        transform: mapTransitionResponse,
-      },
-      cfg,
-    });
-  }
-
-  transitionIssue$(issueId: string, transitionId: string, cfg: JiraCfg): Observable<any> {
-    return this._sendRequest$({
-      jiraReqCfg: {
-        pathname: `issue/${issueId}/transitions`,
-        method: 'POST',
-        body: {
-          transition: {
-            id: transitionId,
-          },
-        },
-        transform: mapResponse,
-      },
-      cfg,
-    });
-  }
-
-  updateAssignee$(issueId: string, accountId: string, cfg: JiraCfg): Observable<any> {
-    return this._sendRequest$({
-      jiraReqCfg: {
-        pathname: `issue/${issueId}/assignee`,
-        method: 'PUT',
-        body: {
-          accountId,
-        },
-      },
-      cfg,
-    });
-  }
-
-  addWorklog$({
-    issueId,
-    started,
-    timeSpent,
-    comment,
-    cfg,
-  }: {
-    issueId: string;
-    started: string;
-    timeSpent: number;
-    comment: string;
-    cfg: JiraCfg;
-  }): Observable<any> {
-    const worklog = {
-      started: formatJiraDate(started),
-      timeSpentSeconds: Math.floor(timeSpent / 1000),
-      comment,
-    };
-    return this._sendRequest$({
-      jiraReqCfg: {
-        pathname: `issue/${issueId}/worklog`,
-        method: 'POST',
-        body: worklog,
-        transform: mapResponse,
-      },
-      cfg,
-    });
-  }
-
-  private _getIssueById$(
-    issueId: string,
-    cfg: JiraCfg,
-    isGetChangelog: boolean = false,
-  ): Observable<JiraIssue> {
-    return this._sendRequest$({
-      jiraReqCfg: {
-        transform: mapIssueResponse as (res: any, cfg?: JiraCfg) => any,
-        pathname: `issue/${issueId}`,
-        query: {
-          expand: isGetChangelog ? ['changelog', 'description'] : ['description'],
-        },
-      },
-      cfg,
-    });
-  }
-
-  // Complex Functions
-
-  // --------
-  private _isMinimalSettings(settings: JiraCfg): boolean {
-    return !!(
-      settings &&
-      settings.host &&
-      settings.userName &&
-      settings.password &&
-      (IS_ELECTRON || this._isExtension || IS_ANDROID_WEB_VIEW)
-    );
-  }
-
-  private _sendRequest$({
-    jiraReqCfg,
-    cfg,
-    isForce = false,
-    suppressErrorSnack = false,
-  }: {
-    jiraReqCfg: JiraRequestCfg;
-    cfg: JiraCfg;
-    isForce?: boolean;
-    suppressErrorSnack?: boolean;
-  }): Observable<any> {
-    return this._isInterfacesReadyIfNeeded$.pipe(
-      take(1),
-      concatMap(() => {
-        // assign uuid to request to know which responsive belongs to which promise
-        const requestId = `${jiraReqCfg.pathname}__${
-          jiraReqCfg.method || 'GET'
-        }__${nanoid()}`;
-
-        if (!isOnline()) {
-          this._snackService.open({
-            type: 'CUSTOM',
-            msg: T.G.NO_CON,
-            ico: 'cloud_off',
-          });
-          return throwError({ [HANDLED_ERROR_PROP_STR]: 'Jira Offline ' + requestId });
-        }
-
-        if (!this._isMinimalSettings(cfg)) {
-          this._snackService.open({
-            type: 'ERROR',
-            msg:
-              !IS_ELECTRON && !this._isExtension && !IS_ANDROID_WEB_VIEW
-                ? T.F.JIRA.S.EXTENSION_NOT_LOADED
-                : T.F.JIRA.S.INSUFFICIENT_SETTINGS,
-          });
-          return throwError({
-            [HANDLED_ERROR_PROP_STR]: 'Insufficient Settings for Jira ' + requestId,
-          });
-        }
-
-        if (this._isBlockAccess && !isForce) {
-          IssueLog.err('Blocked Jira Access to prevent being shut out');
-          this._bannerService.open({
-            id: BannerId.JiraUnblock,
-            msg: T.F.JIRA.BANNER.BLOCK_ACCESS_MSG,
-            svgIco: 'jira',
-            action: {
-              label: T.F.JIRA.BANNER.BLOCK_ACCESS_UNBLOCK,
-              fn: () => this.unblockAccess(),
-            },
-          });
-          return throwError({
-            [HANDLED_ERROR_PROP_STR]:
-              'Blocked access to prevent being shut out ' + requestId,
-          });
-        }
-
-        // BUILD REQUEST START
-        // -------------------
-        const requestInit = this._makeRequestInit(jiraReqCfg, cfg);
-
-        const queryStr = jiraReqCfg.query
-          ? `?${stringify(jiraReqCfg.query, { arrayFormat: 'comma' })}`
-          : '';
-        const base = `${stripTrailing(cfg.host || 'null', '/')}/rest/api/${API_VERSION}`;
-        const url = `${base}/${jiraReqCfg.pathname}${queryStr}`.trim();
-
-        return this._sendRequestToExecutor$(
-          requestId,
-          url,
-          requestInit,
-          jiraReqCfg.transform,
-          cfg,
-          suppressErrorSnack,
-        );
-        // NOTE: offline is sexier & easier than cache, but in case we change our mind...
-        // const args = [requestId, url, requestInit, jiraReqCfg.transform];
-        // return this._issueCacheService.cache(url, requestInit, this._sendRequestToExecutor$.bind(this), args);
-      }),
-    );
-  }
-
-  private _sendRequestToExecutor$(
-    requestId: string,
-    url: string,
-    requestInit: RequestInit,
-    transform: any,
-    jiraCfg: JiraCfg,
-    suppressErrorSnack: boolean,
-  ): Observable<any> {
-    // TODO refactor to observable for request canceling etc
-    let promiseResolve;
-    let promiseReject;
-    const promise = new Promise((resolve, reject) => {
-      promiseResolve = resolve;
-      promiseReject = reject;
-    });
-
-    // save to request log (also sets up timeout)
-    // since we don't use the requestLog anyway on android web view we can just use the requestId
-    if (!IS_ANDROID_WEB_VIEW) {
-      this._requestsLog[requestId] = this._makeJiraRequestLogItem({
-        promiseResolve,
-        promiseReject,
-        requestId,
-        requestInit,
-        transform,
-        jiraCfg,
+    // Validate boardId format (should be alphanumeric, typically 24 chars for Trello)
+    if (cfg.boardId && !/^[a-zA-Z0-9]+$/.test(cfg.boardId)) {
+      this._snackService.open({
+        type: 'ERROR',
+        msg: `${ISSUE_PROVIDER_HUMANIZED[TRELLO_TYPE]}: Invalid board ID format`,
+        isSkipTranslate: true,
       });
+      throwHandledError('Trello: Invalid board ID format');
     }
+  }
 
-    const requestToSend = { requestId, requestInit, url };
-    if (IS_ELECTRON) {
-      window.ea.makeJiraRequest({
-        ...requestToSend,
-        jiraCfg,
+  private _handleError$(error: HttpErrorResponse): Observable<never> {
+    const issueProviderName = ISSUE_PROVIDER_HUMANIZED[TRELLO_TYPE];
+    const errorTxt = getErrorTxt(error);
+    const normalizedError = errorTxt.toLowerCase();
+    let displayMessage = `${issueProviderName}: ${errorTxt}`;
+
+    if (error.error instanceof ErrorEvent) {
+      this._snackService.open({
+        type: 'ERROR',
+        msg: T.F.ISSUE.S.ERR_NETWORK,
+        translateParams: {
+          issueProviderName,
+        },
+      });
+    } else if (
+      normalizedError.includes('invalid') &&
+      (normalizedError.includes('id') || normalizedError.includes('objectid'))
+    ) {
+      displayMessage = `${issueProviderName}: Invalid board ID. Please double-check the board ID in the Trello settings.`;
+      this._snackService.open({
+        type: 'ERROR',
+        msg: displayMessage,
+        isSkipTranslate: true,
+      });
+    } else if (error.error && typeof error.error === 'object' && error.error.message) {
+      this._snackService.open({
+        type: 'ERROR',
+        msg: `${issueProviderName}: ${error.error.message}`,
+        isSkipTranslate: true,
       });
-    } else if (this._isExtension) {
-      this._chromeExtensionInterfaceService.dispatchEvent(
-        'SP_JIRA_REQUEST',
-        requestToSend,
-      );
-    } else if (IS_ANDROID_WEB_VIEW) {
-      return fromPromise(
-        fetch(url, requestInit)
-          .then((response) => response.body)
-          .then(streamToJsonIfPossible as any)
-          .then((res) => {
-            if ((res as any)?.errorMessages?.length) {
-              throw new Error((res as any).errorMessages.join(', '));
-            }
-            return transform ? transform({ response: res }, jiraCfg) : { response: res };
-          }),
-      ).pipe(
-        catchError((err) => {
-          IssueLog.log(err);
-          IssueLog.log(getErrorTxt(err));
-          const errTxt = `Jira: ${getErrorTxt(err)}`;
-          if (!suppressErrorSnack) {
-            this._snackService.open({ type: 'ERROR', msg: errTxt });
-          }
-          return throwError({ [HANDLED_ERROR_PROP_STR]: errTxt });
-        }),
-      );
     } else {
-      throw new Error('Jira: No valid interface found');
+      this._snackService.open({
+        type: 'ERROR',
+        msg: `${issueProviderName}: ${errorTxt}`,
+        isSkipTranslate: true,
+      });
     }
 
-    this._globalProgressBarService.countUp(url);
-    return fromPromise(promise).pipe(
-      catchError((err) => {
-        IssueLog.log(err);
-        IssueLog.log(getErrorTxt(err));
-        const errTxt = `Jira: ${getErrorTxt(err)}`;
-        if (!suppressErrorSnack) {
-          this._snackService.open({ type: 'ERROR', msg: errTxt });
-        }
-        return throwError({ [HANDLED_ERROR_PROP_STR]: errTxt });
-      }),
-      first(),
-      finalize(() => this._globalProgressBarService.countDown()),
-    );
-  }
-
-  private _makeRequestInit(jr: JiraRequestCfg, cfg: JiraCfg): RequestInit {
-    return {
-      method: jr.method || 'GET',
-
-      ...(jr.body ? { body: JSON.stringify(jr.body) } : {}),
-
-      headers: {
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        'Content-Type': 'application/json',
-        ...(cfg.usePAT
-          ? {
-              Cookie: '',
-              authorization: `Bearer ${cfg.password}`,
-            }
-          : {
-              Cookie: '',
-              authorization: `Basic ${this._b64EncodeUnicode(
-                `${cfg.userName}:${cfg.password}`,
-              )}`,
-            }),
-      },
-    };
-  }
-
-  private async _checkSetWonkyCookie(cfg: JiraCfg): Promise<string | null> {
-    const ssVal = sessionStorage.getItem(SS.JIRA_WONKY_COOKIE);
-    if (ssVal && ssVal.length > 0) {
-      return ssVal;
-    } else {
-      const loginUrl = `${cfg.host}`;
-      const apiUrl = `${cfg.host}/rest/api/${API_VERSION}/myself`;
-
-      const val = await this._matDialog
-        .open(DialogPromptComponent, {
-          data: {
-            // TODO add message to translations
-            placeholder: 'Insert Cookie String',
-            message: `<h3>Jira Wonky Cookie Authentication</h3>
-<ol>
-  <li><a href="${loginUrl}">Log into Jira from your browser</a></li>
-  <li><a href="${apiUrl}" target="_blank">Go to this api url</a></li>
-  <li>Open up the dev tools (Ctrl+Shift+i)</li>
-  <li>Navigate to the "Network" tab and reload page</li>
-  <li>Click the "myself" file on the left side.</li>
-  <li>In the "Headers" tab, scroll down and locate the "Request Headers" section.</li>
-  <li>Locate the "cookie" header and right click to copy the value</li>
-  <li>Fill this form with the cookie as "cookie: {paste-cookie-value}"</li>
-</ol>`,
-          },
-        })
-        .afterClosed()
-        .toPromise();
-
-      if (typeof val === 'string') {
-        sessionStorage.setItem(SS.JIRA_WONKY_COOKIE, val);
-        return val;
-      }
-    }
-
-    this._blockAccess();
-    return null;
-  }
-
-  private _makeJiraRequestLogItem({
-    promiseResolve,
-    promiseReject,
-    requestId,
-    requestInit,
-    transform,
-    jiraCfg,
-  }: {
-    promiseResolve: any;
-    promiseReject: any;
-    requestId: string;
-    requestInit: RequestInit;
-    transform: any;
-    jiraCfg: JiraCfg;
-  }): JiraRequestLogItem {
-    return {
-      transform,
-      resolve: promiseResolve,
-      reject: promiseReject,
-      // NOTE: only needed for debug
-      requestInit,
-      jiraCfg,
-
-      timeoutId: window.setTimeout(() => {
-        IssueLog.log('ERROR', 'Jira Request timed out', requestInit);
-        this._blockAccess();
-        // delete entry for promise
-        this._snackService.open({
-          msg: T.F.JIRA.S.TIMED_OUT,
-          type: 'ERROR',
-        });
-        this._requestsLog[requestId].reject('Request timed out');
-        delete this._requestsLog[requestId];
-      }, JIRA_REQUEST_TIMEOUT_DURATION),
-    };
-  }
-
-  private _handleResponse(res: { requestId?: string; error?: any }): void {
-    // check if proper id is given in callback and if exists in requestLog
-    if (res.requestId && this._requestsLog[res.requestId]) {
-      const currentRequest = this._requestsLog[res.requestId];
-      // cancel timeout for request
-      window.clearTimeout(currentRequest.timeoutId);
-
-      // resolve saved promise
-      if (!res || res.error) {
-        IssueLog.err('JIRA_RESPONSE_ERROR', res, currentRequest);
-        // let msg =
-        if (
-          res?.error &&
-          (res.error.statusCode === 401 ||
-            res.error === 401 ||
-            res.error.message === 'Forbidden' ||
-            res.error.message === 'Unauthorized')
-        ) {
-          this._blockAccess();
-        }
-
-        currentRequest.reject(res);
-      } else {
-        // IssueLog.log('JIRA_RESPONSE', res);
-        if (currentRequest.transform) {
-          // data can be invalid, that's why we check
-          try {
-            currentRequest.resolve(currentRequest.transform(res, currentRequest.jiraCfg));
-          } catch (e) {
-            IssueLog.log(res);
-            IssueLog.log(currentRequest);
-            IssueLog.err(e);
-            this._snackService.open({
-              type: 'ERROR',
-              msg: T.F.JIRA.S.INVALID_RESPONSE,
-            });
-          }
-        } else {
-          currentRequest.resolve(res);
-        }
-      }
-      // delete entry for promise afterwards
-      delete this._requestsLog[res.requestId];
-    } else {
-      IssueLog.err('Jira: Response Request ID not existing', res && res.requestId);
-    }
-  }
-
-  private _blockAccess(): void {
-    // TODO also shut down all existing requests
-    this._isBlockAccess = true;
-    sessionStorage.setItem(BLOCK_ACCESS_KEY, 'true');
-    sessionStorage.removeItem(SS.JIRA_WONKY_COOKIE);
-  }
-
-  private _b64EncodeUnicode(str: string): string {
-    if (typeof (btoa as any) === 'function') {
-      return btoa(str);
-    }
-    throw new Error('Jira: btoo not supported');
-  }
-}
-
-// eslint-disable-next-line prefer-arrow/prefer-arrow-functions
-async function streamToString(stream: ReadableStream): Promise<string> {
-  const reader = stream.getReader();
-  const decoder = new TextDecoder();
-  let result = '';
-  let done = false;
-
-  while (!done) {
-    const { value, done: doneReading } = await reader.read();
-    done = doneReading;
-    if (value) {
-      result += decoder.decode(value, { stream: true });
-    }
-  }
-
-  result += decoder.decode(); // flush the decoder
-  return result;
-}
-
-// eslint-disable-next-line prefer-arrow/prefer-arrow-functions
-async function streamToJsonIfPossible(stream: ReadableStream): Promise<any> {
-  const text = await streamToString(stream);
-  try {
-    return JSON.parse(text);
-  } catch (e) {
-    IssueLog.err('Jira: Could not parse response', text);
-    return text;
+    return throwError({
+      [HANDLED_ERROR_PROP_STR]: displayMessage,
+    });
   }
 }
diff --git a/src/app/features/issue/providers/trello/trello-common-interfaces.service.ts b/src/app/features/issue/providers/trello/trello-common-interfaces.service.ts
index 837a3a43c..6d5ef53b4 100644
--- a/src/app/features/issue/providers/trello/trello-common-interfaces.service.ts
+++ b/src/app/features/issue/providers/trello/trello-common-interfaces.service.ts
@@ -5,13 +5,13 @@
 import { Injectable, inject } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { Task } from 'src/app/features/tasks/task.model';
-import { first, map, switchMap, tap } from 'rxjs/operators';
+import { first, switchMap, tap } from 'rxjs/operators';
 import { IssueServiceInterface } from '../../issue-service-interface';
 import { TrelloApiService } from './trello-api.service';
 import { IssueProviderTrello, SearchResultItem } from '../../issue.model';
 import { TrelloIssue, TrelloIssueReduced } from './trello-issue.model';
 import { TaskAttachment } from '../../../tasks/task-attachment/task-attachment.model';
-// import { mapJiraAttachmentToAttachment } from './jira-issue-map.util';
+import { mapTrelloAttachmentToAttachment } from './trello-issue-map.util';
 import { TrelloCfg } from './trello.model';
 import { isTrelloEnabled } from './is-trello-enabled.util';
 import { IssueProviderService } from '../../issue-provider.service';
@@ -33,13 +33,10 @@ export class TrelloCommonInterfacesService implements IssueServiceInterface {
     return isTrelloEnabled(cfg);
   }
 
-  testConnection(cfg: JiraCfg): Promise<boolean> {
+  testConnection(cfg: TrelloCfg): Promise<boolean> {
     return this._trelloApiService
-      .issuePicker$('', cfg)
-      .pipe(
-        map((res) => Array.isArray(res)),
-        first(),
-      )
+      .testConnection$(cfg)
+      .pipe(first())
       .toPromise()
       .then((result) => result ?? false);
   }
@@ -48,14 +45,17 @@ export class TrelloCommonInterfacesService implements IssueServiceInterface {
   getById(issueId: string | number, issueProviderId: string): Promise<TrelloIssue> {
     return this._getCfgOnce$(issueProviderId)
       .pipe(
-        switchMap((jiraCfg) =>
-          this._trelloApiService.getIssueById$(assertTruthy(issueId).toString(), jiraCfg),
+        switchMap((trelloCfg) =>
+          this._trelloApiService.getIssueById$(
+            assertTruthy(issueId).toString(),
+            trelloCfg,
+          ),
         ),
       )
       .toPromise()
       .then((result) => {
         if (!result) {
-          throw new Error('Failed to get Jira issue');
+          throw new Error('Failed to get Trello card');
         }
         return result;
       });
@@ -65,11 +65,11 @@ export class TrelloCommonInterfacesService implements IssueServiceInterface {
   searchIssues(searchTerm: string, issueProviderId: string): Promise<SearchResultItem[]> {
     return this._getCfgOnce$(issueProviderId)
       .pipe(
-        switchMap((jiraCfg) =>
-          this.isEnabled(jiraCfg)
+        switchMap((trelloCfg) =>
+          this.isEnabled(trelloCfg)
             ? this._trelloApiService
-                .issuePicker$(searchTerm, jiraCfg)
-                .pipe(tap((v) => IssueLog.log('jira.issuePicker$', v)))
+                .issuePicker$(searchTerm, trelloCfg)
+                .pipe(tap((v) => IssueLog.log('trello.issuePicker$', v)))
             : of([]),
         ),
       )
@@ -105,7 +105,7 @@ export class TrelloCommonInterfacesService implements IssueServiceInterface {
           issueWasUpdated: true,
         },
         issue,
-        issueTitle: issue.key,
+        issueTitle: issue.summary,
       };
     }
     return null;
@@ -140,8 +140,7 @@ export class TrelloCommonInterfacesService implements IssueServiceInterface {
   getAddTaskData(issue: TrelloIssueReduced): Partial<Task> & { title: string } {
     return {
       title: `${issue.key} ${issue.summary}`,
-      issuePoints: issue.storyPoints,
-      // circumvent errors for old jira versions #652
+      issuePoints: issue.storyPoints ?? undefined,
       issueAttachmentNr: issue.attachments ? issue.attachments.length : 0,
       issueWasUpdated: false,
       issueLastUpdated: new Date(issue.updated).getTime(),
@@ -156,7 +155,9 @@ export class TrelloCommonInterfacesService implements IssueServiceInterface {
     return this._getCfgOnce$(issueProviderId)
       .pipe(
         first(),
-        map((jiraCfg) => jiraCfg.host + '/browse/' + issueId),
+        switchMap((trelloCfg) =>
+          this._trelloApiService.getCardUrl$(issueId.toString(), trelloCfg),
+        ),
       )
       .toPromise()
       .then((result) => result ?? '');
@@ -172,11 +173,11 @@ export class TrelloCommonInterfacesService implements IssueServiceInterface {
 
   getMappedAttachments(issueData: TrelloIssue): TaskAttachment[] {
     return issueData?.attachments?.length
-      ? issueData.attachments.map(mapJiraAttachmentToAttachment)
+      ? issueData.attachments.map(mapTrelloAttachmentToAttachment)
       : [];
   }
 
   private _getCfgOnce$(issueProviderId: string): Observable<IssueProviderTrello> {
-    return this._issueProviderService.getCfgOnce$(issueProviderId, 'JIRA');
+    return this._issueProviderService.getCfgOnce$(issueProviderId, 'TRELLO');
   }
 }
diff --git a/src/app/features/issue/providers/trello/trello-issue-content.const.ts b/src/app/features/issue/providers/trello/trello-issue-content.const.ts
new file mode 100644
index 000000000..22d60f034
--- /dev/null
+++ b/src/app/features/issue/providers/trello/trello-issue-content.const.ts
@@ -0,0 +1,60 @@
+/**
+ * Content of issues imported from trello.
+ * Useful for display in the issue panel.
+ */
+
+import { T } from '../../../../t.const';
+import {
+  IssueContentConfig,
+  IssueFieldType,
+} from '../../issue-content/issue-content.model';
+import { IssueProviderKey } from '../../issue.model';
+import { TrelloIssue } from './trello-issue.model';
+
+const formatMembers = (issue: TrelloIssue): string =>
+  issue.members
+    .map((member) => member.fullName || member.username)
+    .filter(Boolean)
+    .join(', ');
+
+export const TRELLO_ISSUE_CONTENT_CONFIG: IssueContentConfig<TrelloIssue> = {
+  issueType: 'TRELLO' as IssueProviderKey,
+  fields: [
+    {
+      label: T.F.ISSUE.ISSUE_CONTENT.SUMMARY,
+      type: IssueFieldType.LINK,
+      value: (issue: TrelloIssue) => `${issue.key} ${issue.summary}`.trim(),
+      getLink: (issue: TrelloIssue) => issue.url,
+    },
+    {
+      label: T.F.ISSUE.ISSUE_CONTENT.STATUS,
+      type: IssueFieldType.TEXT,
+      value: (issue: TrelloIssue) => (issue.closed ? 'Closed' : 'Open'),
+    },
+    {
+      label: T.F.ISSUE.ISSUE_CONTENT.DUE_DATE,
+      type: IssueFieldType.TEXT,
+      value: (issue: TrelloIssue) => issue.due,
+      isVisible: (issue: TrelloIssue) => !!issue.due,
+    },
+    {
+      label: T.F.ISSUE.ISSUE_CONTENT.LABELS,
+      type: IssueFieldType.CHIPS,
+      value: (issue: TrelloIssue) => issue.labels,
+      isVisible: (issue: TrelloIssue) => (issue.labels?.length ?? 0) > 0,
+    },
+    {
+      label: T.F.ISSUE.ISSUE_CONTENT.ASSIGNEE,
+      type: IssueFieldType.TEXT,
+      value: (issue: TrelloIssue) => formatMembers(issue),
+      isVisible: (issue: TrelloIssue) => (issue.members?.length ?? 0) > 0,
+    },
+    {
+      label: T.F.ISSUE.ISSUE_CONTENT.DESCRIPTION,
+      type: IssueFieldType.MARKDOWN,
+      value: (issue: TrelloIssue) => issue.desc,
+      isVisible: (issue: TrelloIssue) => !!issue.desc,
+    },
+  ],
+  getIssueUrl: (issue: TrelloIssue) => issue.url,
+};
diff --git a/src/app/features/issue/providers/trello/trello-issue-map.util.ts b/src/app/features/issue/providers/trello/trello-issue-map.util.ts
index e69de29bb..b182241e5 100644
--- a/src/app/features/issue/providers/trello/trello-issue-map.util.ts
+++ b/src/app/features/issue/providers/trello/trello-issue-map.util.ts
@@ -0,0 +1,219 @@
+/**
+ * Maps data from trello API to internal format for compatibility
+ */
+
+import { SearchResultItem } from '../../issue.model';
+import {
+  TrelloAttachment,
+  TrelloAttachmentPreview,
+  TrelloIssue,
+  TrelloIssueReduced,
+  TrelloLabel,
+  TrelloMember,
+} from './trello-issue.model';
+import { dedupeByKey } from '../../../../util/de-dupe-by-key';
+import {
+  DropPasteIcons,
+  DropPasteInputType,
+} from '../../../../core/drop-paste-input/drop-paste.model';
+import { TaskAttachment } from '../../../tasks/task-attachment/task-attachment.model';
+
+export interface TrelloCardLabelResponse {
+  id: string;
+  name: string;
+  color: string | null;
+}
+
+export interface TrelloCardMemberResponse {
+  id: string;
+  fullName: string;
+  username: string;
+  avatarUrl?: string | null;
+  avatarHash?: string | null;
+}
+
+export interface TrelloCardAttachmentPreviewResponse {
+  id: string;
+  url: string;
+  scaled: boolean;
+  bytes: number | null;
+  height: number | null;
+  width: number | null;
+}
+
+export interface TrelloCardAttachmentResponse {
+  id: string;
+  bytes: number | null;
+  date: string;
+  edgeColor: string | null;
+  idMember: string | null;
+  isUpload: boolean;
+  mimeType: string | null;
+  name: string;
+  url: string;
+  pos: number;
+  previews?: TrelloCardAttachmentPreviewResponse[];
+}
+
+export interface TrelloCardResponse {
+  id: string;
+  idShort: number | null;
+  shortLink: string;
+  name: string;
+  desc: string;
+  url: string;
+  due: string | null;
+  dueComplete: boolean;
+  closed: boolean;
+  idBoard: string;
+  idList: string;
+  dateLastActivity: string;
+  labels?: TrelloCardLabelResponse[];
+  members?: TrelloCardMemberResponse[];
+  attachments?: TrelloCardAttachmentResponse[];
+}
+
+export interface TrelloSearchResponse {
+  cards: TrelloCardResponse[];
+}
+
+export const mapTrelloCardToIssue = (card: TrelloCardResponse): TrelloIssue => {
+  const base = mapTrelloCardReduced(card);
+  return {
+    ...base,
+  };
+};
+
+export const mapTrelloCardReduced = (card: TrelloCardResponse): TrelloIssueReduced => {
+  const key =
+    card.idShort !== null && card.idShort !== undefined
+      ? card.idShort.toString()
+      : card.shortLink;
+
+  return Object.freeze({
+    id: card.shortLink,
+    idCard: card.id,
+    key,
+    shortLink: card.shortLink,
+    name: card.name,
+    summary: card.name,
+    desc: card.desc || null,
+    url: card.url,
+    due: card.due,
+    dueComplete: card.dueComplete,
+    closed: card.closed,
+    idBoard: card.idBoard,
+    idList: card.idList,
+    updated: card.dateLastActivity,
+    labels: mapTrelloLabels(card.labels),
+    members: mapTrelloMembers(card.members),
+    attachments: mapTrelloAttachments(card.attachments),
+    storyPoints: undefined,
+  });
+};
+
+export const mapTrelloSearchResults = (
+  cards: TrelloCardResponse[] = [],
+): SearchResultItem<'TRELLO'>[] => {
+  const deduped = dedupeByKey(cards, 'shortLink');
+  return deduped.map((card) => {
+    const reduced = mapTrelloCardReduced(card);
+    return {
+      title: `${reduced.key} ${reduced.summary}`.trim(),
+      issueType: 'TRELLO',
+      issueData: reduced,
+    };
+  });
+};
+
+export const mapTrelloAttachmentToAttachment = (
+  attachment: TrelloAttachment,
+): TaskAttachment => {
+  const type = mapAttachmentType(attachment.mimeType, attachment.url);
+  return {
+    id: null,
+    title: attachment.name,
+    path: attachment.url,
+    originalImgPath: attachment.url,
+    type,
+    icon: DropPasteIcons[type],
+  };
+};
+
+const mapTrelloLabels = (labels?: TrelloCardLabelResponse[]): TrelloLabel[] => {
+  if (!labels || !labels.length) {
+    return [];
+  }
+  return labels.map((label) => ({
+    id: label.id,
+    name: label.name,
+    color: label.color ?? null,
+  }));
+};
+
+const mapTrelloMembers = (members?: TrelloCardMemberResponse[]): TrelloMember[] => {
+  if (!members || !members.length) {
+    return [];
+  }
+  return members.map((member) => ({
+    id: member.id,
+    fullName: member.fullName,
+    username: member.username,
+    avatarUrl: member.avatarUrl ?? null,
+  }));
+};
+
+const mapTrelloAttachments = (
+  attachments?: TrelloCardAttachmentResponse[],
+): TrelloAttachment[] => {
+  if (!attachments || !attachments.length) {
+    return [];
+  }
+  return attachments.map((attachment) => ({
+    id: attachment.id,
+    bytes: attachment.bytes ?? null,
+    date: attachment.date,
+    edgeColor: attachment.edgeColor ?? null,
+    idMember: attachment.idMember ?? null,
+    isUpload: attachment.isUpload,
+    mimeType: attachment.mimeType ?? null,
+    name: attachment.name,
+    previews: mapTrelloAttachmentPreviews(attachment.previews),
+    url: attachment.url,
+    pos: attachment.pos,
+  }));
+};
+
+const mapTrelloAttachmentPreviews = (
+  previews?: TrelloCardAttachmentPreviewResponse[],
+): TrelloAttachmentPreview[] => {
+  if (!previews || !previews.length) {
+    return [];
+  }
+  return previews.map((preview) => ({
+    id: preview.id,
+    url: preview.url,
+    height: preview.height ?? null,
+    width: preview.width ?? null,
+    scaled: preview.scaled,
+    bytes: preview.bytes ?? null,
+  }));
+};
+
+const mapAttachmentType = (mimeType: string | null, url: string): DropPasteInputType => {
+  if (mimeType) {
+    if (mimeType.startsWith('image/')) {
+      return 'IMG';
+    }
+    if (mimeType.startsWith('video/')) {
+      return 'FILE';
+    }
+  }
+
+  const extension = url.split('.').pop()?.toLowerCase();
+  if (extension && ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp'].includes(extension)) {
+    return 'IMG';
+  }
+
+  return 'LINK';
+};
diff --git a/src/app/features/issue/providers/trello/trello-issue.model.ts b/src/app/features/issue/providers/trello/trello-issue.model.ts
index fd03e724c..e32804597 100644
--- a/src/app/features/issue/providers/trello/trello-issue.model.ts
+++ b/src/app/features/issue/providers/trello/trello-issue.model.ts
@@ -1,13 +1,65 @@
-// trello issue model
-
-export type TrelloIssueReduced = Readonly<{
+/**
+ * trello issue model
+ * reference: https://developer.atlassian.com/cloud/trello/rest/api-group-cards/#api-group-cards
+ */
+export interface TrelloLabel {
   id: string;
   name: string;
-  desc: string;
-  due: string;
-  closed: boolean;
+  color: string | null;
+}
+
+export interface TrelloMember {
+  id: string;
+  fullName: string;
+  username: string;
+  avatarUrl: string | null;
+}
+
+export interface TrelloAttachmentPreview {
+  id: string;
   url: string;
+  height: number | null;
+  width: number | null;
+  scaled: boolean;
+  bytes: number | null;
+}
+
+export interface TrelloAttachment {
+  id: string;
+  bytes: number | null;
+  date: string;
+  edgeColor: string | null;
+  idMember: string | null;
+  isUpload: boolean;
+  mimeType: string | null;
+  name: string;
+  previews: TrelloAttachmentPreview[];
+  url: string;
+  pos: number;
+}
+
+export type TrelloIssueReduced = Readonly<{
+  /** Short link for the card; used as the primary identifier within the app */
+  id: string;
+  /** Full Trello card id */
+  idCard: string;
+  /** Numeric short id shown on the board */
+  key: string;
+  shortLink: string;
+  name: string;
+  summary: string;
+  desc: string | null;
+  url: string;
+  due: string | null;
+  dueComplete: boolean;
+  closed: boolean;
+  idBoard: string;
+  idList: string;
+  updated: string;
+  labels: TrelloLabel[];
+  members: TrelloMember[];
+  attachments: TrelloAttachment[];
+  storyPoints?: number | null;
 }>;
 
-// will find additional field later
 export type TrelloIssue = TrelloIssueReduced;
diff --git a/src/app/features/issue/providers/trello/trello.const.ts b/src/app/features/issue/providers/trello/trello.const.ts
index da8ebfbbe..3e8c8eb7c 100644
--- a/src/app/features/issue/providers/trello/trello.const.ts
+++ b/src/app/features/issue/providers/trello/trello.const.ts
@@ -1,26 +1,34 @@
+// Necessary fields for trello configuration. Used for building the form, alongside with several essential properties.
+
 import {
   ConfigFormSection,
   LimitedFormlyFieldConfig,
 } from '../../../config/global-config.model';
-import { ISSUE_PROVIDER_COMMON_FORM_FIELDS } from '../../common-issue-form-stuff.const';
+import {
+  CROSS_ORIGIN_WARNING,
+  ISSUE_PROVIDER_COMMON_FORM_FIELDS,
+} from '../../common-issue-form-stuff.const';
 import { IssueProviderTrello } from '../../issue.model';
 import { TrelloCfg } from './trello.model';
 
 export const DEFAULT_TRELLO_CFG: TrelloCfg = {
   isEnabled: false,
+  apiKey: null,
   token: null,
   boardId: null,
 };
 
 export const TRELLO_POLL_INTERVAL = 5 * 60 * 1000;
 export const TRELLO_CONFIG_FORM: LimitedFormlyFieldConfig<IssueProviderTrello>[] = [
+  ...CROSS_ORIGIN_WARNING,
   {
-    key: 'boardId',
+    key: 'apiKey',
     type: 'input',
     props: {
-      label: 'Trello board ID',
-      description: 'Specify the board to sync when the integration becomes available.',
+      label: 'Trello API key',
+      description: 'Create or copy an API key from https://trello.com/app-key.',
       type: 'text',
+      required: true,
     },
   },
   {
@@ -29,8 +37,20 @@ export const TRELLO_CONFIG_FORM: LimitedFormlyFieldConfig<IssueProviderTrello>[]
     props: {
       label: 'Trello API token',
       description:
-        'Generate a token via Trello developer tools. This stub does not use it yet.',
+        'Generate a token via the Trello developer tools after logging in with your account.',
       type: 'password',
+      required: true,
+    },
+  },
+  {
+    key: 'boardId',
+    type: 'input',
+    props: {
+      label: 'Trello board ID',
+      description:
+        'Paste the board ID (from the board URL) that should be used for search and auto-import.',
+      type: 'text',
+      required: true,
     },
   },
   {
@@ -44,5 +64,5 @@ export const TRELLO_CONFIG_FORM_SECTION: ConfigFormSection<IssueProviderTrello>
   title: 'Trello',
   key: 'TRELLO',
   items: TRELLO_CONFIG_FORM,
-  help: 'Trello integration is currently a non-functional stub.',
+  help: 'Connect your Trello board to search for cards, open them from tasks, and keep card details in sync.',
 };
diff --git a/src/app/features/issue/providers/trello/trello.model.ts b/src/app/features/issue/providers/trello/trello.model.ts
index 77e23e10a..0f5f56170 100644
--- a/src/app/features/issue/providers/trello/trello.model.ts
+++ b/src/app/features/issue/providers/trello/trello.model.ts
@@ -1,13 +1,11 @@
 /**
- * Trello is currently a non-functional stub
- * Configuration for setting up trello
+ * Configuration model for the Trello integration.
  */
 
 import { BaseIssueProviderCfg } from '../../issue.model';
-
-// TODO: currently setting this up for connecting trello first, then figure things out later
 export interface TrelloCfg extends BaseIssueProviderCfg {
   isEnabled: boolean;
+  apiKey: string | null;
   token: string | null;
   boardId: string | null;
 }

From f887d681c901eead9c6188a03f4ff25a1400c68a Mon Sep 17 00:00:00 2001
From: Ronaldo93 <51114190+Ronaldo93@users.noreply.github.com>
Date: Mon, 27 Oct 2025 05:52:57 +0000
Subject: [PATCH 06/18] feat: select trello board after valid trello
 configuration.

---
 .../dialog-edit-issue-provider.component.html |   8 +
 .../dialog-edit-issue-provider.component.ts   |   5 +
 .../get-issue-provider-tooltip.ts             |   6 +-
 .../providers/trello/trello-api.service.ts    |   8 +
 .../trello-common-interfaces.service.ts       |   1 -
 .../trello_additional_cfg.component.ts        | 186 ++++++++++++++++++
 .../issue/providers/trello/trello.const.ts    |  17 +-
 .../issue/providers/trello/trello.model.ts    |   3 +
 8 files changed, 218 insertions(+), 16 deletions(-)
 create mode 100644 src/app/features/issue/providers/trello/trello-view-components/trello_cfg/trello_additional_cfg.component.ts

diff --git a/src/app/features/issue/dialog-edit-issue-provider/dialog-edit-issue-provider.component.html b/src/app/features/issue/dialog-edit-issue-provider/dialog-edit-issue-provider.component.html
index afce1e4e8..7095c472d 100644
--- a/src/app/features/issue/dialog-edit-issue-provider/dialog-edit-issue-provider.component.html
+++ b/src/app/features/issue/dialog-edit-issue-provider/dialog-edit-issue-provider.component.html
@@ -117,6 +117,14 @@
           ></open-project-additional-cfg>
           <!-- -->
         }
+        @case ('TRELLO') {
+          <trello-additional-cfg
+            [section]="configFormSection"
+            [cfg]="model"
+            (modelChange)="customCfgCmpSave($event)"
+          ></trello-additional-cfg>
+          <!-- -->
+        }
       }
     }
   </mat-dialog-content>
diff --git a/src/app/features/issue/dialog-edit-issue-provider/dialog-edit-issue-provider.component.ts b/src/app/features/issue/dialog-edit-issue-provider/dialog-edit-issue-provider.component.ts
index 09b6c2105..5cd0d74a4 100644
--- a/src/app/features/issue/dialog-edit-issue-provider/dialog-edit-issue-provider.component.ts
+++ b/src/app/features/issue/dialog-edit-issue-provider/dialog-edit-issue-provider.component.ts
@@ -49,6 +49,7 @@ import { MatIcon } from '@angular/material/icon';
 import { IS_ANDROID_WEB_VIEW } from '../../../util/is-android-web-view';
 import { devError } from '../../../util/dev-error';
 import { IssueLog } from '../../../core/log';
+import { TrelloAdditionalCfgComponent } from '../providers/trello/trello-view-components/trello_cfg/trello_additional_cfg.component';
 
 @Component({
   selector: 'dialog-edit-issue-provider',
@@ -69,6 +70,7 @@ import { IssueLog } from '../../../core/log';
     MatButton,
     MatIcon,
     MatDialogTitle,
+    TrelloAdditionalCfgComponent, // added for custom trello board loading support
   ],
   templateUrl: './dialog-edit-issue-provider.component.html',
   styleUrl: './dialog-edit-issue-provider.component.scss',
@@ -150,7 +152,9 @@ export class DialogEditIssueProviderComponent {
 
   customCfgCmpSave(cfgUpdates: IssueIntegrationCfg): void {
     IssueLog.log('customCfgCmpSave()', cfgUpdates);
+    console.log('Dialog received config update:', cfgUpdates);
     this.updateModel(cfgUpdates);
+    console.log('Dialog model after update:', this.model);
   }
 
   updateModel(model: Partial<IssueProvider>): void {
@@ -245,4 +249,5 @@ export class DialogEditIssueProviderComponent {
   protected readonly IS_ELECTRON = IS_ELECTRON;
   protected readonly IS_WEB_EXTENSION_REQUIRED_FOR_JIRA =
     IS_WEB_EXTENSION_REQUIRED_FOR_JIRA;
+  // TODO: trello
 }
diff --git a/src/app/features/issue/mapping-helper/get-issue-provider-tooltip.ts b/src/app/features/issue/mapping-helper/get-issue-provider-tooltip.ts
index cfe014d63..c2852ffbf 100644
--- a/src/app/features/issue/mapping-helper/get-issue-provider-tooltip.ts
+++ b/src/app/features/issue/mapping-helper/get-issue-provider-tooltip.ts
@@ -20,7 +20,7 @@ export const getIssueProviderTooltip = (issueProvider: IssueProvider): string =>
       case 'OPEN_PROJECT':
         return issueProvider.projectId;
       case 'TRELLO':
-        return issueProvider.boardId;
+        return issueProvider.boardName || issueProvider.boardId;
       default:
         return undefined;
     }
@@ -87,7 +87,9 @@ export const getIssueProviderInitials = (
     case 'GITEA':
       return getRepoInitials(issueProvider.repoFullname);
     case 'TRELLO':
-      return issueProvider.boardId?.substring(0, 2).toUpperCase();
+      return (issueProvider.boardName || issueProvider.boardId)
+        ?.substring(0, 2)
+        ?.toUpperCase();
   }
   return undefined;
 };
diff --git a/src/app/features/issue/providers/trello/trello-api.service.ts b/src/app/features/issue/providers/trello/trello-api.service.ts
index 858c68f9c..c43fef346 100644
--- a/src/app/features/issue/providers/trello/trello-api.service.ts
+++ b/src/app/features/issue/providers/trello/trello-api.service.ts
@@ -101,6 +101,14 @@ export class TrelloApiService {
     );
   }
 
+  // list all projects from user
+  getBoards$(cfg: TrelloCfg): Observable<any> {
+    return this._request$('/members/me/boards', cfg, {
+      filter: 'open',
+      fields: 'name,id',
+    });
+  }
+
   getIssueById$(issueId: string, cfg: TrelloCfg): Observable<TrelloIssue> {
     return this._request$<TrelloCardResponse>(`/cards/${issueId}`, cfg, {
       fields: `${DEFAULT_CARD_FIELDS},labels`,
diff --git a/src/app/features/issue/providers/trello/trello-common-interfaces.service.ts b/src/app/features/issue/providers/trello/trello-common-interfaces.service.ts
index 6d5ef53b4..73c48b7bc 100644
--- a/src/app/features/issue/providers/trello/trello-common-interfaces.service.ts
+++ b/src/app/features/issue/providers/trello/trello-common-interfaces.service.ts
@@ -94,7 +94,6 @@ export class TrelloCommonInterfacesService implements IssueServiceInterface {
       .getIssueById$(task.issueId, cfg)
       .toPromise()) as TrelloIssue;
 
-    // @see https://developer.atlassian.com/cloud/jira/platform/jira-expressions-type-reference/#date
     const newUpdated = new Date(issue.updated).getTime();
     const wasUpdated = newUpdated > (task.issueLastUpdated || 0);
 
diff --git a/src/app/features/issue/providers/trello/trello-view-components/trello_cfg/trello_additional_cfg.component.ts b/src/app/features/issue/providers/trello/trello-view-components/trello_cfg/trello_additional_cfg.component.ts
new file mode 100644
index 000000000..0d549499d
--- /dev/null
+++ b/src/app/features/issue/providers/trello/trello-view-components/trello_cfg/trello_additional_cfg.component.ts
@@ -0,0 +1,186 @@
+// additional configuration for trello e.g. board selection.
+
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  inject,
+  input,
+  Input,
+  OnDestroy,
+  OnInit,
+  output,
+} from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TrelloApiService } from '../../trello-api.service';
+import { SnackService } from 'src/app/core/snack/snack.service';
+import { IssueProviderTrello } from 'src/app/features/issue/issue.model';
+import { ConfigFormSection } from 'src/app/features/config/global-config.model';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatSelect, MatOption } from '@angular/material/select';
+import { AsyncPipe } from '@angular/common';
+import { BehaviorSubject, Observable, Subscription, of } from 'rxjs';
+import { catchError, map, tap, debounceTime, switchMap, startWith } from 'rxjs/operators';
+
+interface TrelloBoard {
+  id: string;
+  name: string;
+}
+
+@Component({
+  selector: 'trello-additional-cfg',
+  standalone: true,
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    MatFormField,
+    MatLabel,
+    MatSelect,
+    MatOption,
+    AsyncPipe,
+  ],
+
+  // dynamic template
+  template: `
+    <mat-form-field
+      appearance="outline"
+      style="width: 100%;"
+    >
+      <mat-label>Trello Board</mat-label>
+      <mat-select
+        [(ngModel)]="selectedBoardId"
+        (ngModelChange)="onBoardSelect($event)"
+        [disabled]="!isCredentialsComplete"
+      >
+        @for (board of boards$ | async; track board.id) {
+          <mat-option [value]="board.id">
+            {{ board.name }}
+          </mat-option>
+        }
+        @if ((boards$ | async)?.length === 0 && isCredentialsComplete) {
+          <mat-option disabled> No boards available </mat-option>
+        }
+        @if (!isCredentialsComplete) {
+          <mat-option disabled> Enter API key and token first </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TrelloAdditionalCfgComponent implements OnInit, OnDestroy {
+  // inject some of the service
+  private _trelloApiService = inject(TrelloApiService);
+  private _snackService = inject(SnackService);
+  private _cdr = inject(ChangeDetectorRef);
+
+  // inputs and outputs
+  readonly section = input<ConfigFormSection<IssueProviderTrello>>();
+  readonly modelChange = output<IssueProviderTrello>();
+
+  // state
+  private _cfg?: IssueProviderTrello;
+  private _credentialsChanged$ = new BehaviorSubject<IssueProviderTrello | null>(null);
+  private _boardsList$ = new BehaviorSubject<TrelloBoard[]>([]);
+
+  selectedBoardId?: string | null;
+  isCredentialsComplete = false;
+
+  boards$: Observable<TrelloBoard[]>;
+  isLoading$ = new BehaviorSubject<boolean>(false);
+
+  private _subs = new Subscription();
+
+  constructor() {
+    // Initialize boards$ with proper debounce and switchMap
+    this.boards$ = this._credentialsChanged$.pipe(
+      debounceTime(3000), // Wait 3 seconds after user stops typing
+      switchMap((cfg) => {
+        // Check if we have minimum required credentials (apiKey and token)
+        if (!cfg || !cfg.apiKey || !cfg.token) {
+          this.isCredentialsComplete = false;
+          this.isLoading$.next(false);
+          this._boardsList$.next([]);
+          this._cdr.markForCheck();
+          return of<TrelloBoard[]>([]);
+        }
+
+        this.isCredentialsComplete = true;
+        this.isLoading$.next(true);
+        this._cdr.markForCheck();
+
+        // Create a temporary config with a placeholder boardId for the API call
+        const tempCfgForFetch = { ...cfg, boardId: 'temp' };
+
+        // Fetch all boards from user
+        return this._trelloApiService.getBoards$(tempCfgForFetch).pipe(
+          map((response) => {
+            // Map Trello API response to our format
+            const boards = (response || []).map((board: any) => ({
+              id: board.id,
+              name: board.name,
+            }));
+            // Store boards in BehaviorSubject so we can access them later
+            this._boardsList$.next(boards);
+            return boards;
+          }),
+          tap(() => {
+            this.isLoading$.next(false);
+            this._cdr.markForCheck();
+          }),
+          catchError((error) => {
+            this.isLoading$.next(false);
+            this._boardsList$.next([]);
+            this._cdr.markForCheck();
+            // Show error notification
+            this._snackService.open({
+              type: 'ERROR',
+              msg: 'Failed to load Trello boards. Check your API credentials.',
+              isSkipTranslate: true,
+            });
+            return of<TrelloBoard[]>([]);
+          }),
+        );
+      }),
+      startWith<TrelloBoard[]>([]),
+    );
+  }
+
+  @Input() set cfg(cfg: IssueProviderTrello) {
+    this._cfg = cfg;
+    this.selectedBoardId = cfg.boardId;
+    // Emit credential change to trigger debounced API call
+    // Only emit if apiKey or token is present (boardId not required for fetching boards list)
+    if (cfg.apiKey || cfg.token) {
+      this._credentialsChanged$.next(cfg);
+    }
+  }
+
+  ngOnInit(): void {
+    // Load boards if credentials already exist
+    if (this._cfg && (this._cfg.apiKey || this._cfg.token)) {
+      this._credentialsChanged$.next(this._cfg);
+    }
+  }
+
+  ngOnDestroy(): void {
+    this._subs.unsubscribe();
+    this._credentialsChanged$.complete();
+    this._boardsList$.complete();
+  }
+
+  onBoardSelect(boardId: string | null): void {
+    if (this._cfg && boardId) {
+      // Get the board name from the stored boards list
+      const selectedBoard = this._boardsList$.value.find((board) => board.id === boardId);
+
+      const updated: IssueProviderTrello = {
+        ...this._cfg,
+        boardId,
+        boardName: selectedBoard?.name || null, // Add board name
+      };
+      this._cfg = updated;
+      this.modelChange.emit(updated);
+    }
+  }
+}
diff --git a/src/app/features/issue/providers/trello/trello.const.ts b/src/app/features/issue/providers/trello/trello.const.ts
index 3e8c8eb7c..96758d849 100644
--- a/src/app/features/issue/providers/trello/trello.const.ts
+++ b/src/app/features/issue/providers/trello/trello.const.ts
@@ -26,7 +26,8 @@ export const TRELLO_CONFIG_FORM: LimitedFormlyFieldConfig<IssueProviderTrello>[]
     type: 'input',
     props: {
       label: 'Trello API key',
-      description: 'Create or copy an API key from https://trello.com/app-key.',
+      description:
+        'Follow this guide: https://developer.atlassian.com/cloud/trello/guides/rest-api/api-introduction/ to get API key and token.',
       type: 'text',
       required: true,
     },
@@ -37,22 +38,12 @@ export const TRELLO_CONFIG_FORM: LimitedFormlyFieldConfig<IssueProviderTrello>[]
     props: {
       label: 'Trello API token',
       description:
-        'Generate a token via the Trello developer tools after logging in with your account.',
+        'Follow this guide: https://developer.atlassian.com/cloud/trello/guides/rest-api/api-introduction/ to get API key and token.',
       type: 'password',
       required: true,
     },
   },
-  {
-    key: 'boardId',
-    type: 'input',
-    props: {
-      label: 'Trello board ID',
-      description:
-        'Paste the board ID (from the board URL) that should be used for search and auto-import.',
-      type: 'text',
-      required: true,
-    },
-  },
+  // search boards
   {
     type: 'collapsible',
     props: { label: 'Advanced Config' },
diff --git a/src/app/features/issue/providers/trello/trello.model.ts b/src/app/features/issue/providers/trello/trello.model.ts
index 0f5f56170..8e66142c4 100644
--- a/src/app/features/issue/providers/trello/trello.model.ts
+++ b/src/app/features/issue/providers/trello/trello.model.ts
@@ -8,4 +8,7 @@ export interface TrelloCfg extends BaseIssueProviderCfg {
   apiKey: string | null;
   token: string | null;
   boardId: string | null;
+
+  // experimental: board - add board name
+  boardName?: string | null;
 }

From b782a14566411c2cf5cb9048f562f7cf07dccacc Mon Sep 17 00:00:00 2001
From: Ronaldo93 <51114190+Ronaldo93@users.noreply.github.com>
Date: Tue, 28 Oct 2025 21:25:26 +0700
Subject: [PATCH 07/18] feat: Update README to include Trello in integrations

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 6e3bc4776..b49dd7268 100644
--- a/README.md
+++ b/README.md
@@ -132,7 +132,7 @@
   - The **anti-procrastination feature** helps you gain perspective when you really need to.
   - Need some extra focus? A **Pomodoro timer** is also always at hand.
   - **Collect personal metrics** to see, which of your work routines need adjustments.
-- Integrate with **Jira**, **GitHub**, **GitLab**, **Gitea** and **OpenProject**. Auto import tasks assigned to you, plan the details locally, automatically create work logs, and get notified immediately, when something changes.
+- Integrate with **Jira**, **Trello**, **GitHub**, **GitLab**, **Gitea** and **OpenProject**. Auto import tasks assigned to you, plan the details locally, automatically create work logs, and get notified immediately, when something changes.
 - Basic [**CalDAV**](https://github.com/johannesjo/super-productivity/blob/master/docs/caldav.md) integration.
 - Back up and synchronize your data across multiple devices with **Dropbox** and **WebDAV** support
 - Attach context information to tasks and projects. Create **notes**, attach **files** or create **project-level bookmarks** for links, files, and even commands.

From 1a90d5a231b9d4076d0cadfb36f89994bad446d4 Mon Sep 17 00:00:00 2001
From: Ronaldo93 <51114190+Ronaldo93@users.noreply.github.com>
Date: Wed, 29 Oct 2025 02:24:57 +0000
Subject: [PATCH 08/18] feat: added indication for boards loading.

* chore: added comment for clarification
---
 .../trello/trello-api.service.spec.ts         | 240 ++++++++++++++++++
 .../providers/trello/trello-api.service.ts    |   5 +-
 .../trello_additional_cfg.component.ts        |  14 +-
 3 files changed, 254 insertions(+), 5 deletions(-)
 create mode 100644 src/app/features/issue/providers/trello/trello-api.service.spec.ts

diff --git a/src/app/features/issue/providers/trello/trello-api.service.spec.ts b/src/app/features/issue/providers/trello/trello-api.service.spec.ts
new file mode 100644
index 000000000..eb59ea81f
--- /dev/null
+++ b/src/app/features/issue/providers/trello/trello-api.service.spec.ts
@@ -0,0 +1,240 @@
+import { TestBed } from '@angular/core/testing';
+import {
+  HttpTestingController,
+  provideHttpClientTesting,
+} from '@angular/common/http/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { TrelloApiService } from './trello-api.service';
+import { SnackService } from '../../../../core/snack/snack.service';
+import { TrelloCfg } from './trello.model';
+
+describe('TrelloApiService', () => {
+  let service: TrelloApiService;
+  let httpMock: HttpTestingController;
+  let snackService: jasmine.SpyObj<SnackService>;
+
+  const mockCfg: TrelloCfg = {
+    isEnabled: true,
+    apiKey: 'test-api-key',
+    token: 'test-token',
+    boardId: '5f1a1a1a1a1a1a1a1a1a1a1a',
+  };
+
+  beforeEach(() => {
+    const snackServiceSpy = jasmine.createSpyObj('SnackService', ['open']);
+
+    TestBed.configureTestingModule({
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        TrelloApiService,
+        {
+          provide: SnackService,
+          useValue: snackServiceSpy,
+        },
+      ],
+    });
+
+    service = TestBed.inject(TrelloApiService);
+    httpMock = TestBed.inject(HttpTestingController);
+    snackService = TestBed.inject(SnackService) as jasmine.SpyObj<SnackService>;
+  });
+
+  afterEach(() => {
+    httpMock.verify();
+  });
+
+  describe('testConnection$', () => {
+    it('should make request to boards endpoint with credentials', (done) => {
+      service.testConnection$(mockCfg).subscribe((result) => {
+        expect(result).toBe(true);
+        done();
+      });
+
+      const req = httpMock.expectOne((request) => request.url.includes('/boards/'));
+      expect(req.request.urlWithParams).toContain(`key=${mockCfg.apiKey}`);
+      expect(req.request.urlWithParams).toContain(`token=${mockCfg.token}`);
+      expect(req.request.method).toBe('GET');
+      req.flush({ id: mockCfg.boardId });
+    });
+
+    it('should return true on successful connection', (done) => {
+      service.testConnection$(mockCfg).subscribe((result) => {
+        expect(result).toBe(true);
+        done();
+      });
+
+      const req = httpMock.expectOne((request) => request.url.includes('/boards/'));
+      req.flush({ id: mockCfg.boardId });
+    });
+  });
+
+  describe('issuePicker$', () => {
+    it('should fetch board cards when search term is empty', (done) => {
+      service.issuePicker$('', mockCfg).subscribe(() => {
+        done();
+      });
+
+      const req = httpMock.expectOne((request) => request.url.includes('/boards/'));
+      expect(req.request.method).toBe('GET');
+      req.flush([]);
+    });
+
+    it('should search when search term is provided', (done) => {
+      service.issuePicker$('test search', mockCfg).subscribe(() => {
+        done();
+      });
+
+      const req = httpMock.expectOne((request) => request.url.includes('/search'));
+      expect(req.request.urlWithParams).toContain('query=test');
+      req.flush({ cards: [] });
+    });
+
+    it('should limit search results correctly', (done) => {
+      service.issuePicker$('test', mockCfg, 10).subscribe(() => {
+        done();
+      });
+
+      const req = httpMock.expectOne((request) => request.url.includes('/search'));
+      expect(req.request.urlWithParams).toContain('cards_limit=10');
+      req.flush({ cards: [] });
+    });
+
+    it('should cap cards_limit to 100 maximum', (done) => {
+      service.issuePicker$('test', mockCfg, 200).subscribe(() => {
+        done();
+      });
+
+      const req = httpMock.expectOne((request) => request.url.includes('/search'));
+      expect(req.request.urlWithParams).toContain('cards_limit=100');
+      req.flush({ cards: [] });
+    });
+  });
+
+  describe('configuration validation', () => {
+    it('should throw error when apiKey is missing', () => {
+      const invalidCfg = { ...mockCfg, apiKey: null };
+
+      expect(() => {
+        service.testConnection$(invalidCfg).subscribe();
+      }).toThrowError('Trello: Not enough settings');
+
+      expect(snackService.open).toHaveBeenCalled();
+    });
+
+    it('should throw error when token is missing', () => {
+      const invalidCfg = { ...mockCfg, token: null };
+
+      expect(() => {
+        service.testConnection$(invalidCfg).subscribe();
+      }).toThrowError('Trello: Not enough settings');
+
+      expect(snackService.open).toHaveBeenCalled();
+    });
+
+    it('should throw error when boardId is missing', () => {
+      const invalidCfg = { ...mockCfg, boardId: null };
+
+      expect(() => {
+        service.testConnection$(invalidCfg).subscribe();
+      }).toThrowError('Trello: Not enough settings');
+
+      expect(snackService.open).toHaveBeenCalled();
+    });
+
+    it('should throw error when boardId format is invalid', () => {
+      const invalidCfg = { ...mockCfg, boardId: 'invalid-board-id-with-dashes!' };
+
+      expect(() => {
+        service.testConnection$(invalidCfg).subscribe();
+      }).toThrowError('Trello: Invalid board ID format');
+
+      expect(snackService.open).toHaveBeenCalled();
+    });
+
+    it('should accept valid alphanumeric board IDs', (done) => {
+      const validCfg = { ...mockCfg, boardId: 'abc123DEF456' };
+
+      service.testConnection$(validCfg).subscribe(() => {
+        done();
+      });
+
+      const req = httpMock.expectOne((request) => request.url.includes('/boards/'));
+      req.flush({ id: validCfg.boardId });
+    });
+  });
+
+  describe('error handling', () => {
+    it('should handle invalid object id error from API', (done) => {
+      let errorOccurred = false;
+      service.testConnection$(mockCfg).subscribe(
+        () => {},
+        () => {
+          errorOccurred = true;
+          done();
+        },
+      );
+
+      const req = httpMock.expectOne((request) => request.url.includes('/boards/'));
+      req.flush(
+        { error: 'Invalid objectId' },
+        { status: 400, statusText: 'Bad Request' },
+      );
+      expect(errorOccurred).toBe(true);
+    });
+
+    it('should handle network errors', (done) => {
+      let errorOccurred = false;
+      service.testConnection$(mockCfg).subscribe(
+        () => {},
+        () => {
+          errorOccurred = true;
+          done();
+        },
+      );
+
+      const req = httpMock.expectOne((request) => request.url.includes('/boards/'));
+      req.error(new ErrorEvent('Network error'));
+      expect(errorOccurred).toBe(true);
+    });
+
+    it('should handle generic API errors', (done) => {
+      let errorOccurred = false;
+      service.testConnection$(mockCfg).subscribe(
+        () => {},
+        () => {
+          errorOccurred = true;
+          done();
+        },
+      );
+
+      const req = httpMock.expectOne((request) => request.url.includes('/boards/'));
+      req.flush({ error: 'Unauthorized' }, { status: 401, statusText: 'Unauthorized' });
+      expect(errorOccurred).toBe(true);
+    });
+  });
+
+  describe('HTTP parameters', () => {
+    it('should include api key and token in all requests', (done) => {
+      service.testConnection$(mockCfg).subscribe(() => {
+        done();
+      });
+
+      const req = httpMock.expectOne((request) => request.url.includes('/boards/'));
+      expect(req.request.urlWithParams).toContain('key=test-api-key');
+      expect(req.request.urlWithParams).toContain('token=test-token');
+      req.flush({ id: mockCfg.boardId });
+    });
+
+    it('should properly encode search terms', (done) => {
+      service.issuePicker$('test & special', mockCfg).subscribe(() => {
+        done();
+      });
+
+      const req = httpMock.expectOne((request) => request.url.includes('/search'));
+      expect(req.request.urlWithParams).toContain('query=test');
+      expect(req.request.urlWithParams).toContain('%26');
+      req.flush({ cards: [] });
+    });
+  });
+});
diff --git a/src/app/features/issue/providers/trello/trello-api.service.ts b/src/app/features/issue/providers/trello/trello-api.service.ts
index c43fef346..b0e9f316b 100644
--- a/src/app/features/issue/providers/trello/trello-api.service.ts
+++ b/src/app/features/issue/providers/trello/trello-api.service.ts
@@ -215,8 +215,9 @@ export class TrelloApiService {
       throwHandledError('Trello: Not enough settings');
     }
 
-    // Validate boardId format (should be alphanumeric, typically 24 chars for Trello)
-    if (cfg.boardId && !/^[a-zA-Z0-9]+$/.test(cfg.boardId)) {
+    // Validate boardId format (should be alphanumeric, typically 24 chars for Trello - reference: https://community.developer.atlassian.com/t/uniqueness-of-trello-board-ids/67032/2)
+    const boardIdRegex = /^[a-zA-Z0-9]+$/;
+    if (cfg.boardId && !boardIdRegex.test(cfg.boardId)) {
       this._snackService.open({
         type: 'ERROR',
         msg: `${ISSUE_PROVIDER_HUMANIZED[TRELLO_TYPE]}: Invalid board ID format`,
diff --git a/src/app/features/issue/providers/trello/trello-view-components/trello_cfg/trello_additional_cfg.component.ts b/src/app/features/issue/providers/trello/trello-view-components/trello_cfg/trello_additional_cfg.component.ts
index 0d549499d..cfb309b71 100644
--- a/src/app/features/issue/providers/trello/trello-view-components/trello_cfg/trello_additional_cfg.component.ts
+++ b/src/app/features/issue/providers/trello/trello-view-components/trello_cfg/trello_additional_cfg.component.ts
@@ -41,12 +41,19 @@ interface TrelloBoard {
   ],
 
   // dynamic template
+  // TODO: possibly need to add translation here
   template: `
     <mat-form-field
       appearance="outline"
       style="width: 100%;"
     >
-      <mat-label>Trello Board</mat-label>
+      <!--label for showing that this is the board-->
+      @let isLoading = isLoading$ | async;
+      @if (isLoading) {
+        <mat-label>No boards found (yet)...</mat-label>
+      } @else {
+        <mat-label>Select Board</mat-label>
+      }
       <mat-select
         [(ngModel)]="selectedBoardId"
         (ngModelChange)="onBoardSelect($event)"
@@ -87,14 +94,15 @@ export class TrelloAdditionalCfgComponent implements OnInit, OnDestroy {
   isCredentialsComplete = false;
 
   boards$: Observable<TrelloBoard[]>;
-  isLoading$ = new BehaviorSubject<boolean>(false);
+  // lets make it true at first (since we load data when user first change their board)
+  isLoading$ = new BehaviorSubject<boolean>(true);
 
   private _subs = new Subscription();
 
   constructor() {
     // Initialize boards$ with proper debounce and switchMap
     this.boards$ = this._credentialsChanged$.pipe(
-      debounceTime(3000), // Wait 3 seconds after user stops typing
+      debounceTime(1000), // Wait 1 seconds after user stops typing
       switchMap((cfg) => {
         // Check if we have minimum required credentials (apiKey and token)
         if (!cfg || !cfg.apiKey || !cfg.token) {

From 68b1b071b7233325ca1de88e9857693840850a71 Mon Sep 17 00:00:00 2001
From: Ronaldo93 <51114190+Ronaldo93@users.noreply.github.com>
Date: Wed, 29 Oct 2025 04:15:51 +0000
Subject: [PATCH 09/18] feat(trello): removed warning from the dialog

* feat: reworded description (to be added later)
* feat(trellocfg): added label for better clarity.
---
 .../trello_cfg/trello_additional_cfg.component.ts  |  4 ++--
 .../issue/providers/trello/trello.const.ts         | 14 +++++---------
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/app/features/issue/providers/trello/trello-view-components/trello_cfg/trello_additional_cfg.component.ts b/src/app/features/issue/providers/trello/trello-view-components/trello_cfg/trello_additional_cfg.component.ts
index cfb309b71..1bc69605f 100644
--- a/src/app/features/issue/providers/trello/trello-view-components/trello_cfg/trello_additional_cfg.component.ts
+++ b/src/app/features/issue/providers/trello/trello-view-components/trello_cfg/trello_additional_cfg.component.ts
@@ -43,6 +43,8 @@ interface TrelloBoard {
   // dynamic template
   // TODO: possibly need to add translation here
   template: `
+    <!--section for selecting board-->
+    <p style="margin-top: 12px;">Select a Trello Board for searching issues.</p>
     <mat-form-field
       appearance="outline"
       style="width: 100%;"
@@ -51,8 +53,6 @@ interface TrelloBoard {
       @let isLoading = isLoading$ | async;
       @if (isLoading) {
         <mat-label>No boards found (yet)...</mat-label>
-      } @else {
-        <mat-label>Select Board</mat-label>
       }
       <mat-select
         [(ngModel)]="selectedBoardId"
diff --git a/src/app/features/issue/providers/trello/trello.const.ts b/src/app/features/issue/providers/trello/trello.const.ts
index 96758d849..34608bd98 100644
--- a/src/app/features/issue/providers/trello/trello.const.ts
+++ b/src/app/features/issue/providers/trello/trello.const.ts
@@ -4,10 +4,7 @@ import {
   ConfigFormSection,
   LimitedFormlyFieldConfig,
 } from '../../../config/global-config.model';
-import {
-  CROSS_ORIGIN_WARNING,
-  ISSUE_PROVIDER_COMMON_FORM_FIELDS,
-} from '../../common-issue-form-stuff.const';
+import { ISSUE_PROVIDER_COMMON_FORM_FIELDS } from '../../common-issue-form-stuff.const';
 import { IssueProviderTrello } from '../../issue.model';
 import { TrelloCfg } from './trello.model';
 
@@ -20,14 +17,14 @@ export const DEFAULT_TRELLO_CFG: TrelloCfg = {
 
 export const TRELLO_POLL_INTERVAL = 5 * 60 * 1000;
 export const TRELLO_CONFIG_FORM: LimitedFormlyFieldConfig<IssueProviderTrello>[] = [
-  ...CROSS_ORIGIN_WARNING,
+  // ...CROSS_ORIGIN_WARNING,
+  // TODO: add instruction for https://developer.atlassian.com/cloud/trello/guides/rest-api/api-introduction/
   {
     key: 'apiKey',
     type: 'input',
     props: {
       label: 'Trello API key',
-      description:
-        'Follow this guide: https://developer.atlassian.com/cloud/trello/guides/rest-api/api-introduction/ to get API key and token.',
+      description: 'Insert the Trello API key here',
       type: 'text',
       required: true,
     },
@@ -37,8 +34,7 @@ export const TRELLO_CONFIG_FORM: LimitedFormlyFieldConfig<IssueProviderTrello>[]
     type: 'input',
     props: {
       label: 'Trello API token',
-      description:
-        'Follow this guide: https://developer.atlassian.com/cloud/trello/guides/rest-api/api-introduction/ to get API key and token.',
+      description: 'Insert the Trello API token here.',
       type: 'password',
       required: true,
     },

From 8ff02949a1ee75b83354edff63d96f6ba75d2dc9 Mon Sep 17 00:00:00 2001
From: Ronaldo93 <51114190+Ronaldo93@users.noreply.github.com>
Date: Wed, 29 Oct 2025 04:28:51 +0000
Subject: [PATCH 10/18] feat(trello): removed validation for boardId

with trello board searching, user don't need to type in anymore, thus validation is not needed anymore.
---
 .../features/issue/providers/trello/trello-api.service.ts    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/features/issue/providers/trello/trello-api.service.ts b/src/app/features/issue/providers/trello/trello-api.service.ts
index b0e9f316b..43b1800f8 100644
--- a/src/app/features/issue/providers/trello/trello-api.service.ts
+++ b/src/app/features/issue/providers/trello/trello-api.service.ts
@@ -216,8 +216,9 @@ export class TrelloApiService {
     }
 
     // Validate boardId format (should be alphanumeric, typically 24 chars for Trello - reference: https://community.developer.atlassian.com/t/uniqueness-of-trello-board-ids/67032/2)
-    const boardIdRegex = /^[a-zA-Z0-9]+$/;
-    if (cfg.boardId && !boardIdRegex.test(cfg.boardId)) {
+    // const boardIdRegex = /^[a-zA-Z0-9]+$/;
+    // remove this for now in favor of the trello board picker.
+    if (cfg.boardId) {
       this._snackService.open({
         type: 'ERROR',
         msg: `${ISSUE_PROVIDER_HUMANIZED[TRELLO_TYPE]}: Invalid board ID format`,

From e2d0d0486648b159ef79fc9585cc37ea01fa4d1d Mon Sep 17 00:00:00 2001
From: Ronaldo93 <51114190+Ronaldo93@users.noreply.github.com>
Date: Fri, 31 Oct 2025 00:57:43 +0000
Subject: [PATCH 11/18] fix: invalid test

---
 src/app/features/issue/providers/trello/trello-api.service.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/issue/providers/trello/trello-api.service.ts b/src/app/features/issue/providers/trello/trello-api.service.ts
index 43b1800f8..73ae82cc0 100644
--- a/src/app/features/issue/providers/trello/trello-api.service.ts
+++ b/src/app/features/issue/providers/trello/trello-api.service.ts
@@ -218,7 +218,7 @@ export class TrelloApiService {
     // Validate boardId format (should be alphanumeric, typically 24 chars for Trello - reference: https://community.developer.atlassian.com/t/uniqueness-of-trello-board-ids/67032/2)
     // const boardIdRegex = /^[a-zA-Z0-9]+$/;
     // remove this for now in favor of the trello board picker.
-    if (cfg.boardId) {
+    if (cfg.boardId && cfg.boardId.length !== 24) {
       this._snackService.open({
         type: 'ERROR',
         msg: `${ISSUE_PROVIDER_HUMANIZED[TRELLO_TYPE]}: Invalid board ID format`,

From faaeb46592cedbcfa85b93b0bc79741a2fbb8b53 Mon Sep 17 00:00:00 2001
From: Ronaldo93 <51114190+Ronaldo93@users.noreply.github.com>
Date: Mon, 10 Nov 2025 04:13:20 +0000
Subject: [PATCH 12/18] feat: initial instruction on trello integration setup.

---
 .../issue/providers/trello/trello.const.ts    | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/app/features/issue/providers/trello/trello.const.ts b/src/app/features/issue/providers/trello/trello.const.ts
index 34608bd98..87da60bb3 100644
--- a/src/app/features/issue/providers/trello/trello.const.ts
+++ b/src/app/features/issue/providers/trello/trello.const.ts
@@ -51,5 +51,23 @@ export const TRELLO_CONFIG_FORM_SECTION: ConfigFormSection<IssueProviderTrello>
   title: 'Trello',
   key: 'TRELLO',
   items: TRELLO_CONFIG_FORM,
-  help: 'Connect your Trello board to search for cards, open them from tasks, and keep card details in sync.',
+  helpArr: [
+    {
+      h: 'Getting Started',
+      p: 'To connect Super Productivity with Trello, you need to generate an API key and token from your Trello account. This allows Super Productivity to access your boards and cards.',
+    },
+    {
+      h: 'How to Get API Key & Token',
+      p: 'Visit https://trello.com/app-key and create a new app. Fills in necessary detail excluding icon. After creating the app, click on "Generate a new API key". This will allow you to view both your API key and a token as the system generates it. You will need both the key and token to configure the integration. See https://developer.atlassian.com/cloud/trello/guides/rest-api/api-introduction/ for more detail if you are unsure of what to do.',
+      p2: 'The token grants Super Productivity permission to read your Trello data. You can revoke it at any time from the Trello security page.',
+    },
+    {
+      h: 'Selecting Your Board',
+      p: 'After entering your API key and token, you will be able to select the Trello board you want to work with. Only cards from the selected board will be accessible in Super Productivity.',
+    },
+    {
+      h: 'Features',
+      p: 'Once configured, you can search for Trello cards, add them as tasks, view card details including attachments, and keep your task data in sync with Trello.',
+    },
+  ],
 };

From 285c28a858976aec4fb4f598df08767ba133313f Mon Sep 17 00:00:00 2001
From: Ronaldo93 <51114190+Ronaldo93@users.noreply.github.com>
Date: Tue, 11 Nov 2025 14:23:34 +0000
Subject: [PATCH 13/18] fix: test case for trello

---
 .../features/issue/providers/trello/trello-api.service.spec.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/issue/providers/trello/trello-api.service.spec.ts b/src/app/features/issue/providers/trello/trello-api.service.spec.ts
index eb59ea81f..28ca3a2f3 100644
--- a/src/app/features/issue/providers/trello/trello-api.service.spec.ts
+++ b/src/app/features/issue/providers/trello/trello-api.service.spec.ts
@@ -153,7 +153,7 @@ describe('TrelloApiService', () => {
     });
 
     it('should accept valid alphanumeric board IDs', (done) => {
-      const validCfg = { ...mockCfg, boardId: 'abc123DEF456' };
+      const validCfg = { ...mockCfg, boardId: 'abc123DEF456abc123DEF456' };
 
       service.testConnection$(validCfg).subscribe(() => {
         done();

From 9eb58ed2314e0b3dbc50bd7374ddd65e9b266a3d Mon Sep 17 00:00:00 2001
From: Ronaldo93 <51114190+Ronaldo93@users.noreply.github.com>
Date: Wed, 12 Nov 2025 07:17:42 +0000
Subject: [PATCH 14/18] fix: removed hard check on the trello board id format.

---
 .../providers/trello/trello-api.service.spec.ts  | 12 +-----------
 .../issue/providers/trello/trello-api.service.ts | 16 ++++++++--------
 2 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/src/app/features/issue/providers/trello/trello-api.service.spec.ts b/src/app/features/issue/providers/trello/trello-api.service.spec.ts
index 28ca3a2f3..f8e7014cc 100644
--- a/src/app/features/issue/providers/trello/trello-api.service.spec.ts
+++ b/src/app/features/issue/providers/trello/trello-api.service.spec.ts
@@ -142,17 +142,7 @@ describe('TrelloApiService', () => {
       expect(snackService.open).toHaveBeenCalled();
     });
 
-    it('should throw error when boardId format is invalid', () => {
-      const invalidCfg = { ...mockCfg, boardId: 'invalid-board-id-with-dashes!' };
-
-      expect(() => {
-        service.testConnection$(invalidCfg).subscribe();
-      }).toThrowError('Trello: Invalid board ID format');
-
-      expect(snackService.open).toHaveBeenCalled();
-    });
-
-    it('should accept valid alphanumeric board IDs', (done) => {
+    it('should accept valid board IDs', (done) => {
       const validCfg = { ...mockCfg, boardId: 'abc123DEF456abc123DEF456' };
 
       service.testConnection$(validCfg).subscribe(() => {
diff --git a/src/app/features/issue/providers/trello/trello-api.service.ts b/src/app/features/issue/providers/trello/trello-api.service.ts
index 73ae82cc0..e854b219c 100644
--- a/src/app/features/issue/providers/trello/trello-api.service.ts
+++ b/src/app/features/issue/providers/trello/trello-api.service.ts
@@ -218,14 +218,14 @@ export class TrelloApiService {
     // Validate boardId format (should be alphanumeric, typically 24 chars for Trello - reference: https://community.developer.atlassian.com/t/uniqueness-of-trello-board-ids/67032/2)
     // const boardIdRegex = /^[a-zA-Z0-9]+$/;
     // remove this for now in favor of the trello board picker.
-    if (cfg.boardId && cfg.boardId.length !== 24) {
-      this._snackService.open({
-        type: 'ERROR',
-        msg: `${ISSUE_PROVIDER_HUMANIZED[TRELLO_TYPE]}: Invalid board ID format`,
-        isSkipTranslate: true,
-      });
-      throwHandledError('Trello: Invalid board ID format');
-    }
+    // if (cfg.boardId && cfg.boardId.length !== 24) {
+    //   this._snackService.open({
+    //     type: 'ERROR',
+    //     msg: `${ISSUE_PROVIDER_HUMANIZED[TRELLO_TYPE]}: Invalid board ID format`,
+    //     isSkipTranslate: true,
+    //   });
+    //   throwHandledError('Trello: Invalid board ID format');
+    // }
   }
 
   private _handleError$(error: HttpErrorResponse): Observable<never> {

From 43db371eeb988098c9cf6d215e161ce1e0ab8da9 Mon Sep 17 00:00:00 2001
From: Ronaldo93 <51114190+Ronaldo93@users.noreply.github.com>
Date: Wed, 12 Nov 2025 07:23:15 +0000
Subject: [PATCH 15/18] feat: update guide.

---
 src/app/features/issue/providers/trello/trello.const.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/issue/providers/trello/trello.const.ts b/src/app/features/issue/providers/trello/trello.const.ts
index 87da60bb3..2b0195887 100644
--- a/src/app/features/issue/providers/trello/trello.const.ts
+++ b/src/app/features/issue/providers/trello/trello.const.ts
@@ -58,7 +58,7 @@ export const TRELLO_CONFIG_FORM_SECTION: ConfigFormSection<IssueProviderTrello>
     },
     {
       h: 'How to Get API Key & Token',
-      p: 'Visit https://trello.com/app-key and create a new app. Fills in necessary detail excluding icon. After creating the app, click on "Generate a new API key". This will allow you to view both your API key and a token as the system generates it. You will need both the key and token to configure the integration. See https://developer.atlassian.com/cloud/trello/guides/rest-api/api-introduction/ for more detail if you are unsure of what to do.',
+      p: 'Visit https://trello.com/power-ups/admin and create a new app. Fills in necessary detail excluding icon. After creating the app, click on "Generate a new API key". This will allow you to view your API key. Token can be generated upon clicking Token hyperlink in the API key section and you can copy it after you have done reviewing your application. You will need both the key and token to configure the integration. See https://developer.atlassian.com/cloud/trello/guides/rest-api/api-introduction/ for more detail if you are unsure of what to do.',
       p2: 'The token grants Super Productivity permission to read your Trello data. You can revoke it at any time from the Trello security page.',
     },
     {

From 66c88c92672d6c925a8d39e6cd58be3a6e0a4606 Mon Sep 17 00:00:00 2001
From: Ronaldo93 <51114190+Ronaldo93@users.noreply.github.com>
Date: Tue, 18 Nov 2025 02:34:12 +0000
Subject: [PATCH 16/18] feat: additional button for loading

* feat(ux): updated instruction for loading trello board
---
 ...issue-panel-calendar-agenda.component.html |  5 +++-
 .../trello/trello-api.service.spec.ts         |  6 ++--
 .../trello_additional_cfg.component.ts        | 30 ++++++++++++++++++-
 .../issue/providers/trello/trello.const.ts    |  9 +++++-
 4 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/src/app/features/issue-panel/issue-panel-calendar-agenda/issue-panel-calendar-agenda.component.html b/src/app/features/issue-panel/issue-panel-calendar-agenda/issue-panel-calendar-agenda.component.html
index ded3ffac0..4c6396d02 100644
--- a/src/app/features/issue-panel/issue-panel-calendar-agenda/issue-panel-calendar-agenda.component.html
+++ b/src/app/features/issue-panel/issue-panel-calendar-agenda/issue-panel-calendar-agenda.component.html
@@ -8,7 +8,10 @@
     [actionAdvice]="'Check your config!'"
   ></error-card>
 } @else if (!agendaItems()?.length) {
-  <div class="empty">No items found (already added are not shown)</div>
+  <div class="empty">
+    No items found. Ensure you have typed at least 3 characters (already added are not
+    shown).
+  </div>
 } @else {
   <div class="agenda">
     @for (day of agendaItems(); track day.dayStr) {
diff --git a/src/app/features/issue/providers/trello/trello-api.service.spec.ts b/src/app/features/issue/providers/trello/trello-api.service.spec.ts
index f8e7014cc..03ee33292 100644
--- a/src/app/features/issue/providers/trello/trello-api.service.spec.ts
+++ b/src/app/features/issue/providers/trello/trello-api.service.spec.ts
@@ -205,14 +205,15 @@ describe('TrelloApiService', () => {
   });
 
   describe('HTTP parameters', () => {
-    it('should include api key and token in all requests', (done) => {
+    it('should include api key in query parameters', (done) => {
       service.testConnection$(mockCfg).subscribe(() => {
         done();
       });
 
       const req = httpMock.expectOne((request) => request.url.includes('/boards/'));
       expect(req.request.urlWithParams).toContain('key=test-api-key');
-      expect(req.request.urlWithParams).toContain('token=test-token');
+      expect(req.request.headers.has('Authorization')).toBe(true);
+      expect(req.request.headers.get('Authorization')).toBe('Bearer test-token');
       req.flush({ id: mockCfg.boardId });
     });
 
@@ -224,6 +225,7 @@ describe('TrelloApiService', () => {
       const req = httpMock.expectOne((request) => request.url.includes('/search'));
       expect(req.request.urlWithParams).toContain('query=test');
       expect(req.request.urlWithParams).toContain('%26');
+      expect(req.request.headers.get('Authorization')).toBe('Bearer test-token');
       req.flush({ cards: [] });
     });
   });
diff --git a/src/app/features/issue/providers/trello/trello-view-components/trello_cfg/trello_additional_cfg.component.ts b/src/app/features/issue/providers/trello/trello-view-components/trello_cfg/trello_additional_cfg.component.ts
index 1bc69605f..b48a32e0f 100644
--- a/src/app/features/issue/providers/trello/trello-view-components/trello_cfg/trello_additional_cfg.component.ts
+++ b/src/app/features/issue/providers/trello/trello-view-components/trello_cfg/trello_additional_cfg.component.ts
@@ -18,6 +18,7 @@ import { IssueProviderTrello } from 'src/app/features/issue/issue.model';
 import { ConfigFormSection } from 'src/app/features/config/global-config.model';
 import { MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatSelect, MatOption } from '@angular/material/select';
+import { MatButton } from '@angular/material/button';
 import { AsyncPipe } from '@angular/common';
 import { BehaviorSubject, Observable, Subscription, of } from 'rxjs';
 import { catchError, map, tap, debounceTime, switchMap, startWith } from 'rxjs/operators';
@@ -37,6 +38,7 @@ interface TrelloBoard {
     MatLabel,
     MatSelect,
     MatOption,
+    MatButton,
     AsyncPipe,
   ],
 
@@ -45,12 +47,22 @@ interface TrelloBoard {
   template: `
     <!--section for selecting board-->
     <p style="margin-top: 12px;">Select a Trello Board for searching issues.</p>
+    @let isLoading = isLoading$ | async;
+    <button
+      mat-stroked-button
+      color="primary"
+      type="button"
+      style="margin-bottom: 12px;"
+      (click)="reloadBoards()"
+      [disabled]="isLoading"
+    >
+      Load Trello Boards
+    </button>
     <mat-form-field
       appearance="outline"
       style="width: 100%;"
     >
       <!--label for showing that this is the board-->
-      @let isLoading = isLoading$ | async;
       @if (isLoading) {
         <mat-label>No boards found (yet)...</mat-label>
       }
@@ -191,4 +203,20 @@ export class TrelloAdditionalCfgComponent implements OnInit, OnDestroy {
       this.modelChange.emit(updated);
     }
   }
+
+  reloadBoards(): void {
+    if (!this._cfg || !this._cfg.apiKey || !this._cfg.token) {
+      this._snackService.open({
+        type: 'ERROR',
+        msg: 'Enter API key and token first.',
+        isSkipTranslate: true,
+      });
+      return;
+    }
+
+    this.isCredentialsComplete = true;
+    this.isLoading$.next(true);
+    this._credentialsChanged$.next({ ...this._cfg });
+    this._cdr.markForCheck();
+  }
 }
diff --git a/src/app/features/issue/providers/trello/trello.const.ts b/src/app/features/issue/providers/trello/trello.const.ts
index 2b0195887..a7cdba15b 100644
--- a/src/app/features/issue/providers/trello/trello.const.ts
+++ b/src/app/features/issue/providers/trello/trello.const.ts
@@ -38,6 +38,13 @@ export const TRELLO_CONFIG_FORM: LimitedFormlyFieldConfig<IssueProviderTrello>[]
       type: 'password',
       required: true,
     },
+    validators: {
+      token: {
+        expression: (c: { value: string | undefined }) =>
+          !c.value || c.value.length >= 32,
+        message: 'Trello token is typically 32+ characters',
+      },
+    },
   },
   // search boards
   {
@@ -63,7 +70,7 @@ export const TRELLO_CONFIG_FORM_SECTION: ConfigFormSection<IssueProviderTrello>
     },
     {
       h: 'Selecting Your Board',
-      p: 'After entering your API key and token, you will be able to select the Trello board you want to work with. Only cards from the selected board will be accessible in Super Productivity.',
+      p: 'After entering your API key and token, click "Load Trello Boards" and you will be able to select the Trello board you want to work with. Only cards from the selected board will be accessible in Super Productivity.',
     },
     {
       h: 'Features',

From 7f6d736797b752e35e99b3c0892d74e631d8bdfd Mon Sep 17 00:00:00 2001
From: Ronaldo93 <51114190+Ronaldo93@users.noreply.github.com>
Date: Fri, 21 Nov 2025 16:57:33 +0000
Subject: [PATCH 17/18] fix: failed test

* feat: add icon in providers list
---
 .../issue-provider-setup-overview.component.html         | 3 +--
 .../issue/providers/trello/trello-api.service.ts         | 9 ++++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/app/features/issue-panel/issue-provider-setup-overview/issue-provider-setup-overview.component.html b/src/app/features/issue-panel/issue-provider-setup-overview/issue-provider-setup-overview.component.html
index d30a6cf28..7087603e2 100644
--- a/src/app/features/issue-panel/issue-provider-setup-overview/issue-provider-setup-overview.component.html
+++ b/src/app/features/issue-panel/issue-provider-setup-overview/issue-provider-setup-overview.component.html
@@ -37,8 +37,7 @@
     mat-raised-button
     (click)="openSetupDialog('TRELLO')"
   >
-    <!-- TODO: implement Trello icon - not available for now -->
-    <!-- <mat-icon svgIcon="trello"></mat-icon> -->
+    <mat-icon svgIcon="trello"></mat-icon>
     <span>Trello</span>
   </button>
   <button
diff --git a/src/app/features/issue/providers/trello/trello-api.service.ts b/src/app/features/issue/providers/trello/trello-api.service.ts
index e854b219c..b5dcb4702 100644
--- a/src/app/features/issue/providers/trello/trello-api.service.ts
+++ b/src/app/features/issue/providers/trello/trello-api.service.ts
@@ -1,5 +1,10 @@
 import { Injectable, inject } from '@angular/core';
-import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http';
+import {
+  HttpClient,
+  HttpErrorResponse,
+  HttpParams,
+  HttpHeaders,
+} from '@angular/common/http';
 import { Observable, throwError } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 import { TrelloCfg } from './trello.model';
@@ -170,9 +175,11 @@ export class TrelloApiService {
   ): Observable<T> {
     this._checkSettings(cfg);
     const httpParams = this._createParams(cfg, params);
+    const headers = new HttpHeaders().set('Authorization', `Bearer ${cfg.token}`);
     return this._http
       .get<T>(`${BASE_URL}${path}`, {
         params: httpParams,
+        headers,
       })
       .pipe(catchError((err) => this._handleError$(err)));
   }

From 32ff1e6ef7a0fe274d25305f680b332ebdda419d Mon Sep 17 00:00:00 2001
From: Ronaldo93 <51114190+Ronaldo93@users.noreply.github.com>
Date: Fri, 21 Nov 2025 17:04:16 +0000
Subject: [PATCH 18/18] chore: adjusted text

---
 .../issue-panel-calendar-agenda.component.html               | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/app/features/issue-panel/issue-panel-calendar-agenda/issue-panel-calendar-agenda.component.html b/src/app/features/issue-panel/issue-panel-calendar-agenda/issue-panel-calendar-agenda.component.html
index 4c6396d02..048bedca6 100644
--- a/src/app/features/issue-panel/issue-panel-calendar-agenda/issue-panel-calendar-agenda.component.html
+++ b/src/app/features/issue-panel/issue-panel-calendar-agenda/issue-panel-calendar-agenda.component.html
@@ -8,10 +8,7 @@
     [actionAdvice]="'Check your config!'"
   ></error-card>
 } @else if (!agendaItems()?.length) {
-  <div class="empty">
-    No items found. Ensure you have typed at least 3 characters (already added are not
-    shown).
-  </div>
+  <div class="empty">No items found.</div>
 } @else {
   <div class="agenda">
     @for (day of agendaItems(); track day.dayStr) {