implemented sharing of bookmarks

frontend/src/Components/Autocomplete.svelte

@@ -3,7 +3,7 @@
     import { tick } from "svelte";
 
     let {
-        getCandidates = text => {},
+        getCandidates = async text => { conole.log('no handler for getCandidates('+text+')'); return {};},
         onSelect      = text => []
     } = $props();
 
@@ -18,6 +18,7 @@
         let result   = {};
         result[key]  = text;
         options      = {};
+        text         = '';
         onSelect(result);
     }
 
@@ -49,10 +50,11 @@
         min-width: 200px;
     }
 </style>
-<select size={Object.keys(options).length<2?2:Object.keys(options).length+1} {onkeyup} {ondblclick} autofocus width="40">
+{#if options}
+<select size={Object.keys(options).length<2?2:Object.keys(options).length+1} {onkeyup} {ondblclick} width="40">
     <option>{text}</option>
     {#each Object.entries(options) as [val,caption]}
     <option value={val}>{caption}</option>
     {/each}
 </select>
-
+{/if}

frontend/src/Components/MemberEditor.svelte

@@ -8,11 +8,11 @@
     import PermissionSelector from './PermissionSelector.svelte';
 
     let {
-        members,
-        getCandidates    = text => {},
-        updatePermission = (uid,perm) => console.log(`no handler for updatePermission(${uid}, ${perm})`),
+        addMember        = (entry)    => console.log(`no handler for addMember(${entry})`),
         dropMember       = (member)   => console.log(`no handler for dropMember(${member})`),
-        addMember        = (entry)    => console.log(`no handler for addMember(${entry})`)
+        getCandidates    = text => {},
+        members,
+        updatePermission = (uid,perm) => console.log(`no handler for updatePermission(${uid}, ${perm})`)
     } = $props();
 
     let error         = $state(null);

frontend/src/Components/UserSelector.svelte

@@ -0,0 +1,50 @@
+<script>
+    import { api }            from '../urls.svelte.js';
+    import { t }              from '../translations.svelte.js';
+    import { user }           from '../user.svelte.js';
+
+    import Autocomplete       from './Autocomplete.svelte';
+
+    let error = $state(null);
+    let {
+        getCandidates = async text => {},
+        heading       = t('add_user'),
+        users         = $bindable({})
+    } = $props();
+
+    function dropUser(id){
+        delete users[id];
+    }
+
+    function onSelect(entry){
+        for (let [k,v] of Object.entries(entry)){
+            users[k] = {name:v,id:k};
+        }
+    }
+
+    let sortedUsers = $derived.by(() => Object.values(users).sort((a, b) => a.name.localeCompare(b.name)));
+</script>
+
+{#if error}
+<span class="error">{error}</span>
+{/if}
+<table>
+    <tbody>
+    {#each sortedUsers as usr,idx}
+    <tr>
+        <td>{usr.name}</td>
+        <td>
+            {#if usr.id != user.id}
+            <button onclick={() => dropUser(usr.id)}>x</button>
+            {/if}
+        </td>
+    </tr>
+    {/each}
+    <tr>
+        <td>{heading}</td>
+        <td>
+            <Autocomplete {getCandidates} {onSelect} />
+        </td>
+    </tr>
+    </tbody>
+</table>