✒️

Scripted Self

); } // READING MODE - Full screen immersive reader if (readingMode && selectedItem) { const item = selectedItem; return (

{item.type === 'poem' ? '🪶 Poem' : '📖 Story'}

{item.title}

{!item.authorAvatar && '✍️'}

{item.author} · {formatTime(item.createdAt)}

{item.isPdf && (

📄

{item.pdfName || 'Document.pdf'}

PDF Upload

)}

{item.content}

👁️ {item.views + 1} views

{/* Comments Section */}

💬 Comments ({(item.comments || []).length})

{(item.comments || []).map(c => (

{c.user} {c.time}

{c.text}

))}

setNewComment(e.target.value)} placeholder="Add a comment..." style={{ flex: 1, height: 48, fontSize: 16, padding: '0 16px', borderRadius: 24, border: '1px solid ' + colors.border, background: colors.surface, color: colors.text, outline: 'none', fontFamily: "'Inter', sans-serif" }} onKeyDown={e => { if (e.key === 'Enter') addComment(item.id); }} />

); } // DETAIL VIEW - Item preview if (selectedItem && !readingMode) { const item = selectedItem; const preview = (item.content || '').slice(0, 300); return (

{/* Hero card */}

{item.type === 'poem' ? '🪶' : '📖'} {item.type} {item.isPdf && ( PDF )}

{item.title}

{!item.authorAvatar && '✍️'}

{item.author} · {formatTime(item.createdAt)}

{/* Preview text */}

{preview}{(item.content || '').length > 300 ? '...' : ''}

{/* Stats */}

❤️

{item.likes}

Likes

👁️

{item.views}

Views

💬

{(item.comments || []).length}

Comments

{/* Bottom actions */}

); } // UPLOAD BOTTOM SHEET const uploadSheet = showUpload ? (

setShowUpload(false)} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(4px)' }} />

Upload Your Work

Share your stories & poems with the world ✨

{/* Type selector */}

{['poem', 'story'].map(t => ( ))}

{/* Title */} setUploadForm(prev => ({ ...prev, title: e.target.value }))} placeholder="Title of your work..." style={{ width: '100%', height: 52, fontSize: 16, padding: '0 16px', borderRadius: 12, border: '1px solid ' + colors.border, background: colors.surface, color: colors.text, outline: 'none', marginBottom: 12, boxSizing: 'border-box' }} /> {/* Category */} {/* PDF Upload Option */}

📄

{uploadForm.isPdf ? '✅ PDF Selected' : 'Upload as PDF'}

{uploadForm.isPdf ? uploadForm.pdfName : 'Tap to simulate PDF upload'}

{uploadForm.isPdf && ( )}

{/* Content area */}

setUploadForm(prev => ({ ...prev, content: e.target.value }))}
          placeholder={uploadForm.isPdf ? 'Add a description or excerpt from your PDF (optional)...' : (uploadForm.type === 'poem' ? 'Write your poem here...\n\nLine breaks will be preserved for formatting.' : 'Write your story here...\n\nLet your imagination flow freely.')}
          style={{
            width: '100%',
            minHeight: 160,
            fontSize: 16,
            padding: 16,
            borderRadius: 12,
            border: '1px solid ' + colors.border,
            background: colors.surface,
            color: colors.text,
            outline: 'none',
            resize: 'vertical',
            lineHeight: 1.7,
            fontFamily: uploadForm.type === 'poem' ? "'Georgia', serif" : 'inherit',
            marginBottom: 20,
            boxSizing: 'border-box'
          }}
        />

{/* Publish button */}
        <button
          onClick={handleUpload}
          disabled={!uploadForm.title.trim() || (!uploadForm.content.trim() && !uploadForm.isPdf)}
          style={{
            width: '100%',
            minHeight: 56,
            borderRadius: 16,
            border: 'none',
            background: (!uploadForm.title.trim() || (!uploadForm.content.trim() && !uploadForm.isPdf)) ? colors.surface : colors.gradient2,
            color: (!uploadForm.title.trim() || (!uploadForm.content.trim() && !uploadForm.isPdf)) ? colors.textSecondary : '#0a0a1a',
            fontSize: 18,
            fontWeight: 700,
            cursor: 'pointer',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: 8,
            transition: 'all 0.2s'
          }}
        >
          ✨ Publish
        </button>
      </div>
    </div>
  ) : null;

// MAIN FEED VIEW
  return (
    <div style={{
      minHeight: '100dvh',
      background: colors.bg,
      color: colors.text,
      fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
      display: 'flex',
      flexDirection: 'column',
      paddingTop: 'max(env(safe-area-inset-top, 20px), 20px)',
      paddingBottom: 'env(safe-area-inset-bottom, 20px)',
      WebkitFontSmoothing: 'antialiased',
    }}>
      {/* Header */}
      <div style={{ padding: '8px 20px 0', flexShrink: 0 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
          <div>
            <h1 style={{
              fontSize: 28,
              fontWeight: 800,
              margin: 0,
              background: colors.gradient1,
              WebkitBackgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
              backgroundClip: 'text',
            }}>
              Inkwell
            </h1>
            <p style={{ fontSize: 13, color: colors.textSecondary, margin: '2px 0 0' }}>Stories & Poems</p>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button
              onClick={() => setShowSearch(!showSearch)}
              style={{
                width: 44, height: 44, borderRadius: 12,
                background: showSearch ? colors.accentSoft : colors.surface,
                border: '1px solid ' + colors.border,
                color: colors.text, fontSize: 20, cursor: 'pointer',
                display: 'flex', alignItems: 'center', justifyContent: 'center'
              }}
            >
              🔍
            </button>
            <button
              onClick={() => {
                const avatar = user?.avatarUrl;
                if (avatar) return;
              }}
              style={{
                width: 44, height: 44, borderRadius: 12,
                background: user?.avatarUrl ? 'url(' + user.avatarUrl + ')' : colors.accentSoft,
                backgroundSize: 'cover',
                border: '1px solid ' + colors.border,
                cursor: 'pointer',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 18, color: colors.text
              }}
            >
              {!user?.avatarUrl && '👤'}
            </button>
          </div>
        </div>

{/* Search bar */}
        {showSearch && (
          <div style={{ marginTop: 12, marginBottom: 4 }}>
            <input
              value={searchQuery}
              onChange={e => setSearchQuery(e.target.value)}
              placeholder="Search stories, poems, authors..."
              autoFocus
              style={{
                width: '100%',
                height: 48,
                fontSize: 16,
                padding: '0 16px 0 44px',
                borderRadius: 14,
                border: '1px solid ' + colors.borderLight,
                background: colors.surface,
                color: colors.text,
                outline: 'none',
                boxSizing: 'border-box',
                backgroundImage: 'none'
              }}
            />
          </div>
        )}

{/* Category pills */}
        <div style={{
          display: 'flex',
          gap: 8,
          overflowX: 'auto',
          paddingTop: 14,
          paddingBottom: 14,
          WebkitOverflowScrolling: 'touch',
          scrollbarWidth: 'none',
          msOverflowStyle: 'none'
        }}>
          {(CATEGORIES || []).map(cat => (
            <button
              key={cat.id}
              onClick={() => setActiveCategory(cat.id)}
              style={{
                flexShrink: 0,
                padding: '8px 16px',
                borderRadius: 20,
                border: '1px solid ' + (activeCategory === cat.id ? colors.accent : colors.border),
                background: activeCategory === cat.id ? colors.accentSoft : 'transparent',
                color: activeCategory === cat.id ? colors.accent : colors.textSecondary,
                fontSize: 14,
                fontWeight: 600,
                cursor: 'pointer',
                display: 'flex',
                alignItems: 'center',
                gap: 6,
                whiteSpace: 'nowrap',
                minHeight: 40,
                transition: 'all 0.2s'
              }}
            >
              {cat.emoji} {cat.label}
            </button>
          ))}
        </div>
      </div>

{/* Content Feed */}
      <div style={{ flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch', padding: '0 20px' }}>
        {(filteredContent || []).length === 0 ? (
          <div style={{ textAlign: 'center', padding: '60px 20px', color: colors.textSecondary }}>
            <div style={{ fontSize: 48, marginBottom: 12 }}>📝</div>
            <div style={{ fontSize: 16, fontWeight: 500 }}>{activeCategory === 'uploaded' ? 'No uploads yet' : 'Nothing found'}</div>
            <div style={{ fontSize: 14, marginTop: 8 }}>
              {activeCategory === 'uploaded' ? 'Tap + to share your first piece!' : 'Try a different search or category'}
            </div>
          </div>
        ) : (
          (filteredContent || []).map((item, index) => {
            const isFirst = index === 0;
            return (
              <div
                key={item.id}
                onClick={() => { setSelectedItem(item); }}
                onPointerDown={() => setPressedId(item.id)}
                onPointerUp={() => setPressedId(null)}
                onPointerLeave={() => setPressedId(null)}
                onPointerCancel={() => setPressedId(null)}
                style={{
                  ...glassStyle,
                  padding: isFirst ? 0 : 16,
                  marginBottom: 14,
                  cursor: 'pointer',
                  overflow: 'hidden',
                  transform: pressedId === item.id ? 'scale(0.98)' : 'scale(1)',
                  transition: 'transform 0.15s ease, box-shadow 0.2s',
                  boxShadow: pressedId === item.id ? '0 2px 8px rgba(167,139,250,0.15)' : 'none'
                }}
              >
                {isFirst && (
                  <div style={{
                    height: 140,
                    background: 'linear-gradient(135deg, rgba(102,126,234,0.2) 0%, rgba(167,139,250,0.15) 50%, rgba(240,147,251,0.1) 100%)',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    position: 'relative',
                    overflow: 'hidden'
                  }}>
                    <div style={{ fontSize: 52, opacity: 0.3 }}>{item.type === 'poem' ? '🪶' : '📖'}</div>
                    <div style={{
                      position: 'absolute',
                      top: 12,
                      left: 12,
                      background: 'rgba(167,139,250,0.3)',
                      backdropFilter: 'blur(10px)',
                      padding: '4px 12px',
                      borderRadius: 8,
                      fontSize: 12,
                      fontWeight: 600,
                      color: '#fff'
                    }}>
                      ✨ Featured
                    </div>
                  </div>
                )}
                <div style={{ padding: isFirst ? 16 : 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
                    <span style={{ fontSize: 12 }}>{item.type === 'poem' ? '🪶' : '📖'}</span>
                    <span style={{ fontSize: 12, color: colors.accent, textTransform: 'uppercase', letterSpacing: 0.5, fontWeight: 600 }}>
                      {item.type}
                    </span>
                    {item.isPdf && (
                      <span style={{ fontSize: 11, background: colors.pinkSoft, color: colors.pink, padding: '2px 8px', borderRadius: 8, fontWeight: 600 }}>PDF</span>
                    )}
                    <span style={{ marginLeft: 'auto', fontSize: 12, color: colors.textSecondary }}>
                      {formatTime(item.createdAt)}
                    </span>
                  </div>

<h3 style={{ fontSize: 18, fontWeight: 700, marginBottom: 6, lineHeight: 1.3 }}>{item.title}</h3>

<p style={{
                    fontSize: 14,
                    lineHeight: 1.6,
                    color: 'rgba(240,238,246,0.6)',
                    marginBottom: 12,
                    display: '-webkit-box',
                    WebkitLineClamp: 3,
                    WebkitBoxOrient: 'vertical',
                    overflow: 'hidden',
                    whiteSpace: 'pre-wrap'
                  }}>
                    {(item.content || '').slice(0, 150)}
                  </p>

<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <div style={{
                        width: 24, height: 24, borderRadius: '50%',
                        background: item.authorAvatar ? 'url(' + item.authorAvatar + ')' : colors.accentSoft,
                        backgroundSize: 'cover',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontSize: 12
                      }}>
                        {!item.authorAvatar && '✍️'}
                      </div>
                      <span style={{ fontSize: 13, color: colors.textSecondary, fontWeight: 500 }}>{item.author}</span>
                    </div>
                    <div style={{ display: 'flex', gap: 14, alignItems: 'center', fontSize: 13, color: colors.textSecondary }}>
                      <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                        {(likedIds || []).includes(item.id) ? '❤️' : '🤍'} {item.likes}
                      </span>
                      <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                        💬 {(item.comments || []).length}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            );
          })
        )}
        <div style={{ height: 80 }} />
      </div>

{/* Floating Upload Button */}
      <button
        onClick={() => setShowUpload(true)}
        style={{
          position: 'fixed',
          bottom: 'calc(env(safe-area-inset-bottom, 20px) + 24px)',
          right: 'max(env(safe-area-inset-right, 0px), 24px)',
          width: 60,
          height: 60,
          borderRadius: 20,
          border: 'none',
          background: colors.gradient2,
          color: '#0a0a1a',
          fontSize: 28,
          fontWeight: 700,
          cursor: 'pointer',
          boxShadow: '0 4px 24px rgba(167,139,250,0.4), 0 0 40px rgba(167,139,250,0.15)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          zIndex: 50,
          transition: 'transform 0.2s'
        }}
      >
        ✍️
      </button>

{uploadSheet}
    </div>
  );
}</article></body></html>