✨ Editable realm

pkg/views/src/components/realms/RealmAction.vue

@@ -0,0 +1,36 @@
+<template>
+  <v-menu>
+    <template #activator="{ props }">
+      <v-btn v-bind="props" icon="mdi-dots-vertical" variant="text" size="x-small" />
+    </template>
+
+    <v-list density="compact" lines="one">
+      <v-list-item disabled append-icon="mdi-flag" title="Report" />
+      <v-list-item v-if="isOwned" append-icon="mdi-pencil" title="Edit" @click="editRealm" />
+      <v-list-item v-if="isOwned" append-icon="mdi-delete" title="Delete" @click="deleteRealm" />
+    </v-list>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+import { useRealms } from "@/stores/realms";
+import { useUserinfo } from "@/stores/userinfo";
+import { computed } from "vue"
+
+const id = useUserinfo()
+const realms = useRealms()
+
+const props = defineProps<{ item: any }>()
+
+const isOwned = computed(() => props.item?.account_id === id.userinfo.data.id)
+
+function editRealm() {
+  realms.related.edit_to = props.item
+  realms.show.editor = true
+}
+
+function deleteRealm() {
+  realms.related.delete_to = props.item
+  realms.show.delete = true
+}
+</script>

pkg/views/src/components/realms/RealmEditor.vue

@@ -1,5 +1,4 @@
 <template>
-  <v-dialog :model-value="props.show" @update:model-value="(val) => emits('update:show', val)" class="max-w-[540px]">
   <v-card title="Organize a realm" prepend-icon="mdi-account-multiple" :loading="loading">
     <v-form @submit.prevent="submit">
       <v-card-text>
@@ -18,20 +17,24 @@
       <v-card-actions>
         <v-spacer></v-spacer>
 
-          <v-btn type="reset" color="grey-darken-3" @click="emits('update:show', false)">Cancel</v-btn>
+        <v-btn type="reset" color="grey-darken-3" @click="realms.show.editor = false">Cancel</v-btn>
         <v-btn type="submit" :disabled="loading">Save</v-btn>
       </v-card-actions>
     </v-form>
   </v-card>
-  </v-dialog>
+
+  <!-- @vue-ignore -->
+  <v-snackbar v-model="error" :timeout="5000">Something went wrong... {{ error }}</v-snackbar>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue"
+import { ref, watch } from "vue"
 import { getAtk } from "@/stores/userinfo"
+import { useRealms } from "@/stores/realms"
 
-const props = defineProps<{ show: boolean }>()
-const emits = defineEmits(["update:show", "relist"])
+const emits = defineEmits(["relist"])
+
+const realms = useRealms()
 
 const realmTypeOptions = [
   { label: "Public Realm", value: 0 },
@@ -53,9 +56,12 @@ async function submit(evt: SubmitEvent) {
   const payload = data.value
   if (!payload.name) return
 
+  const url = realms.related.edit_to ? `/api/realms/${realms.related.edit_to?.id}` : "/api/moments";
+  const method = realms.related.edit_to ? "PUT" : "POST";
+
   loading.value = true
-  const res = await fetch("/api/realms", {
-    method: "POST",
+  const res = await fetch(url, {
+    method: method,
     headers: { "Content-Type": "application/json", Authorization: `Bearer ${getAtk()}` },
     body: JSON.stringify(payload)
   })
@@ -64,8 +70,19 @@ async function submit(evt: SubmitEvent) {
   } else {
     emits("relist")
     form.reset()
-    emits("update:show", false)
+    realms.done = true
+    realms.show.editor = false
   }
   loading.value = false
 }
+
+watch(
+  realms.related,
+  (val) => {
+    if (val.edit_to) {
+      data.value = JSON.parse(JSON.stringify(val.edit_to))
+    }
+  },
+  { immediate: true }
+)
 </script>

pkg/views/src/components/realms/RealmList.vue

@@ -6,52 +6,34 @@
     </v-list-subheader>
 
     <v-list-item
-      v-for="item in realms"
+      v-for="item in realms.available"
       exact
       prepend-icon="mdi-account-multiple"
-      :to="{ name: 'realms.details', params: { realmId: item.id } }"
+      :to="{ name: 'realms.page', params: { realmId: item.id } }"
       :title="item.name"
     />
 
-    <v-divider v-if="realms.length > 0" class="border-opacity-75 my-2" />
+    <v-divider v-if="realms.available.length > 0" class="border-opacity-75 my-2" />
 
     <v-list-item
       prepend-icon="mdi-plus"
       title="Create a realm"
       :disabled="!id.userinfo.isLoggedIn"
-      @click="creating = true"
+      @click="createRealm"
     />
   </v-list>
-
-  <realm-editor v-model:show="creating" @relist="list" />
-
-  <!-- @vue-ignore -->
-  <v-snackbar v-model="error" :timeout="5000">Something went wrong... {{ error }}</v-snackbar>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue"
 import { useUserinfo } from "@/stores/userinfo"
-import { useEditor } from "@/stores/editor"
-import RealmEditor from "@/components/realms/RealmEditor.vue"
+import { useRealms } from "@/stores/realms"
 
 const id = useUserinfo()
-const editor = useEditor()
+const realms = useRealms()
 
-const realms = computed(() => editor.availableRealms)
-
-const creating = ref(false)
-
-const error = ref<string | null>(null)
-const reverting = ref(false)
-
-async function list() {
-  reverting.value = true
-  try {
-    await editor.listRealms()
-  } catch (err) {
-    error.value = (err as Error).message
-  }
-  reverting.value = false
+function createRealm() {
+  realms.related.edit_to = null
+  realms.related.delete_to = null
+  realms.show.editor = true
 }
 </script>

pkg/views/src/components/realms/RealmTools.vue

@@ -0,0 +1,12 @@
+<template>
+  <v-dialog v-model="realms.show.editor" class="max-w-[540px]">
+    <realm-editor @relist="realms.list" />
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { useRealms } from "@/stores/realms"
+import RealmEditor from "@/components/realms/RealmEditor.vue"
+
+const realms = useRealms()
+</script>

pkg/views/src/layouts/master.vue

@@ -88,7 +88,8 @@
     </div>
   </v-menu>
 
-  <post-action />
+  <post-tools />
+  <realm-tools />
 </template>
 
 <script setup lang="ts">
@@ -96,7 +97,8 @@ import { computed, ref } from "vue"
 import { useEditor } from "@/stores/editor"
 import { useUserinfo } from "@/stores/userinfo"
 import { useWellKnown } from "@/stores/wellKnown"
-import PostAction from "@/components/publish/PostAction.vue"
+import PostTools from "@/components/publish/PostTools.vue"
+import RealmTools from "@/components/realms/RealmTools.vue"
 import RealmList from "@/components/realms/RealmList.vue";
 
 const id = useUserinfo()

pkg/views/src/router/index.ts

@@ -28,8 +28,8 @@ const router = createRouter({
 
         {
           path: "/realms/:realmId",
-          name: "realms.details",
-          component: () => import("@/views/realms/details.vue")
+          name: "realms.page",
+          component: () => import("@/views/realms/page.vue")
         }
       ]
     }

pkg/views/src/stores/editor.ts

@@ -1,6 +1,5 @@
 import { defineStore } from "pinia"
 import { reactive, ref } from "vue"
-import { checkLoggedIn, getAtk } from "@/stores/userinfo"
 
 export const useEditor = defineStore("editor", () => {
   const done = ref(false)
@@ -26,22 +25,5 @@ export const useEditor = defineStore("editor", () => {
     delete_to: null
   })
 
-  const availableRealms = ref<any[]>([])
-
-  async function listRealms() {
-    if (!checkLoggedIn()) return
-
-    const res = await fetch("/api/realms/me/available", {
-      headers: { Authorization: `Bearer ${getAtk()}` }
-    })
-    if (res.status !== 200) {
-      throw new Error(await res.text())
-    } else {
-      availableRealms.value = await res.json()
-    }
-  }
-
-  listRealms().then(() => console.log("[STARTUP HOOK] Fetch available realm successes."))
-
-  return { show, related, availableRealms, listRealms, done }
+  return { show, related, done }
 })

pkg/views/src/stores/realms.ts

@@ -0,0 +1,36 @@
+import { reactive, ref } from "vue"
+import { defineStore } from "pinia"
+import { checkLoggedIn, getAtk } from "@/stores/userinfo"
+
+export const useRealms = defineStore("realms", () => {
+  const done = ref(false)
+
+  const show = reactive({
+    editor: false,
+    delete: false
+  })
+
+  const related_to = reactive<{ edit_to: any; delete_to: any }>({
+    edit_to: null,
+    delete_to: null
+  })
+
+  const available = ref<any[]>([])
+
+  async function list() {
+    if (!checkLoggedIn()) return
+
+    const res = await fetch("/api/realms/me/available", {
+      headers: { Authorization: `Bearer ${getAtk()}` }
+    })
+    if (res.status !== 200) {
+      throw new Error(await res.text())
+    } else {
+      available.value = await res.json()
+    }
+  }
+
+  list().then(() => console.log("[STARTUP HOOK] Fetch available realm successes."))
+
+  return { done, show, related: related_to, available, list }
+})

pkg/views/src/views/realms/details.vue

@@ -1,83 +0,0 @@
-<template>
-  <v-container class="flex max-md:flex-col gap-3 overflow-auto max-h-[calc(100vh-64px)] no-scrollbar">
-    <div class="timeline flex-grow-1 mt-[-16px]">
-      <post-list v-model:posts="posts" :loader="readMore" />
-    </div>
-
-    <div class="aside sticky top-0 w-full h-fit md:min-w-[280px] md:max-w-[320px] max-md:order-first">
-      <v-card title="Realm Info" :loading="loading">
-        <template #text>
-          <h2 class="font-medium">Name</h2>
-          <p>{{ metadata?.name }}</p>
-
-          <h2 class="font-medium mt-2">Description</h2>
-          <p>{{ metadata?.description }}</p>
-        </template>
-      </v-card>
-    </div>
-  </v-container>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref } from "vue";
-import { request } from "@/scripts/request";
-import { useRoute } from "vue-router";
-import PostList from "@/components/posts/PostList.vue";
-
-const route = useRoute();
-
-const loading = ref(false);
-const error = ref<string | null>(null);
-const pagination = reactive({ page: 1, pageSize: 10, total: 0 });
-
-const metadata = ref<any>(null);
-const posts = ref<any[]>([]);
-
-async function readMetadata() {
-  loading.value = true;
-  const res = await request(`/api/realms/${route.params.realmId}`);
-  if (res.status !== 200) {
-    error.value = await res.text();
-  } else {
-    error.value = null;
-    metadata.value = await res.json();
-  }
-  loading.value = false;
-}
-
-async function readPosts() {
-  const res = await request(`/api/feed?` + new URLSearchParams({
-    take: pagination.pageSize.toString(),
-    offset: ((pagination.page - 1) * pagination.pageSize).toString(),
-    realmId: route.params.realmId as string
-  }));
-  if (res.status !== 200) {
-    error.value = await res.text();
-  } else {
-    error.value = null;
-    const data = await res.json();
-    pagination.total = data["count"];
-    posts.value.push(...(data["data"] ?? []));
-  }
-}
-
-async function readMore({ done }: any) {
-  // Reach the end of data
-  if (pagination.total <= pagination.page * pagination.pageSize) {
-    done("empty");
-    return;
-  }
-
-  pagination.page++;
-  await readPosts();
-
-  if (error.value != null) done("error");
-  else {
-    if (pagination.total > 0) done("ok");
-    else done("empty");
-  }
-}
-
-readMetadata();
-readPosts();
-</script>

pkg/views/src/views/realms/page.vue

@@ -0,0 +1,110 @@
+<template>
+  <v-container class="flex max-md:flex-col gap-3 overflow-auto max-h-[calc(100vh-64px)] no-scrollbar">
+    <div class="timeline flex-grow-1 mt-[-16px]">
+      <post-list v-model:posts="posts" :loader="readMore" />
+    </div>
+
+    <div class="aside sticky top-0 w-full h-fit md:min-w-[280px] md:max-w-[320px] max-md:order-first">
+      <v-card title="Realm Info" :loading="loading">
+        <template #title>
+          <div class="flex justify-between">
+            <span>Realm Info</span>
+
+            <realm-action :item="metadata" />
+          </div>
+        </template>
+        <template #text>
+          <div>
+            <h2 class="font-medium">Name</h2>
+            <p>{{ metadata?.name }}</p>
+
+            <h2 class="font-medium mt-2">Description</h2>
+            <div v-html="parseContent(metadata?.description ?? '')"></div>
+          </div>
+        </template>
+      </v-card>
+    </div>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, watch } from "vue"
+import { request } from "@/scripts/request"
+import { useRealms } from "@/stores/realms"
+import { useRoute } from "vue-router"
+import { parse } from "marked"
+import dompurify from "dompurify"
+import PostList from "@/components/posts/PostList.vue"
+import RealmAction from "@/components/realms/RealmAction.vue"
+
+const route = useRoute()
+const realms = useRealms()
+
+const loading = ref(false)
+const error = ref<string | null>(null)
+const pagination = reactive({ page: 1, pageSize: 10, total: 0 })
+
+const metadata = ref<any>(null)
+const posts = ref<any[]>([])
+
+async function readMetadata() {
+  loading.value = true
+  const res = await request(`/api/realms/${route.params.realmId}`)
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    error.value = null
+    metadata.value = await res.json()
+  }
+  loading.value = false
+}
+
+async function readPosts() {
+  const res = await request(
+    `/api/feed?` +
+      new URLSearchParams({
+        take: pagination.pageSize.toString(),
+        offset: ((pagination.page - 1) * pagination.pageSize).toString(),
+        realmId: route.params.realmId as string
+      })
+  )
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    error.value = null
+    const data = await res.json()
+    pagination.total = data["count"]
+    posts.value.push(...(data["data"] ?? []))
+  }
+}
+
+async function readMore({ done }: any) {
+  // Reach the end of data
+  if (pagination.total <= pagination.page * pagination.pageSize) {
+    done("empty")
+    return
+  }
+
+  pagination.page++
+  await readPosts()
+
+  if (error.value != null) done("error")
+  else {
+    if (pagination.total > 0) done("ok")
+    else done("empty")
+  }
+}
+
+readMetadata()
+readPosts()
+
+watch(realms, (val) => {
+  if (val.done) {
+    readMetadata().then(() => (realms.done = false))
+  }
+})
+
+function parseContent(src: string): string {
+  return dompurify().sanitize(parse(src) as string)
+}
+</script>