Sharing logs (#325)

* Sharing

* Mod UI changes

* Final touches

* update UI

* Run lint

* Addressed changes

theseus_gui/src/pages/instance/Index.vue

@@ -101,6 +101,17 @@
     <template #open_folder> <ClipboardCopyIcon /> Open Folder </template>
     <template #copy_link> <ClipboardCopyIcon /> Copy Link </template>
     <template #open_link> <ClipboardCopyIcon /> Open In Modrinth <ExternalIcon /> </template>
+    <template #copy_names><EditIcon />Copy names</template>
+    <template #copy_slugs><HashIcon />Copy slugs</template>
+    <template #copy_links><GlobeIcon />Copy Links</template>
+    <template #toggle><EditIcon />Toggle selected</template>
+    <template #disable><XIcon />Disable selected</template>
+    <template #enable><CheckCircleIcon />Enable selected</template>
+    <template #hide_show><EyeIcon />Show/Hide unselected</template>
+    <template #update_all
+      ><UpdatedIcon />Update {{ selected.length > 0 ? 'selected' : 'all' }}</template
+    >
+    <template #filter_update><UpdatedIcon />Select Updatable</template>
   </ContextMenu>
   <ExportModal ref="exportModal" :instance="instance" />
 </template>
@@ -120,6 +131,12 @@ import {
   ClipboardCopyIcon,
   PlusIcon,
   ExternalIcon,
+  HashIcon,
+  GlobeIcon,
+  EyeIcon,
+  XIcon,
+  CheckCircleIcon,
+  UpdatedIcon,
 } from 'omorphia'
 import { get, run } from '@/helpers/profile'
 import {
@@ -340,6 +357,7 @@ Button {
   flex-direction: row;
   overflow: auto;
   gap: 1rem;
+  min-height: 100%;
 }
 
 .content {

theseus_gui/src/pages/instance/Logs.vue

@@ -15,8 +15,8 @@
           <CheckIcon v-else />
           {{ copied ? 'Copied' : 'Copy' }}
         </Button>
-        <Button disabled color="primary">
-          <SendIcon />
+        <Button color="primary" @click="share">
+          <ShareIcon />
           Share
         </Button>
         <Button
@@ -38,6 +38,13 @@
         {{ line }} <br />
       </span>
     </div>
+    <ShareModal
+      ref="shareModal"
+      header="Share Log"
+      share-title="Instance Log"
+      share-text="Check out this log from an instance on the Modrinth App"
+      link
+    />
   </Card>
 </template>
 
@@ -48,8 +55,9 @@ import {
   CheckIcon,
   ClipboardCopyIcon,
   DropdownSelect,
-  SendIcon,
+  ShareIcon,
   TrashIcon,
+  ShareModal,
 } from 'omorphia'
 import { delete_logs_by_datetime, get_logs, get_output_by_datetime } from '@/helpers/logs.js'
 import { nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue'
@@ -59,6 +67,7 @@ import { get_output_by_uuid, get_uuids_by_profile_path } from '@/helpers/process
 import { useRoute } from 'vue-router'
 import { process_listener } from '@/helpers/events.js'
 import { handleError } from '@/store/notifications.js'
+import { ofetch } from 'ofetch'
 
 dayjs.extend(calendar)
 
@@ -71,6 +80,17 @@ const props = defineProps({
   },
 })
 
+const logs = ref([])
+await setLogs()
+
+const selectedLogIndex = ref(0)
+const copied = ref(false)
+const logContainer = ref(null)
+const interval = ref(null)
+const userScrolled = ref(false)
+const isAutoScrolling = ref(false)
+const shareModal = ref(null)
+
 async function getLiveLog() {
   if (route.params.id) {
     const uuids = await get_uuids_by_profile_path(route.params.id).catch(handleError)
@@ -101,12 +121,6 @@ async function setLogs() {
   logs.value = [liveLog, ...allLogs]
 }
 
-const logs = ref([])
-await setLogs()
-
-const selectedLogIndex = ref(0)
-const copied = ref(false)
-
 const copyLog = () => {
   if (logs.value[selectedLogIndex.value]) {
     navigator.clipboard.writeText(logs.value[selectedLogIndex.value].stdout)
@@ -114,6 +128,20 @@ const copyLog = () => {
   }
 }
 
+const share = async () => {
+  if (logs.value[selectedLogIndex.value]) {
+    const url = await ofetch('https://api.mclo.gs/1/log', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      body: `content=${encodeURIComponent(logs.value[selectedLogIndex.value].stdout)}`,
+    }).catch(handleError)
+
+    shareModal.value.show(url.url)
+  }
+}
+
 watch(selectedLogIndex, async (newIndex) => {
   copied.value = false
   userScrolled.value = false
@@ -143,11 +171,6 @@ const deleteLog = async () => {
   }
 }
 
-const logContainer = ref(null)
-const interval = ref(null)
-const userScrolled = ref(false)
-const isAutoScrolling = ref(false)
-
 function handleUserScroll() {
   if (!isAutoScrolling.value) {
     userScrolled.value = true