fix cardsRemote external link

AlexErrant · Dec 14, 2024 · 5f6717e · 5f6717e
1 parent 84538c4
commit 5f6717e
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 53 deletions.
diff --git a/app/src/components/cardsRemote.tsx b/app/src/components/cardsRemote.tsx
@@ -4,6 +4,7 @@ import { type NoteCardView } from '../uiLogic/cards'
 import { Entries } from '@solid-primitives/keyed'
 import { type SetStoreFunction } from 'solid-js/store'
 import { type TemplateRemote } from 'shared/domain/template'
+import { ExternalLink } from 'shared-dom/icons'
 
 export const CardsRemote: VoidComponent<{
 	readonly noteCard: NoteCardView
@@ -12,17 +13,23 @@ export const CardsRemote: VoidComponent<{
 	}>
 }> = (props) => (
 	<Show when={Object.keys(props.noteCard.template.remotes).length !== 0}>
-		Remote Nooks:
-		<Entries of={props.noteCard.template.remotes}>
-			{(nookId, templateRemote) => (
-				<RemoteNook
-					noteCard={props.noteCard}
-					setNoteCard={props.setNoteCard}
-					nookId={nookId}
-					templateRemote={templateRemote()}
-				/>
-			)}
-		</Entries>
+		<fieldset class='border-black border p-2'>
+			<legend>
+				<span class='p-2 px-4 font-bold'>Remote Nooks</span>
+			</legend>
+			<ul>
+				<Entries of={props.noteCard.template.remotes}>
+					{(nookId, templateRemote) => (
+						<RemoteNook
+							noteCard={props.noteCard}
+							setNoteCard={props.setNoteCard}
+							nookId={nookId}
+							templateRemote={templateRemote()}
+						/>
+					)}
+				</Entries>
+			</ul>
+		</fieldset>
 	</Show>
 )
 
@@ -38,27 +45,36 @@ const RemoteNook: VoidComponent<{
 	const uploadable = () =>
 		props.noteCard.note.remotes[props.nookId] !== undefined
 	return (
-		<li class='px-4 py-2'>
-			{uploadable() ? '✔' : ''}
-			<Show when={remote() != null} fallback={props.nookId}>
+		<li>
+			<label>
+				<input
+					type='checkbox'
+					checked={uploadable()}
+					disabled={uploadable()} // medTODO not sure how to handle deletions yet...
+					onChange={() => {
+						if (!uploadable()) {
+							props.setNoteCard(
+								'noteCard',
+								'note',
+								'remotes',
+								props.nookId,
+								null,
+							) // medTODO not sure how to handle deletions yet... F19F2731-BA29-406F-8F35-4E399CB40242
+						}
+					}}
+				/>
+				/n/{props.nookId}
+			</label>
+			<Show when={remote() != null}>
 				<a
-					href={`${import.meta.env.VITE_HUB_ORIGIN}/n/${
+					target='_blank'
+					href={`${import.meta.env.VITE_HUB_ORIGIN}/n/${props.nookId}/note/${
 						remote()!.remoteNoteId
 					}`}
 				>
-					{props.nookId}
+					<ExternalLink class='inline h-5' />
 				</a>
 			</Show>
-			<input
-				type='checkbox'
-				checked={uploadable()}
-				disabled={uploadable()} // medTODO not sure how to handle deletions yet...
-				onChange={() => {
-					if (!uploadable()) {
-						props.setNoteCard('noteCard', 'note', 'remotes', props.nookId, null) // medTODO not sure how to handle deletions yet... F19F2731-BA29-406F-8F35-4E399CB40242
-					}
-				}}
-			/>
 		</li>
 	)
 }
diff --git a/shared-dom/src/icons.tsx b/shared-dom/src/icons.tsx
@@ -77,36 +77,28 @@ export function Hamburger(props: ComponentProps<'svg'>) {
 	return (
 		<svg
 			viewBox='0 0 24 24'
-			fill='currentColor'
+			stroke='currentColor'
 			{...props}
 			xmlns='http://www.w3.org/2000/svg'
+			stroke-width='2'
+			stroke-linecap='round'
 		>
-			<g id='SVGRepo_bgCarrier' stroke-width='0' />
-			<g
-				id='SVGRepo_tracerCarrier'
-				stroke-linecap='round'
-				stroke-linejoin='round'
-			/>
-			<g id='SVGRepo_iconCarrier'>
-				<path
-					d='M4 18L20 18'
-					stroke='#000000'
-					stroke-width='2'
-					stroke-linecap='round'
-				/>
-				<path
-					d='M4 12L20 12'
-					stroke='#000000'
-					stroke-width='2'
-					stroke-linecap='round'
-				/>
-				<path
-					d='M4 6L20 6'
-					stroke='#000000'
-					stroke-width='2'
-					stroke-linecap='round'
-				/>
-			</g>
+			<path d='M4 18L20 18' />
+			<path d='M4 12L20 12' />
+			<path d='M4 6L20 6' />
+		</svg>
+	)
+}
+
+export function ExternalLink(props: ComponentProps<'svg'>) {
+	return (
+		<svg
+			viewBox='0 0 32 32'
+			xmlns='http://www.w3.org/2000/svg'
+			fill='currentColor'
+			{...props}
+		>
+			<path d='M 18 5 L 18 7 L 23.5625 7 L 11.28125 19.28125 L 12.71875 20.71875 L 25 8.4375 L 25 14 L 27 14 L 27 5 Z M 5 9 L 5 27 L 23 27 L 23 14 L 21 16 L 21 25 L 7 25 L 7 11 L 16 11 L 18 9 Z' />
 		</svg>
 	)
 }