refactored more error code

frontend/src/Components/PermissionEditor.svelte

@@ -1,8 +1,8 @@
 <script>
     import { onMount }        from 'svelte';
 
-    import { api }            from '../urls.svelte.js';
+    import { api }            from '../urls.svelte';
-    import { t }              from '../translations.svelte.js';
+    import { t }              from '../translations.svelte';
 
     import Autocomplete       from './Autocomplete.svelte';
     import PermissionSelector from './PermissionSelector.svelte';
@@ -15,7 +15,6 @@
         updatePermission = (uid,perm) => console.log(`no handler for updatePermission(${uid}, ${perm})`)
     } = $props();
 
-    let error         = $state(null);
     let permissions   = $state(null);
     let sortedMembers = $derived.by(() => Object.values(members).sort((a, b) => a.user.name.localeCompare(b.user.name)));
 
@@ -36,9 +35,6 @@
     onMount(loadPermissions);
 </script>
 
-{#if error}
-<span class="error">{error}</span>
-{/if}
 <table>
     <tbody>
     {#each sortedMembers as member,i}

frontend/src/routes/document/Add.svelte

@@ -2,14 +2,14 @@
     import { onMount }       from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
 
-    import { api }           from '../../urls.svelte.js';
+    import { api }           from '../../urls.svelte';
-    import { t }             from '../../translations.svelte.js';
+    import { error, yikes }  from '../../warn.svelte';
+    import { t }             from '../../translations.svelte';
 
     import ContactSelector   from '../../Components/ContactSelector.svelte';
 
     let company = $state(null);
     let docType = $state(null);
-    let error   = $state(null);
     let router  = useTinyRouter();
 
     let document = $state({
@@ -36,7 +36,7 @@
             if (company.bank_account) document.sender.bank_account = company.bank_account;
             if (company.court)        document.sender.court        = company.court;
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -47,11 +47,12 @@
             const types = await resp.json();
             docType     = t('type_'+types[document.type]);
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
     function load(){
+        yikes();
         loadCompanies();
         loadDocType();
     }
@@ -83,7 +84,7 @@
             const json = await resp.json();
             router.navigate(`/document/${json.id}/view`);
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -95,9 +96,6 @@
 </style>
 
 <fieldset>
-    {#if error}
-    <span class="error">{error}</span>
-    {/if}
     {#if docType}
     <legend>{t('add_object',{object:docType})}</legend>
     {/if}

frontend/src/routes/document/EstimateList.svelte

@@ -2,6 +2,7 @@
     import { onMount } from 'svelte';
 
     import { api }     from '../../urls.svelte.js';
+    import { error, yikes }  from '../../warn.svelte';
     import { t }       from '../../translations.svelte.js';
 
     import EstimatedTask from '../../Components/EstimatedTask.svelte';
@@ -11,7 +12,6 @@
         onSelect = (task) => {}
     } = $props();
 
-    let error    = $state(null);
     let projects = $state(null);
 
     async function loadItems(){
@@ -24,8 +24,9 @@
         });
         if (resp.ok){
             projects = await resp.json();
+            yikes();
         } else {
-            error = await resp.body();
+            error(resp);
         }
     }
 
@@ -43,9 +44,6 @@
 
 <div>
     <h1>{t('estimated_times')}</h1>
-    {#if error}
-    <span class="error">{error}</span>
-    {/if}
     {#if projects}
     {#each projects as project,pid}
     <fieldset>

frontend/src/routes/document/ItemList.svelte

@@ -2,6 +2,7 @@
     import { onMount } from 'svelte';
 
     import { api }     from '../../urls.svelte.js';
+    import { error, yikes }  from '../../warn.svelte';
     import { t }       from '../../translations.svelte.js';
 
     import Item        from '../../Components/Item.svelte';
@@ -12,8 +13,6 @@
     } = $props();
 
     let items = $state(null);
-    let error = $state(null);
-
 
     async function loadItems(){
         const url  = api('items/list');
@@ -25,8 +24,9 @@
         });
         if (resp.ok){
             items = await resp.json();
+            yikes();
         } else {
-            error = await resp.body();
+            error(resp);
         }
     }
 
@@ -36,9 +36,6 @@
 
 <div>
     <h1>{t('items')}</h1>
-    {#if error}
-    <span class="error">{error}</span>
-    {/if}
     {#if items}
     {#each items as item,id}
     <Item item={item} onclick={() => onSelect(item)} />

frontend/src/routes/document/List.svelte

@@ -3,11 +3,11 @@
     import { useTinyRouter } from 'svelte-tiny-router';
 
     import { api }           from '../../urls.svelte.js';
+    import { error, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte.js';
 
     import TypeSelector      from './TypeSelector.svelte';
 
-    let error           = null;
     let companies       = {};
     let router          = useTinyRouter();
     let company_id      = +router.query.company_id;
@@ -28,7 +28,7 @@
             if (resp.ok){
                 load(selected_company); // relaod docs
             } else {
-                error = await resp.text();
+                error(resp);
             }
         }
     }
@@ -45,7 +45,7 @@
         if (resp.ok){
             documents = await resp.json();
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -54,8 +54,9 @@
         const resp = await fetch(url,{ credentials: 'include'});
         if (resp.ok){
             companies = await resp.json();
+            yikes();
         } else {
-            error = await resp.text();
+            error(resp);
         }
         if (company_id) {
             for (let comp of Object.values(companies)){

frontend/src/routes/document/PositionList.svelte

@@ -3,13 +3,13 @@
     import { useTinyRouter } from 'svelte-tiny-router';
 
     import { api  }          from '../../urls.svelte.js';
+    import { error, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte.js';
 
     import Position          from './Position.svelte';
 
     var {
         document = $bindable(null),
-        error = $bindable(null),
         submit = (key,newVal) => {},
     } = $props();
 
@@ -18,7 +18,6 @@
     async function updatePositions(resp){
         let json           = await resp.json();
         document.positions = {};
-        error              = null;
         setTimeout(() => document.positions = json,100)
     }
 
@@ -32,7 +31,7 @@
         if (resp.ok){
             updatePositions(resp);
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -48,7 +47,7 @@
         if (resp.ok){
             updatePositions(resp);
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 </script>

frontend/src/routes/document/Send.svelte

@@ -3,12 +3,12 @@
     import { useTinyRouter } from 'svelte-tiny-router';
 
     import { api }           from '../../urls.svelte.js';
+    import { error, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte.js';
 
     let   content = $state(null);
     let   doc     = $state(null);
     let   email   = $state(null);
-    let   error   = $state(null);
     const router  = useTinyRouter();
     let   subject = $state(null);
     let { id }    = $props();
@@ -20,9 +20,9 @@
             doc     = await resp.json();
             email   = doc.customer.email;
             subject = t('new_document_from',{type:t(doc.type),sender:doc.company.name,number:doc.number}),
-            error   = null;
+            yikes();
         } else {
-            error = await resp.text();
+            error(resp);
             return;
         }
         url  = api(`document/${id}/settings`);
@@ -31,7 +31,7 @@
             const settings = await resp.json();
             content        = settings.content;
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -46,17 +46,13 @@
         if (resp.ok){
             router.navigate(`/document?company_id=${doc.company.id}`);
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
     onMount(loadDoc);
 </script>
 
-{#if error}
-<span class="error">{error}</span>
-{/if}
-
 <fieldset>
     <legend>{t('customer_email')} / {t('subject')}</legend>
     <input type="text" bind:value={email} />

frontend/src/routes/document/TimeList.svelte

@@ -2,6 +2,7 @@
     import { onMount }     from 'svelte';
 
     import { api, target } from '../../urls.svelte.js';
+    import { error, yikes }  from '../../warn.svelte';
     import { t }           from '../../translations.svelte.js';
 
     let {
@@ -9,7 +10,6 @@
         onSelect = (time) => {}
     } = $props();
 
-    let error    = $state(null);
     let projects = $state(null);
     let times    = $state(null);
 
@@ -23,8 +23,9 @@
         });
         if (resp.ok){
             projects = await resp.json();
+            yikes();
         } else {
-            error = await resp.body();
+            error(resp);
         }
     }
 
@@ -39,7 +40,7 @@
         if (resp.ok){
             times = await resp.json();
         } else {
-            error = await resp.body();
+            error(resp);
         }
     }
 

frontend/src/routes/document/View.svelte

@@ -3,6 +3,7 @@
     import { useTinyRouter } from 'svelte-tiny-router';
 
     import {api}             from '../../urls.svelte.js';
+    import { error, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte.js';
     import { user }          from '../../user.svelte.js';
 
@@ -20,7 +21,6 @@
 
     let   doc           = $state(null);
     let   editable      = $derived(doc.state == 1);
-    let   error         = $state(null);
     let   { id }        = $props();
     let   pdfDisabled   = $state(false);
     let position_select = $state(false);
@@ -36,9 +36,9 @@
         });
         if (resp.ok){
             doc.positions = await resp.json();
-            error         = null;
+            yikes();
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -64,12 +64,12 @@
             body        : type
         });
         if (res.ok) {
-            error = null;
+            yikes();
             let json = await res.json();
             router.navigate(`/document/${json.id}/view`);
             loadDoc();
         } else {
-            error = await res.text();
+            error(res);
         }
     }
 
@@ -78,9 +78,9 @@
         const resp = await fetch(url,{credentials:'include'});
         if (resp.ok){
             doc   = await resp.json();
-            error = null;
+            yikes();
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -90,7 +90,7 @@
         const url   = api(`document/${doc.id}/pdf`);
         const resp  = await fetch(url,{credentials:'include'});
         if (resp.ok){
-            error             = null;
+            yikes();
             const blob        = await resp.blob();
             const parts       = resp.headers.get("Content-disposition").split(";");
             const filename    = parts[1].split('=')[1].split('"').join('');
@@ -99,7 +99,7 @@
             fileLink.download = filename;
             fileLink.click();
         } else {
-            error = await resp.text();
+            error(resp);
         }
         pdfDisabled = false;
     }
@@ -133,10 +133,6 @@
     <title>Umbrella – {t('document')} {doc?.number}</title>
 </svelte:head>
 
-{#if error}
-<span class="error">{error}</span>
-{/if}
-
 {#if doc}
     <fieldset class="customer">
         <legend>{t('customer')}</legend>
@@ -248,7 +244,7 @@
             <button onclick={() => position_select = true}>{t('add_object',{object:t('position')})}</button>
             {/if}
         </legend>
-        <PositionList bind:document={doc} submit={update} bind:error={error} />
+        <PositionList bind:document={doc} submit={update} />
     </fieldset>
     <fieldset>
         <legend>{t('footer')}</legend>

frontend/src/routes/notes/Index.svelte

@@ -3,13 +3,13 @@
     import { useTinyRouter } from 'svelte-tiny-router';
 
     import { api }           from '../../urls.svelte.js';
+    import { error, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte.js';
     import { user }          from '../../user.svelte.js';
 
     import List   from './List.svelte';
 
     let authors  = $state({});
-    let error    = $state(null);
     let loader       = {
         offset : 0,
         limit  : 20,
@@ -22,9 +22,6 @@
         entity_id = null
     } = $props();
 
-
-
-
     async function loadNotes(){
         const url  = api(`notes?offset=${loader.offset}&limit=${loader.limit}`);
 
@@ -36,11 +33,11 @@
             authors    = {...authors, ...data.authors};
             loader.offset += loader.limit;
             loader.active  = false;
-            error = null;
+            yikes();
             if (Object.keys(data.notes).length) onscroll(null); // when notes were received, check whether they fill up the page
 
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -56,10 +53,10 @@
             authors[user.id]  = user;
             notes[newNote.id] = newNote;
             note              = {source:'',rendered:''};
-            error             = null;
+            yikes();
             return true;
         } else {
-            error = await resp.text();
+            error(resp);
             return false;
         }
     }
@@ -81,7 +78,4 @@
 </svelte:head>
 
 <svelte:window {onscroll} />
-{#if error}
-<span class="error">{error}</span>
-{/if}
 <List {notes} />

frontend/src/routes/notes/List.svelte

@@ -2,13 +2,13 @@
     import { useTinyRouter } from 'svelte-tiny-router';
 
     import { api }           from '../../urls.svelte.js';
+    import { error, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte.js';
     import { user }          from '../../user.svelte.js';
 
     import Editor from '../../Components/MarkdownEditor.svelte';
 
     let { authors, module, notes = $bindable() }  = $props();
-    let error = $state(null);
     const router = useTinyRouter();
 
     async function drop(nid){
@@ -19,10 +19,10 @@
             method      : 'DELETE'
         });
         if (resp.ok) {
-            error = false;
+            yikes();
             notes = notes.filter((itm,idx) => itm.id != nid);
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -46,10 +46,10 @@
             body        : src
         });
         if (resp.ok) {
-            error = false;
+            yikes();
             return true;
         } else {
-            error = await resp.text();
+            error(resp);
             return false;
         }
     }

frontend/src/routes/notes/RelatedNotes.svelte

@@ -3,6 +3,7 @@
     import { useTinyRouter } from 'svelte-tiny-router';
 
     import { api }           from '../../urls.svelte.js';
+    import { error, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte.js';
     import { user }          from '../../user.svelte.js';
 
@@ -10,7 +11,6 @@
     import List   from './List.svelte';
 
     let authors  = $state(null);
-    let error    = $state(null);
     let note     = $state({source:null,rendered:null});
     let notes    = $state(null);
     const router = useTinyRouter();
@@ -27,10 +27,10 @@
             method      : 'DELETE'
         });
         if (resp.ok) {
-            error = false;
+            yikes();
             delete notes[nid];
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -46,7 +46,7 @@
             notes      = Object.values(data.notes).sort((a, b) => a.id - b.id);
             authors    = data.authors;
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -61,12 +61,12 @@
             let newNote       = await resp.json();
             authors[user.id]  = user;
             notes.push(newNote);
-            error             = null;
+            yikes();
             note.source       = null;
             note.rendered     = null;
             return true;
         } else {
-            error = await resp.text();
+            error(resp);
             return false;
         }
     }
@@ -79,10 +79,10 @@
             body        : src
         });
         if (resp.ok) {
-            error = false;
+            yikes();
             return true;
         } else {
-            error = await resp.text();
+            error(resp);
             return true;
         }
     }
@@ -90,9 +90,6 @@
     onMount(load);
 </script>
 
-{#if error}
-<span class="error">{error}</span>
-{/if}
 <List {authors} {module} {notes} />
 <div class="editor">
 <Editor simple={true} bind:value={note} onSet={saveNote} />

frontend/src/routes/project/Create.svelte

@@ -2,13 +2,13 @@
     import { useTinyRouter } from 'svelte-tiny-router';
 
     import { api }           from '../../urls.svelte.js';
+    import { error, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte.js';
 
     import CompanySelector   from '../../Components/CompanySelector.svelte';
     import MarkdownEditor    from '../../Components/MarkdownEditor.svelte';
     import Tags              from '../tags/TagList.svelte';
 
-    let error        = $state(null);
     let ready        = $derived(!!project.name.trim())
     const router     = useTinyRouter();
     let showSettings = $state(false);
@@ -32,7 +32,7 @@
             var newProject = await resp.json();
             router.navigate(`/project/${newProject.id}/view`);
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -50,9 +50,6 @@
     label{ display: block }
 </style>
 
-{#if error}
-<span class="error">{error}</span>
-{/if}
 <form {onsubmit}>
     <fieldset>
         <legend>

frontend/src/routes/project/Kanban.svelte

@@ -3,6 +3,7 @@
     import { useTinyRouter } from 'svelte-tiny-router';
 
     import { api }           from '../../urls.svelte.js';
+    import { error, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte.js';
     import { user }          from '../../user.svelte.js';
 
@@ -14,7 +15,6 @@
     let router       = useTinyRouter();
     if (router.hasQueryParam('filter')) filter_input = router.getQueryParam('filter');
     let dragged      = null;
-    let error        = $state(null);
     let highlight    = $state({});
     let filter       = $derived(filter_input.toLowerCase());
     let project      = $state(null);
@@ -53,9 +53,9 @@
             if (!tasks[user_id]) tasks[user_id] = {};
             if (!tasks[user_id][state]) tasks[user_id][state] = {};
             tasks[user_id][state][task.id] = task;
-            error = null;
+            yikes();
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -81,9 +81,9 @@
             tasks[user_id][state][task.id] = task;
             task.assignee = user_id;
             task.status   = state;
-            error         = null;
+            yikes();
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -104,9 +104,9 @@
                 users[uid] = member.user.name;
                 if (!tasks[uid]) tasks[uid] = {};
             }
-            error = null;
+            yikes();
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -140,7 +140,7 @@
                 tasks[assignee][state][task_id] = task;
             }
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -164,9 +164,6 @@
 {#if project}
 <h1 onclick={ev => router.navigate(`/project/${project.id}/view`)}>{project.name}</h1>
 {/if}
-{#if error}
-<span class="error">{error}</span>
-{/if}
 
 {#if project}
 <div class="kanban" style="display: grid; grid-template-columns: {`repeat(${columns}, auto)`}">

frontend/src/routes/search/Search.svelte

@@ -2,6 +2,7 @@
     import { onMount }       from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
     import { api, target }   from '../../urls.svelte.js';
+    import { error, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte.js';
     import { display }       from '../../time.svelte';
 
@@ -11,7 +12,6 @@
     let bookmarks = $state(null);
     let companies = $state(null);
     let documents = $state(null);
-    let error     = $state(null);
     let fulltext  = false;
     let key       = $state(router.getQueryParam('key'));
     let input     = $state(router.getQueryParam('key'));
@@ -67,7 +67,7 @@
             const res = await resp.json();
             bookmarks = Object.keys(res).length ? res : null;
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -76,7 +76,7 @@
             const json = await resp.json();
             companies = Object.keys(json).length ? json : null;
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -85,7 +85,7 @@
             const json = await resp.json();
             documents = Object.keys(json).length ? json : null;
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -94,7 +94,7 @@
             const json = await resp.json();
             notes = Object.keys(json).length ? json : null;
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -103,7 +103,7 @@
             const res = await resp.json();
             projects = Object.keys(res).length ? res : null;
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -112,7 +112,7 @@
             const res = await resp.json();
             tasks = Object.keys(res).length ? res : null;
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -121,7 +121,7 @@
             const res = await resp.json();
             times = Object.keys(res).length ? res : null;
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -130,7 +130,7 @@
             const res = await resp.json();
             pages = Object.keys(res).length ? res : null;
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
     
@@ -144,9 +144,6 @@
 
 <fieldset class="search">
     <legend>{t('search')}</legend>
-    {#if error}
-    <span class="error">{error}</span>
-    {/if}
     <form onsubmit={setKey}>
     <label>
         {t('key')}

frontend/src/routes/tags/Reference.svelte

@@ -3,10 +3,10 @@
     import { useTinyRouter } from 'svelte-tiny-router';
 
     import { api, target }   from '../../urls.svelte.js';
+    import { error, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte.js';
 
     let { module, id } = $props();
-    let error          = $state(null);
     let object         = $state(null);
     let router         = useTinyRouter();
     let task           = $state(null);
@@ -21,7 +21,7 @@
         if (resp.ok) {
             object = await resp.json();
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -32,9 +32,6 @@
     onMount(load);
 </script>
 
-{#if error}
-<span class="error">{error}</span>
-{/if}
 {#if object}
 {#if module=='bookmark'}
 {@html target(object.comment.rendered).replace(/<p>(.*?)<\/p>/, '$1')} <!-- this is a workaround for in-proper formatting of paragraphs within list items in firefox -->

frontend/src/routes/tags/TagList.svelte

@@ -3,6 +3,7 @@
     import { useTinyRouter } from 'svelte-tiny-router';
 
     import { api }           from '../../urls.svelte.js';
+    import { error, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte.js';
     import { user }          from '../../user.svelte.js'
 
@@ -12,7 +13,6 @@
         tags      = $bindable([]),
         user_list = [],
     } = $props();
-    let error  = $state(null);
     let newTag = $state('');
     let router = useTinyRouter();
 
@@ -35,10 +35,10 @@
             newTag = await resp.text();
             tags.push(newTag);
             tags  = tags.sort();
-            error = null;
+            yikes();
             newTag = '';
         } else {
-            error = await resp.text();
+            error(resp);
         }
         return false;
     }
@@ -58,7 +58,7 @@
             tag  = await resp.text();
             tags = tags.filter(item => item !== tag);
         } else {
-            error = await resp.text();
+            error(resp);
         }
         return false;
     }
@@ -71,7 +71,7 @@
             tags = await resp.json();
             tags = tags.sort();
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -86,10 +86,6 @@
     $effect(() => loadTags(id));
 </script>
 
-{#if error}
-<span class="error">{error}</span>
-{/if}
-
 <div class="taglist">
     {#each tags as tag,idx}
     <span class="tag">

frontend/src/routes/tags/TagUses.svelte

@@ -2,12 +2,12 @@
     import {onMount}         from 'svelte';
 
     import { api }           from '../../urls.svelte.js';
+    import { error, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte.js';
 
     import Reference         from './Reference.svelte';
 
     let { tag } = $props();
-    let error   = $state(null);
     let uses    = $state(null);
 
     async function loadUses(){
@@ -15,9 +15,9 @@
         const resp = await fetch(url,{credentials:'include'});
         if (resp.ok){
             uses = await resp.json();
-            error = null;
+            yikes();
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -26,9 +26,6 @@
 </script>
 <fieldset>
     <legend>{t('tag_uses',{tag:tag})}</legend>
-    {#if error}
-    <span class="error">{error}</span>
-    {/if}
     {#if uses}
     {#each Object.entries(uses) as [module,ids]}
     <h2>{t(module.endsWith('s') ? module : `${module}s`)}</h2>

frontend/src/routes/task/Add.svelte

@@ -3,6 +3,7 @@
     import { useTinyRouter } from 'svelte-tiny-router';
 
     import { api }           from '../../urls.svelte.js';
+    import { error, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte.js';
     import { user }          from '../../user.svelte.js';
 
@@ -11,7 +12,6 @@
     import Tags              from '../tags/TagList.svelte';
 
     let { project_id = null, parent_task_id } = $props();
-    let error            = $state(null);
     let project          = $state(null);
     let extendedSettings = $state(false);
     let parent_task      = $state(null);
@@ -54,10 +54,10 @@
             parent_task         = await resp.json();
             task.parent_task_id = +parent_task_id;
             project_id          = parent_task.project_id;
-            error               = null;
+            yikes();
             project             = null; // TODO
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -67,9 +67,9 @@
         if (resp.ok){
             project           = await resp.json();
             task.project_id   = +project_id;
-            error             = null;
+            yikes();
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -111,9 +111,9 @@
             if (task.parent_task_id){
                 router.navigate(`/task/${task.parent_task_id}/view`);
             } else router.navigate(`/task/${task.id}/view`);
-            error = null;
+            yikes();
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -130,9 +130,6 @@
 
 <fieldset>
     <legend>{t('add_object',{object:t('task')})}</legend>
-    {#if error}
-    <span class="error">{error}</span>
-    {/if}
     <table {onkeydown}>
         <tbody>
             <tr>

frontend/src/routes/task/Index.svelte

@@ -3,9 +3,9 @@
     import { useTinyRouter } from 'svelte-tiny-router';
 
     import { api }           from '../../urls.svelte.js';
+    import { error, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte.js';
 
-    let error = $state(null);
     let projects = $state({});
     let router = useTinyRouter();
     let tasks = $state(null);
@@ -27,7 +27,7 @@
         if (resp.ok){
             tasks[tid] = await resp.json();
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -53,7 +53,7 @@
         if (resp.ok){
             projects[pid] = await resp.json();
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -77,7 +77,7 @@
                 load();
             }
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -102,9 +102,6 @@
 
 <fieldset>
     <legend>{loading ? t('loading_object',{object:t('task_list')}) : t('task_list')}</legend>
-    {#if error}
-    <soan class="error">{error}</soan>
-    {/if}
     {#if tasks}
     <table>
         <thead>

frontend/src/routes/time/Index.svelte

@@ -2,6 +2,7 @@
     import { onMount } from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
     import { api }       from '../../urls.svelte.js';
+    import { error, yikes }  from '../../warn.svelte';
     import { t }         from '../../translations.svelte.js';
     import { timetrack } from '../../user.svelte.js';
     import { display }   from '../../time.svelte.js';
@@ -10,7 +11,6 @@
     import TimeEditor from '../../Components/TimeRecordEditor.svelte';
 
     let docLinks = $state(null);
-    let error = $state(null);
     let router = useTinyRouter();
     let times = $state(null);
     let tasks = {};
@@ -38,7 +38,7 @@
             const track = await resp.json();
             timetrack.running = track;
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -87,13 +87,13 @@
             body        : `${id1}+${id2}`
         });
         if (res.ok){
-            error = null;
+            yikes();
             let json = await res.json();
             delete times[id1];
             delete times[id2];
             times[json.id] = json;
         } else {
-            error = await res.text();
+            error(res);
         }
         return false;
     }
@@ -108,7 +108,7 @@
             projects = json.projects;
             docLinks = json.documents;
         } else {
-            error = await resp.text();
+            error(resp);
         }
     }
 
@@ -132,9 +132,9 @@
         });
         if (res.ok){
             delete times[time_id];
-            error = false;
+            yikes();
         } else {
-            error = await res.text();
+            error(res);
         }
     }
 
@@ -178,10 +178,10 @@
             let id = json.id;
             for (let key of Object.keys(json)) times[id][key] = json[key];
             detail = null;
-            error = null;
+            yikes();
             return true;
         } else {
-            error = await res.text();
+            error(res);
             return false;
         }
     }
@@ -194,9 +194,6 @@
 </svelte:head>
 
 <h1>{t('timetracking')}</h1>
-{#if error}
-<span class="error">{error}</span>
-{/if}
 {#if times}
 {#if selectionSum}
 <div class="timetracks sum">

frontend/src/routes/user/EditPassword.svelte

@@ -5,7 +5,6 @@
     let { editPassword = $bindable() } = $props();
 
     let caption  = $state(t('update'));
-    let error    = $state("");
     let newPass  = $state("");
     let mismatch = $derived(newPass != repeat);
     let newEmpty = $derived(!/\S/.test(newPass));
@@ -67,7 +66,4 @@
     </label>
     <button onclick={submit} disabled={sent||oldEmpty||newEmpty||mismatch}>{caption}</button>
     <button onclick={abort} disabled={sent}>{t('abort')}</button>
-    {#if error}
-    <span class="error">{error}</span>
-    {/if}
 </fieldset>

frontend/src/routes/user/ResetPw.svelte

@@ -3,10 +3,10 @@
     import { useTinyRouter } from 'svelte-tiny-router';
 
     import { api }           from '../../urls.svelte.js';
+    import { error }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte.js';
 
     let caption  = t('send_mail');
-    let error    = null;
     let mail     = "";
     const router = useTinyRouter();
 
@@ -35,7 +35,7 @@
             if (resp.ok){
                 router.navigate('/user')
             } else {
-                error = await resp.text();
+                error(resp);
             }
         }
     }
@@ -66,8 +66,5 @@
         {t('enter_email')}
     </label>
     <button type="submit">{caption}</button>
-    {#if error}
-    <div class="error">{error}</div>
-    {/if}
 </fieldset>
 </form>