From 4e62b936acea30d62331683b7315270a639fed9b Mon Sep 17 00:00:00 2001 From: scanash00 Date: Tue, 17 Feb 2026 05:53:31 -0900 Subject: [PATCH] some nice improvements and fixes --- extension/bun.lock | 29 --- extension/public/icons/icon-128.png | Bin 1648 -> 588 bytes extension/public/icons/icon-16.png | Bin 300 -> 133 bytes extension/public/icons/icon-32.png | Bin 439 -> 156 bytes extension/public/icons/icon-48.png | Bin 847 -> 220 bytes extension/public/icons/icon-64.png | Bin 950 -> 287 bytes extension/public/icons/logo.svg | 2 +- extension/src/assets/styles.css | 42 ++-- extension/src/components/popup/App.tsx | 232 ++++++++++-------- extension/src/components/sidepanel/App.tsx | 129 +++++----- extension/src/utils/overlay-styles.ts | 74 +++--- extension/tailwind.config.js | 22 +- web/src/App.tsx | 15 +- web/src/components/common/Card.tsx | 16 +- .../components/navigation/RightSidebar.tsx | 24 ++ web/src/views/About.tsx | 217 +++++++++------- web/src/views/auth/Login.tsx | 14 +- web/src/views/profile/Profile.tsx | 3 +- 18 files changed, 457 insertions(+), 362 deletions(-) diff --git a/extension/bun.lock b/extension/bun.lock index 25c69da..2319c0b 100644 --- a/extension/bun.lock +++ b/extension/bun.lock @@ -7,7 +7,6 @@ "@webext-core/messaging": "^1.4.0", "clsx": "^2.1.1", "lucide-react": "^0.563.0", - "pdfjs-dist": "^5.4.624", "react": "^18.3.1", "react-dom": "^18.3.1", }, @@ -180,30 +179,6 @@ "@mdn/browser-compat-data": ["@mdn/browser-compat-data@7.1.22", "", {}, "sha512-pvfjbTDEYTDNKl9u3KbRzeNmU7PrcsFiGzIUbcB9JPq1LziTMs6YpE2x3Gf+2gHOPQzdO/KQ8hAr1Kkkzpklrg=="], - "@napi-rs/canvas": ["@napi-rs/canvas@0.1.91", "", { "optionalDependencies": { "@napi-rs/canvas-android-arm64": "0.1.91", "@napi-rs/canvas-darwin-arm64": "0.1.91", "@napi-rs/canvas-darwin-x64": "0.1.91", "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.91", "@napi-rs/canvas-linux-arm64-gnu": "0.1.91", "@napi-rs/canvas-linux-arm64-musl": "0.1.91", "@napi-rs/canvas-linux-riscv64-gnu": "0.1.91", "@napi-rs/canvas-linux-x64-gnu": "0.1.91", "@napi-rs/canvas-linux-x64-musl": "0.1.91", "@napi-rs/canvas-win32-arm64-msvc": "0.1.91", "@napi-rs/canvas-win32-x64-msvc": "0.1.91" } }, "sha512-eeIe1GoB74P1B0Nkw6pV8BCQ3hfCfvyYr4BntzlCsnFXzVJiPMDnLeIx3gVB0xQMblHYnjK/0nCLvirEhOjr5g=="], - - "@napi-rs/canvas-android-arm64": ["@napi-rs/canvas-android-arm64@0.1.91", "", { "os": "android", "cpu": "arm64" }, "sha512-SLLzXXgSnfct4zy/BVAfweZQkYkPJsNsJ2e5DOE8DFEHC6PufyUrwb12yqeu2So2IOIDpWJJaDAxKY/xpy6MYQ=="], - - "@napi-rs/canvas-darwin-arm64": ["@napi-rs/canvas-darwin-arm64@0.1.91", "", { "os": "darwin", "cpu": "arm64" }, "sha512-bzdbCjIjw3iRuVFL+uxdSoMra/l09ydGNX9gsBxO/zg+5nlppscIpj6gg+nL6VNG85zwUarDleIrUJ+FWHvmuA=="], - - "@napi-rs/canvas-darwin-x64": ["@napi-rs/canvas-darwin-x64@0.1.91", "", { "os": "darwin", "cpu": "x64" }, "sha512-q3qpkpw0IsG9fAS/dmcGIhCVoNxj8ojbexZKWwz3HwxlEWsLncEQRl4arnxrwbpLc2nTNTyj4WwDn7QR5NDAaA=="], - - "@napi-rs/canvas-linux-arm-gnueabihf": ["@napi-rs/canvas-linux-arm-gnueabihf@0.1.91", "", { "os": "linux", "cpu": "arm" }, "sha512-Io3g8wJZVhK8G+Fpg1363BE90pIPqg+ZbeehYNxPWDSzbgwU3xV0l8r/JBzODwC7XHi1RpFEk+xyUTMa2POj6w=="], - - "@napi-rs/canvas-linux-arm64-gnu": ["@napi-rs/canvas-linux-arm64-gnu@0.1.91", "", { "os": "linux", "cpu": "arm64" }, "sha512-HBnto+0rxx1bQSl8bCWA9PyBKtlk2z/AI32r3cu4kcNO+M/5SD4b0v1MWBWZyqMQyxFjWgy3ECyDjDKMC6tY1A=="], - - "@napi-rs/canvas-linux-arm64-musl": ["@napi-rs/canvas-linux-arm64-musl@0.1.91", "", { "os": "linux", "cpu": "arm64" }, "sha512-/eJtVe2Xw9A86I4kwXpxxoNagdGclu12/NSMsfoL8q05QmeRCbfjhg1PJS7ENAuAvaiUiALGrbVfeY1KU1gztQ=="], - - "@napi-rs/canvas-linux-riscv64-gnu": ["@napi-rs/canvas-linux-riscv64-gnu@0.1.91", "", { "os": "linux", "cpu": "none" }, "sha512-floNK9wQuRWevUhhXRcuis7h0zirdytVxPgkonWO+kQlbvxV7gEUHGUFQyq4n55UHYFwgck1SAfJ1HuXv/+ppQ=="], - - "@napi-rs/canvas-linux-x64-gnu": ["@napi-rs/canvas-linux-x64-gnu@0.1.91", "", { "os": "linux", "cpu": "x64" }, "sha512-c3YDqBdf7KETuZy2AxsHFMsBBX1dWT43yFfWUq+j1IELdgesWtxf/6N7csi3VPf6VA3PmnT9EhMyb+M1wfGtqw=="], - - "@napi-rs/canvas-linux-x64-musl": ["@napi-rs/canvas-linux-x64-musl@0.1.91", "", { "os": "linux", "cpu": "x64" }, "sha512-RpZ3RPIwgEcNBHSHSX98adm+4VP8SMT5FN6250s5jQbWpX/XNUX5aLMfAVJS/YnDjS1QlsCgQxFOPU0aCCWgag=="], - - "@napi-rs/canvas-win32-arm64-msvc": ["@napi-rs/canvas-win32-arm64-msvc@0.1.91", "", { "os": "win32", "cpu": "arm64" }, "sha512-gF8MBp4X134AgVurxqlCdDA2qO0WaDdi9o6Sd5rWRVXRhWhYQ6wkdEzXNLIrmmros0Tsp2J0hQzx4ej/9O8trQ=="], - - "@napi-rs/canvas-win32-x64-msvc": ["@napi-rs/canvas-win32-x64-msvc@0.1.91", "", { "os": "win32", "cpu": "x64" }, "sha512-++gtW9EV/neKI8TshD8WFxzBYALSPag2kFRahIJV+LYsyt5kBn21b1dBhEUDHf7O+wiZmuFCeUa7QKGHnYRZBA=="], - "@nodelib/fs.scandir": ["@nodelib/fs.scandir@2.1.5", "", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" } }, "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="], "@nodelib/fs.stat": ["@nodelib/fs.stat@2.0.5", "", {}, "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A=="], @@ -872,8 +847,6 @@ "node-notifier": ["node-notifier@10.0.1", "", { "dependencies": { "growly": "^1.3.0", "is-wsl": "^2.2.0", "semver": "^7.3.5", "shellwords": "^0.1.1", "uuid": "^8.3.2", "which": "^2.0.2" } }, "sha512-YX7TSyDukOZ0g+gmzjB6abKu+hTGvO8+8+gIFDsRCU2t8fLV/P2unmt+LGFaIa4y64aX98Qksa97rgz4vMNeLQ=="], - "node-readable-to-web-readable-stream": ["node-readable-to-web-readable-stream@0.4.2", "", {}, "sha512-/cMZNI34v//jUTrI+UIo4ieHAB5EZRY/+7OmXZgBxaWBMcW2tGdceIw06RFxWxrKZ5Jp3sI2i5TsRo+CBhtVLQ=="], - "node-releases": ["node-releases@2.0.27", "", {}, "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA=="], "normalize-path": ["normalize-path@3.0.0", "", {}, "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="], @@ -930,8 +903,6 @@ "pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="], - "pdfjs-dist": ["pdfjs-dist@5.4.624", "", { "optionalDependencies": { "@napi-rs/canvas": "^0.1.88", "node-readable-to-web-readable-stream": "^0.4.2" } }, "sha512-sm6TxKTtWv1Oh6n3C6J6a8odejb5uO4A4zo/2dgkHuC0iu8ZMAXOezEODkVaoVp8nX1Xzr+0WxFJJmUr45hQzg=="], - "pend": ["pend@1.2.0", "", {}, "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg=="], "perfect-debounce": ["perfect-debounce@1.0.0", "", {}, "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA=="], diff --git a/extension/public/icons/icon-128.png b/extension/public/icons/icon-128.png index f799fd76b25762abd3c3ed62a7d909659e26cd25..e3842c4d43eb82fa4c2ab641e9a21941af869f05 100644 GIT binary patch literal 588 zcme7R@N?(olHy`uVBq!ia0y~yU}#`qU?|{VV_;yowx;3|0|S$=r;B4q#hkZy&igVs z%D8`&{I4R{vysKxAWWeoiSypm4eTqt-!NEhVBwp`^X8Yf0~_;A$urgSPoK$Ux?g^; z=A#*p=h-jaa~|KwK2!VXDL-?@8HNWu4Cmm)y8wpin-gdH3B0yD{&981O@=6IkpnBe zejhu{c3~Fd0ZE2Aq!I^yMjw~o+F2~JyK>$V!KvSR@24`f$2>8)d+xK*-{7USybt)1 z9e{8OA=Zncs$Pz;LhDm+Q={^C?di-GURuk$pzkVRcS~n&>sqj7J>!+jI!%}Mu?2)r z=J5J0tUsLvBbfNODWCE=cl1*i^7&_3FBb^B>9hX2vsHFbg)sb0``!STHxx zj?iW;xX=4Ne)kuN>x;kEMlG{_l**j3R^-6doEcx7tNLGSfcR(O@p6vg!7X+J>0L|G sepSA^Bxip2!-u`T`k5+%2cGkL9Lb6Q#asH0fq{X+)78&qol`;+0QLCYMgRZ+ literal 1648 zcme7R@N?(olHy`uVBq!ia0y~yU}ykg4mJh`hQoG=rx_R+7>k44ofy`glX=O&z~GV^ z;hE;^%b>-;z`()4*q+J20#d@jz#zo{0?Z2-8JNK$j0_A5nBcMv3z!jXkV20>mU0FL z)?1z~jv*C{Z|CmMmvI$2o}TtSC#j>UgC%65LqLF{$kIiOTq^$>JVgFXsM)r0!BUoq za^fC=Pfor3#Q#M8fa;=UZXuaM3hA0B?^c$#ZEsV%^p>x>{Qm9A#qYhspWHiFoxktC zf7ovI^L?`NK1~ld7P8LK_I-Q){|wue_xF~+e|2*a+p*v2yIptI23^1G`cQP==3}!0 zSd;zla79{}Ftc(vu&J#xVrAOURVCS@${;yo$0-qx16r?A4W==qBs|gz)(Dq8vvGF7 z0k4VAHov*}cZxs5w5z4bkENKMw|BqY>vB?&;q4<{InJf_YY%-fmX5i*UGlY0YSVv@ z6P8o7I~q33P-MCgev@}z{r4YF?=Ow{9Qo?T?^pTx&Ku>|Xh#1r-@_T>6(!s3w83>v zFq1&A#%Bx06L%im_`>1fv+&Gg7KP&GkBW5ayVT2_F%R$Lq+f8bq)-Zwz1!rVLXsMr-YSh!WP>f&o~(39xu@rAjJw7 zQ@-aHgGJ^anCd9|>|~Td4x;{J>3s zVa~SmsnfPMN`&X^eLB}xjN@K~p2Y)ujst8*zkj_Wa`am7gEw>a_gU`Vb@0;Kr5p~c zO=dK#f9mzXZGMkdaY@041(k;+z9=wAPq#nO?^WcVaA*3|n?L_OJ1cPaf#gjkMu%0m zXYKx3d+_A$<8PKv*SDAYqUFF4YLP)y;n9W-Z9ZycA??p$A|InrQ_dq_3tg0DL!{?)7^_(1)BDB@AzAKgeAeDdGXTP zpXV~ZT*`~}U%Xt;=HRKe@MY5iertDf9&map^mEhAD2HvcGVNA0e`nB0o%%$T!K=q< zt0zOiDXo*<3{xapvo=rJn;o!o=62^sxAIDh*CO%r9=|2lKF&nC2rfJ%E$S3j3^ HP6EaktG3RaHZe9ij z4%VZ-a}VFLjk&_#e}u(qqw+_o1v|K>ypB3~FegQ(_)Y@@KV#m6hG`}R%`AK|FBbvf6AoOx^8V-Z-AzwBl#Zl^W?B_QD;&ATu=e2R%F@MKce5V2#-RDDLy18x zLG7(yJkuF#MR5m~ycf4JcCO$TW@Ws|c+da$wsUVABt_cXx8G0yuHGOrQSo^}eT>q1 z``*<5f;(kZ@?JW1$_V&2HF$gKg(^B^iFq8G@44jJqR;Y7hXkH{T{rjcziZR7CrwJP z+Ay(3jeTR}WJ7I(b^Z(t4FCWC_*?vzfq{VyH3!mw$Y8ar%cRp)Hl+*{%!2^B>J~s(KwNv9Gx)U(w5PhIn?SZO_!T^^-Sw zt$g`Rajiknr|ip1p8Wo0n)za-XwuX#zjtIs9yXoWmf6bKT5p$SD8SwSL?E|H7{QIc#FJIN$qDr1OE!jD>azauAZ{ON$zb@=Gz1Owj>$%{>{*G=P=0_L*Us%PX=VvT%L0*_-(03w!Dm#+rOKxC7UDU9J(0wS~#Q@&t&vi zclPs(8Q;%3&uU!6@tbAJ!yDf=$GtgyKRhi#ZBvqjbxN3c+$u8#k+bGn%vy|78@v`w zW2v&unK3=SU2?I74a0(!WmTvC&s?>l-0HoR-=yF26YgxRRl2LJ!C0|U=sx?Kvh6|> v*%+$sGcYjx|8Jey#m~UNzy=C;W(L9buV);Woc+YWz`)??>gTe~DWM4fEQ`T_ diff --git a/extension/public/icons/icon-48.png b/extension/public/icons/icon-48.png index 0fbf925ace7c42c442ab59491dd71efe4c284c5b..c3cf515afd4fc0af19cbb625d3e10b60faad8ceb 100644 GIT binary patch literal 220 zcmeAS@N?(olHy`uVBq!ia0y~yU@%}{V9?@VV_;zT>VKn(fq`MMr;B4q#hka7H}W-A-+Fq^zGYw1#2e;> zD11pXZU~ox| z@J#ddWzb?^VBlb2Y|mt10V!c%V31+}0pP88^v8egr!#B+~uwLX8swQ`zfq=X-yw@eEUbDSL6Mc-T8x zg(UeSmrelyTX(FKm9IOnOL=1DqgVnoey=fJ0-~Q z&zzxAm?7&T_FCiV?KHqP|2N3l{o`_Ix0BJXfHd&9F}tK#gY#WZ5ClZt?X+~%(>|Ku#u;5%?vL7 zh>4chIL~(_-CoBa_WX#U2zLrUAII+42VZ~02fp6C`L~VitLcyXdpEQASx@f|JTZON zw#5RwqjoDOt;sZHQA}|-6Unq^alqtFo0zq}9bvi6ljgN*#(^V-s+yHk4>ukWuKpLD z8o{}625)X7Q_DOJ*=zn&^qoI!@7ndnD~f+!`?3F(VqKxCg>p#~6!vS>e^C0l-X(+e fUY}NR^^d>&Y2xSqh<&v%1tn%rS3j3^P6t*<=)26>Kb7KlnH|0~ zuVrOmxX)1hGLGTP1YHIYsGoItFT)GPXa)v`1NDq9?5-eg;#-gu!=Im#yTlo6*T^z3 zFl@+g*ctQOuD9&l{MeWGN*GL|8x~XtGhJCD?D%~d>xxMBrgy%)0p0&HUtu+yf#ILY z@@mEl&f6d+XZn3-TF{=O=}^MYaFKu8wWNl}TW#8o_?lbu%DaBw!;mhT_gVgK!Y`0& MPgg&ebxsLQ0KU^_fB*mh literal 950 zcme7R@N?(olHy`uVBq!ia0y~yU~m9o4mJh`hEk44ofy`glX=O&z~GV^ z;hE;^%b>-;z`()4*q+J20#d@jz#zo{0?Z2-8JNK$j0_A5nBcMw3z!jXkV3aWrwt4Y z%nF_^jv*C{Z=-GVFFQ!=x@1YBrgYLnc7u=n5e`mV%)(ij0?GA^(!$>CDj^)g zK5{b?8s{IlGMAOb*-NP7)sgRV?^S(0{}isvP`bI#`sAkC^GA0+uavjmS$)1_`Q_=lXrl!a1iqg8Y`WG(6q5rh@q~Yr!g!1TW6yGp^bG z?>ksbx70ALp2Bcq2fLCDi=^Wu+k;k>tpZh|-+7S)LM^CQq6jksQo&0JI zvrkukoB0ehZ)L`Cn~OcTbGYuAbg`A9((zRvcX}nVEU=h1HRxZb%MYIa z8@_Qoj7kzY#^b)!6vBTyvMO0%TnItE;rsW@wy$q{#=Hx2?EJYneVcjPSlnhxwKiSzd%NR zDMMFFQIiT_MXT@H-M3nPiEDw&feXvmw+23t^j^toq3oV(tlbbM$L#Q$fw^hT(hS)J zQ;#!TusYD7kgXZTp7GR>VGEyu!ilJ^Ym8BqJPd1@c{nyrTU6Q*Hg8p9);ilTuE~;J zUtjO{`~Gc-z09|$WcFZvwN4LrlSxx1&YBez zuQOGMfuZL5*J!1eUnaXK`z<-X!Hd%%I=B1fq#kp3ab49EMJi;B|YBA3~6_;d$ci;vNH8}NN{!^PMMN*@J$3Jym%8vT2# YZ>;zIPF?lIpP)SB>FVdQ&MBb@05FV-ApigX diff --git a/extension/public/icons/logo.svg b/extension/public/icons/logo.svg index 5abca38..2797afd 100644 --- a/extension/public/icons/logo.svg +++ b/extension/public/icons/logo.svg @@ -1,4 +1,4 @@ - + diff --git a/extension/src/assets/styles.css b/extension/src/assets/styles.css index 35cad50..d50f830 100644 --- a/extension/src/assets/styles.css +++ b/extension/src/assets/styles.css @@ -5,20 +5,20 @@ @tailwind utilities; :root { - --bg-primary: #0c0c0c; - --bg-secondary: #141414; - --bg-tertiary: #1c1c1c; - --bg-card: #161616; - --bg-elevated: #1e1e1e; - --bg-hover: #262626; - --text-primary: #e8e8e3; - --text-secondary: #a1a09a; - --text-tertiary: #6b6a65; + --bg-primary: #18181b; + --bg-secondary: #1e1e22; + --bg-tertiary: #27272a; + --bg-card: #1e1e22; + --bg-elevated: #27272a; + --bg-hover: #2e2e33; + --text-primary: #fafafa; + --text-secondary: #a1a1aa; + --text-tertiary: #71717a; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); - --accent: #7aa2f7; - --accent-hover: #9bbcff; - --accent-subtle: rgba(122, 162, 247, 0.14); + --accent: #3b82f6; + --accent-hover: #2563eb; + --accent-subtle: rgba(59, 130, 246, 0.12); --success: #34d399; --warning: #fbbf24; --shadow: 0 1px 3px rgba(0, 0, 0, 0.4); @@ -26,20 +26,20 @@ } .light { - --bg-primary: #fafaf8; + --bg-primary: #fafafa; --bg-secondary: #ffffff; - --bg-tertiary: #f2f2ef; + --bg-tertiary: #f4f4f5; --bg-card: #ffffff; --bg-elevated: #ffffff; - --bg-hover: #eaeae6; - --text-primary: #1a1a18; - --text-secondary: #6b6a65; - --text-tertiary: #a1a09a; + --bg-hover: #f4f4f5; + --text-primary: #18181b; + --text-secondary: #71717a; + --text-tertiary: #a1a1aa; --border: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.14); - --accent: #3b82f6; - --accent-hover: #2563eb; - --accent-subtle: rgba(59, 130, 246, 0.08); + --accent: #2563eb; + --accent-hover: #1d4ed8; + --accent-subtle: rgba(37, 99, 235, 0.08); --shadow: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.08); } diff --git a/extension/src/components/popup/App.tsx b/extension/src/components/popup/App.tsx index 5c27f84..d27ac21 100644 --- a/extension/src/components/popup/App.tsx +++ b/extension/src/components/popup/App.tsx @@ -369,7 +369,7 @@ export function App() { if (loading) { return (
-
+
); } @@ -380,38 +380,42 @@ export function App() { {showSettings && (
- Settings + Settings
-
+
- + setApiUrl(e.target.value)} - className="w-full p-2.5 bg-[var(--bg-card)] border border-[var(--border)] rounded-lg text-sm focus:outline-none focus:border-[var(--accent)]" + className="w-full px-3 py-2 bg-[var(--bg-card)] border border-[var(--border)] rounded-lg text-sm focus:outline-none focus:border-[var(--accent)] focus:ring-2 focus:ring-[var(--accent-subtle)] transition-all" placeholder="https://margin.at" />
- -
+ +
{(['light', 'dark', 'system'] as const).map((t) => ( @@ -439,21 +443,23 @@ export function App() {
)} -
- Margin -

Sign in with AT Protocol

-

- Connect your Bluesky account to annotate, highlight, and bookmark the web. +

+
+ Margin +
+

Welcome to Margin

+

+ Annotate, highlight, and bookmark the web with your AT Protocol identity.

@@ -467,56 +473,68 @@ export function App() { {showSettings && (
- Settings + Settings
-
+
- + setApiUrl(e.target.value)} - className="w-full p-2.5 bg-[var(--bg-card)] border border-[var(--border)] rounded-lg text-sm focus:outline-none focus:border-[var(--accent)]" + className="w-full px-3 py-2 bg-[var(--bg-card)] border border-[var(--border)] rounded-lg text-sm focus:outline-none focus:border-[var(--accent)] focus:ring-2 focus:ring-[var(--accent-subtle)] transition-all" placeholder="https://margin.at" /> -

- Change this for development or self-hosted instances +

+ For development or self-hosted instances

-
+
- -

- Highlights, badges, and tooltips on pages +

Page Overlay
+

+ Show highlights and annotations on pages

- setOverlayEnabled(e.target.checked)} - className="w-5 h-5 rounded accent-[var(--accent)]" - /> +
- -
+ +
{(['light', 'dark', 'system'] as const).map((t) => ( @@ -544,19 +562,29 @@ export function App() {
)} -
-
- Margin - Margin -
+
-
+ Margin + Margin +
+
+
+ +
-
+
{(['page', 'bookmarks', 'highlights', 'collections'] as Tab[]).map((tab) => { const icons: Record = { page: , @@ -591,13 +619,13 @@ export function App() { {activeTab === 'page' && (
-
-
+
+
{currentUrl ? ( { (e.target as HTMLImageElement).style.display = 'none'; (e.target as HTMLImageElement).nextElementSibling?.classList.remove( @@ -607,19 +635,17 @@ export function App() { /> ) : null}
-
- {currentTitle || 'Untitled'} -
-
+
{currentTitle || 'Untitled'}
+
{currentUrl ? new URL(currentUrl).hostname : ''}
-
+
-
-