Improve URL list truncation

[jiayivp]

The current truncation of document URLs only displays the beginning of the string, limiting the information needed to quickly distinguish between documents.

"automerge:2ukjjA..." // Truncated version of "automerge:2ukjjAmeKgADB2N5hAfkARYoRNF5"
"automerge:2ukjjB..."
"automerge:2ukjjA..." // This is a different URL but appears identical
"automerge:2ukjjD..."

I propose that we change the way URL strings are truncated so it is easier to distinguish each URL in the list. Cutting from the middle displays more unique identifiers for each URL and makes memorisation easier.

"automerge:2ukjjA...RNF5"

This change improves the navigation of the list, ensuring no repeated information is shown by utilising each document’s unique string.

Furthermore, I propose we also have "automerge:" removed from the truncation.

"2ukjjA...RNF5"

[neftaly]

this sounds good, how should we truncate these URLs?

[jiayivp]

I propose the length of truncation is responsive to the size of the URL list section. The minimum requirement, however, could be the first and last four characters to provide enough unique identifiers to discern the links from one another.

"2ukj...RNF5"
"2ukj...F9QT"
"7pbl...F958"

For example, you can refer to the first four, last four, or full truncation for quick distinguishing when there are repeated identifiers.

[neftaly]

Does this do what you want?

const str = "automerge:3uzHQ5TGNpmoJSx6VBhBLeHMCm1o";
const len = 4;

const pre = compose(
  take(len),
  drop(10) // Remove "automerge:"
)(str);
const post = takeLast(len, str);

`${pre}...${post}`

This isn't responsive and uses a fixed with for titles. However this is easier to implement (there isn't currently a way to resize the list anyway). Is this OK? Otherwise we can try and do it with CSS.

[jiayivp]

That is perfect! Responsive UI is a nice, but for a Chrome extension I don’t think it is a mandatory feature. Thanks!