feat: add account links and responsive layout (#17)

Author: QuickMythril

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 1.4.2 - 2026-07-16
+
+- Moved copy controls out of the minter table and into the account detail view,
+  with separate name and address copy actions.
+- Made account names on My Minting, Blocks, and online-account tables open the
+  same minter detail view.
+- Replaced fixed centered page widths with responsive full-window layouts;
+  Modern keeps a wider gutter than Classic and Fun.
+
 ## 1.4.1 - 2026-07-16
 
 - Reworked the app into My Minting, Minters, Blocks, and Developers workspaces.

README.md

@@ -39,14 +39,16 @@ minting-key removal for development; otherwise browser mode is read-only. Set
 
 ## QAVS and UI styles
 
-The app is at QAVS `1.4.1`: the `1.4` portion is its minimum Qortium platform
+The app is at QAVS `1.4.2`: the `1.4` portion is its minimum Qortium platform
 level and the patch number tracks the app release. `vite.config.ts` reads the
 package version, injects the visible version badge, and emits
 `dist/qortium-app.json` with the name `Minting` during every build.
 
 Minting supports Classic, Modern, and Fun QDN UI styles and follows Home theme,
 accent, language, and text-size settings. All fonts are bundled locally; UI
-families intentionally preserve the accent selected in Home.
+families intentionally preserve the accent selected in Home. The workspace uses
+the full available app window with responsive gutters; Modern keeps the roomiest
+outer gutter while Classic and Fun stay tighter.
 
 ## Development and verification
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "qortium-minting",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "private": true,
   "license": "0BSD",
   "description": "A small QDN minting status app for Qortium Home.",

package.json

@@ -740,6 +740,15 @@ export default function App() {
     }
   }
 
+  function openAccount(address: string) {
+    setSelectedMinter(address);
+    setTab('minters');
+
+    if (!minters.value.length && !minters.loading) {
+      void loadMinters();
+    }
+  }
+
   const writeAvailable = !bridge.value.isUsingPublicNode;
   const canJoin = writeAvailable
     && !!account
@@ -823,6 +832,7 @@ export default function App() {
               () => joinGroup(MINTING_GROUP_ID, actions),
             );
           }}
+          onOpenAccount={openAccount}
           onRemove={(item) => {
             if (!item.publicKey) return;
             void submitWrite(
@@ -874,6 +884,7 @@ export default function App() {
           now={now}
           onlineAccounts={onlineByHeight}
           onlineNow={onlineNow}
+          onOpenAccount={openAccount}
           onShowMore={() => {
             const next = Math.min(MAX_BLOCK_COUNT, blockCount + BLOCK_COUNT_STEP);
             setBlockCount(next);

src/App.tsx

@@ -782,3 +782,145 @@ td { overflow-wrap: anywhere; }
     width: 100%;
   }
 }
+
+/* Responsive page width and account navigation. Modern keeps a roomier outer
+   gutter, while Classic and Fun use more of the available app window. */
+html {
+  scrollbar-gutter: stable;
+}
+
+.app-shell {
+  margin-inline: 0;
+  max-width: none;
+  padding: clamp(10px, 1.25vw, 20px);
+  width: 100%;
+}
+
+:root[data-ui='modern'] .app-shell {
+  max-width: none;
+  padding-block: clamp(18px, 2.4vw, 36px);
+  padding-inline: clamp(16px, 3vw, 48px);
+}
+
+:root[data-ui='fun'] .app-shell {
+  max-width: none;
+  padding: clamp(10px, 1.5vw, 24px);
+}
+
+.account-link,
+.block-toggle {
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  color: var(--qm-text-primary);
+  min-height: auto;
+  padding: 0;
+}
+
+.account-link {
+  align-items: center;
+  border-radius: var(--qm-radius);
+  display: inline-flex;
+  gap: calc(8px * var(--qm-text-scale));
+  justify-content: flex-start;
+  max-width: 100%;
+  min-width: 0;
+  text-align: start;
+}
+
+.account-link > span:last-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.account-link:hover:not(:disabled),
+.block-toggle:hover:not(:disabled) {
+  background: var(--qm-accent-soft);
+  color: var(--qm-text-primary);
+}
+
+.account-link:focus-visible,
+.block-toggle:focus-visible {
+  outline: 2px solid var(--qm-accent);
+  outline-offset: 3px;
+}
+
+.table-wrap tbody tr {
+  cursor: default;
+}
+
+.table-wrap tbody tr:has(.account-link):hover {
+  background: var(--qm-surface-alt);
+}
+
+.block-row__summary {
+  align-items: center;
+  min-height: 2.45em;
+  padding: 0.55em 0.8em;
+}
+
+.block-toggle {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.4em;
+  justify-content: flex-start;
+}
+
+.block-minter {
+  width: fit-content;
+}
+
+.account-detail {
+  align-items: center;
+  display: flex;
+  gap: clamp(12px, 2vw, 20px);
+  min-width: 0;
+}
+
+.account-detail__text {
+  display: grid;
+  gap: 0.5em;
+  min-width: 0;
+}
+
+.account-detail__line {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6em;
+  min-width: 0;
+}
+
+.account-detail__address p {
+  overflow-wrap: anywhere;
+}
+
+.selected-account {
+  align-items: flex-start;
+  flex-direction: column;
+}
+
+:root[data-ui='fun'] .account-link,
+:root[data-ui='fun'] .block-toggle {
+  border: 0;
+  box-shadow: none;
+}
+
+:root[data-ui='fun'] .account-link:hover:not(:disabled),
+:root[data-ui='fun'] .block-toggle:hover:not(:disabled) {
+  box-shadow: none;
+  transform: none;
+}
+
+@media (max-width: 560px) {
+  .account-detail {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .account-detail__line {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}

src/styles.css

@@ -44,12 +44,14 @@ export function Avatar({
   );
 }
 
-export function CopyAddressButton({
-  address,
-  label = 'Copy address',
+export function CopyTextButton({
+  label,
+  text,
+  textLabel = 'Copy',
 }: {
-  address: string;
-  label?: string;
+  label: string;
+  text: string;
+  textLabel?: string;
 }) {
   const [status, setStatus] = useState<'copied' | 'error' | 'idle'>('idle');
   const timer = useRef(0);
@@ -59,7 +61,7 @@ export function CopyAddressButton({
     event.stopPropagation();
     window.clearTimeout(timer.current);
 
-    setStatus(await copyTextToClipboard(address) ? 'copied' : 'error');
+    setStatus(await copyTextToClipboard(text) ? 'copied' : 'error');
 
     timer.current = window.setTimeout(() => setStatus('idle'), 1_800);
   }
@@ -72,28 +74,52 @@ export function CopyAddressButton({
       type="button"
     >
       <Copy size={14} />
-      {status === 'copied' ? 'Copied' : status === 'error' ? 'Copy failed' : 'Copy'}
+      {status === 'copied' ? 'Copied' : status === 'error' ? 'Copy failed' : textLabel}
     </button>
   );
 }
 
-export function Identity({
+export function CopyAddressButton({
+  address,
+  label = 'Copy address',
+  textLabel = 'Copy address',
+}: {
+  address: string;
+  label?: string;
+  textLabel?: string;
+}) {
+  return <CopyTextButton label={label} text={address} textLabel={textLabel} />;
+}
+
+export function AccountLink({
   address,
   avatarSrc,
+  className = '',
   name,
+  onOpen,
 }: {
   address: string;
   avatarSrc: string | null;
+  className?: string;
   name: string | null;
+  onOpen: (address: string) => void;
 }) {
   const label = name ?? `${address.slice(0, 8)}…${address.slice(-6)}`;
 
   return (
-    <span className="identity" title={address}>
+    <button
+      aria-label={`View ${name ?? address}`}
+      className={`account-link ${className}`}
+      onClick={(event) => {
+        event.stopPropagation();
+        onOpen(address);
+      }}
+      title={address}
+      type="button"
+    >
       <Avatar className="identity__avatar" name={name} src={avatarSrc} />
       <span className={name ? '' : 'mono'}>{label}</span>
-      <CopyAddressButton address={address} label={`Copy ${label} address`} />
-    </span>
+    </button>
   );
 }