removed output added for debugging

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

accounting/src/main/java/de/srsoftware/umbrella/accounting/AccountDb.java

@@ -16,7 +16,7 @@ public interface AccountDb {
 
 	Collection<UmbrellaUser> getMembers(long accountId);
 
-	Optional<Transaction> lastTransaction(long accountId, String source, String dest, double amount);
+	Optional<Transaction> lastTransaction(long accountId, String source, String destination, Double amount);
 
 	Collection<Account> listAccounts(long userId);
 

accounting/src/main/java/de/srsoftware/umbrella/accounting/AccountingModule.java

@@ -311,12 +311,11 @@ public class AccountingModule extends BaseHandler implements AccountingService {
 		var source = src.get(src.has(Field.ID) ? Field.ID : Field.DISPLAY).toString();
 		if (!json.has(Field.DESTINATION)) throw missingField(Field.DESTINATION);
 		if (!(json.get(Field.DESTINATION) instanceof JSONObject dst)) throw invalidField(Field.SOURCE,JSON);
-		var dest = dst.get(dst.has(Field.ID) ? Field.ID : Field.DISPLAY).toString();
+		String destination = dst.has(Field.ID) ? dst.get(Field.ID).toString() : dst.has(Field.DISPLAY) ? dst.get(Field.DISPLAY).toString() : null;
-		if (!json.has(Field.AMOUNT)) throw missingField(Field.AMOUNT);
+		Double amount = null;
-		if (!(json.get(Field.AMOUNT) instanceof Number amt)) throw invalidField(Field.AMOUNT,Text.NUMBER);
+		if (json.has(Field.AMOUNT) && json.get(Field.AMOUNT) instanceof Number amt) amount = amt.doubleValue();
-		var amount = amt.doubleValue();
 
-		var transaction = accountDb.lastTransaction(accountId, source, dest, amount);
+		var transaction = accountDb.lastTransaction(accountId, source, destination, amount);
 		return transaction.isPresent() ? sendContent(ex,transaction.get()) : notFound(ex);
 	}
 

accounting/src/main/java/de/srsoftware/umbrella/accounting/SqliteDb.java

@@ -173,22 +173,42 @@ public class SqliteDb extends BaseDb implements AccountDb {
 	}
 
 	@Override
-	public Optional<Transaction> lastTransaction(long accountId, String source, String dest, double amount) {
+	public Optional<Transaction> lastTransaction(long accountId, String source, String destination, Double amount) {
 		try {
-			var rs = select(ALL).from(TABLE_TRANSACTIONS)
+			var query = select(ALL).from(TABLE_TRANSACTIONS).where(ACCOUNT,equal(accountId));
-					.where(ACCOUNT,equal(accountId)).where(SOURCE,equal(source)).where(DESTINATION,equal(dest)).where(AMOUNT,equal(amount))
+			if (source != null)      query = query.where(SOURCE,equal(source));
-					.sort(ID+" DESC")
+			if (destination != null) query = query.where(DESTINATION,equal(destination));
-					.limit(1)
+			if (amount != null)      query = query.where(AMOUNT,equal(amount));
-					.exec(db);
+			var rs = query.sort(ID+" DESC").limit(1).exec(db);
 			Transaction ta = null;
 			if (rs.next()) ta = Transaction.of(rs);
 			rs.close();
+
+			if (ta == null && amount != null) { // try to search by amount, ignore source and dest
+				rs = select(ALL).from(TABLE_TRANSACTIONS).where(ACCOUNT, equal(accountId)).where(AMOUNT, equal(amount))
+						.sort(ID + " DESC").limit(1).exec(db);
+				if (rs.next()) ta = Transaction.of(rs);
+				rs.close();
+			}
+
+			if (ta == null && source != null && destination != null) { // try to search by amount, ignore source and dest
+				rs = select(ALL).from(TABLE_TRANSACTIONS)
+						.where(SOURCE,equal(source))
+						.where(DESTINATION,equal(destination))
+						.where(ACCOUNT, equal(accountId))
+						.sort(ID + " DESC").limit(1).exec(db);
+				if (rs.next()) ta = Transaction.of(rs);
+				rs.close();
+			}
+
+
 			if (ta != null){
 				var tags = ta.tags();
 				rs = select(TAG).from(TABLE_TAGS_TRANSACTIONS).leftJoin(TAG_ID,TABLE_TAGS,ID).where(TRANSACTION_ID,equal(ta.id())).exec(db);
 				while (rs.next()) tags.add(rs.getString(1));
 				rs.close();
 			}
+
 			return nullable(ta);
 		} catch (SQLException e) {
 			throw failedToSearchDb(t(Text.ACCOUNTING));

bus/src/main/java/de/srsoftware/umbrella/messagebus/MessageApi.java

@@ -42,6 +42,9 @@ public class MessageApi extends BaseHandler{
 		ex.sendResponseHeaders(HTTP_OK,0);
 		try (var os = ex.getResponseBody(); var stream = new PrintWriter(os); var eventQueue = new EventQueue(addr)){
 			LOG.log(INFO,"{0} opened event stream.",addr);
+			stream.print("retry: 3000\n\n");
+			stream.flush();
+
 			var counter = 0;
 			while (!stream.checkError()){
 				sleep(100);

bus/src/main/java/de/srsoftware/umbrella/messagebus/events/Event.java

@@ -85,7 +85,7 @@ public abstract class Event<Payload extends UmbrellaObject> {
 		{ // get the highest superclass that is not object
 			Class<?> parent = clazz.getSuperclass();
 
-			while (parent != null && parent != Object.class) {
+			while (parent != null && parent != Object.class && parent != UmbrellaObject.class) {
 				clazz = parent;
 				parent = clazz.getSuperclass();
 			}

frontend/src/Components/Login.svelte

@@ -59,7 +59,7 @@
         router.navigate('/user/reset/pw');
     }
 
-    if (router.fullPath.endsWith('/openid_login') && router.query.service) {
+    if (router.query.service) {
         redirectTo(null,router.query.service);
     } else {
         onMount(load);

frontend/src/Components/Menu.svelte

@@ -2,14 +2,13 @@
 import { onMount }       from 'svelte';
 import { useTinyRouter } from 'svelte-tiny-router';
 
-import { api, get }      from '../urls.svelte';
+import { api, get, search }      from '../urls.svelte';
 import { error }         from '../warn.svelte';
 import { logout, user }  from '../user.svelte';
 import { t }             from '../translations.svelte';
 
 import TimeRecorder from './TimeRecorder.svelte';
 
-let key = $state(null);
 const router  = useTinyRouter();
 let modules = $state(null);
 let expand = $state(false);
@@ -36,10 +35,10 @@ function onclick(e){
     return false;
 }
 
-async function search(e){
+async function doSearch(e){
     e.preventDefault();
     expand = false;
-    router.navigate(`/search?key=${key}`);
+    router.navigate(`/search?key=${search.key}`);
     return false;
 }
 
@@ -53,8 +52,8 @@ onMount(fetchModules);
 </style>
 
 <nav class={expand?"expanded":"collapsed"}>
-    <form onsubmit={search}>
+    <form onsubmit={doSearch}>
-        <input type="text" bind:value={key} />
+        <input type="text" bind:value={search.key} />
         <button type="submit">{t('search')}</button>
     </form>
     <button class="symbol" onclick={e => expand = !expand}> </button>

frontend/src/routes/accounting/account.svelte

@@ -4,7 +4,7 @@
 	import { error, yikes } from '../../warn.svelte';
 	import { t } from '../../translations.svelte';
 
-	import EntryForm from './add_entry.svelte';
+	import EntryForm from './add_entry_new.svelte';
 	import Transaction from './transaction.svelte';
 
 	let { id }       = $props();
@@ -173,5 +173,5 @@
 	</table>
 </fieldset>
 
-<EntryForm {account} {onSave} />
+<EntryForm {account} {onSave} {users} />
 {/if}

frontend/src/routes/accounting/add_entry_new.svelte

@@ -0,0 +1,205 @@
+<script>
+	import { useTinyRouter } from 'svelte-tiny-router';
+
+	import { t } from '../../translations.svelte';
+	import { api, post } from '../../urls.svelte';
+	import { error, yikes } from '../../warn.svelte';
+	import { user }  from '../../user.svelte';
+	import Autocomplete from '../../Components/Autocomplete.svelte';
+    import Tags from '../tags/TagList.svelte';
+
+	let defaultAccount = {
+		id       : 0,
+		name     : '',
+		currency : ''
+	};
+	let { account = defaultAccount, new_account = false, onSave = () => {}, users } = $props();
+
+	let entry = $state({
+		account,
+		date : new Date().toISOString().substring(0, 10),
+		source : {
+			display: user.name,
+			id: user.id
+		},
+		destination : {},
+		amount : 0.0,
+		purpose : {},
+		tags    : []
+	});
+	let router = useTinyRouter();
+
+	async function dst_selected(destination){
+		destination = JSON.parse(JSON.stringify(destination));
+		let source  = JSON.parse(JSON.stringify(entry.source));
+		const url   = api(`accounting/${entry.account.id}/tags`)
+		const res   = await post(url,{source,destination});
+		if (res.ok) {
+			yikes();
+			const json = await res.json();
+			await proposePurpose();
+			entry.tags = json;
+		} else error(res);
+	}
+
+	function focusOnEnter(ev,id){
+		if (ev.key == 'Enter') {
+			proposePurpose();
+			document.getElementById(id).focus();
+		}
+	}
+
+	async function getAccountTags(text){
+		if (!text) return [];
+		const url = api(`accounting/${entry.account.id}/tags`)
+		return await getProposals(text,url);
+	}
+
+	async function getDestinations(text){
+		const url = api('accounting/destinations');
+		return await getProposals(text,url);
+	}
+
+	async function getProposals(text,url){
+		const res = await post(url,text);
+        if (res.ok){
+            yikes();
+            const input = await res.json();
+            return Object.values(input).map(mapDisplay);
+        } else {
+            error(res);
+            return {};
+        }
+	}
+
+
+	async function getPurposes(text) {
+		const url = api('accounting/purposes');
+		return await getProposals(text,url);
+	}
+
+	async function getSources(text){
+		const url = api('accounting/sources');
+		return await getProposals(text,url);
+	}
+
+	function gotoTags(purpose){
+		document.getElementById('new_tag_input');
+	}
+
+	function mapDisplay(object){
+		if (object.display){
+			return object;
+		} else if (object.name) {
+			return {...object, display: object.name};
+		} else {
+		    return { display : object }
+		}
+	}
+
+	async function proposePurpose(){
+		console.log('proposePurpose()');
+		const amount      = entry.amount;
+		const source      = entry.source;
+		const destination = entry.destination;
+		const url         = api(`accounting/${account.id}/purposes`);
+		const res         = await post(url,{source,destination,amount});
+		if (res.ok) {
+			yikes();
+			var lastTransaction = await res.json();
+			console.log({lastTransaction,users:JSON.parse(JSON.stringify(users))});
+			entry.purpose       = { display: lastTransaction.purpose};
+			entry.tags          = lastTransaction.tags;
+			if (lastTransaction.source.value){
+				if (users[lastTransaction.source.value]){
+					let user = users[lastTransaction.source.value];
+					entry.source = { id : +lastTransaction.source.value, display : user.name };
+				} else entry.source = { display: lastTransaction.source.value };
+			}
+			if (lastTransaction.destination.value){
+				if (users[lastTransaction.destination.value]){
+					let user = users[lastTransaction.destination.value];
+					entry.destination = { id : +lastTransaction.destination.value, display : user.name };
+				} else entry.destination = { display: lastTransaction.destination.value };
+			}
+		} else error(res);
+	}
+
+	async function save(){
+		let data = {
+			...entry,
+			purpose: entry.purpose.display
+		}
+		let url = api('accounting');
+		let res = await post(url, data);
+		if (res.ok) {
+			yikes();
+			if (new_account){
+				router.navigate('/accounting');
+				return;
+			}
+			//entry.tags = [];
+			onSave();
+			document.getElementById('date-input').focus();
+		} else error(res);
+	}
+</script>
+
+<style>
+	hr{
+		grid-column: 1 / -1;
+		margin: 0.5rem 0;
+        border: 0;
+        height: 1px;
+        align-self: center;
+        background: red;
+	}
+</style>
+
+<fieldset class="grid2 new_transaction">
+	{#if new_account}
+		<legend>{t('create_new_object',{object:t('account')})}</legend>
+		<span style="display:none"></span>
+		<span>{t('account name')}</span>
+		<span>
+			<input type="text" bind:value={entry.account.name} />
+		</span>
+		<span>{t('currency')}</span>
+		<span>
+			<input type="text" bind:value={entry.account.currency} />
+		</span>
+		<hr/>
+		<span style="grid-column-end: span 2">{t('first transaction')}</span>
+	{:else}
+		<legend>{t('add_object',{object:t('transaction')})}</legend>
+		<span style="display:none"></span>
+	{/if}
+
+	<span>{t('date')}</span>
+	<span>
+		<input type="date" bind:value={entry.date} id="date-input" />
+	</span>
+
+	<span>{t('amount')}</span>
+	<span>
+		<input type="number" bind:value={entry.amount} onkeyup={e => focusOnEnter(e,'source-input')} />&nbsp;{entry.account.currency}
+	</span>
+
+	<span>{t('source')}</span>
+	<Autocomplete bind:candidate={entry.source} getCandidates={getSources} id="source-input" />
+
+	<span>{t('destination')}</span>
+	<Autocomplete bind:candidate={entry.destination} getCandidates={getDestinations} onSelect={dst_selected} />
+
+
+	<span>{t('purpose')}</span>
+	<Autocomplete bind:candidate={entry.purpose} getCandidates={getPurposes} onCommit={gotoTags} id="purpose_input" />
+
+	<span>{t('tags')}</span>
+	<Tags getCandidates={getAccountTags} module={null} bind:tags={entry.tags} onEmptyCommit={save} />
+
+	<span></span>
+	<span>
+		<button onclick={save}>{t('save')}</button>
+	</span>
+</fieldset>

frontend/src/routes/journal/related.svelte

@@ -4,19 +4,22 @@
 	import { t }  from '../../translations.svelte';
 	let { module, entityId } = $props();
 
-	let data = $state({journal:[]});
+	let data = $state(null);
+	let loading = $state(false);
 
-	async function loadJournal(){
+	async function onclick(ev){
+		loading = true;
 		const url = api(`journal/${module}/${entityId}`);
 		const res = await get(url);
 		if (res.ok) {
 			data = await res.json();
 		} else error(res);
+		loading = false;
 	}
 
-	$effect(loadJournal);
 </script>
 
+{#if data}
 <ul>
 	{#each data.journal as entry (entry.id)}
 	<li>
@@ -27,3 +30,10 @@
 	</li>
 	{/each}
 </ul>
+{:else}
+{#if loading}
+{t('loading…')}
+{:else}
+<button {onclick}>{t('load {object}',{object:t('journal')})}</button>
+{/if}
+{/if}

frontend/src/routes/search/Search.svelte

@@ -1,7 +1,7 @@
 <script>
     import { onMount }       from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
-    import { api, get, post, target }   from '../../urls.svelte.js';
+    import { api, get, post, search, target }   from '../../urls.svelte.js';
     import { error, warn, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte.js';
     import { display }       from '../../time.svelte';
@@ -14,8 +14,6 @@
     let companies = $state(null);
     let documents = $state(null);
     let fulltext  = false;
-    let key       = $state(router.getQueryParam('key'));
-    let input     = $state(router.getQueryParam('key'));
     let notes     = $state(null);
     let pages     = $state(null);
     let projects  = $state(null);
@@ -23,22 +21,10 @@
     let tasks     = $state(null);
     let times     = $state(null);
 
-    async function setKey(ev){
-        if (ev) ev.preventDefault();
-        key = input;
-        doSearch(null);
-    }
 
-    onMount(() => {
-        let params = new URLSearchParams(location.search);
-        key        = params.get('key');
-    });
 
-    function doSearch(ignored){
+    function doSearch(key){
         warn(t('searching…'));
-        let url = window.location.origin + window.location.pathname;
-        if (key) url += '?key=' + encodeURI(key);
-        window.history.replaceState(history.state, '', url);
 
         const data = { key : key, fulltext : fulltext };
         post(api('bookmark/search'),data).then(handleBookmarks);
@@ -56,27 +42,6 @@
         get(api(module+'/'+entity_id)).then(res => setTitle(res,key,module))
     }
 
-    async function setTitle(resp,key,module){
-        if (resp.ok){
-            const json = await resp.json();
-            if (json.name) notes[key].title = t(module)+": "+json.name;
-            if (json.title) notes[key].title = t(module)+": "+json.title;
-            if (module == 'document'){
-                notes[key].title = t(json.type)+" "+json.number;
-            }
-        }
-
-    }
-
-    function onclick(e){
-        e.preventDefault();
-        var target = e.target;
-        while (target && !target.href) target=target.parentNode;
-        let href = target.getAttribute('href');
-        if (href) router.navigate(href);
-        return false;
-    }
-
     async function handleBookmarks(resp){
         quitOne();
         if (resp.ok){
@@ -175,6 +140,31 @@
         }
     }
 
+    function onclick(e){
+        e.preventDefault();
+        var target = e.target;
+        while (target && !target.href) target=target.parentNode;
+        let href = target.getAttribute('href');
+        if (href) router.navigate(href);
+        return false;
+    }
+
+    async function setKey(ev){
+        if (ev) ev.preventDefault();
+        doSearch(search.key);
+    }
+
+    async function setTitle(resp,key,module){
+        if (resp.ok){
+            const json = await resp.json();
+            if (json.name) notes[key].title = t(module)+": "+json.name;
+            if (json.title) notes[key].title = t(module)+": "+json.title;
+            if (module == 'document'){
+                notes[key].title = t(json.type)+" "+json.number;
+            }
+        }
+    }
+
     function quitOne(){
         counter--;
         if (counter > 0) {
@@ -182,20 +172,31 @@
         } else yikes();
     }
 
-    $effect(() => doSearch(key))
+    function updateUrl(ev){
+        ev.preventDefault();
+        let url = window.location.origin + window.location.pathname;
+        if (search.key) {
+            url += '?key=' + encodeURI(search.key);
+            window.history.replaceState(history.state, '', url);
+            doSearch(search.key);
+        }
+    }
+
+    $effect(() => {
+        doSearch(router.getQueryParam('key'));
+    });
 </script>
 
 <svelte:head>
-    <title>Umbrella – {t('search')}: {key}</title>
+    <title>Umbrella – {t('search')}{search.key?': '+search.key:''}</title>
 </svelte:head>
 
-
 <fieldset class="search">
     <legend>{t('search')}</legend>
-    <form onsubmit={setKey}>
+    <form onsubmit={updateUrl}>
     <label>
         {t('key')}
-        <input type="text" bind:value={input} />
+        <input type="text" bind:value={search.key} />
     </label>
     <label>
         <input type="checkbox" bind:checked={fulltext} />

frontend/src/routes/task/EasyList.svelte

@@ -130,6 +130,10 @@
     onMount(load);
 </script>
 
+<svelte:head>
+    <title>Umbrella – {t('Easylist')}: {tag}</title>
+</svelte:head>
+
 <h2>{t('tasks_for_tag',{tag:decodeURI(tag)})}</h2>
 
 <div class="easylist">

frontend/src/routes/time/Index.svelte

@@ -15,12 +15,14 @@
     let router = useTinyRouter();
 
     let times = $state(null);
+    let filter = $state("");
+    let lc_filter = $derived(filter.toLowerCase());
     let closed = $state(false);
     let tasks = {};
     let projects = {};
     let project_filter = $state(null);
     if (router.hasQueryParam('project')) project_filter = router.getQueryParam('project');
-    let sortedTimes = $derived.by(() => Object.values(times).filter(match_prj_filter).map(time => ({
+    let sortedTimes = $derived.by(() => Object.values(times).filter(match_prj_filter).filter(key_filter).map(time => ({
       ...time,
       start: display(time.start_time),
       end: display(time.end_time),
@@ -60,7 +62,6 @@
     }
 
     function calcYearMap(){
-        console.log('calcYearMap called');
         let result = {
             months : {},
             years  : {}
@@ -112,7 +113,17 @@
         return false;
     }
 
-
+    function key_filter(time){
+        if (!filter) return true;
+        if (users[time.user_id].name.toLowerCase().includes(lc_filter)) return true;
+        if (time.subject.toLowerCase().includes(lc_filter)) return true;
+        for (var tid of time.task_ids){
+            var task = tasks[tid];
+            if (tasks[tid].name.toLowerCase().includes(lc_filter)) return true;
+            if (projects[tasks[tid].project_id].name.toLowerCase().includes(lc_filter)) return true;
+        }
+        return false;
+    }
 
     async function loadTimes(){
         const url  = api('time');
@@ -235,6 +246,11 @@
     <title>Umbrella – {t('timetracking')}</title>
 </svelte:head>
 
+<style>
+    .filter{
+        margin: 0 0 0 30%;
+    }
+</style>
 
 <h1>{t('timetracking')}</h1>
 {#if times}
@@ -251,6 +267,10 @@
         <input type="checkbox" bind:checked={closed} onchange={reload} />
         {t('show_closed')}
     </label>
+    <label class="filter">
+        <input type="text" bind:value={filter} />
+        {t('filter')}
+    </label>
 </div>
 <table class="timetracks">
     <thead>

frontend/src/translations.svelte.js

@@ -15,7 +15,8 @@ export function t(key,args = {}){
     for (let token of keys){
         if (!set[token]){
             console.warn('Missing translation for '+key);
-            return keys[keys.length-1].replaceAll('_',' ');
+            set = keys[keys.length-1].replaceAll('_',' ');
+            break;
         }
         set = set[token];
     }

frontend/src/urls.svelte.js

@@ -22,6 +22,9 @@ export function eventStream(createHandler,updateHandler,deleteHandler){
 	if (createHandler) es.addEventListener('CREATE', createHandler);
 	if (updateHandler) es.addEventListener('UPDATE', updateHandler);
 	if (deleteHandler) es.addEventListener('DELETE', deleteHandler);
+	es.onerror = (err) => {
+		console.log("SSE error (reconnecting automatically):", err);
+  	};
 	return es;
 }
 
@@ -41,6 +44,8 @@ export function post(url,data){
     });
 }
 
+export const search = $state({"key":""});
+
 export function target(code){
     if (!code) return null;
     let altered = code;

translations/src/main/resources/de.json

@@ -198,6 +198,7 @@
   "items": "Artikel",
 
   "join_objects" : "{objects} zusammenführen",
+  "journal": "Journal",
 
   "kanban": "Kanban",
   "key": "Suchbegriff",
@@ -208,6 +209,7 @@
   "loading": "lade…",
   "loading_data": "Daten werden geladen…",
   "loading_object": "lade {object}…",
+  "load {object}": "{object} laden",
   "local_court": "Amtsgericht",
   "locality": "Ort",
   "location": "Ort",

translations/src/main/resources/en.json

@@ -198,6 +198,7 @@
   "items": "items",
 
   "join_objects" : "join {objects}",
+  "journal": "Journal",
 
   "kanban": "Kanban",
   "key": "search term",
@@ -208,6 +209,7 @@
   "loading": "loading…",
   "loading_data": "loading data…",
   "loading_object": "loading {object}…",
+  "load {object}": "load {object}",
   "local_court": "local court",
   "locality": "locality",
   "location": "location",

web/src/main/resources/web/css/bloodshed-color.css

@@ -130,6 +130,10 @@ tr:hover .taglist .tag button {
     background-color: #d3ff00;
 }
 
+.kanban .filter{
+    background: rgba(0,0,0,0.7);
+ }
+
 .position_selector{
     background-color: rgba(0,0,0,0.7);
     backdrop-filter: blur(3px);

web/src/main/resources/web/css/bloodshed.css

@@ -15,9 +15,10 @@ body {
     background-position: 98% 70px;
     background-attachment: fixed;
 }
-
+.code,
 code {
     font-size: 16px;
+    font-family: monospace;
 }
 
 fieldset {
@@ -228,9 +229,11 @@ textarea{
 }
 
 .kanban .filter{
-    position: absolute;
+    position: fixed;
-    top: 60px;
+    top: 84px;
     right: 20px;
+    padding: 5px;
+    z-index: 100;
 }
 
 .kanban.description{

web/src/main/resources/web/css/default-color.css

@@ -141,6 +141,10 @@ code,
     background-color: #d3ff00;
 }
 
+.kanban .filter{
+    background: rgba(0,0,0,0.7);
+ }
+
 .position_selector{
     background-color: rgba(0,0,0,0.7);
     backdrop-filter: blur(3px);

web/src/main/resources/web/css/default.css

@@ -322,9 +322,11 @@ textarea{
 }
 
 .kanban .filter{
-    position: absolute;
+    position: fixed;
-    top: 60px;
+    top: 84px;
     right: 20px;
+    padding: 5px;
+    z-index: 100;
 }
 
 .kanban.description{

web/src/main/resources/web/css/winter-color.css

@@ -68,6 +68,7 @@ tr:hover .taglist .tag button {
     color: black;
 }
 
+code,
 .code{
 	color: black;
 }
@@ -119,6 +120,10 @@ tr:hover .taglist .tag button {
     background-color: #d3ff00;
 }
 
+.kanban .filter{
+    background: rgba(255,255,255,0.7);
+ }
+
 .position_selector{
     background-color: rgba(0,0,0,0.7);
     backdrop-filter: blur(3px);

web/src/main/resources/web/css/winter.css

@@ -15,9 +15,10 @@ body {
     background-position: 98% 70px;
     background-attachment: fixed;
 }
-
+.code,
 code {
     font-size: 16px;
+    font-family: monospace;
 }
 
 fieldset {
@@ -321,9 +322,11 @@ textarea{
 }
 
 .kanban .filter{
-    position: absolute;
+    position: fixed;
-    top: 60px;
+    top: 84px;
     right: 20px;
+    padding: 5px;
+    z-index: 100;
 }
 
 .kanban.description{