+23 -1

src/app.css

reviewed

··· 1100 1100 line-height: 1; 1101 1101 padding: 8px 16px !important; 1102 1102 transition: all 0.1s ease-in-out; 1103 1103 + text-decoration: none; 1103 1104 white-space: nowrap; 1104 1105 overflow: hidden; 1105 1106 text-overflow: ellipsis; 1106 1106 - text-decoration: none; 1107 1107 + } 1108 1108 + .szh-menu .szh-menu__item span { 1109 1109 + white-space: nowrap; 1110 1110 + overflow: hidden; 1111 1111 + text-overflow: ellipsis; 1112 1112 + line-height: 1.05; 1107 1113 } 1108 1114 .szh-menu .szh-menu__item * { 1109 1115 vertical-align: middle; ··· 1140 1146 flex-grow: 1; 1141 1147 text-overflow: ellipsis; 1142 1148 overflow: hidden; 1149 1149 + } 1150 1150 + .szh-menu .menu-double-lines { 1151 1151 + white-space: normal; 1152 1152 + display: -webkit-box; 1153 1153 + -webkit-line-clamp: 2; 1154 1154 + -webkit-box-orient: vertical; 1155 1155 + overflow: hidden; 1156 1156 + } 1157 1157 + .szh-menu .menu-double-lines span { 1158 1158 + white-space: normal; 1159 1159 + } 1160 1160 + .szh-menu .menu-horizontal { 1161 1161 + display: flex; 1162 1162 + } 1163 1163 + .szh-menu .menu-horizontal .szh-menu__item { 1164 1164 + flex: 1; 1143 1165 } 1144 1166 .szh-menu .szh-menu__item .menu-shortcut { 1145 1167 opacity: 0.5;

+9 -1

src/components/icon.jsx

reviewed

··· 68 68 69 69 const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js'); 70 70 71 71 - function Icon({ icon, size = 'm', alt, title, class: className = '' }) { 71 71 + function Icon({ 72 72 + icon, 73 73 + size = 'm', 74 74 + alt, 75 75 + title, 76 76 + class: className = '', 77 77 + style = {}, 78 78 + }) { 72 79 if (!icon) return null; 73 80 74 81 const iconSize = SIZES[size]; ··· 97 104 display: 'inline-block', 98 105 overflow: 'hidden', 99 106 lineHeight: 0, 107 107 + ...style, 100 108 }} 101 109 > 102 110 {iconData && (

+87 -46

src/components/status.jsx

reviewed

··· 373 373 </MenuHeader> 374 374 <MenuLink to={instance ? `/${instance}/s/${id}` : `/s/${id}`}> 375 375 <Icon icon="arrow-right" /> 376 376 - View post and replies 376 376 + <span>View post by @{username || acct}</span> 377 377 </MenuLink> 378 378 </> 379 379 )} ··· 408 408 } catch (e) {} 409 409 }} 410 410 > 411 411 - <Icon icon="rocket" /> 411 411 + <Icon 412 412 + icon="rocket" 413 413 + style={{ 414 414 + color: reblogged && 'var(--reblog-color)', 415 415 + }} 416 416 + /> 412 417 <span>{reblogged ? 'Unboost' : 'Boost…'}</span> 413 418 </MenuItem> 414 419 )} ··· 421 426 } catch (e) {} 422 427 }} 423 428 > 424 424 - <Icon icon="heart" /> 429 429 + <Icon 430 430 + icon="heart" 431 431 + style={{ 432 432 + color: favourited && 'var(--favourite-color)', 433 433 + }} 434 434 + /> 425 435 <span>{favourited ? 'Unfavourite' : 'Favourite'}</span> 426 436 </MenuItem> 427 437 <MenuItem ··· 433 443 } catch (e) {} 434 444 }} 435 445 > 436 436 - <Icon icon="bookmark" /> 446 446 + <Icon 447 447 + icon="bookmark" 448 448 + style={{ 449 449 + color: bookmarked && 'var(--favourite-color)', 450 450 + }} 451 451 + /> 437 452 <span>{bookmarked ? 'Unbookmark' : 'Bookmark'}</span> 438 453 </MenuItem> 454 454 + {enableTranslate && ( 455 455 + <MenuItem 456 456 + disabled={forceTranslate} 457 457 + onClick={() => { 458 458 + setForceTranslate(true); 459 459 + }} 460 460 + > 461 461 + <Icon icon="translate" /> 462 462 + <span>Translate</span> 463 463 + </MenuItem> 464 464 + )} 439 465 <MenuDivider /> 440 466 </> 441 467 )} 442 468 <MenuItem href={url} target="_blank"> 443 469 <Icon icon="external" /> 444 444 - <span>Open link to post</span> 445 445 - </MenuItem> 446 446 - <MenuItem 447 447 - onClick={() => { 448 448 - // Copy url to clipboard 449 449 - try { 450 450 - navigator.clipboard.writeText(url); 451 451 - showToast('Link copied'); 452 452 - } catch (e) { 453 453 - console.error(e); 454 454 - showToast('Unable to copy link'); 455 455 - } 456 456 - }} 457 457 - > 458 458 - <Icon icon="link" /> 459 459 - <span>Copy link to post</span> 470 470 + <small class="menu-double-lines">{nicePostURL(url)}</small> 460 471 </MenuItem> 461 461 - {enableTranslate && ( 472 472 + <div class="menu-horizontal"> 462 473 <MenuItem 463 463 - disabled={forceTranslate} 464 474 onClick={() => { 465 465 - setForceTranslate(true); 475 475 + // Copy url to clipboard 476 476 + try { 477 477 + navigator.clipboard.writeText(url); 478 478 + showToast('Link copied'); 479 479 + } catch (e) { 480 480 + console.error(e); 481 481 + showToast('Unable to copy link'); 482 482 + } 466 483 }} 467 484 > 468 468 - <Icon icon="translate" /> 469 469 - <span>Translate</span> 485 485 + <Icon icon="link" /> 486 486 + <span>Copy</span> 470 487 </MenuItem> 471 471 - )} 472 472 - {navigator?.share && 473 473 - navigator?.canShare?.({ 474 474 - url, 475 475 - }) && ( 476 476 - <MenuItem 477 477 - onClick={() => { 478 478 - try { 479 479 - navigator.share({ 480 480 - url, 481 481 - }); 482 482 - } catch (e) { 483 483 - console.error(e); 484 484 - alert("Sharing doesn't seem to work."); 485 485 - } 486 486 - }} 487 487 - > 488 488 - <Icon icon="share" /> 489 489 - <span>Share…</span> 490 490 - </MenuItem> 491 491 - )} 488 488 + {navigator?.share && 489 489 + navigator?.canShare?.({ 490 490 + url, 491 491 + }) && ( 492 492 + <MenuItem 493 493 + onClick={() => { 494 494 + try { 495 495 + navigator.share({ 496 496 + url, 497 497 + }); 498 498 + } catch (e) { 499 499 + console.error(e); 500 500 + alert("Sharing doesn't seem to work."); 501 501 + } 502 502 + }} 503 503 + > 504 504 + <Icon icon="share" /> 505 505 + <span>Share…</span> 506 506 + </MenuItem> 507 507 + )} 508 508 + </div> 492 509 {isSelf && ( 493 510 <> 494 511 <MenuDivider /> ··· 546 563 onContextMenu={(e) => { 547 564 if (size === 'l') return; 548 565 if (e.metaKey) return; 566 566 + console.log('context menu', e); 567 567 + const link = e.target.closest('a'); 568 568 + if (link && /^https?:\/\//.test(link.getAttribute('href'))) return; 549 569 e.preventDefault(); 550 570 setContextMenuAnchorPoint({ 551 571 x: e.clientX, ··· 1535 1555 }); 1536 1556 1537 1557 return Promise.any([remoteInstanceFetch, mastoSearchFetch]); 1558 1558 + } 1559 1559 + 1560 1560 + function nicePostURL(url) { 1561 1561 + const urlObj = new URL(url); 1562 1562 + const { host, pathname } = urlObj; 1563 1563 + const path = pathname.replace(/\/$/, ''); 1564 1564 + // split only first slash 1565 1565 + const [_, username, restPath] = path.match(/\/(@[^\/]+)\/(.*)/) || []; 1566 1566 + return ( 1567 1567 + <> 1568 1568 + {host} 1569 1569 + {username ? ( 1570 1570 + <> 1571 1571 + /{username} 1572 1572 + <span class="more-insignificant">/{restPath}</span> 1573 1573 + </> 1574 1574 + ) : ( 1575 1575 + <span class="more-insignificant">{path}</span> 1576 1576 + )} 1577 1577 + </> 1578 1578 + ); 1538 1579 } 1539 1580 1540 1581 const unfurlMastodonLink = throttle(_unfurlMastodonLink);