paperboy/newtab.html at master · harbefas/paperboy · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!DOCTYPE html>
<!-- data-theme is set by theme.js; dark is the pre-paint default. -->
<html lang="en" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <title>paperboy</title>
  <link rel="stylesheet" href="styles/mate-tokens.css">
  <link rel="stylesheet" href="fonts/fonts.css">
  <link rel="stylesheet" href="newtab.css">
</head>
<body>
  <button class="sidebar-open-btn" id="sidebar-open-btn" title="Open sidebar" style="display:none">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
  </button>

  <div class="layout">
    <aside class="sidebar" id="sidebar">
      <div class="sidebar-inner">
        <div class="sidebar-top">
          <div class="logo-row">
            <span class="logo">paperboy</span>
            <button class="icon-btn sidebar-collapse-btn" id="sidebar-collapse-btn" title="Collapse sidebar">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
            </button>
          </div>
          <nav id="feed-nav-static"></nav>
          <div class="nav-sep"></div>
          <nav id="feed-nav" class="feed-nav-scroll"></nav>
        </div>
        <div class="last-updated" id="last-updated"></div>
        <div class="sidebar-bottom">
          <button class="icon-btn" id="theme-btn" title="Theme: auto">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
            <span style="font-size: 10px; margin-left: 4px;">Theme</span>
          </button>
          <button class="icon-btn" id="keys-btn" title="Keyboard shortcuts" aria-label="Keyboard shortcuts">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 10h.01M10 10h.01M14 10h.01M18 10h.01M8 14h8"/></svg>
          </button>
          <button class="icon-btn" id="refresh-btn" title="Refresh feeds" aria-label="Refresh feeds">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 4v6h-6"/><path d="M1 20v-6h6"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
          </button>
          <button class="icon-btn" id="options-btn" title="Settings" aria-label="Settings">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
          </button>
        </div>
      </div>
    </aside>

    <main class="content" id="content">
      <div class="empty-state" id="empty-state" style="display:none">
        <p>No feeds configured.</p>
        <button class="btn" id="add-first-btn">Add feeds</button>
      </div>
      <div class="search-bar" id="search-bar" style="display:none">
        <svg class="search-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        <input type="text" id="search-input" placeholder="Search articles…" autocomplete="off" />
        <span class="search-hint">Esc to close</span>
      </div>
      <div class="feed-items" id="feed-items"></div>
    </main>
  </div>

  <div class="modal-overlay" id="modal-overlay" style="display:none">
    <div class="modal" id="options-modal">
      <div class="modal-header">
        <span>Feeds</span>
        <button class="icon-btn" id="modal-close">✕</button>
      </div>
      <div class="modal-body">
        <div id="feed-list-manage"></div>
        <div class="add-feed-row">
          <input type="url" id="feed-url-input" placeholder="https://example.com or feed URL" />
          <button class="btn" id="add-feed-btn">Add</button>
        </div>
        <p class="modal-hint" id="modal-msg"></p>

        <div class="modal-section">
          <div class="modal-section-title">Native Storage</div>
          <div class="native-row">
            <input type="text" id="native-dir-input" placeholder="~/paperboy" />
            <button class="btn btn-sm" id="native-connect-btn">Connect</button>
          </div>
          <div class="native-status" id="native-status"></div>
          <div class="native-setup" id="native-setup" style="display:none">
            <div class="native-setup-title">Quick setup</div>
            <div class="native-setup-step">
              <span class="native-setup-num">1</span>
              <div class="native-setup-body">
                <span class="native-setup-label">Install the CLI companion</span>
                <div class="native-setup-cmd">
                  <code>node cli/paperboy.js install</code>
                  <button class="copy-btn" data-copy="node cli/paperboy.js install" title="Copy">
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                  </button>
                </div>
                <span class="native-setup-hint">Run from the extension's cli/ folder</span>
              </div>
            </div>
            <div class="native-setup-step">
              <span class="native-setup-num">2</span>
              <div class="native-setup-body">
                <span class="native-setup-label">Verify the setup</span>
                <div class="native-setup-cmd">
                  <code>paperboy doctor</code>
                  <button class="copy-btn" data-copy="paperboy doctor" title="Copy">
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                  </button>
                </div>
              </div>
            </div>
            <div class="native-setup-step">
              <span class="native-setup-num">3</span>
              <div class="native-setup-body">
                <span class="native-setup-label">Click Connect above</span>
              </div>
            </div>
          </div>
        </div>

        <div class="modal-section">
          <div class="modal-section-title">OPML</div>
          <div class="opml-row">
            <button class="btn btn-sm btn-outline" id="opml-export-btn">Export</button>
            <label class="btn btn-sm btn-outline" id="opml-import-label">
              Import
              <input type="file" id="opml-import-input" accept=".opml,.xml" style="display:none">
            </label>
          </div>
          <p class="modal-hint" id="opml-msg"></p>
        </div>

        <div class="modal-section">
          <div class="modal-section-title">Refresh interval</div>
          <div class="refresh-interval-row">
            <button class="btn btn-sm btn-outline refresh-interval-btn" data-interval="15">15 min</button>
            <button class="btn btn-sm btn-outline refresh-interval-btn" data-interval="30">30 min</button>
            <button class="btn btn-sm btn-outline refresh-interval-btn" data-interval="60">1 hour</button>
          </div>
        </div>

        <div class="modal-section modal-section-danger">
          <div class="modal-section-title">Data</div>
          <button class="btn btn-danger" id="purge-btn">Delete all data</button>
          <p class="modal-hint">Removes all feeds, history, starred articles, and cached data.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="modal-overlay" id="keys-overlay" style="display:none">
    <div class="modal keys-modal">
      <div class="modal-header">
        <span>Keyboard shortcuts</span>
        <button class="icon-btn" id="keys-close">✕</button>
      </div>
      <div class="keys-body">
        <div class="keys-section">
          <div class="keys-section-title">Navigation</div>
          <div class="keys-row"><kbd>j</kbd><kbd>k</kbd><span>next / prev item</span></div>
          <div class="keys-row"><kbd>g g</kbd><span>first item</span></div>
          <div class="keys-row"><kbd>G</kbd><span>last item</span></div>
          <div class="keys-row"><kbd>h</kbd><kbd>l</kbd><span>prev / next feed</span></div>
          <div class="keys-row"><kbd>Space</kbd><span>page down / up</span></div>
          <div class="keys-row"><kbd>Esc</kbd><span>back / clear selection</span></div>
        </div>
        <div class="keys-section">
          <div class="keys-section-title">Views</div>
          <div class="keys-row"><kbd>A</kbd><span>All</span></div>
          <div class="keys-row"><kbd>S</kbd><span>Starred</span></div>
          <div class="keys-row"><kbd>H</kbd><span>History</span></div>
          <div class="keys-row"><kbd>T</kbd><span>cycle tags</span></div>
          <div class="keys-section-title" style="margin-top:10px">Actions</div>
          <div class="keys-row"><kbd>o</kbd><kbd>Enter</kbd><span>open article</span></div>
          <div class="keys-row"><kbd>x</kbd><span>open original</span></div>
          <div class="keys-row"><kbd>s</kbd><span>star item</span></div>
          <div class="keys-row"><kbd>r</kbd><span>refresh</span></div>
          <div class="keys-row"><kbd>t</kbd><span>toggle theme</span></div>
          <div class="keys-row"><kbd>p</kbd><span>play / pause</span></div>
          <div class="keys-row"><kbd>&lt;</kbd><kbd>&gt;</kbd><span>skip −15s / +30s</span></div>
          <div class="keys-row"><kbd>,</kbd><span>settings</span></div>
          <div class="keys-row"><kbd>/</kbd><span>search</span></div>
          <div class="keys-row"><kbd>?</kbd><span>this panel</span></div>
        </div>
        <div class="keys-section">
          <div class="keys-section-title">In Settings</div>
          <div class="keys-row"><kbd>j</kbd><kbd>k</kbd><span>next / prev feed</span></div>
          <div class="keys-row"><kbd>a</kbd><span>add feed</span></div>
          <div class="keys-row"><kbd>c</kbd><span>connect storage</span></div>
          <div class="keys-row"><kbd>t</kbd><span>edit tags</span></div>
          <div class="keys-row"><kbd>Del</kbd><span>remove feed</span></div>
          <div class="keys-row"><kbd>Esc</kbd><span>close settings</span></div>
        </div>
      </div>
    </div>
  </div>

  <div class="podcast-player" id="podcast-player" style="display:none">
    <img class="player-thumb" id="player-thumb" src="" alt="">
    <div class="player-info">
      <div class="player-title" id="player-title"></div>
      <div class="player-feed" id="player-feed"></div>
    </div>
    <div class="player-controls">
      <button class="player-btn player-skip-back" id="player-skip-back" title="Back 15s">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-3.87"/><text x="8" y="16" font-size="6" fill="currentColor" stroke="none" font-family="Inter,sans-serif" font-weight="600">15</text></svg>
      </button>
      <button class="player-btn player-play" id="player-play" title="Play/Pause">
        <svg class="play-icon" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="5 3 19 12 5 21 5 3"/></svg>
        <svg class="pause-icon" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none" style="display:none"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
      </button>
      <button class="player-btn player-skip-fwd" id="player-skip-fwd" title="Forward 30s">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-.49-3.87"/><text x="8" y="16" font-size="6" fill="currentColor" stroke="none" font-family="Inter,sans-serif" font-weight="600">30</text></svg>
      </button>
    </div>
    <div class="player-timeline">
      <span class="player-time" id="player-current">0:00</span>
      <input type="range" class="player-seek" id="player-seek" min="0" max="100" value="0" step="0.1">
      <span class="player-time" id="player-duration">0:00</span>
    </div>
    <button class="player-speed" id="player-speed" title="Playback speed">1×</button>
    <button class="player-btn player-close" id="player-close" title="Close player">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
    </button>
    <audio id="podcast-audio"></audio>
  </div>

  <script src="theme.js"></script>
  <script src="newtab.js"></script>
</body>
</html>