From 020902a9282257710d555a29c91c64b97a1b18e5 Mon Sep 17 00:00:00 2001
From: Silberengel <silberengel7@protonmail.com>
Date: Wed, 11 Feb 2026 08:52:16 +0100
Subject: [PATCH] fix write button

---
 src/app.css                         |  64 +++++------------
 src/routes/discussions/+page.svelte |  41 +++++++++--
 src/routes/feed/+page.svelte        |   9 +--
 src/routes/lists/+page.svelte       | 107 +++++++++++++++-------------
 4 files changed, 115 insertions(+), 106 deletions(-)

diff --git a/src/app.css b/src/app.css
index bf63e03..1b0a9d5 100644
--- a/src/app.css
+++ b/src/app.css
@@ -214,63 +214,31 @@ main {
 
 /* Common button styles */
 .write-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem;
-  border: 1px solid var(--fog-border, #e5e7eb);
-  border-radius: 0.375rem;
-  background: var(--fog-surface, #f8fafc);
-  color: var(--fog-text, #1f2937);
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--fog-border, #cbd5e1);
+  border-radius: 4px;
+  background: var(--fog-post, #ffffff);
+  color: var(--fog-text, #1e293b);
   text-decoration: none;
-  transition: all 0.2s;
-  min-width: 2.5rem;
-  min-height: 2.5rem;
-  flex-shrink: 0;
   cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
 }
 
-
-:global(.dark) .write-button {
-  border-color: var(--fog-dark-border, #374151);
-  background: var(--fog-dark-surface, #1e293b); /* Use surface color for contrast with page background */
-  color: var(--fog-dark-text, #f9fafb);
-}
-
-/* Ensure icon inherits color - the SVG's stroke="currentColor" will use this */
-.write-button :global(.icon-wrapper) {
-  color: inherit;
-}
-
-/* Directly set stroke color on SVG paths for write-button */
-/* This ensures the icon is visible even if currentColor doesn't resolve correctly */
-.write-button :global(.icon-wrapper svg[stroke="currentColor"]),
-.write-button :global(.icon-wrapper svg[stroke="currentColor"] path) {
-  stroke: currentColor;
-  fill: none;
-}
-
-/* Ensure write-button icon is always visible in dark mode */
-:global(.dark) .write-button :global(.icon-wrapper) {
-  color: var(--fog-dark-text, #f9fafb);
-}
-
-/* Directly set stroke color on SVG paths for write-button in dark mode */
-/* Use !important to override any conflicting rules */
-:global(.dark) .write-button :global(.icon-wrapper svg[stroke="currentColor"]),
-:global(.dark) .write-button :global(.icon-wrapper svg[stroke="currentColor"] path) {
-  stroke: var(--fog-dark-text, #f9fafb) !important;
-  fill: none !important;
+.write-button:hover:not(:disabled) {
+  background: var(--fog-highlight, #f1f5f9);
+  border-color: var(--fog-accent, #94a3b8);
 }
 
-.write-button:hover {
-  background: var(--fog-highlight, #f3f4f6);
-  border-color: var(--fog-accent, #64748b);
+:global(.dark) .write-button {
+  background: var(--fog-dark-post, #334155);
+  border-color: var(--fog-dark-border, #475569);
+  color: var(--fog-dark-text, #f1f5f9);
 }
 
-:global(.dark) .write-button:hover {
+:global(.dark) .write-button:hover:not(:disabled) {
   background: var(--fog-dark-highlight, #475569);
-  border-color: var(--fog-dark-accent, #94a3b8);
+  border-color: var(--fog-dark-accent, #64748b);
 }
 
 /* Action buttons (accent background) */
diff --git a/src/routes/discussions/+page.svelte b/src/routes/discussions/+page.svelte
index 8e2cee5..2b1dd12 100644
--- a/src/routes/discussions/+page.svelte
+++ b/src/routes/discussions/+page.svelte
@@ -9,7 +9,6 @@
   import type { NostrEvent } from '../../lib/types/nostr.js';
   import { onMount } from 'svelte';
   import { page } from '$app/stores';
-  import Icon from '../../lib/components/ui/Icon.svelte';
   import Pagination from '../../lib/components/ui/Pagination.svelte';
   import { getPaginatedItems, getCurrentPage, ITEMS_PER_PAGE } from '../../lib/utils/pagination.js';
 
@@ -57,9 +56,6 @@
           <h1 class="font-bold text-fog-text dark:text-fog-dark-text font-mono" style="font-size: 1.5em;">/Discussions</h1>
           <p class="text-fog-text dark:text-fog-dark-text">Decentralized discussion board on Nostr.</p>
         </div>
-        <a href="/write?kind=11" class="write-button" title="Write a new thread">
-          <Icon name="edit" size={20} />
-        </a>
       </div>
       
       <div class="discussions-controls">
@@ -77,6 +73,9 @@
         
         {#if discussionListComponent && !searchResults.events.length && !searchResults.profiles.length}
           <div class="discussions-controls-row">
+            <a href="/write?kind=11" class="see-more-events-btn-header" title="Write a new thread">
+              Write
+            </a>
             <select 
               bind:value={discussionListComponent.sortBy} 
               class="sort-select"
@@ -208,6 +207,40 @@
     color: var(--fog-dark-text, #f1f5f9);
   }
 
+  .see-more-events-btn-header {
+    padding: 0.5rem 1rem;
+    border: 1px solid var(--fog-border, #cbd5e1);
+    border-radius: 4px;
+    background: var(--fog-post, #ffffff);
+    color: var(--fog-text, #1e293b);
+    cursor: pointer;
+    transition: all 0.2s;
+    white-space: nowrap;
+    text-decoration: none;
+    display: inline-block;
+  }
+
+  .see-more-events-btn-header:hover:not(:disabled) {
+    background: var(--fog-highlight, #f1f5f9);
+    border-color: var(--fog-accent, #94a3b8);
+  }
+
+  .see-more-events-btn-header:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  :global(.dark) .see-more-events-btn-header {
+    background: var(--fog-dark-post, #334155);
+    border-color: var(--fog-dark-border, #475569);
+    color: var(--fog-dark-text, #f1f5f9);
+  }
+
+  :global(.dark) .see-more-events-btn-header:hover:not(:disabled) {
+    background: var(--fog-dark-highlight, #475569);
+    border-color: var(--fog-dark-accent, #64748b);
+  }
+
   .search-section :global(.unified-search-container) {
     max-width: 100%;
     width: 100%;
diff --git a/src/routes/feed/+page.svelte b/src/routes/feed/+page.svelte
index db359c9..2f28aa1 100644
--- a/src/routes/feed/+page.svelte
+++ b/src/routes/feed/+page.svelte
@@ -3,7 +3,6 @@
   import FeedPage from '../../lib/modules/feed/FeedPage.svelte';
   import { nostrClient } from '../../lib/services/nostr/nostr-client.js';
   import { onMount } from 'svelte';
-  import Icon from '../../lib/components/ui/Icon.svelte';
   import type { NostrEvent } from '../../lib/types/nostr.js';
 
   let feedPageComponent: { 
@@ -26,12 +25,12 @@
     <div class="feed-header mb-6">
       <div class="feed-header-top">
         <h1 class="font-bold text-fog-text dark:text-fog-dark-text font-mono" style="font-size: 1.5em;">/Feed</h1>
-        <a href="/write?kind=1" class="write-button" title="Write a new post">
-          <Icon name="edit" size={20} />
-        </a>
       </div>
       <div class="feed-controls">
         <div class="feed-header-buttons">
+          <a href="/write?kind=1" class="see-more-events-btn-header" title="Write a new post">
+            Write
+          </a>
           {#if feedPageComponent && feedPageComponent.waitingRoomEvents.length > 0}
             <button
               onclick={() => feedPageComponent?.loadWaitingRoomEvents()}
@@ -143,6 +142,8 @@
     cursor: pointer;
     transition: all 0.2s;
     white-space: nowrap;
+    text-decoration: none;
+    display: inline-block;
   }
 
   .see-more-events-btn-header:hover:not(:disabled) {
diff --git a/src/routes/lists/+page.svelte b/src/routes/lists/+page.svelte
index 21c954b..46c27e0 100644
--- a/src/routes/lists/+page.svelte
+++ b/src/routes/lists/+page.svelte
@@ -339,67 +339,74 @@
 <Header />
 
 <main class="container mx-auto px-4 py-8">
-  {#if !isLoggedIn}
-    <div class="text-center py-8">
-      <p>Please log in to view your lists.</p>
-      <a href="/login" class="text-fog-accent dark:text-fog-dark-accent hover:underline">Go to login</a>
-    </div>
-  {:else if loading}
-    <div class="text-center py-8">
-      <p>Loading lists...</p>
-    </div>
-  {:else if !hasLists}
-    <div class="text-center py-8">
-      <h1 class="font-bold text-fog-text dark:text-fog-dark-text font-mono mb-4" style="font-size: 1.5em;">/Lists</h1>
-      <p>You don't have any lists yet.</p>
-      <p class="text-sm text-fog-text-light dark:text-fog-dark-text-light mt-2">
-        Create a kind 3 (contacts) or kind 30000 (follow_set) event to get started.
-      </p>
-    </div>
-  {:else}
-    <div class="lists-header mb-6">
-      <h1 class="font-bold text-fog-text dark:text-fog-dark-text font-mono mb-4" style="font-size: 1.5em;">/Lists</h1>
-      
-      <div class="list-selector mb-4">
-        <label for="list-select" class="block text-sm font-medium text-fog-text dark:text-fog-dark-text mb-2">
-          Select a list:
-        </label>
-        <select
-          id="list-select"
-          onchange={handleListChange}
-          class="w-full max-w-md px-4 py-2 border border-fog-border dark:border-fog-dark-border rounded bg-fog-post dark:bg-fog-dark-post text-fog-text dark:text-fog-dark-text"
-        >
-          {#each lists as list, index}
-            <option value={index} selected={selectedList === list}>
-              Kind {list.kind}: {list.name} ({list.pubkeys.length} {list.pubkeys.length === 1 ? 'person' : 'people'})
-            </option>
-          {/each}
-        </select>
+  <div class="lists-content">
+    {#if !isLoggedIn}
+      <div class="text-center py-8">
+        <p>Please log in to view your lists.</p>
+        <a href="/login" class="text-fog-accent dark:text-fog-dark-accent hover:underline">Go to login</a>
       </div>
-    </div>
-
-    {#if loadingEvents}
+    {:else if loading}
       <div class="text-center py-8">
-        <p>Loading events...</p>
+        <p>Loading lists...</p>
       </div>
-    {:else if selectedList && events.length === 0}
+    {:else if !hasLists}
       <div class="text-center py-8">
-        <p>No events found for this list.</p>
+        <h1 class="font-bold text-fog-text dark:text-fog-dark-text font-mono mb-4" style="font-size: 1.5em;">/Lists</h1>
+        <p>You don't have any lists yet.</p>
+        <p class="text-sm text-fog-text-light dark:text-fog-dark-text-light mt-2">
+          Create a kind 3 (contacts) or kind 30000 (follow_set) event to get started.
+        </p>
       </div>
-    {:else if selectedList}
-      <div class="events-list">
-        {#each paginatedEvents as event (event.id)}
-          <FeedPost post={event} fullView={false} />
-        {/each}
+    {:else}
+      <div class="lists-header mb-6">
+        <h1 class="font-bold text-fog-text dark:text-fog-dark-text font-mono mb-4" style="font-size: 1.5em;">/Lists</h1>
+        
+        <div class="list-selector mb-4">
+          <label for="list-select" class="block text-sm font-medium text-fog-text dark:text-fog-dark-text mb-2">
+            Select a list:
+          </label>
+          <select
+            id="list-select"
+            onchange={handleListChange}
+            class="w-full max-w-md px-4 py-2 border border-fog-border dark:border-fog-dark-border rounded bg-fog-post dark:bg-fog-dark-post text-fog-text dark:text-fog-dark-text"
+          >
+            {#each lists as list, index}
+              <option value={index} selected={selectedList === list}>
+                Kind {list.kind}: {list.name} ({list.pubkeys.length} {list.pubkeys.length === 1 ? 'person' : 'people'})
+              </option>
+            {/each}
+          </select>
+        </div>
       </div>
-      {#if events.length > ITEMS_PER_PAGE}
-        <Pagination totalItems={events.length} itemsPerPage={ITEMS_PER_PAGE} />
+
+      {#if loadingEvents}
+        <div class="text-center py-8">
+          <p>Loading events...</p>
+        </div>
+      {:else if selectedList && events.length === 0}
+        <div class="text-center py-8">
+          <p>No events found for this list.</p>
+        </div>
+      {:else if selectedList}
+        <div class="events-list">
+          {#each paginatedEvents as event (event.id)}
+            <FeedPost post={event} fullView={false} />
+          {/each}
+        </div>
+        {#if events.length > ITEMS_PER_PAGE}
+          <Pagination totalItems={events.length} itemsPerPage={ITEMS_PER_PAGE} />
+        {/if}
       {/if}
     {/if}
-  {/if}
+  </div>
 </main>
 
 <style>
+  .lists-content {
+    max-width: var(--content-width);
+    margin: 0 auto;
+  }
+
   .lists-header {
     border-bottom: 1px solid var(--fog-border, #e5e7eb);
     padding-bottom: 1rem;