Change:
Comments in the editor have a different color based on their resolved status. We could do something similar for the icon in the gutter, and make obvious which comment is resolved even when comments are folded. Maybe change the icon color? Or use a different icon? (also related to )
Example of how it currently looks: ! Example with adjusted colours: ! Note that colour alone is not a full solution since it is not that accessible, but I think it should be included in the final solution.
A different icon/unicode character for resolved would be good here.
Let's get done first.

Discussion:
import { darken, editorBackground, editorForeground, listInactiveSelectionBackground, opaque, registerColor } from 'vs/platform/theme/common/colorRegistry'; import { themeColorFromId } from 'vs/platform/theme/common/themeService'; import { IEditorDecorationsCollection } from 'vs/editor/common/editorCommon'; <ins> import { CommentThreadState } from 'vs/editor/common/languages'; </ins> export const overviewRulerCommentingRangeForeground = registerColor('editorGutter.commentRangeForeground', { dark: opaque(listInactiveSelectionBackground, editorBackground), light: darken(opaque(listInactiveSelectionBackground, editorBackground), .05), hcDark: Color.white, hcLight: Color.black }, nls.localize('editorGutterCommentRangeForeground', 'Editor gutter decoration color for commenting ranges. This color should be opaque.')); registerColor('editorGutter.commentGlyphForground', { dark: editorForeground, light: editorForeground, hcDark: Color.black, hcLight: Color.white }, nls.localize('editorGutterCommentGlyphForeground', 'Editor gutter decoration color for commenting glyphs.'));

public static description = 'comment-glyph-widget'; private _lineNumber!: number; private _editor: ICodeEditor; <ins> private _threadState: CommentThreadState | undefined; </ins> private readonly _commentsDecorations: IEditorDecorationsCollection; private _commentsOptions: ModelDecorationOptions;

position: OverviewRulerLane.Center }, collapseOnReplaceEdit: true, <del> linesDecorationsClassName: `comment-range-glyph comment-thread` </del> <ins> linesDecorationsClassName: `comment-range-glyph comment-thread${this._threadState === CommentThreadState.Unresolved ? '-unresolved' : ''}` </ins> }; return ModelDecorationOptions.createDynamic(decorationOptions); } <del> setLineNumber(lineNumber: number): void { this._lineNumber = lineNumber; </del> <ins> setThreadState(state: CommentThreadState | undefined): void { if (this._threadState !== state) { this._threadState = state; this._commentsOptions = this.createDecorationOptions(); this._updateDecorations(); } } private _updateDecorations(): void { </ins> const commentsDecorations = [{ range: { <del> startLineNumber: lineNumber, startColumn: 1, endLineNumber: lineNumber, endColumn: 1 </del> <ins> startLineNumber: this._lineNumber, startColumn: 1, endLineNumber: this._lineNumber, endColumn: 1 </ins> }, options: this._commentsOptions }];

this._commentsDecorations.set(commentsDecorations); } <ins> setLineNumber(lineNumber: number): void { this._lineNumber = lineNumber; this._updateDecorations(); } </ins> getPosition(): IContentWidgetPosition { const range = (this._commentsDecorations.length > 0 ? this._commentsDecorations.getRange(0) : null);

const lineNumber = this._commentThread.range.endLineNumber; let shouldMoveWidget = false; if (this._commentGlyph) { <ins> this._commentGlyph.setThreadState(commentThread.state); </ins> if (this._commentGlyph.getPosition().position!.lineNumber !== lineNumber) { shouldMoveWidget = true; this._commentGlyph.setLineNumber(lineNumber);

display(lineNumber: number) { this._commentGlyph = new CommentGlyphWidget(this.editor, lineNumber); <ins> this._commentGlyph.setThreadState(this._commentThread.state); </ins> this._commentThreadWidget.display(this.editor.getOption(EditorOption.lineHeight)); this._disposables.add(this._commentThreadWidget.onDidResize(dimension => {

background: var(--vscode-editorGutter-commentRangeForeground); } <del> .monaco-editor .comment-thread:before { </del> <ins> .monaco-editor .comment-thread:before, .monaco-editor .comment-thread-unresolved:before { </ins> background: var(--vscode-editorGutter-commentRangeForeground); }

} .monaco-editor .margin-view-overlays .comment-range-glyph.line-hover, <del> .monaco-editor .margin-view-overlays .comment-range-glyph.comment-thread { </del> <ins> .monaco-editor .margin-view-overlays .comment-range-glyph.comment-thread, .monaco-editor .margin-view-overlays .comment-range-glyph.comment-thread-unresolved { </ins> margin-left: 13px; } .monaco-editor .margin-view-overlays > div:hover > .comment-range-glyph.comment-diff-added:before, .monaco-editor .margin-view-overlays .comment-range-glyph.line-hover:before, <del> .monaco-editor .comment-range-glyph.comment-thread:before { </del> <ins> .monaco-editor .comment-range-glyph.comment-thread:before, .monaco-editor .comment-range-glyph.comment-thread-unresolved:before { </ins> position: absolute; height: 100%; width: 9px;

padding-left: 1px; } <del> .monaco-editor .comment-range-glyph.comment-thread { </del> <ins> .monaco-editor .comment-range-glyph.comment-thread, .monaco-editor .comment-range-glyph.comment-thread-unresolved { </ins> z-index: 20; } <del> .monaco-editor .comment-range-glyph.comment-thread:before { content: "ea6b"; </del> <ins> .monaco-editor .comment-range-glyph.comment-thread:before, .monaco-editor .comment-range-glyph.comment-thread-unresolved:before { </ins> font-family: "codicon"; font-size: 13px; width: 18px !important;

padding-left: 1px; } <ins> .monaco-editor .comment-range-glyph.comment-thread:before { content: "ea6b"; } .monaco-editor .comment-range-glyph.comment-thread-unresolved:before { content: "ec0a"; } </ins> .monaco-editor.inline-comment .margin-view-overlays .codicon-folding-expanded, .monaco-editor.inline-comment .margin-view-overlays .codicon-folding-collapsed { margin-left: 11px;