Getting Started Page, Invite Button Fix, and Modal Collapse Actions

src/components/InvitePeopleModal.vue

@@ -8,15 +8,25 @@
       address listed below using the invite link.
     </p>
 
-    <p class="mt-1">
+    <div class="invite-link-box mt-1">
       <code class="select-all link">{{ inviteLink }}</code>
-    </p>
+      <button class="button invitee-list-action" @click="copyLink" title="Copy invite link">
+        <FontAwesomeIcon :icon="faCopy" />
+      </button>
+    </div>
 
     <p class="mt-2">Enter an email address or NDN name below</p>
 
-    <div class="field mt-2">
-      <input class="input" type="text" :placeholder="`name@example.com or /user-name`" v-model="inviteInput"
-        :disabled="!isOwner" @keydown.enter.prevent="addInvitees(inviteInput)" @paste="addInviteesOnPaste" autofocus />
+    <div class="field has-addons mt-2">
+      <div class="control is-expanded">
+        <input class="input" type="text" :placeholder="`name@example.com or /user-name`" v-model="inviteInput"
+          :disabled="!isOwner" @keydown.enter.prevent="addInvitees(inviteInput)" @paste="addInviteesOnPaste" autofocus />
+      </div>
+      <div class="control">
+        <button class="button is-primary" @click="addInvitees(inviteInput)" :disabled="!isOwner">
+          Add
+        </button>
+      </div>
     </div>
 
     <div class="invitee-management">
@@ -429,9 +439,42 @@ function displayProfileName(name: string): string {
   return utils.stripNdnPrefixForDisplay(name);
 }
 
+async function copyLink() {
+  await navigator.clipboard.writeText(inviteLink.value);
+  Toast.success('Invite link copied to clipboard!');
+}
+
 </script>
 
 <style scoped lang="scss">
+.invite-link-box {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.05);
+  overflow-x: auto;
+
+  code {
+    background: transparent;
+    padding: 0;
+    word-break: break-all;
+    font-size: 0.85rem;
+    flex: 1;
+  }
+
+  .invitee-list-action {
+    flex-shrink: 0;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
 .textarea {
   resize: none;
 }

src/components/ModalComponent.vue

@@ -2,8 +2,8 @@
   <Teleport to="body">
     <Transition name="fade-2">
       <div class="modal is-active anim-fade" v-if="show || loading">
-        <div class="modal-background"></div>
-        <div class="modal-content">
+        <div class="modal-background" @click="emit('close')"></div>
+        <div class="modal-content" @click.stop>
           <LoadingSpinner v-if="loading" class="fixed-center" />
 
           <div class="box" v-if="show">
@@ -18,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, watch } from 'vue';
+import { nextTick, watch, onMounted, onUnmounted } from 'vue';
 
 import LoadingSpinner from '@/components/LoadingSpinner.vue';
 
@@ -35,6 +35,20 @@ const props = defineProps({
 
 const emit = defineEmits(['close']);
 
+function handleEscapeKey(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    emit('close');
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', handleEscapeKey);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleEscapeKey);
+});
+
 watch(
   () => props.show,
   async (show) => {

src/components/NavBar.vue

@@ -43,6 +43,22 @@
               About</router-link
             >
           </li>
+          <li>
+            <router-link to="/help">
+              <FontAwesomeIcon class="mr-1" :icon="faLightbulb" size="sm" />
+              Getting Started</router-link
+            >
+            <ul v-if="route.name === 'help'" class="menu-list help-toc">
+              <li v-for="item in helpTocItems" :key="item.id">
+                <a
+                  :class="{ 'is-active': activeHelpSection === item.id }"
+                  @click="scrollToHelp(item.id)"
+                >
+                  {{ item.label }}
+                </a>
+              </li>
+            </ul>
+          </li>
           <li>
             <a href="https://github.com/pulsejet/ownly" target="_blank">
               <FontAwesomeIcon class="mr-1" :icon="faGithub" size="sm" />
@@ -197,6 +213,7 @@ import {
   faTableCells,
   faQrcode,
   faCircleInfo,
+  faLightbulb,
   faRobot,
   faCircleExclamation,
   faArrowsRotate,
@@ -224,7 +241,7 @@ import QRIdentityModal from './QRIdentityModal.vue';
 const route = useRoute();
 //const router = useRouter();
 const routeIsDashboard = computed(() =>
-  ['dashboard', 'join', 'about'].includes(String(route.name)),
+  ['dashboard', 'join', 'about', 'help'].includes(String(route.name)),
 );
 const routeIsWorkspace = computed(() =>
   ['space-home', 'project', 'discuss', 'project-file'].includes(String(route.name)),
@@ -253,6 +270,22 @@ const projectFiles = ref([] as IProjectFile[]);
 
 const connState = ref(globalThis._ndnd_conn_state);
 
+const helpTocItems = [
+  { id: 'creating-workspace', label: 'Creating a Workspace' },
+  { id: 'joining-workspace', label: 'Joining a Workspace' },
+  { id: 'inviting-others', label: 'Inviting Others' },
+];
+const activeHelpSection = ref('creating-workspace');
+
+function scrollToHelp(id: string) {
+  activeHelpSection.value = id;
+  window.location.hash = id;
+  const el = document.getElementById(id);
+  if (el) {
+    el.scrollIntoView({ behavior: 'auto' });
+  }
+}
+
 const busListeners = {
   'project-list': (projs: IProject[]) => (projects.value = projs),
   'project-files': (name: string, files: IProjectFile[]) => {
@@ -266,6 +299,9 @@ const busListeners = {
       Toast.info('Disconnected - you are offline');
     }
   },
+  'help-toc-active': (id: string) => {
+    activeHelpSection.value = id;
+  },
 };
 
 const showNotifBubble = ref(false);
@@ -307,6 +343,7 @@ onMounted(async () => {
   GlobalBus.addListener('project-files', busListeners['project-files']);
   GlobalBus.addListener('chat-channels', busListeners['chat-channels']);
   GlobalBus.addListener('conn-change', busListeners['conn-change']);
+  GlobalBus.addListener('help-toc-active', busListeners['help-toc-active']);
   interval = setInterval(() => {
     setNotification();
   },
@@ -322,6 +359,7 @@ onUnmounted(() => {
   GlobalBus.removeListener('project-files', busListeners['project-files']);
   GlobalBus.removeListener('chat-channels', busListeners['chat-channels']);
   GlobalBus.removeListener('conn-change', busListeners['conn-change']);
+  GlobalBus.removeListener('help-toc-active', busListeners['help-toc-active']);
   clearInterval(interval);
   preferredDark?.removeEventListener('change', onThemeMediaChange);
 });
@@ -767,5 +805,49 @@ async function sosRequest() {
   &.resizing .sidebar-resizer::before {
     background: rgba(255, 255, 255, 0.22);
   }
+
+  .help-toc {
+    list-style: none;
+    margin: 4px 0px 4px 10px;
+    padding: 0 0 0 16px;
+    border-left: 1px solid rgba(255, 255, 255, 0.12);
+    position: relative;
+
+    li {
+      margin: 0;
+      padding: 0;
+      position: relative;
+
+      a {
+        display: block;
+        padding: 6px 10px;
+        font-size: 0.85rem;
+        color: rgba(255, 255, 255, 0.8);
+        text-decoration: none;
+        border-radius: 6px;
+        position: relative;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.06);
+        }
+
+        &.is-active {
+          background: rgba(255, 255, 255, 0.08);
+          color: white;
+
+          &::before {
+            content: '';
+            position: absolute;
+            left: -17px;
+            top: 0;
+            bottom: 0;
+            width: 3px;
+            border-radius: 6px;
+            background: var(--sidebar-highlight-bg);
+          }
+        }
+      }
+    }
+  }
 }
 </style>

src/components/home/CreateWorkspaceModal.vue

@@ -33,7 +33,7 @@
 
     <div class="field mt-2 has-text-right">
       <div class="control">
-        <button class="button is-light mr-2" :disabled="loading" @click="close">Cancel</button>
+        <button class="button mr-2" :disabled="loading" @click="close">Cancel</button>
         <button class="button is-primary" :disabled="loading" @click="create">Create</button>
       </div>
     </div>

src/components/home/JoinWorkspaceModal.vue

@@ -6,7 +6,7 @@
       <label class="label">Dashboard Label</label>
       <div class="control">
         <input
-          class="input"
+          class="input soft-if-dark"
           type="text"
           placeholder="Marketing Team"
           v-model="opts.label"
@@ -19,22 +19,22 @@
     <div class="field">
       <label class="label">NDN Name</label>
       <div class="control">
-        <input class="input" type="text" placeholder="/my/awesome/workspace" v-model="opts.name" />
+        <input class="input soft-if-dark" type="text" placeholder="/my/awesome/workspace" v-model="opts.name" />
       </div>
       <p class="help">Unique network identifier of the workspace</p>
     </div>
 
     <div class="field">
       <label class="label">Pre-Shared Key</label>
       <div class="control">
-        <input class="input" type="text" placeholder="..." v-model="opts.psk" />
+        <input class="input soft-if-dark" type="text" placeholder="..." v-model="opts.psk" />
       </div>
       <p class="help">Ask the owner of the workspace for the key</p>
     </div>
 
     <div class="field has-text-right">
       <div class="control">
-        <button class="button is-light mr-2" :disabled="loading" @click="close">Cancel</button>
+        <button class="button mr-2" :disabled="loading" @click="close">Cancel</button>
         <button class="button is-primary" :disabled="loading" @click="join">Join</button>
       </div>
     </div>

src/components/landing/DemoCreateWorkspaceModal.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="box soft-if-dark demo-modal">
+    <div class="title is-5 mb-4">Create Workspace</div>
+
+    <div class="field">
+      <label class="label">Dashboard Label</label>
+      <div class="control">
+        <input class="input" type="text" placeholder="Marketing Team" />
+      </div>
+      <p class="help">A readable label for the workspace on your dashboard</p>
+    </div>
+
+    <div class="field">
+      <label class="label">Name Identifier</label>
+      <div class="control">
+        <input class="input" type="text" placeholder="marketing-team" />
+      </div>
+      <p class="help">A unique identifier for the workspace, without spaces or special characters</p>
+    </div>
+
+    <div>
+      Your workspace will have the network name &ndash;<br />
+      <code>/ndn/username/marketing-team</code>
+    </div>
+
+    <div class="field mt-2 has-text-right">
+      <div class="control">
+        <button class="button mr-2">Cancel</button>
+        <button class="button is-primary">Create</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.demo-modal {
+  width: 400px;
+  max-width: 100%;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
+}
+</style>

src/components/landing/DemoDashboard.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="demo-dashboard has-background-primary soft-if-dark">
+    <div class="spacelist">
+      <div class="create box">
+        <div class="box-content">
+          <div class="block">
+            <div class="media-content">
+              <p class="subtitle is-5 soft-if-dark">Don't see what you are looking for?</p>
+            </div>
+          </div>
+
+          <div class="content has-text-right">
+            <button class="button mr-2 mb-2 is-small-caps">
+              Create a new workspace
+            </button>
+            <button class="button mr-2 is-primary is-small-caps soft-if-dark">
+              Join a workspace
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  highlightCreate: {
+    type: Boolean,
+    default: false,
+  },
+  highlightJoin: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.demo-dashboard {
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
+  overflow: hidden;
+}
+
+.spacelist {
+  margin: 0;
+}
+
+.box {
+  border: none;
+  box-shadow: none;
+}
+</style>