From def561da19317cfea6590a608a7d1187dba6a109 Mon Sep 17 00:00:00 2001
From: Davide Scaini <davide.scaini@alumni.cern>
Date: Mon, 11 May 2026 22:46:53 +0200
Subject: [PATCH] Editor: column counter + 80-char hint in bottom bar

---
 src/components/PageEditor.svelte | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/components/PageEditor.svelte b/src/components/PageEditor.svelte
index 501c1d8..999a784 100644
--- a/src/components/PageEditor.svelte
+++ b/src/components/PageEditor.svelte
@@ -19,6 +19,17 @@
   let dragOver = false;
   let fileInput: HTMLInputElement;
   let heroFileInput: HTMLInputElement;
+  let textarea: HTMLTextAreaElement;
+  let colCount = 0;
+
+  function updateCol() {
+    if (!textarea) return;
+    const pos = textarea.selectionStart ?? 0;
+    const lineStart = textarea.value.lastIndexOf('\n', pos - 1) + 1;
+    colCount = pos - lineStart + 1;
+  }
+
+  $: colColor = colCount >= 80 ? '#f87171' : colCount >= 70 ? '#f59e0b' : 'var(--text-5)';
 
   $: section = SECTIONS.find(s => s.slug === selectedSection) ?? null;
   $: subs = section?.sub ?? [];
@@ -299,11 +310,15 @@
   {/if}
 
   <textarea
+    bind:this={textarea}
     bind:value={content}
     class="flex-1 w-full p-4 bg-transparent font-mono text-sm resize-none outline-none"
     style="color: var(--text-2)"
     placeholder="Scrivi in markdown…"
     spellcheck="false"
+    on:keyup={updateCol}
+    on:click={updateCol}
+    on:input={updateCol}
     on:dragover|preventDefault={() => dragOver = true}
     on:dragleave={() => dragOver = false}
     on:drop|preventDefault={e => { dragOver = false; if (e.dataTransfer?.files) uploadFiles(e.dataTransfer.files); }}
@@ -323,6 +338,8 @@
     <span class="text-zinc-600">oppure trascina un file nell'editor</span>
     <input bind:this={fileInput} type="file" accept="image/*" multiple class="hidden"
       on:change={e => e.currentTarget.files && uploadFiles(e.currentTarget.files)} />
+    <span class="ml-auto" style="color: var(--text-5)">~80 caratteri per riga per leggibilità</span>
+    <span style="color: {colColor}; font-variant-numeric: tabular-nums; min-width: 3.5rem; text-align: right">Col {colCount}</span>
   </div>
 </div>
 {/if}