aitherboard/src/routes/feed/+page.svelte

<script lang="ts">
  import Header from '../../lib/components/layout/Header.svelte';
  import FeedPage from '../../lib/modules/feed/FeedPage.svelte';
  import { nostrClient } from '../../lib/services/nostr/nostr-client.js';
  import { onMount } from 'svelte';
  import type { NostrEvent } from '../../lib/types/nostr.js';

  let feedPageComponent: { 
    loadOlderEvents: () => Promise<void>; 
    loadingMore: boolean; 
    hasMoreEvents: boolean;
    waitingRoomEvents: NostrEvent[];
    loadWaitingRoomEvents: () => void;
  } | null = $state(null);

  let showOnlyOPs = $state(false);

  onMount(async () => {
    await nostrClient.initialize();
  });
</script>

<Header />

<main class="container mx-auto px-4 py-8">
  <div class="feed-content">
    <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>
      </div>
      <div class="feed-controls">
        <div class="feed-filter">
          <label class="feed-filter-label">
            <input
              type="checkbox"
              bind:checked={showOnlyOPs}
              class="feed-filter-checkbox"
            />
            <span>Show only OPs</span>
          </label>
        </div>
        <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()}
              class="see-new-events-btn-header"
            >
              See {feedPageComponent.waitingRoomEvents.length} new event{feedPageComponent.waitingRoomEvents.length === 1 ? '' : 's'}
            </button>
          {/if}
          {#if feedPageComponent && feedPageComponent.hasMoreEvents}
            <button
              onclick={() => feedPageComponent?.loadOlderEvents()}
              disabled={feedPageComponent.loadingMore || !feedPageComponent.hasMoreEvents}
              class="see-more-events-btn-header"
            >
              {feedPageComponent.loadingMore ? 'Loading...' : 'See more events'}
            </button>
          {/if}
        </div>
      </div>
    </div>
    
    <FeedPage bind:this={feedPageComponent} showOnlyOPs={showOnlyOPs} />
  </div>
</main>

<style>
  .feed-content {
    max-width: var(--content-width);
    margin: 0 auto;
  }

  .feed-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 1rem;
    margin-bottom: 1rem;
  }

  .feed-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }

  .feed-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
  }

  @media (max-width: 640px) {
    .feed-controls {
      justify-content: flex-start;
    }
  }

  .feed-filter {
    display: flex;
    align-items: center;
    margin-right: 1rem;
  }

  .feed-filter-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.875rem;
    color: var(--fog-text, #1e293b);
  }

  :global(.dark) .feed-filter-label {
    color: var(--fog-dark-text, #f1f5f9);
  }

  .feed-filter-checkbox {
    cursor: pointer;
    width: 1rem;
    height: 1rem;
    accent-color: var(--fog-accent, #64748b);
  }

  :global(.dark) .feed-filter-checkbox {
    accent-color: var(--fog-dark-accent, #94a3b8);
  }

  .feed-header-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    flex-shrink: 0;
  }

  @media (max-width: 640px) {
    .feed-header-buttons {
      width: 100%;
      justify-content: flex-start;
    }
  }

  .see-new-events-btn-header {
    padding: 0.5rem 1rem;
    border: 1px solid var(--fog-accent, #64748b);
    border-radius: 4px;
    background: var(--fog-accent, #64748b);
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-weight: 500;
  }

  .see-new-events-btn-header:hover {
    background: var(--fog-accent, #475569);
    border-color: var(--fog-accent, #475569);
  }

  :global(.dark) .see-new-events-btn-header {
    background: var(--fog-dark-accent, #94a3b8);
    border-color: var(--fog-dark-accent, #94a3b8);
    color: white;
  }

  :global(.dark) .see-new-events-btn-header:hover {
    background: var(--fog-dark-accent, #7c8a9e);
    border-color: var(--fog-dark-accent, #7c8a9e);
  }

  .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);
  }

</style>