Implement view-only notebook using custom factory

[krassowski]

• builds upon and closes Add a "View Only" header for shared notebooks (do not merge) #72
• closes Do not allow interactions and do not start a kernel in read-only mode #44
• closes Display the View Only div using the ContentsHeader #35
• makes progress towards Create the read-only toolbar #36 by creating a new ViewOnlyNotebook toolbar

[krassowski]

My plan would be:

• merge Mock API for view-only notebook test #74 into main
• merge main into both this PR and Add a "View Only" header for shared notebooks (do not merge) #72
• update snapshots on both PRs to verify that there are no unintended visual differences (or update on Add a "View Only" header for shared notebooks (do not merge) #72 first and pull it in and only then update here but it feels like too many steps for a single snapshot)

[krassowski]

bot please update snapshots

[krassowski]

bot please update snapshots (again, again, one last time)

[agriyakhetarpal]

Thanks, @krassowski! Your implementation is much better than mine 😄

Not for this PR, but is there a way to remove the "Click to add a cell" container below the cell and the four buttons inside the cell, as they can be used to change the order of the cells/add or delete a cell/etc. (not that those changes will be persisted to CKHub though, but maybe it makes sense to not allow them in the UI if it's a view-only notebook):

[agriyakhetarpal]

Question: does this remove the "notebook is read-only" bar as well, as you're not manipulating the DOM to do so and instead adding back the buttons for ViewOnlyNotebook?

[krassowski]

Yes, that item gets removed too, but in a different way, here:

jupyterlite-extension/src/view-only.ts

Lines 74 to 79 in 7fe19d4

	super({
	...options,
	toolbar: new FilteredToolbar({
	itemsToFilterOut: new Set(['read-only-indicator'])
	})
	});

jupyterlite-extension/src/view-only.ts

Lines 50 to 63 in 7fe19d4

	class FilteredToolbar extends ReactiveToolbar {
	constructor(options: FilteredToolbar.IOptions) {
	super(options);
	this._itemsToFilterOut = options.itemsToFilterOut;
	}
	insertItem(index: number, name: string, widget: Widget): boolean {
	if (this._itemsToFilterOut?.has(name)) {
	return false;
	}
	return super.insertItem(index, name, widget);
	}
	// This can be undefined during the super() call in constructor
	private _itemsToFilterOut: Set<string> | undefined;
	}

[agriyakhetarpal]

One follow-up here after this PR could be to style that notification as well. The default design is pretty neat, so maybe all we need to do is to change the orange-ish colour to something like --je-slate-blue.

[krassowski]

Yeah, we could adjust the styling. Maybe we could track that in a follow-up issue - would you like to open one?

Though orange/yellow is meant to symbolize danger so maybe not a bad choice? But surely there is some rounding and borders we could adjust.

[krassowski]

is there a way to remove the "Click to add a cell" container below the cell and the four buttons inside the cell, as they can be used to change the order of the cells/add or delete a cell/etc. (not that those changes will be persisted to CKHub though, but maybe it makes sense to not allow them in the UI if it's a view-only notebook):

@agriyakhetarpal this is no longer the case with this PR, see: