Improve generation of unique tab IDs

[falkoschindler]

This PR improves the way tab IDs are generated to avoid duplicated tabs causing shared tab storage (#3872).

The ides originates from this post on StackOverflow: https://stackoverflow.com/a/36807854/3419103

I successfully tested it with this code snippet:

@ui.page('/')
async def main():
    await ui.context.client.connected()
    if 'id' not in app.storage.tab:
        app.storage.tab['id'] = str(uuid.uuid4())
    ui.label(app.storage.tab['id'])

An automated pytest would be great. But I guess we can't properly simulate duplicating tabs.

[rodja]

Should we not copy the tab storage? For example if we have

ui.select(['A', 'B', 'C']).bind_value(app.storage.tab, 'selection')

I would expect the duplicated tab to have the same selection. But then each should be able to edit independently. That isat least the way the browser session storage works...

[falkoschindler]

@rodja You're absolutely right! I forgot this part of the equation...

[falkoschindler]

Ok, now the tab storage is copied if a tab duplication is detected. Can be tested with this snippet:

import random
from nicegui import app, ui

@ui.page('/')
async def main():
    ui.add_body_html('''
        <script>
        document.addEventListener('DOMContentLoaded', function () {
            const span = document.createElement('span');
            span.innerHTML = `Tab ID: <pre>${TAB_ID}</pre>`
            if (OLD_TAB_ID) span.innerHTML += `Cloned from: <pre>${OLD_TAB_ID}</pre>`
            span.classList.add('p-2', 'rounded', 'whitespace-pre-line', 'border', 'absolute-center');
            document.body.appendChild(span);
        });
        </script>
    ''')
    await ui.context.client.connected()
    if 'number' not in app.storage.tab:
        app.storage.tab['number'] = random.randint(0, 1000000)
    ui.label(f'Number: {app.storage.tab["number"]}')

    ui.select(['A', 'B', 'C']).bind_value(app.storage.tab, 'selection')

[rodja]

Great!