snapshot

src/features/notes/NotesApp.tsx

@@ -85,6 +85,16 @@ export function NotesApp() {
     setSnippets(prev => prev.filter(x => x.id !== id));
   }, []);
 
+  const { snippetColumnLeft, snippetColumnRight } = useMemo(() => {
+    const left: Snippet[] = [];
+    const right: Snippet[] = [];
+    snippets.forEach((s, i) => {
+      if (i % 2 === 0) left.push(s);
+      else right.push(s);
+    });
+    return { snippetColumnLeft: left, snippetColumnRight: right };
+  }, [snippets]);
+
   const createNew = async () => {
     setError(null);
     try {
@@ -105,7 +115,7 @@ export function NotesApp() {
   };
 
   return (
-    <div className="mx-auto flex w-full max-w-6xl flex-col gap-4 px-4 py-4 sm:px-5">
+    <div className="mx-auto flex w-full max-w-6xl flex-col gap-4 px-4 py-4 sm:px-5 xl:max-w-7xl min-[1800px]:max-w-none min-[1800px]:px-6 min-[2200px]:px-10">
       <NotesToolbar
         query={query}
         onQueryChange={setQuery}
@@ -128,21 +138,52 @@ export function NotesApp() {
       {error ? <p className="text-sm text-destructive">{error}</p> : null}
       {loading ? <p className="text-sm text-muted-foreground">Lade Snippets …</p> : null}
 
-      <div className="flex flex-col gap-2 sm:gap-2.5">
-        {!loading && snippets.length === 0 ? (
-          <p className="text-center text-sm text-muted-foreground">Keine Snippets. Mit „Neu“ starten.</p>
-        ) : null}
-        {snippets.map(s => (
-          <SnippetCard
-            key={s.id}
-            snippet={s}
-            treeColorByName={treeColorByName}
-            treeDisplayByName={treeDisplayByName}
-            onReplace={replaceSnippet}
-            onRemove={removeSnippet}
-          />
-        ))}
-      </div>
+      {!loading && snippets.length === 0 ? (
+        <p className="text-center text-sm text-muted-foreground">Keine Snippets. Mit „Neu“ starten.</p>
+      ) : null}
+
+      {snippets.length > 0 ? (
+        <>
+          <div className="flex flex-col gap-2 sm:gap-2.5 min-[1800px]:hidden">
+            {snippets.map(s => (
+              <SnippetCard
+                key={s.id}
+                snippet={s}
+                treeColorByName={treeColorByName}
+                treeDisplayByName={treeDisplayByName}
+                onReplace={replaceSnippet}
+                onRemove={removeSnippet}
+              />
+            ))}
+          </div>
+          <div className="hidden min-[1800px]:flex min-[1800px]:flex-row min-[1800px]:items-start min-[1800px]:gap-x-8">
+            <div className="flex min-w-0 flex-1 flex-col gap-4">
+              {snippetColumnLeft.map(s => (
+                <SnippetCard
+                  key={s.id}
+                  snippet={s}
+                  treeColorByName={treeColorByName}
+                  treeDisplayByName={treeDisplayByName}
+                  onReplace={replaceSnippet}
+                  onRemove={removeSnippet}
+                />
+              ))}
+            </div>
+            <div className="flex min-w-0 flex-1 flex-col gap-4">
+              {snippetColumnRight.map(s => (
+                <SnippetCard
+                  key={s.id}
+                  snippet={s}
+                  treeColorByName={treeColorByName}
+                  treeDisplayByName={treeDisplayByName}
+                  onReplace={replaceSnippet}
+                  onRemove={removeSnippet}
+                />
+              ))}
+            </div>
+          </div>
+        </>
+      ) : null}
     </div>
   );
 }