mynode/packages/lib/services/noteList/defaultListRenderer.ts

import { _ } from '../../locale';
import CommandService from '../CommandService';
import { ItemFlow, ListRenderer, OnClickEvent } from '../plugins/api/noteListType';
import checkboxPieCss from './checkboxPieCss';
import isNoteLockEnabled from '../noteLock/isNoteLockEnabled';
import isSyncDisabledConflict from './isSyncDisabledConflict';
import { cleanSnippet, formatNoteListDate } from './noteListSnippetUtils';

interface CheckboxStats {
	total: number;
	checked: number;
	percent: number;
	isComplete: boolean;
}

interface Props {
	note: {
		id: string;
		title: string;
		is_todo: number;
		todo_completed: number;
		is_locked: number;
		is_conflict: number;
		conflict_original_id: string;
		share_id: string;
		checkboxes: CheckboxStats | null;
		user_updated_time?: number;
		body?: string;
		is_pinned?: number;
	};
	item: {
		// index: number;
		size: {
			height: number;
		};
		selected: boolean;
	};
}

const renderer: ListRenderer = {
	id: 'compact',

	label: async () => _('Compact'),

	flow: ItemFlow.TopToBottom,

	itemSize: {
		width: 0,
		height: 56,
	},

	dependencies: [
		// 'item.index',
		'item.selected',
		'item.size.height',
		'note.checkboxes',
		'note.id',
		'note.is_conflict',
		'note.is_locked',
		'note.is_published',
		'note.is_shared',
		'note.share_id',
		'note.conflict_original_id',
		'note.is_todo',
		'note.isWatched',
		'note.title',
		'note.todo_completed',
		'note.todoStatusText',
		'note.user_updated_time',
		'note.body',
		'note.is_pinned',
	],

	itemCss: // css
		`	
		&:before {
			content: '';
			border-bottom: 1px solid var(--joplin-divider-color);
			width: 90%;
			position: absolute;
			bottom: 0;
			left: 5%;
		}
	
		> .content.-selected {
			background-color: var(--joplin-selected-color);
		}

		&:hover, &.-focus-visible > .content {
			background-color: var(--joplin-background-color-hover3);
		}
	
		> .content {
			display: flex;
			box-sizing: border-box;
			position: relative;
			width: 100%;
			height: 100%;
			padding: 8px 16px;
			align-items: center;
	
			> .checkbox {
				display: flex;
				align-items: center;
				margin-right: 8px;

				> input {
					margin: 0;
				}
			}

			> .item-body {
				display: flex;
				flex-direction: column;
				justify-content: center;
				min-width: 0;
				flex: 1 1 0%;
				gap: 3px;

				> .title {
					font-family: var(--joplin-font-family);
					font-size: var(--joplin-font-size);
					text-decoration: none;
					color: var(--joplin-color);
					cursor: default;
					white-space: nowrap;
					display: flex;
					align-items: center;
					overflow: hidden;

					> .pinnedicon {
						padding-right: 6px;
						color: var(--joplin-color-accent, #007aff);
						font-size: 11px;
					}

					> .watchedicon {
						display: none;
						padding-right: 4px;
						color: var(--joplin-color);
					}

					> .lockedicon {
						padding-right: 4px;
						color: var(--joplin-color);
					}

					> .syncdisabledicon {
						background-color: var(--joplin-color-faded);
						display: inline-block;
						flex-shrink: 0;
						height: 14px;
						margin-right: 4px;
						mask: url('vendor/lib/images/cloud-offline-outline.svg') center / contain no-repeat;
						-webkit-mask: url('vendor/lib/images/cloud-offline-outline.svg') center / contain no-repeat;
						width: 14px;
					}

					> span {
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				> .details {
					display: flex;
					align-items: baseline;
					gap: 6px;
					font-size: 12px;
					line-height: 1.3;
					color: var(--joplin-color-faded);
					overflow: hidden;
					white-space: nowrap;

					> .date {
						flex-shrink: 0;
						font-variant-numeric: tabular-nums;
						color: var(--joplin-color);
						opacity: 0.75;
					}

					> .snippet {
						overflow: hidden;
						text-overflow: ellipsis;
						opacity: 0.65;
					}
				}
			}

			> .checkbox-pie {
				display: flex;
				align-items: center;
				padding-right: 12px;
				padding-left: 8px;
			}
		}

		${checkboxPieCss}

		> .content.-shared {
			> .item-body > .title {
				color: var(--joplin-color-warn3);
			}
		}

		> .content.-published {
			> .item-body > .title {
				color: var(--joplin-color4);
			}
		}

		> .content.-published.-selected {
			> .item-body > .title {
				color: var(--joplin-color);
			}
		}

		> .content.-completed {
			> .item-body > .title {
				opacity: 0.5;
			}
		}

		> .content.-watched {
			> .item-body > .title {
				> .watchedicon {
					display: inline;
				}
			}
		}
	`,

	headerTemplate: // html
		`
		<button data-id="title">Title</button><button data-id="updated">Updated</button>
	`,

	onHeaderClick: async (event: OnClickEvent) => {
		const field = event.elementId === 'title' ? 'title' : 'user_updated_time';
		void CommandService.instance().execute('toggleNotesSortOrderField', field);
	},

	itemTemplate: // html
		`
		<div class="content {{#item.selected}}-selected{{/item.selected}} {{#note.is_pinned}}-pinned{{/note.is_pinned}} {{#note.is_shared}}-shared{{/note.is_shared}} {{#note.is_published}}-published{{/note.is_published}} {{#note.todo_completed}}-completed{{/note.todo_completed}} {{#note.isWatched}}-watched{{/note.isWatched}}">
			{{#note.is_todo}}
				<div class="checkbox">
					<input
						data-id="todo-checkbox"
						type="checkbox"
						aria-label="{{note.todoStatusText}}"
						tabindex="-1"
						{{#note.todo_completed}}checked="checked"{{/note.todo_completed}}
					>
				</div>
			{{/note.is_todo}}
			<div class="item-body">
				<div class="title" data-id="{{note.id}}">
					{{#note.is_pinned}}<i class="pinnedicon fas fa-thumbtack" title="Pinned" role="img"></i>{{/note.is_pinned}}
					{{#note.syncDisabled}}<i class="syncdisabledicon" role="img" aria-label="{{note.syncDisabledLabel}}"></i>{{/note.syncDisabled}}
					<i class="watchedicon fa fa-share-square"></i>
					{{#note.is_locked}}<i class="lockedicon fa fa-lock" role="img" aria-label="{{note.lockedLabel}}"></i>{{/note.is_locked}}
					<span>{{note.title}}</span>
				</div>
				<div class="details">
					{{#note.formattedDate}}<span class="date">{{note.formattedDate}}</span>{{/note.formattedDate}}
					<span class="snippet">{{note.snippet}}</span>
				</div>
			</div>
			{{#checkboxStats}}
				<div class="checkbox-pie" title="{{checked}}/{{total}}">
					{{#isComplete}}
						<div class="pie -complete">✓</div>
					{{/isComplete}}
					{{^isComplete}}
						<div class="pie" style="--percent: {{percent}};"></div>
					{{/isComplete}}
				</div>
			{{/checkboxStats}}
		</div>
	`,

	onRenderNote: async (props: Props) => {
		const snippet = cleanSnippet(props.note.body || '', props.note.title);
		const formattedDate = props.note.user_updated_time ? formatNoteListDate(props.note.user_updated_time) : '';

		return {
			...props,
			note: {
				...props.note,
				is_locked: isNoteLockEnabled() ? props.note.is_locked : 0,
				lockedLabel: _('Locked'),
				syncDisabled: isSyncDisabledConflict(props.note),
				syncDisabledLabel: _('Local only'),
				snippet,
				formattedDate,
				is_pinned: !!props.note.is_pinned,
			},
			checkboxStats: props.note.checkboxes,
		};
	},
};

export default renderer;