add vote infra and ui prep for connection ui to backend

ui/package-lock.json

@@ -12,6 +12,7 @@
         "@capacitor/cli": "^6.2.0",
         "@capacitor/core": "^6.2.0",
         "@capacitor/ios": "^6.2.0",
+        "@iconify-prerendered/vue-material-symbols": "^0.28.1732258297",
         "pinia": "^2.2.6",
         "vue": "^3.5.12",
         "vue-router": "^4.4.5"
@@ -1160,6 +1161,17 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@iconify-prerendered/vue-material-symbols": {
+      "version": "0.28.1732258297",
+      "resolved": "https://registry.npmjs.org/@iconify-prerendered/vue-material-symbols/-/vue-material-symbols-0.28.1732258297.tgz",
+      "integrity": "sha512-PFe4eKDuxbXwNfJk0DLWoWkI/CxDMQ1tFh2O5EmYuFVCZeG4janePeShlsPAxyW9+hhthptsaEJLwIGrvTA5Rw==",
+      "funding": {
+        "url": "https://www.buymeacoffee.com/kozack/"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/@ionic/cli-framework-output": {
       "version": "2.2.8",
       "resolved": "https://registry.npmjs.org/@ionic/cli-framework-output/-/cli-framework-output-2.2.8.tgz",

ui/package.json

@@ -19,6 +19,7 @@
     "@capacitor/cli": "^6.2.0",
     "@capacitor/core": "^6.2.0",
     "@capacitor/ios": "^6.2.0",
+    "@iconify-prerendered/vue-material-symbols": "^0.28.1732258297",
     "pinia": "^2.2.6",
     "vue": "^3.5.12",
     "vue-router": "^4.4.5"

ui/src/assets/main.css

@@ -7,8 +7,12 @@
   font-weight: normal;
 }
 
-a,
-.green {
+h4 {
+  font-size: 0.8rem;
+  font-weight: bold;
+}
+
+a, .green {
   text-decoration: none;
   color: hsla(160, 100%, 37%, 1);
   transition: 0.4s;

ui/src/components/CommentComponent.vue

@@ -1,24 +1,52 @@
 <script setup lang="ts">
+import {
+  IconThumbUp,
+  IconThumbDown,
+  IconChatOutline,
+  IconReply,
+} from '@iconify-prerendered/vue-material-symbols';
+import type { Remark } from '@/types/Remark'
+import type { PropType } from 'vue'
 const props = defineProps({
-  content: {
-    type: String,
-    required: true,
-  },
-  avatar: {
-    type: String,
+  remark: {
+    type: Object as PropType<Remark>,
     required: true,
   },
 });
+
+function like() {
+  console.log('Like');
+}
+
+function dislike() {
+  console.log('Dislike');
+}
+
+function reply() {
+  console.log('Reply');
+}
+
+function showReplies() {
+  console.log('Show Replies');
+}
 </script>
 
 <template>
 
   <div class="comment">
-    <img :src="props.avatar" alt="User Avatar"  class="avatar"/>
+    <img :src="props.remark.avatar" alt="User Avatar"  class="avatar"/>
 <!--    <img src="https://cdn.vuetifyjs.com/images/lists/1.jpg" alt="User Avatar"  class="avatar"/>-->
     <div class="comment-content">
-      <p>{{props.content}}</p>
+      <h4>{{props.remark.username}}</h4>
+      <p>{{props.remark.content}}</p>
+      <div class="comment-actions">
+        <button @click="like" title="like"><IconThumbUp />&nbsp;{{props.remark.upvotes}}</button>
+        <button @click="dislike" title="dislike"><IconThumbDown />&nbsp;{{props.remark.downvotes}}</button>
+        <button @click="reply" title="reply"><IconReply /></button>
+        <button @click="showReplies" title="Show replies"><IconChatOutline /></button>
+      </div>
     </div>
+
   </div>
 </template>
 
@@ -41,5 +69,21 @@ const props = defineProps({
   padding: 10px 15px;
   border-radius: 8px;
   flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.comment-actions {
+  display: flex;
+  justify-content: flex-start;
+}
+
+/* remove default button styles */
+.comment-actions button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
 }
 </style>

ui/src/types/Remark.ts

@@ -0,0 +1,12 @@
+export interface Remark {
+  id: string;
+  content: string;
+  commenter: string;
+  username: string;
+  avatar: string;
+  upvotes: number;
+  downvotes: number;
+  parent_id: string;
+  webpage_id: string;
+  created_at: string;
+}

ui/src/views/RemarkView.vue

@@ -3,22 +3,14 @@
 import CommentComponent from '@/components/CommentComponent.vue'
 import OpenGraphComponent from '@/components/OpenGraphComponent.vue'
 import { onMounted, ref, watch } from 'vue'
+import type { Remark } from '@/types/Remark'
 const BACKEND_URL = 'http://localhost:8080';
 
-interface Comment {
-  id: string;
-  content: string;
-  commenter: string;
-  parent_id: string;
-  webpage_id: string;
-  created_at: string;
-}
-
 // const url = ref('https://www.youtube.com/watch?v=iedMwhLrFQQ');
 // const url = ref('https://vimeo.com/867950660');
 const url = ref('');
 const comment = ref('');
-const comments = ref<Comment[]>([]);
+const comments = ref<Remark[]>([]);
 
 onMounted(() => {
   // get target url from query param 'url'
@@ -41,8 +33,9 @@ function getComments() {
     .then((data) => {
       if (!!data) {
         comments.value = data;
+      } else {
+        comments.value = [];
       }
-      console.log(data);
     });
 }
 
@@ -88,7 +81,7 @@ function handleSubmit(e: Event) {
         </form>
 
         <div v-for="(remark, i) in comments" :key="i">
-          <CommentComponent :content="remark.content" :avatar="`https://cdn.vuetifyjs.com/images/lists/1.jpg`" />
+          <CommentComponent :remark="remark" />
         </div>
 
         <div v-if="comments.length === 0">