arcify/sidebar.html at main · david2asher/arcify · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arcify: Arc like vertical tab spacesr</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="sidebar-container" class="sidebar-container">
        <div class="pinned-favicons" id="pinnedFavicons">
            <!-- Persistent pinned tabs will be displayed here -->
        </div>
        <div class="spaces-list" id="spacesList">
            <!-- Spaces will be dynamically added here -->
        </div>
        <button class="new-tab-btn" id="newTabBtn" title="Open a new tab">
            <span>+</span> New Tab
        </button>
        <div class="space-switcher-container">
            <div class="space-switcher" id="spaceSwitcher">
                <!-- Space switcher buttons will be added here -->
            </div>
            <button class="add-space-toggle" id="addSpaceBtn" title="Create a new space">
                <span>+</span>
            </button>
            <div class="add-space-input-container" id="addSpaceInputContainer">
                <div class="color-picker-grid create-space-picker" id="createSpaceColorSwatch" value="grey">
                    <div class="color-swatch selected" data-color="grey"></div>
                    <div class="color-swatch" data-color="blue"></div>
                    <div class="color-swatch" data-color="red"></div>
                    <div class="color-swatch" data-color="yellow"></div>
                    <div class="color-swatch" data-color="green"></div>
                    <div class="color-swatch" data-color="pink"></div>
                    <div class="color-swatch" data-color="purple"></div>
                    <div class="color-swatch" data-color="cyan"></div>
                </div>
                <div class="create-space-container">
                    <input type="text" id="newSpaceName" placeholder="Enter space name">
                    <select id="spaceColor" class="space-color-select">
                        <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>
                    </select>
                    <button id="createSpaceBtn" disabled>Create</button>
                </div>
            </div>
        </div>
    </div>
    <template id="spaceTemplate">
        <div class="space">
            <div class="space-header">
                <input type="text" class="space-name" placeholder="Space Name">
                <div class="space-options-container">
                    <button class="space-options">⋮</button>
                    <div class="space-options-dropdown">
                        <select class="space-color-select" id="spaceColorSelect">
                            <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>
                        </select>
                        <div class="color-picker-grid" id="spaceOptionColorSwatch">
                            <div class="color-swatch" data-color="grey"></div>
                            <div class="color-swatch" data-color="blue"></div>
                            <div class="color-swatch" data-color="red"></div>
                            <div class="color-swatch" data-color="yellow"></div>
                            <div class="color-swatch" data-color="green"></div>
                            <div class="color-swatch" data-color="pink"></div>
                            <div class="color-swatch" data-color="purple"></div>
                            <div class="color-swatch" data-color="cyan"></div>
                        </div>
                        <button class="new-folder-btn">New Folder</button>
                        <button class="delete-space-btn">Delete Space</button>
                    </div>
                </div>
            </div>
            <div class="pinned-tabs">
                <h3>Pinned</h3>
                <div class="tabs-container" data-tab-type="pinned">
                    <template id="folderTemplate">
                        <div class="folder collapsed">
                            <div class="folder-header">
                                <div class="folder-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 96C0 60.7 28.7 32 64 32l132.1 0c19.1 0 37.4 7.6 50.9 21.1L289.9 96 448 96c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zM64 80c-8.8 0-16 7.2-16 16l0 320c0 8.8 7.2 16 16 16l384 0c8.8 0 16-7.2 16-16l0-256c0-8.8-7.2-16-16-16l-161.4 0c-10.6 0-20.8-4.2-28.3-11.7L213.1 87c-4.5-4.5-10.6-7-17-7L64 80z"></path></svg></div>
                                <input type="text" class="folder-name" placeholder="Untitled">
                                <span class="folder-title hidden">Untitled</span>
                                <button class="folder-toggle collapsed" title="Toggle folder">▼</button>
                            </div>
                            <div class="folder-content collapsed">
                                <div class="tab-placeholder">Drag a tab here to add</div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
            <div class="temporary-tabs">
                <div class="temp-header">
                    <h3>Today</h3>
                    <button class="clean-tabs-btn">Clean All</button>
                </div>
                <div class="tabs-container" data-tab-type="temporary"></div>
            </div>
        </div>
    </template>
    <script type="module" src="sidebar.js"></script>
</body>
</html>