diff options
| -rw-r--r-- | extension/index.html | 40 | ||||
| -rw-r--r-- | extension/package-lock.json | 12 | ||||
| -rw-r--r-- | extension/src/index.css | 25 |
3 files changed, 74 insertions, 3 deletions
diff --git a/extension/index.html b/extension/index.html index 4b28d70..11e132a 100644 --- a/extension/index.html +++ b/extension/index.html @@ -6,6 +6,46 @@ <title>Bookmarks Home</title> </head> <body> + <div id="settings-menu"> + <h2>Settings</h2> + + <h3>Sort</h3> + <label> + <input type="radio" name="sort"> + From bookmarks + </label> + <label> + <input type="radio" name="sort"> + Alphabetical + </label> + <label> + <input type="radio" name="sort"> + Frequency + </label> + + <h3>Background</h3> + <label> + <input type="radio" name="bg"> + From Theme + </label> + <label> + <input type="radio" name="bg"> + Solid color + </label> + <label> + <input type="radio" name="bg"> + Image + </label> + + <h3>Root folder</h3> + <label> + <select> + <option>Bookmarks Toolbar id:0</option> + <option>Mobile Bookmarks id:1</option> + <option>Other Bookmarks id:2</option> + </select> + </label> + </div> <div id="root"></div> <script type="module" src="/src/main.tsx"></script> </body> diff --git a/extension/package-lock.json b/extension/package-lock.json index a81f7f6..6b6d1d7 100644 --- a/extension/package-lock.json +++ b/extension/package-lock.json @@ -8,16 +8,16 @@ "name": "bookmarks-home", "version": "0.0.0", "dependencies": { - "@types/chrome": "^0.0.278", - "@types/firefox-webext-browser": "^120.0.4", - "@types/web": "^0.0.174", "react": "^18.3.1", "react-dom": "^18.3.1" }, "devDependencies": { "@eslint/js": "^9.9.0", + "@types/chrome": "^0.0.278", + "@types/firefox-webext-browser": "^120.0.4", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", + "@types/web": "^0.0.174", "@vitejs/plugin-react": "^4.3.1", "eslint": "^9.9.0", "eslint-plugin-react-hooks": "^5.1.0-rc.0", @@ -1186,6 +1186,7 @@ "version": "0.0.278", "resolved": "https://registry.npmjs.org/@types/chrome/-/chrome-0.0.278.tgz", "integrity": "sha512-PDIJodOu7o54PpSOYLybPW/MDZBCjM1TKgf31I3Q/qaEbNpIH09rOM3tSEH3N7Q+FAqb1933LhF8ksUPYeQLNg==", + "dev": true, "license": "MIT", "dependencies": { "@types/filesystem": "*", @@ -1202,6 +1203,7 @@ "version": "0.0.36", "resolved": "https://registry.npmjs.org/@types/filesystem/-/filesystem-0.0.36.tgz", "integrity": "sha512-vPDXOZuannb9FZdxgHnqSwAG/jvdGM8Wq+6N4D/d80z+D4HWH+bItqsZaVRQykAn6WEVeEkLm2oQigyHtgb0RA==", + "dev": true, "license": "MIT", "dependencies": { "@types/filewriter": "*" @@ -1211,18 +1213,21 @@ "version": "0.0.33", "resolved": "https://registry.npmjs.org/@types/filewriter/-/filewriter-0.0.33.tgz", "integrity": "sha512-xFU8ZXTw4gd358lb2jw25nxY9QAgqn2+bKKjKOYfNCzN4DKCFetK7sPtrlpg66Ywe3vWY9FNxprZawAh9wfJ3g==", + "dev": true, "license": "MIT" }, "node_modules/@types/firefox-webext-browser": { "version": "120.0.4", "resolved": "https://registry.npmjs.org/@types/firefox-webext-browser/-/firefox-webext-browser-120.0.4.tgz", "integrity": "sha512-lBrpf08xhiZBigrtdQfUaqX1UauwZ+skbFiL8u2Tdra/rklkKadYmIzTwkNZSWtuZ7OKpFqbE2HHfDoFqvZf6w==", + "dev": true, "license": "MIT" }, "node_modules/@types/har-format": { "version": "1.2.16", "resolved": "https://registry.npmjs.org/@types/har-format/-/har-format-1.2.16.tgz", "integrity": "sha512-fluxdy7ryD3MV6h8pTfTYpy/xQzCFC7m89nOH9y94cNqJ1mDIDPut7MnRHI3F6qRmh/cT2fUjG1MLdCNb4hE9A==", + "dev": true, "license": "MIT" }, "node_modules/@types/json-schema": { @@ -1260,6 +1265,7 @@ "version": "0.0.174", "resolved": "https://registry.npmjs.org/@types/web/-/web-0.0.174.tgz", "integrity": "sha512-dT8gX38RUQjy+uruZg49EvloEa2S3gR0z2eRi557eTSFKqUSXkSCWYa0IY9uabX9MZPMGOu+1r8Qn6tsvJ1KnQ==", + "dev": true, "license": "Apache-2.0" }, "node_modules/@typescript-eslint/eslint-plugin": { diff --git a/extension/src/index.css b/extension/src/index.css index 9b18c8a..20d7bf2 100644 --- a/extension/src/index.css +++ b/extension/src/index.css @@ -2,10 +2,35 @@ box-sizing: border-box; } +html { + margin: 0; + padding: 0; +} + body { background-color: #242424; color: white; font-family: sans-serif; + margin: 0; + padding: 0; +} + +#settings-menu { + position: fixed; + height: 100%; + width: 300px; + background-color: black; + padding: 10px; + display: flex; + flex-direction: column; + right: 0; + animation: slideIn 0.3s ease-in-out; + +} + +@keyframes slideIn { + from { transform: translateX(100%); } + to { transform: translateX( 0% ); } } /* Folder */ |