zero-knowledge file sharing
13
fork

Configure Feed

Select the types of activity you want to include in your feed.

new options style

Juliet 2421d86f 7d75a4c7

+47 -22
+6 -3
web/src/App.tsx
··· 4 4 return ( 5 5 <div class="text-text flex min-h-screen flex-col items-center justify-center px-4 font-sans"> 6 6 <div class="mt-4 w-full max-w-md">{props.children}</div> 7 - <p class="text-muted mt-auto pt-8 pb-4 text-[10px]"> 8 - end-to-end encrypted 9 - </p> 7 + <a 8 + class="text-muted hover:text-accent-hover mt-auto p-4 text-[10px]" 9 + href="https://github.com/notjuliet/drop" 10 + > 11 + source code 12 + </a> 10 13 </div> 11 14 ); 12 15 }
+41 -19
web/src/pages/Upload.tsx
··· 11 11 const [error, setError] = createSignal(""); 12 12 const [resultUrl, setResultUrl] = createSignal(""); 13 13 const [dragging, setDragging] = createSignal(false); 14 + const [burn, setBurn] = createSignal(false); 14 15 const [maxFileSize, setMaxFileSize] = createSignal(0); 15 16 16 17 let fileInput!: HTMLInputElement; 17 18 let linkInput!: HTMLInputElement; 18 19 let expiryInput!: HTMLInputElement; 19 - let burnInput!: HTMLInputElement; 20 20 let copyBtn!: HTMLButtonElement; 21 21 let activeXhr: XMLHttpRequest | null = null; 22 22 ··· 66 66 }); 67 67 68 68 const statusText = () => { 69 - if (encrypting()) return "Encrypting\u2026"; 70 - if (uploading()) return "Uploading\u2026"; 69 + if (encrypting()) return "encrypting\u2026"; 70 + if (uploading()) return "uploading\u2026"; 71 71 return ""; 72 72 }; 73 73 ··· 146 146 const formData = new FormData(); 147 147 formData.append("file", new Blob([ciphertext])); 148 148 formData.append("expiresIn", expiryInput.value.trim()); 149 - formData.append("burnAfterRead", burnInput.checked ? "true" : "false"); 149 + formData.append("burnAfterRead", burn() ? "true" : "false"); 150 150 151 151 setEncrypting(false); 152 152 ··· 236 236 stroke-linecap="round" 237 237 transform={`rotate(-90 ${CENTER} ${CENTER})`} 238 238 style={{ 239 - transition: dragging() ? "none" : `all ${animDuration()}ms ease-out`, 239 + transition: dragging() 240 + ? "none" 241 + : `all ${animDuration()}ms ease-out`, 240 242 }} 241 243 /> 242 244 {/* Upload liquid fill */} ··· 302 304 handleUpload(); 303 305 }} 304 306 > 305 - Upload 307 + upload 306 308 </button> 307 309 <button 308 310 class="text-muted hover:text-text mt-1 border-none bg-transparent p-0 text-[10px]" ··· 320 322 class="text-muted font-medium" 321 323 style={{ "font-size": "clamp(0.625rem, 2vw, 0.875rem)" }} 322 324 > 323 - Drop a file, or 325 + drop a file, or 324 326 </p> 325 327 <button 326 328 class="bg-accent hover:bg-accent-hover rounded-md border-none px-4 py-1.5 font-medium text-white transition-colors" ··· 330 332 fileInput.click(); 331 333 }} 332 334 > 333 - Browse 335 + browse 334 336 </button> 335 337 <Show when={maxFileSize()}> 336 338 <span class="text-muted text-[10px]"> ··· 351 353 /> 352 354 </div> 353 355 354 - <div class="mt-4 flex items-center gap-4"> 355 - <input 356 - ref={expiryInput!} 357 - type="text" 358 - value="24h" 359 - placeholder="e.g. 30m, 24h, 7d" 360 - class="bg-surface border-border text-text focus:border-accent w-24 rounded-md border px-2.5 py-1.5 text-xs transition-colors outline-none" 361 - /> 362 - <label class="text-muted flex items-center gap-1.5 text-xs select-none"> 363 - <input type="checkbox" ref={burnInput!} class="accent-accent" /> 364 - Burn after read 356 + <div class="mx-auto mt-6 flex w-fit flex-col gap-4 text-sm"> 357 + <label class="text-muted flex items-center gap-3 select-none"> 358 + lifetime 359 + <input 360 + ref={expiryInput!} 361 + type="text" 362 + value="24h" 363 + placeholder="e.g. 30m, 24h, 7d" 364 + class="bg-surface border-border text-accent focus:border-accent w-24 rounded-md border px-2 py-1 text-center font-medium transition-colors outline-none" 365 + /> 366 + </label> 367 + <label 368 + class="text-muted flex items-center gap-3 select-none" 369 + onClick={() => setBurn((b) => !b)} 370 + > 371 + burn after read 372 + <div 373 + class={`flex size-5 items-center justify-center rounded border transition-colors ${burn() ? "bg-accent border-accent" : "bg-surface border-border"}`} 374 + > 375 + <Show when={burn()}> 376 + <svg class="text-bg h-3.5 w-3.5" viewBox="0 0 12 12" fill="none"> 377 + <path 378 + d="M2 6l3 3 5-5" 379 + stroke="currentColor" 380 + stroke-width="1.5" 381 + stroke-linecap="round" 382 + stroke-linejoin="round" 383 + /> 384 + </svg> 385 + </Show> 386 + </div> 365 387 </label> 366 388 </div> 367 389