TabStack/popup.html at main · pushpanjalii/TabStack · 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
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="popup.css" />
  </head>
  <body>
    <div class="container">
      <header>
        <div class="logo">
          <span class="logo-icon">⚡</span>
          <h1>TabStack</h1>
        </div>
        <div class="stats" id="stats">Loading...</div>
      </header>

      <div class="actions">
        <button id="groupBtn" class="btn btn-primary">
          <span class="btn-icon">📂</span> Group Tabs
        </button>
        <button
          id="aiGroupBtn"
          class="btn btn-ai"
          title="Uses AI to categorize unmatched tabs"
        >
          <span class="btn-icon">✨</span> AI Auto-Group
        </button>
      </div>

      <div id="status" class="status hidden"></div>

      <nav class="tabs">
        <button class="tab active" data-tab="rules">Rules</button>
        <button class="tab" data-tab="settings">Settings</button>
      </nav>

      <!-- Rules Tab -->
      <div class="tab-content active" id="tab-rules">
        <div class="rules-header">
          <span class="rules-count" id="rulesCount"></span>
          <button id="addRuleBtn" class="btn btn-small">+ Add Rule</button>
        </div>

        <div id="rulesList" class="rules-list"></div>

        <div id="ruleForm" class="rule-form hidden">
          <input
            type="text"
            id="ruleGroup"
            placeholder="Group name (e.g. Work)"
            class="input"
          />
          <input
            type="text"
            id="rulePatterns"
            placeholder="URL patterns, comma-separated"
            class="input"
          />
          <select id="ruleColor" class="input">
            <option value="grey">Grey</option>
            <option value="blue">Blue</option>
            <option value="red">Red</option>
            <option value="yellow">Yellow</option>
            <option value="green">Green</option>
            <option value="pink">Pink</option>
            <option value="purple">Purple</option>
            <option value="cyan">Cyan</option>
            <option value="orange">Orange</option>
          </select>
          <div class="form-actions">
            <button id="saveRuleBtn" class="btn btn-small btn-primary">
              Save
            </button>
            <button id="cancelRuleBtn" class="btn btn-small">Cancel</button>
          </div>
        </div>

        <details class="defaults-info">
          <summary>Smart defaults (200+ domains)</summary>
          <p>
            TabStack auto-categorizes popular sites: Gmail → Email, GitHub →
            Dev, Figma → Design, and 200+ more. Custom rules take priority over
            defaults.
          </p>
        </details>
      </div>

      <!-- Settings Tab -->
      <div class="tab-content" id="tab-settings">
        <div class="setting">
          <label>AI Provider</label>
          <select id="aiProvider" class="input">
            <option value="anthropic">Anthropic (Claude)</option>
            <option value="openai">OpenAI (GPT)</option>
            <option value="gemini">Google (Gemini)</option>
          </select>
        </div>

        <div class="setting">
          <label>API Key</label>
          <input
            type="password"
            id="apiKey"
            placeholder="sk-... or your API key"
            class="input"
          />
          <span class="hint"
            >Stored locally. Never sent anywhere except your chosen AI provider.
            Only used for unmatched tabs.</span
          >
        </div>

        <button id="saveSettingsBtn" class="btn btn-small btn-primary">
          Save Settings
        </button>
        <div id="settingsStatus" class="status hidden"></div>

        <div class="shortcut-info">
          <label>Keyboard Shortcut</label>
          <kbd>Alt + G</kbd>
          <span class="hint"
            >Groups all tabs instantly. Customize in
            chrome://extensions/shortcuts</span
          >
        </div>
      </div>

      <footer>
        <a href="https://github.com/pushpanjalii/TabStack" target="_blank"
          >GitHub</a
        >
        <span class="version">v1.0.0</span>
      </footer>
    </div>

    <script src="popup.js"></script>
  </body>
</html>