layout redesign

2026-05-09 10:18:26 +02:00
parent 4ff9579cff
commit 828bdce906
5 changed files with 256 additions and 83 deletions
@@ -1,55 +0,0 @@
---
-interface Props {
-    slug: string;
-    date: string;
-    title?: string;
-    excerpt?: string;
-    tags?: string[];
-    draft?: boolean;
-    readingTime: number;
-    formatSlug: (slug: string) => string;
-}
-
-const { slug, date, title, excerpt, tags = [], draft = false, readingTime, formatSlug } = Astro.props;
-const displayTitle = title || formatSlug(slug);
-
-const formattedDate = new Date(date).toLocaleDateString('en-US', {
-    year: 'numeric', month: 'short', day: 'numeric'
-});
---
-
-<a href={`/posts/${encodeURIComponent(slug)}`} class="group block">
-    <article class="glass p-5 md:p-8 transition-colors hover:bg-surface0/80 flex flex-col md:flex-row justify-between md:items-center gap-4 md:gap-6">
-        <div class="flex-1 min-w-0">
-            <div class="flex flex-wrap items-center gap-x-3 gap-y-1 mb-2 text-xs text-subtext0">
-                <time datetime={date}>{formattedDate}</time>
-                <span class="opacity-50">·</span>
-                <span>{readingTime} min read</span>
-                {draft && (
-                    <>
-                        <span class="opacity-50">·</span>
-                        <span class="text-peach uppercase tracking-wide font-semibold">Draft</span>
-                    </>
-                )}
-            </div>
-            <h2 class="text-xl md:text-2xl font-semibold text-lavender group-hover:text-mauve transition-colors mb-2">
-                {displayTitle}
-            </h2>
-            <p class="text-subtext1 text-sm md:text-base leading-relaxed line-clamp-2">
-                {excerpt || `Read more about ${displayTitle}...`}
-            </p>
-            {tags.length > 0 && (
-                <div class="flex flex-wrap gap-2 mt-3">
-                    {tags.map(tag => (
-                        <span class="text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full bg-surface0 text-subtext0 border border-surface1">
-                            {tag}
-                        </span>
-                    ))}
-                </div>
-            )}
-        </div>
-        <div class="text-mauve opacity-0 group-hover:opacity-100 transition-opacity self-end md:self-auto shrink-0 hidden md:block">
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
-        </div>
-    </article>
-</a>
@@ -0,0 +1,207 @@
+import { useMemo, useState } from 'react';
+
+interface Post {
+  slug: string;
+  date: string;
+  title?: string;
+  excerpt?: string;
+  tags: string[];
+  draft: boolean;
+  reading_time: number;
+}
+
+interface Props {
+  posts: Post[];
+}
+
+function formatSlug(slug: string) {
+  if (!slug) return '';
+  return slug
+    .split('-')
+    .map(w => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(' ');
+}
+
+function formatDate(date: string) {
+  return new Date(date).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+}
+
+export default function PostList({ posts }: Props) {
+  const [query, setQuery] = useState('');
+  const [activeTags, setActiveTags] = useState<Set<string>>(new Set());
+
+  const allTags = useMemo(() => {
+    const set = new Set<string>();
+    for (const p of posts) for (const t of p.tags || []) set.add(t);
+    return Array.from(set).sort((a, b) => a.localeCompare(b));
+  }, [posts]);
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return posts.filter(p => {
+      if (activeTags.size > 0) {
+        for (const t of activeTags) if (!p.tags?.includes(t)) return false;
+      }
+      if (!q) return true;
+      const hay = `${p.title || formatSlug(p.slug)} ${p.excerpt || ''}`.toLowerCase();
+      return hay.includes(q);
+    });
+  }, [posts, query, activeTags]);
+
+  function toggleTag(tag: string) {
+    setActiveTags(prev => {
+      const next = new Set(prev);
+      if (next.has(tag)) next.delete(tag);
+      else next.add(tag);
+      return next;
+    });
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="glass px-4 py-3 md:px-5 md:py-4 flex flex-col gap-3 md:gap-4">
+        <div className="relative">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="absolute left-3 top-1/2 -translate-y-1/2 text-subtext0 pointer-events-none"
+            aria-hidden="true"
+          >
+            <circle cx="11" cy="11" r="8" />
+            <path d="m21 21-4.3-4.3" />
+          </svg>
+          <input
+            type="search"
+            value={query}
+            onChange={e => setQuery(e.target.value)}
+            placeholder="Search posts…"
+            aria-label="Search posts"
+            className="w-full bg-crust border border-surface1 rounded-lg pl-9 pr-3 py-2 text-sm md:text-base text-text placeholder:text-subtext0 focus:outline-none focus:border-mauve transition-colors"
+          />
+        </div>
+        {allTags.length > 0 && (
+          <div className="flex flex-wrap gap-2">
+            {allTags.map(tag => {
+              const active = activeTags.has(tag);
+              return (
+                <button
+                  key={tag}
+                  type="button"
+                  onClick={() => toggleTag(tag)}
+                  className={`text-[10px] uppercase tracking-wider px-2.5 py-1 rounded-full border transition-colors ${
+                    active
+                      ? 'bg-mauve/20 text-mauve border-mauve/30'
+                      : 'bg-surface0 text-subtext0 border-surface1 hover:text-text'
+                  }`}
+                >
+                  {tag}
+                </button>
+              );
+            })}
+            {activeTags.size > 0 && (
+              <button
+                type="button"
+                onClick={() => setActiveTags(new Set())}
+                className="text-[10px] uppercase tracking-wider px-2.5 py-1 rounded-full border border-transparent text-subtext0 hover:text-red transition-colors"
+              >
+                Clear
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+
+      {filtered.length === 0 ? (
+        <div className="glass p-8 md:p-12 text-center text-sm md:text-base text-subtext1">
+          No posts match.
+        </div>
+      ) : (
+        <div className="flex flex-col space-y-6">
+          {filtered.map(post => {
+            const displayTitle = post.title || formatSlug(post.slug);
+            return (
+              <article
+                key={post.slug}
+                className="glass p-5 md:p-8 transition-colors hover:bg-surface0/80 group"
+              >
+                <a href={`/posts/${encodeURIComponent(post.slug)}`} className="block">
+                  <div className="flex flex-col md:flex-row md:items-center gap-4 md:gap-6">
+                    <div className="flex-1 min-w-0">
+                      <div className="flex flex-wrap items-center gap-x-3 gap-y-1 mb-2 text-xs text-subtext0">
+                        <time dateTime={post.date}>{formatDate(post.date)}</time>
+                        <span className="opacity-50">·</span>
+                        <span>{post.reading_time} min read</span>
+                        {post.draft && (
+                          <>
+                            <span className="opacity-50">·</span>
+                            <span className="text-peach uppercase tracking-wide font-semibold">
+                              Draft
+                            </span>
+                          </>
+                        )}
+                      </div>
+                      <h2 className="text-xl md:text-2xl font-semibold text-lavender group-hover:text-mauve transition-colors mb-2">
+                        {displayTitle}
+                      </h2>
+                      <p className="text-subtext1 text-sm md:text-base leading-relaxed line-clamp-2">
+                        {post.excerpt || `Read more about ${displayTitle}...`}
+                      </p>
+                    </div>
+                    <div className="text-mauve opacity-0 group-hover:opacity-100 transition-opacity self-end md:self-auto shrink-0 hidden md:block">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="20"
+                        height="20"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      >
+                        <path d="M5 12h14" />
+                        <path d="m12 5 7 7-7 7" />
+                      </svg>
+                    </div>
+                  </div>
+                </a>
+                {post.tags && post.tags.length > 0 && (
+                  <div className="flex flex-wrap gap-2 mt-3">
+                    {post.tags.map(tag => {
+                      const active = activeTags.has(tag);
+                      return (
+                        <button
+                          key={tag}
+                          type="button"
+                          onClick={() => toggleTag(tag)}
+                          className={`text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full border transition-colors ${
+                            active
+                              ? 'bg-mauve/20 text-mauve border-mauve/30'
+                              : 'bg-surface0 text-subtext0 border-surface1 hover:text-text'
+                          }`}
+                        >
+                          {tag}
+                        </button>
+                      );
+                    })}
+                  </div>
+                )}
+              </article>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
@@ -86,6 +86,7 @@ export default function Editor({ editSlug }: Props) {
  const [alert, setAlert] = useState<{ msg: string; type: 'success' | 'error' } | null>(null);
  const [showModal, setShowModal] = useState(false);
  const [showPreview, setShowPreview] = useState(false);
+  const [mobileView, setMobileView] = useState<'edit' | 'preview'>('edit');
  const [vimEnabled, setVimEnabled] = useState(() =>
    typeof window !== 'undefined' && window.innerWidth > 768
  );
@@ -423,10 +424,46 @@ export default function Editor({ editSlug }: Props) {
          </div>
        </div>

-        {/* Editor + Preview — both columns stretch to the taller one */}
-        <div className={`relative ${showPreview ? 'grid grid-cols-1 md:grid-cols-2 gap-4 items-stretch' : ''}`}>
-          <div className="relative min-h-[500px]" style={showPreview ? { display: 'flex', flexDirection: 'column' } : undefined}>
-            <div ref={editorRef} style={showPreview ? { flex: '1 1 0', minHeight: 0 } : undefined} className={showPreview ? '' : 'min-h-[500px]'} />
+        {/* Mobile-only Edit | Preview tab bar */}
+        {showPreview && (
+          <div className="md:hidden flex gap-2" role="tablist" aria-label="Editor view">
+            <button
+              type="button"
+              role="tab"
+              aria-selected={mobileView === 'edit'}
+              onClick={() => setMobileView('edit')}
+              className={`flex-1 text-xs px-3 py-2 rounded border transition-colors ${
+                mobileView === 'edit'
+                  ? 'bg-blue/20 text-blue border-blue/30'
+                  : 'bg-surface0 text-subtext0 border-surface1 hover:text-text'
+              }`}
+            >
+              Edit
+            </button>
+            <button
+              type="button"
+              role="tab"
+              aria-selected={mobileView === 'preview'}
+              onClick={() => setMobileView('preview')}
+              className={`flex-1 text-xs px-3 py-2 rounded border transition-colors ${
+                mobileView === 'preview'
+                  ? 'bg-blue/20 text-blue border-blue/30'
+                  : 'bg-surface0 text-subtext0 border-surface1 hover:text-text'
+              }`}
+            >
+              Preview
+            </button>
+          </div>
+        )}
+
+        {/* Editor + Preview — desktop side-by-side, mobile single-pane via tabs */}
+        <div className={`relative ${showPreview ? 'md:grid md:grid-cols-2 md:gap-4 md:items-stretch' : ''}`}>
+          <div
+            className={`relative min-h-[500px] md:flex md:flex-col ${
+              showPreview && mobileView === 'preview' ? 'hidden' : ''
+            }`}
+          >
+            <div ref={editorRef} className="min-h-[500px] md:flex-1 md:min-h-0" />

            {/* Autocomplete dropdown */}
            {showAutocomplete && autocompleteAssets.length > 0 && (
@@ -461,9 +498,13 @@ export default function Editor({ editSlug }: Props) {
            )}
          </div>

-          {/* Live Preview — stretches to match editor height */}
+          {/* Live Preview — stretches to match editor height on desktop, full-pane via tabs on mobile */}
          {showPreview && (
-            <div className="border border-surface1 rounded-xl bg-crust/50 overflow-y-auto flex flex-col min-h-[500px]">
+            <div
+              className={`border border-surface1 rounded-xl bg-crust/50 overflow-y-auto flex-col md:flex md:min-h-0 ${
+                mobileView === 'preview' ? 'flex min-h-[60vh]' : 'hidden'
+              }`}
+            >
              <div className="sticky top-0 bg-mantle px-4 py-2 text-xs text-subtext0 uppercase border-b border-surface1 z-10">
                Preview
              </div>