Merge pull request #86 from cytechmobile/refactor/fa31a13-address-walkthrough-comments

refactor(repo): address walkthrough comments

Author: QZera

README.md

@@ -20,11 +20,11 @@ Requests, Issues, etc, via a peer-to-peer, free and open-source network built on
 - Move Cards between Columns
 - Create New Issues
 - Filter by Issues or Patches
-- [Radicle Interface Integration](#radicle-interface-integration)
+- [Radicle Explorer Integration](#radicle-explorer-integration)
 
-### Radicle Interface Integration
+### Radicle Explorer Integration
 
-Radicle Planning Boards is built with [Radicle Interface](https://app.radicle.xyz/nodes/seed.radicle.garden/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5)
+Radicle Planning Boards is built with [Radicle Explorer](https://app.radicle.xyz/nodes/seed.radicle.garden/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5)
 integration in mind, a web-based client for the [Radicle](https://radicle.xyz/) peer-to-peer
 network. This allows it to leverage features like authentication, themes, and more to provide a
 seamless experience for users.
@@ -38,10 +38,10 @@ feature set and not require its own database.
 
 ## Self hosting
 
-You will need two domains, one for the Radicle Planning Boards and another for the Radicle Interface.
+You will need two domains, one for the Radicle Planning Boards and another for the Radicle Explorer.
 
 1. Deploy the `radicle-planning-boards` repository
-    - Set the `NUXT_PUBLIC_PARENT_ORIGIN` environment variable to your Radicle Interface domain
+    - Set the `NUXT_PUBLIC_PARENT_ORIGIN` environment variable to your Radicle Explorer domain
 2. Deploy the [radicle-interface-with-planning-boards](https://github.com/maninak/radicle-interface-with-planning-boards)
 repository
     - Update `src/config.json` with your Radicle Planning Boards domain e.g.

assets/css/tailwind.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 /*
- * Radicle theme colors copied over from `radicle-interface`
+ * Radicle theme colors copied over from `radicle-explorer`
  * https://app.radicle.xyz/nodes/seed.radicle.xyz/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5/tree/public/colors.css
  * then sorted alphabetically
  */

components/ColumnCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { taskTruncatedIdLength } from '~/constants/tasks'
+import { truncatedHashLength } from '~/constants/config'
 import type { TaskHighlights } from '~/types/tasks'
 
 interface Props {
@@ -61,7 +61,7 @@ function truncateSegmentedText(segments: string[], limit: number): string[] {
 
       <pre
         class="text-xs font-medium text-rad-foreground-emphasized"
-      ><TextWithHighlights :content="highlights?.id ? truncateSegmentedText(highlights?.id, taskTruncatedIdLength) :  id.slice(0, taskTruncatedIdLength)" /></pre>
+      ><TextWithHighlights :content="highlights?.id ? truncateSegmentedText(highlights?.id, truncatedHashLength) :  id.slice(0, truncatedHashLength)" /></pre>
     </small>
 
     <h4>

components/ColumnIssueCard.vue

@@ -21,7 +21,7 @@ const status = computed<ColumnCardStatus>(() => ({
   icon: statusIconMap[props.issue.state.status],
 }))
 
-const radicleInterfaceBaseUrl = useRadicleInterfaceBaseUrl()
+const hostAppBaseUrl = useHostAppBaseUrl()
 const isDebugging = useIsDebugging()
 
 // TODO: zac reduce duplication between ColumnIssueCard and ColumnPatchCard
@@ -53,7 +53,7 @@ const highlights = computed(() => {
 const href = computed(() =>
   new URL(
     `/nodes/${route.params.node}/${route.params.rid}/issues/${props.issue.id}`,
-    radicleInterfaceBaseUrl,
+    hostAppBaseUrl,
   ).toString(),
 )
 </script>

components/ColumnPatchCard.vue

@@ -26,7 +26,7 @@ const status = computed<ColumnCardStatus>(() => ({
   icon: statusIconMap[props.patch.state.status],
 }))
 
-const radicleInterfaceBaseUrl = useRadicleInterfaceBaseUrl()
+const hostAppBaseUrl = useHostAppBaseUrl()
 const isDebugging = useIsDebugging()
 
 // TODO: zac reduce duplication between ColumnIssueCard and ColumnPatchCard
@@ -58,7 +58,7 @@ const highlights = computed(() => {
 const href = computed(() =>
   new URL(
     `/nodes/${route.params.node}/${route.params.rid}/patches/${props.patch.id}`,
-    radicleInterfaceBaseUrl,
+    hostAppBaseUrl,
   ).toString(),
 )
 </script>

components/NewColumn.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 const board = useBoardStore()
 
-const formRef = ref<HTMLFormElement | null>(null)
-const titleInputRef = ref<HTMLInputElement | null>(null)
+const formRef = ref<HTMLFormElement>()
+const titleInputRef = ref<HTMLInputElement>()
 const isCreatingNewColumn = ref(false)
 const title = ref('')
 

components/NewColumnIssueCard.vue

@@ -4,8 +4,8 @@ const emit = defineEmits<{
   close: []
 }>()
 
-const formRef = ref<HTMLFormElement | null>(null)
-const titleInputRef = ref<HTMLInputElement | null>(null)
+const formRef = ref<HTMLFormElement>()
+const titleInputRef = ref<HTMLInputElement>()
 const title = ref('')
 
 onClickOutside(formRef, () => {

composables/use-host-app-base-url.ts

@@ -0,0 +1,18 @@
+import { useStorage } from '@vueuse/core'
+
+const defaultBaseUrl = 'https://app.radicle.xyz'
+
+export function useHostAppBaseUrl(): string {
+  const { baseUrl } = useRoute().query
+  const configuredBaseUrl = useStorage('RPB_config-host-app-base-url', defaultBaseUrl)
+
+  try {
+    if (typeof baseUrl === 'string') {
+      return new URL(baseUrl).origin
+    }
+
+    return new URL(configuredBaseUrl.value).origin
+  } catch {
+    return defaultBaseUrl
+  }
+}

composables/use-host-app-messaging.ts

@@ -0,0 +1,62 @@
+import * as v from 'valibot'
+
+type Message<
+  Type extends string,
+  Payload extends object | undefined = undefined,
+> = Payload extends object ? { type: Type } & Payload : { type: Type }
+
+export type MessageToHostApp =
+  | Message<'request-auth-token'>
+  | Message<'request-query-params'>
+  | Message<'set-query-params', { queryParams: Record<string, string | undefined> }>
+
+const messageFromHostApp = v.union([
+  v.object({
+    type: v.literal('theme'),
+    theme: v.picklist(['light', 'dark']),
+  }),
+  v.object({
+    type: v.literal('set-auth-token'),
+    authToken: v.string(),
+  }),
+  v.object({
+    type: v.literal('remove-auth-token'),
+  }),
+  v.object({
+    type: v.literal('query-params-updated'),
+    queryParams: v.record(v.string(), v.string()),
+  }),
+])
+
+export type MessageFromHostApp = v.InferInput<typeof messageFromHostApp>
+
+export function useHostAppMessaging() {
+  const { parentOrigin } = useRuntimeConfig().public
+
+  function onHostAppMessage<MessageType extends MessageFromHostApp['type']>(
+    type: MessageType,
+    callback: (message: Extract<MessageFromHostApp, { type: MessageType }>) => void,
+  ): void {
+    useEventListener('message', (event) => {
+      if (event.origin !== parentOrigin) {
+        return
+      }
+
+      const result = v.safeParse(messageFromHostApp, event.data)
+      if (!result.success || result.output.type !== type) {
+        return
+      }
+
+      callback(result.output as Extract<MessageFromHostApp, { type: MessageType }>)
+    })
+  }
+
+  function notifyHostApp(message: MessageToHostApp): void {
+    globalThis.window.parent.postMessage(message, parentOrigin)
+  }
+
+  return {
+    onHostAppMessage,
+    notifyHostApp,
+  }
+}