Add TailwindCSS (#1252)

* Setup TailwindCSS

* Fully setup configuration

* Refactor some tailwind variables

apps/frontend/src/components/ui/report/ReportInfo.vue

@@ -12,7 +12,7 @@
           <span class="title">{{ report.project.title }}</span>
           <span>{{
             $formatProjectType(
-              $getProjectTypeForUrl(report.project.project_type, report.project.loaders)
+              $getProjectTypeForUrl(report.project.project_type, report.project.loaders),
             )
           }}</span>
         </div>
@@ -42,7 +42,7 @@
           <span class="title">{{ report.project.title }}</span>
           <span>{{
             $formatProjectType(
-              $getProjectTypeForUrl(report.project.project_type, report.project.loaders)
+              $getProjectTypeForUrl(report.project.project_type, report.project.loaders),
             )
           }}</span>
         </div>
@@ -88,14 +88,14 @@
 </template>
 
 <script setup>
-import { renderHighlightedString } from '~/helpers/highlight.js'
-import Avatar from '~/components/ui/Avatar.vue'
-import Badge from '~/components/ui/Badge.vue'
-import ReportIcon from '~/assets/images/utils/report.svg?component'
-import UnknownIcon from '~/assets/images/utils/unknown.svg?component'
-import VersionIcon from '~/assets/images/utils/version.svg?component'
-import ThreadSummary from '~/components/ui/thread/ThreadSummary.vue'
-import CopyCode from '~/components/ui/CopyCode.vue'
+import { renderHighlightedString } from "~/helpers/highlight.js";
+import Avatar from "~/components/ui/Avatar.vue";
+import Badge from "~/components/ui/Badge.vue";
+import ReportIcon from "~/assets/images/utils/report.svg?component";
+import UnknownIcon from "~/assets/images/utils/unknown.svg?component";
+import VersionIcon from "~/assets/images/utils/version.svg?component";
+import ThreadSummary from "~/components/ui/thread/ThreadSummary.vue";
+import CopyCode from "~/components/ui/CopyCode.vue";
 
 defineProps({
   report: {
@@ -122,9 +122,9 @@ defineProps({
     type: Object,
     required: true,
   },
-})
+});
 
-const flags = useFeatureFlags()
+const flags = useFeatureFlags();
 </script>
 
 <style lang="scss" scoped>

apps/frontend/src/components/ui/report/ReportView.vue

@@ -21,10 +21,10 @@
   </div>
 </template>
 <script setup>
-import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'
-import ConversationThread from '~/components/ui/thread/ConversationThread.vue'
-import ReportInfo from '~/components/ui/report/ReportInfo.vue'
-import { addReportMessage } from '~/helpers/threads.js'
+import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
+import ConversationThread from "~/components/ui/thread/ConversationThread.vue";
+import ReportInfo from "~/components/ui/report/ReportInfo.vue";
+import { addReportMessage } from "~/helpers/threads.js";
 
 const props = defineProps({
   reportId: {
@@ -39,76 +39,76 @@ const props = defineProps({
     type: Object,
     required: true,
   },
-})
+});
 
-const report = ref(null)
+const report = ref(null);
 
 await fetchReport().then((result) => {
-  report.value = result
-})
+  report.value = result;
+});
 
 const { data: rawThread } = await useAsyncData(`thread/${report.value.thread_id}`, () =>
-  useBaseFetch(`thread/${report.value.thread_id}`)
-)
-const thread = computed(() => addReportMessage(rawThread.value, report.value))
+  useBaseFetch(`thread/${report.value.thread_id}`),
+);
+const thread = computed(() => addReportMessage(rawThread.value, report.value));
 
 async function updateThread(newThread) {
-  rawThread.value = newThread
-  report.value = await fetchReport()
+  rawThread.value = newThread;
+  report.value = await fetchReport();
 }
 
 async function fetchReport() {
   const { data: rawReport } = await useAsyncData(`report/${props.reportId}`, () =>
-    useBaseFetch(`report/${props.reportId}`)
-  )
-  rawReport.value.item_id = rawReport.value.item_id.replace(/"/g, '')
+    useBaseFetch(`report/${props.reportId}`),
+  );
+  rawReport.value.item_id = rawReport.value.item_id.replace(/"/g, "");
 
-  const userIds = []
-  userIds.push(rawReport.value.reporter)
-  if (rawReport.value.item_type === 'user') {
-    userIds.push(rawReport.value.item_id)
+  const userIds = [];
+  userIds.push(rawReport.value.reporter);
+  if (rawReport.value.item_type === "user") {
+    userIds.push(rawReport.value.item_id);
   }
 
-  const versionId = rawReport.value.item_type === 'version' ? rawReport.value.item_id : null
+  const versionId = rawReport.value.item_type === "version" ? rawReport.value.item_id : null;
 
-  let users = []
+  let users = [];
   if (userIds.length > 0) {
     const { data: usersVal } = await useAsyncData(`users?ids=${JSON.stringify(userIds)}`, () =>
-      useBaseFetch(`users?ids=${encodeURIComponent(JSON.stringify(userIds))}`)
-    )
-    users = usersVal.value
+      useBaseFetch(`users?ids=${encodeURIComponent(JSON.stringify(userIds))}`),
+    );
+    users = usersVal.value;
   }
 
-  let version = null
+  let version = null;
   if (versionId) {
     const { data: versionVal } = await useAsyncData(`version/${versionId}`, () =>
-      useBaseFetch(`version/${versionId}`)
-    )
-    version = versionVal.value
+      useBaseFetch(`version/${versionId}`),
+    );
+    version = versionVal.value;
   }
 
   const projectId = version
     ? version.project_id
-    : rawReport.value.item_type === 'project'
-    ? rawReport.value.item_id
-    : null
+    : rawReport.value.item_type === "project"
+      ? rawReport.value.item_id
+      : null;
 
-  let project = null
+  let project = null;
   if (projectId) {
     const { data: projectVal } = await useAsyncData(`project/${projectId}`, () =>
-      useBaseFetch(`project/${projectId}`)
-    )
-    project = projectVal.value
+      useBaseFetch(`project/${projectId}`),
+    );
+    project = projectVal.value;
   }
 
-  const reportData = rawReport.value
-  reportData.project = project
-  reportData.version = version
-  reportData.reporterUser = users.find((user) => user.id === rawReport.value.reporter)
-  if (rawReport.value.item_type === 'user') {
-    reportData.user = users.find((user) => user.id === rawReport.value.item_id)
+  const reportData = rawReport.value;
+  reportData.project = project;
+  reportData.version = version;
+  reportData.reporterUser = users.find((user) => user.id === rawReport.value.reporter);
+  if (rawReport.value.item_type === "user") {
+    reportData.user = users.find((user) => user.id === rawReport.value.item_id);
   }
-  return reportData
+  return reportData;
 }
 </script>
 <style lang="scss" scoped>

apps/frontend/src/components/ui/report/ReportsList.vue

@@ -4,7 +4,7 @@
     v-for="report in reports.filter(
       (x) =>
         (moderation || x.reporterUser.id === auth.user.id) &&
-        (viewMode === 'open' ? x.open : !x.open)
+        (viewMode === 'open' ? x.open : !x.open),
     )"
     :key="report.id"
     :report="report"
@@ -17,9 +17,9 @@
   <p v-if="reports.length === 0">You don't have any active reports.</p>
 </template>
 <script setup>
-import Chips from '~/components/ui/Chips.vue'
-import ReportInfo from '~/components/ui/report/ReportInfo.vue'
-import { addReportMessage } from '~/helpers/threads.js'
+import Chips from "~/components/ui/Chips.vue";
+import ReportInfo from "~/components/ui/report/ReportInfo.vue";
+import { addReportMessage } from "~/helpers/threads.js";
 
 defineProps({
   moderation: {
@@ -30,68 +30,68 @@ defineProps({
     type: Object,
     required: true,
   },
-})
+});
 
-const viewMode = ref('open')
-const reports = ref([])
+const viewMode = ref("open");
+const reports = ref([]);
 
-let { data: rawReports } = await useAsyncData('report', () => useBaseFetch('report'))
+let { data: rawReports } = await useAsyncData("report", () => useBaseFetch("report"));
 
 rawReports = rawReports.value.map((report) => {
-  report.item_id = report.item_id.replace(/"/g, '')
-  return report
-})
+  report.item_id = report.item_id.replace(/"/g, "");
+  return report;
+});
 
-const reporterUsers = rawReports.map((report) => report.reporter)
+const reporterUsers = rawReports.map((report) => report.reporter);
 const reportedUsers = rawReports
-  .filter((report) => report.item_type === 'user')
-  .map((report) => report.item_id)
-const versionReports = rawReports.filter((report) => report.item_type === 'version')
-const versionIds = [...new Set(versionReports.map((report) => report.item_id))]
-const userIds = [...new Set(reporterUsers.concat(reportedUsers))]
+  .filter((report) => report.item_type === "user")
+  .map((report) => report.item_id);
+const versionReports = rawReports.filter((report) => report.item_type === "version");
+const versionIds = [...new Set(versionReports.map((report) => report.item_id))];
+const userIds = [...new Set(reporterUsers.concat(reportedUsers))];
 const threadIds = [
   ...new Set(rawReports.filter((report) => report.thread_id).map((report) => report.thread_id)),
-]
+];
 
 const [{ data: users }, { data: versions }, { data: threads }] = await Promise.all([
   await useAsyncData(`users?ids=${JSON.stringify(userIds)}`, () =>
-    useBaseFetch(`users?ids=${encodeURIComponent(JSON.stringify(userIds))}`)
+    useBaseFetch(`users?ids=${encodeURIComponent(JSON.stringify(userIds))}`),
   ),
   await useAsyncData(`versions?ids=${JSON.stringify(versionIds)}`, () =>
-    useBaseFetch(`versions?ids=${encodeURIComponent(JSON.stringify(versionIds))}`)
+    useBaseFetch(`versions?ids=${encodeURIComponent(JSON.stringify(versionIds))}`),
   ),
   await useAsyncData(`threads?ids=${JSON.stringify(threadIds)}`, () =>
-    useBaseFetch(`threads?ids=${encodeURIComponent(JSON.stringify(threadIds))}`)
+    useBaseFetch(`threads?ids=${encodeURIComponent(JSON.stringify(threadIds))}`),
   ),
-])
+]);
 
 const reportedProjects = rawReports
-  .filter((report) => report.item_type === 'project')
-  .map((report) => report.item_id)
-const versionProjects = versions.value.map((version) => version.project_id)
-const projectIds = [...new Set(reportedProjects.concat(versionProjects))]
+  .filter((report) => report.item_type === "project")
+  .map((report) => report.item_id);
+const versionProjects = versions.value.map((version) => version.project_id);
+const projectIds = [...new Set(reportedProjects.concat(versionProjects))];
 
 const { data: projects } = await useAsyncData(`projects?ids=${JSON.stringify(projectIds)}`, () =>
-  useBaseFetch(`projects?ids=${encodeURIComponent(JSON.stringify(projectIds))}`)
-)
+  useBaseFetch(`projects?ids=${encodeURIComponent(JSON.stringify(projectIds))}`),
+);
 
 reports.value = rawReports.map((report) => {
-  report.reporterUser = users.value.find((user) => user.id === report.reporter)
-  if (report.item_type === 'user') {
-    report.user = users.value.find((user) => user.id === report.item_id)
-  } else if (report.item_type === 'project') {
-    report.project = projects.value.find((project) => project.id === report.item_id)
-  } else if (report.item_type === 'version') {
-    report.version = versions.value.find((version) => version.id === report.item_id)
-    report.project = projects.value.find((project) => project.id === report.version.project_id)
+  report.reporterUser = users.value.find((user) => user.id === report.reporter);
+  if (report.item_type === "user") {
+    report.user = users.value.find((user) => user.id === report.item_id);
+  } else if (report.item_type === "project") {
+    report.project = projects.value.find((project) => project.id === report.item_id);
+  } else if (report.item_type === "version") {
+    report.version = versions.value.find((version) => version.id === report.item_id);
+    report.project = projects.value.find((project) => project.id === report.version.project_id);
   }
   if (report.thread_id) {
     report.thread = addReportMessage(
       threads.value.find((thread) => report.thread_id === thread.id),
-      report
-    )
+      report,
+    );
   }
-  report.open = true
-  return report
-})
+  report.open = true;
+  return report;
+});
 </script>