tw-web/about.html at main · linuxcaffe/tw-web · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#1a1a1a">
    <link rel="manifest" href="manifest.json">
    <link rel="icon" type="image/svg+xml" href="logo.svg">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon.png">
    <link rel="apple-touch-icon" href="logo-192.png">
    <title>About — tw-web</title>
    <script>(function(){var t=localStorage.getItem('tw-theme');if(t)document.documentElement.setAttribute('data-theme',t);})();</script>
    <link rel="stylesheet" href="styles.css">
    <script src="nav.js"></script>
    <script src="tw-api.js"></script>
    <style>
        .about-container {
            max-width: 600px;
            margin: 40px auto;
            padding: 0 20px;
        }
        .about-container h1 { margin-bottom: 8px; }
        .about-container p  { margin-bottom: 12px; color: #555; line-height: 1.7; }
        .about-container ul { margin: 0 0 12px 20px; color: #555; line-height: 1.9; }
        .about-container a  { color: #3498db; }
        .ext-box {
            background: rgba(52,152,219,0.08); border: 1px solid rgba(52,152,219,0.25);
            border-radius: 6px; padding: 14px 16px; margin-bottom: 12px;
        }
        .ext-box h3 { margin: 0 0 6px; font-size: 15px; }
        .ext-box p  { margin-bottom: 8px; }
        .ext-steps { margin: 0 0 10px 18px; }
        .ext-path {
            font-family: monospace; font-size: 12px;
            background: rgba(0,0,0,0.25); border-radius: 4px;
            padding: 6px 10px; word-break: break-all;
            color: #aaa; display: block; margin-bottom: 8px;
        }
        #copy-btn {
            background: #3498db; color: #fff; border: none;
            padding: 5px 14px; border-radius: 4px; cursor: pointer; font-size: 13px;
        }
        #copy-btn:hover { background: #2980b9; }
        #copy-ok { font-size: 12px; color: #27ae60; margin-left: 8px; opacity: 0; transition: opacity 0.3s; }
        #copy-ok.show { opacity: 1; }
    </style>
    <script>if ("serviceWorker" in navigator) navigator.serviceWorker.register("sw.js");</script>
</head>
<body>
<div class="about-container">
    <h1>tw-web</h1>
    <p>A lightweight PWA web interface for <a href="https://taskwarrior.org" target="_blank">Taskwarrior</a> 2.6.x, part of the <strong>awesome-taskwarrior</strong> fleet.</p>
    <p><a href="https://github.com/linuxcaffe/tw-web" target="_blank">github.com/linuxcaffe/tw-web</a></p>
    <h2 style="margin: 20px 0 8px">Views</h2>
    <ul>
        <li><strong>Task List</strong> — browse, filter, add, edit and action pending tasks</li>
        <li><strong>Kanban</strong> — drag tasks between workflow columns by <code>state</code> UDA</li>
        <li><strong>Calendar</strong> — day, week and month views; drag tasks into time blocks to schedule them</li>
    </ul>
    <h2 style="margin: 20px 0 8px">Firefox Extension</h2>
    <div class="ext-box">
        <h3>🦊 tw-web Bookmark</h3>
        <p>Bookmark any page into Taskwarrior with <strong>Alt+W</strong>. The URL goes into an annotation (clickable in tw-web). Also opens the Add task dialog directly.</p>
        <ol class="ext-steps">
            <li>Install the native messaging host (one-time):
                <br><code style="font-size:11px; background:rgba(0,0,0,0.25); padding:2px 6px; border-radius:3px;">
                mkdir -p ~/.mozilla/native-messaging-hosts &amp;&amp; cp tw-web-native-host.json ~/.mozilla/native-messaging-hosts/tw_web_launcher.json</code>
            </li>
            <li>Open <a href="about:debugging#/runtime/this-firefox" id="debugging-link">about:debugging</a> in Firefox</li>
            <li>Click <strong>This Firefox</strong> → <strong>Load Temporary Add-on…</strong></li>
            <li>Select the <code>manifest.json</code> below</li>
        </ol>
        <code class="ext-path" id="manifest-path">loading…</code>
        <button id="copy-btn">Copy path</button>
        <span id="copy-ok">✓ Copied</span>
    </div>

    <h2 style="margin: 20px 0 8px">Required UDAs</h2>
    <ul>
        <li><code>uda.state.type=string</code> — kanban column assignment</li>
        <li><code>uda.priority.values=1,2,3,4,5,6,H,M,L</code> — numeric priority (need-priority hook)</li>
    </ul>
</div>
<script>
fetch('api/extension/info').then(r => r.json()).then(d => {
    document.getElementById('manifest-path').textContent = d.manifest_path;
    document.getElementById('copy-btn').addEventListener('click', () => {
        navigator.clipboard.writeText(d.manifest_path).then(() => {
            const ok = document.getElementById('copy-ok');
            ok.classList.add('show');
            setTimeout(() => ok.classList.remove('show'), 2000);
        });
    });
}).catch(() => {
    document.getElementById('manifest-path').textContent = 'Could not load path — is Flask running?';
});
</script>
</body>
</html>