improved spreadsheet design

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

frontend/src/Components/MarkdownDisplay.svelte

@@ -3,6 +3,7 @@
 	let { classes='markdown', markdown=$bindable({source:'',rendered:''}), onclick = null, oncontextmenu = null, title='', wrapper = 'div' } = $props();
 	let jspreadsheet = null;
 	const regex = /@startsheet[\s\S]*?@endsheet/g;
+	const number = /^[0-9.-]+$/
 
 	function update(sheet, index){
 		const data        = sheet.getData(false,false,'|',false);
@@ -19,6 +20,11 @@
 		return text.replace(regex, (match) => count++ === n ? `@startsheet\n${newContent}\n@endsheet` : match);
 	}
 
+	function formatCell(cell, value, x, y, instance, options){
+		value = value.trim();
+		if (value.startsWith('=') || number.test(value)) cell.style.textAlign = 'right';
+	}
+
 	async function transform(){
 		if (!markdown.rendered) return;
 		let sheets = document.getElementsByClassName('spreadsheet');
@@ -40,12 +46,14 @@
             for (let row of parsed){
                 for (let col in row){
                     let data = ""+row[col];
+                    if (data.startsWith('=')) continue;
                     let len  = data.length;
                     columns[col] = Math.max(columns[col]??0,len);
                 }
             }
             columns = Object.values(columns).map((len) => {return {
                 align: 'left',
+                render: formatCell,
                 width:`${len}0px`
             }});
 			let config = {

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

@@ -317,6 +317,23 @@ tr:hover .taglist .tag button {
 	border: 1px solid red;
 }
 
+.jss_worksheet{
+	background: black !important;
+	border-right: 1px solid #333 !important;
+	border-bottom: 1px solid #333 !important;
+}
+
+.jss_worksheet > thead > tr > td,
+.jss_worksheet > tbody > tr > td:first-child{
+	background: #730000 !important;
+	color: yellow;
+}
+
+.jss_worksheet td{
+	border-top: 1px solid #333 !important;
+	border-left: 1px solid #333 !important;
+}
+
 @media screen and (max-width: 900px) {
 	#app nav a{
 		background: black;

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

@@ -308,6 +308,23 @@ tr:hover .taglist .tag button {
 	background: #a00;
 }
 
+.jss_worksheet{
+	background: black !important;
+	border-right: 1px solid #333 !important;
+	border-bottom: 1px solid #333 !important;
+}
+
+.jss_worksheet > thead > tr > td,
+.jss_worksheet > tbody > tr > td:first-child{
+	background: orange !important;
+	color: black;
+}
+
+.jss_worksheet td{
+	border-top: 1px solid #333 !important;
+	border-left: 1px solid #333 !important;
+}
+
 @media screen and (max-width: 900px) {
 	#app nav a{
 		background: black;