Merge pull request #94 from 0x4007/feat/proposal-view

feat: proposal viewer
ubiquity · Sep 26, 2024 · e97acd4 · e97acd4
2 parents be6673d + fcaee27
commit e97acd4
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 23 deletions.
diff --git a/src/home/authentication.ts b/src/home/authentication.ts
@@ -4,6 +4,7 @@ import { getGitHubUser } from "./getters/get-github-user";
 import { GitHubUser } from "./github-types";
 import { displayGitHubUserInformation } from "./rendering/display-github-user-information";
 import { renderGitHubLoginButton } from "./rendering/render-github-login-button";
+import { viewToggle } from "./fetch-github/fetch-and-display-previews";
 
 export async function authentication() {
   const accessToken = await getGitHubAccessToken();
@@ -15,5 +16,6 @@ export async function authentication() {
   if (gitHubUser) {
     trackDevRelReferral(gitHubUser.login + "|" + gitHubUser.id);
     await displayGitHubUserInformation(gitHubUser);
+    viewToggle.disabled = false;
   }
 }
diff --git a/src/home/fetch-github/fetch-and-display-previews.ts b/src/home/fetch-github/fetch-and-display-previews.ts
@@ -15,6 +15,18 @@ export type Options = {
   ordering: "normal" | "reverse";
 };
 
+let isProposalOnlyViewer = false; // or proposal viewer
+
+export const viewToggle = document.getElementById("view-toggle") as HTMLInputElement;
+if (!viewToggle) {
+  throw new Error("Could not find view toggle");
+}
+viewToggle.addEventListener("click", () => {
+  isProposalOnlyViewer = !isProposalOnlyViewer;
+  displayGitHubIssues();
+  applyAvatarsToIssues();
+});
+
 export async function fetchAndDisplayPreviewsFromCache(sorting?: Sorting, options = { ordering: "normal" }) {
   let _cachedTasks = getLocalStore(GITHUB_TASKS_STORAGE_KEY) as TaskStorageItems;
   const _accessToken = await getGitHubAccessToken();
@@ -123,5 +135,21 @@ export function displayGitHubIssues(sorting?: Sorting, options = { ordering: "no
 
   // Render issues
   const sortedIssues = sortIssuesController(cachedTasks, sorting, options);
-  renderGitHubIssues(sortedIssues);
+  const sortedAndFiltered = sortedIssues.filter(getProposalsOnlyFilter(isProposalOnlyViewer));
+  renderGitHubIssues(sortedAndFiltered);
+}
+
+function getProposalsOnlyFilter(getProposals: boolean) {
+  return (task: TaskMaybeFull) => {
+    if (!task.full?.labels) return false;
+
+    const hasPriceLabel = task.full.labels.some((label) => {
+      if (typeof label === "string") return false;
+      return label.name?.startsWith("Price: ") || label.name?.startsWith("Pricing: ");
+    });
+
+    // If getProposals is true, we want tasks WITHOUT price labels
+    // If getProposals is false, we want tasks WITH price labels
+    return getProposals ? !hasPriceLabel : hasPriceLabel;
+  };
 }
diff --git a/static/index.html b/static/index.html
@@ -48,13 +48,13 @@
     <background><div class="gradient"></div><div class="gradient"></div><div id="grid"></div></background>
     <div id="issues-container"></div>
     <div id="toolbar" class="toolbar" data-authenticated="false"
-      ><div id="branding"
+      ><label for="view-toggle"><div id="branding"
         ><svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 151" fill="currentColor">
           <path
             d="M132 41.1c0-2.3-1.3-4.5-3.3-5.7L69.4 1.2c-1-.6-2.1-.9-3.3-.9-1.1 0-2.3.3-3.3.9L3.6 35.4c-2 1.2-3.3 3.3-3.3 5.7v68.5c0 2.3 1.3 4.5 3.3 5.7l59.3 34.2c2 1.2 4.5 1.2 6.5 0l59.3-34.2c2-1.2 3.3-3.3 3.3-5.7V41.1zm-11.9 62.5c0 2.7-1.4 5.2-3.7 6.5l-46.6 27.5c-1.1.7-2.4 1-3.7 1s-2.5-.3-3.7-1l-46.6-27.5c-2.3-1.3-3.7-3.8-3.7-6.5V54.1c0-1.2.6-2.4 1.7-3 1.1-.6 2.3-.6 3.4 0l8 4.7c1.9 1.1 3 3.3 4.4 5.8.3.5.5 1 .8 1.4 3.5 6.3 5.2 13 6.8 19.5 3 11.9 6 24.2 21.3 28.2 5 1.3 10.4 1.3 15.4 0 15.2-4 18.3-16.3 21.3-28.2C96.8 76 98.5 69.3 102 63c.3-.5.5-1 .8-1.4 1.3-2.5 2.5-4.6 4.4-5.8l8-4.7c1-.6 2.3-.6 3.4 0s1.7 1.7 1.7 3v49.5zM62.6 13.7c2.2-1.3 4.9-1.3 7.1 0L110 37.6c1 .6 1.6 1 1.6 2.2 0 1.2-.6 1.9-1.6 2.5l-7.7 4.6c-3.4 2-5.1 5.2-6.6 8.1l-.1.2c-.2.4-.4.7-.6 1.1-3.8 6.8-6.6 14-8.2 20.4C83.6 89.1 82.4 97.3 72 100c-1.9.5-3.9.7-5.8.7-2 0-3.9-.3-5.8-.7C50 97.3 48.7 89.1 45.6 76.6 44 70.2 41.2 63 37.4 56.2c-.2-.3-.4-.7-.6-1l-.1-.3c-1.5-2.8-3.3-6.1-6.6-8.1l-7.7-4.6c-1-.6-1.6-1.3-1.6-2.5s.6-1.6 1.6-2.2l40.2-23.8z"
           ></path></svg
-        ><span><span class="full">Ubiquity DAO | </span><span class="mid">DevPool Directory</span></span></div
-      ><div id="filters" class="filters-container"></div
+        ><span><span class="full">Ubiquity DAO | </span><span class="mid">DevPool<input type="checkbox" id="view-toggle" disabled></span></span></div
+      ></label><div id="filters" class="filters-container"></div
     ></div>
     <div id="bottom-bar" class="toolbar"
       ><div id="filters-bottom" class="filters-container"></div><a href="https://dao.ubq.fi/devpool-flow" target="_blank"><button>FAQ</button></a></div

diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css
@@ -2,7 +2,7 @@
   #filters {
     display: none;
   }
-  .filters-container label {
+  .filters-container label:not([for="view-toggle"]) {
     width: 48px;
   }
 }
@@ -24,6 +24,7 @@
   #logo {
     height: 28px;
     margin-right: 4px;
+    vertical-align: middle;
   }
   #authenticated,
   #branding {
@@ -36,6 +37,7 @@
   }
   #branding > span {
     padding: 8px;
+    vertical-align: middle;
   }
   body,
   html {
@@ -183,10 +185,10 @@
   p.repository-name {
     display: inline-block;
   }
-  label:first-child {
+  label:not([for="view-toggle"]):first-child {
     margin-left: 0;
   }
-  label {
+  label:not([for="view-toggle"]) {
     padding: 4px 6px;
     border-radius: 4px;
     margin: 0 4px 0;
@@ -215,16 +217,17 @@
     padding: 0;
     border: none;
   }
-  .filters-container label {
+
+  label {
     cursor: pointer;
   }
-  .filters-container label:hover {
+  .filters-container label:not([for="view-toggle"]):hover {
     background-color: #7f7f7f40;
   }
-  .filters-container label:active {
+  .filters-container label:not([for="view-toggle"]):active {
     background-color: #7f7f7f80;
   }
-  input[type="radio"]:checked + label {
+  input[type="radio"]:checked + label:not([for="view-toggle"]) {
     background-color: #7f7f7f80 !important;
   }
   .labels {
@@ -305,7 +308,6 @@
     align-items: center;
     display: inline-flex;
     text-align: left;
-    margin: 0 16px;
   }
   #authenticated > * {
     display: inline-flex;
@@ -632,11 +634,11 @@
   p.organization-name::after {
     content: "/";
   }
-  input[type="radio"][data-ordering="reverse"] + label::after {
+  input[type="radio"][data-ordering="reverse"] + label:not([for="view-toggle"])::after {
     margin-left: 6px;
     content: "▲";
   }
-  input[type="radio"][data-ordering="normal"] + label::after {
+  input[type="radio"][data-ordering="normal"] + label:not([for="view-toggle"])::after {
     margin-left: 6px;
     content: "▼";
   }
@@ -711,3 +713,18 @@
     background-color: #7f7f7f;
   }
 }
+
+#view-toggle:checked::after {
+  content: "Proposals";
+}
+#view-toggle::after {
+  content: "Directory";
+  letter-spacing: 1.5px;
+  text-rendering: geometricprecision;
+  text-transform: uppercase;
+  font-size: 16px;
+}
+
+#view-toggle {
+  appearance: none;
+}
diff --git a/static/style/style.css b/static/style/style.css
@@ -2,7 +2,7 @@
   #filters {
     display: none;
   }
-  .filters-container label {
+  .filters-container label:not([for="view-toggle"]) {
     width: 48px;
   }
 }
@@ -24,6 +24,7 @@
   #logo {
     height: 28px;
     margin-right: 4px;
+    vertical-align: middle;
   }
   #authenticated,
   #branding {
@@ -36,6 +37,7 @@
   }
   #branding > span {
     padding: 8px;
+    vertical-align: middle;
   }
   body,
   html {
@@ -183,10 +185,10 @@
   p.repository-name {
     display: inline-block;
   }
-  label:first-child {
+  label:not([for="view-toggle"]):first-child {
     margin-left: 0;
   }
-  label {
+  label:not([for="view-toggle"]) {
     padding: 4px 6px;
     border-radius: 4px;
     margin: 0 4px 0;
@@ -215,16 +217,17 @@
     padding: 0;
     border: none;
   }
-  .filters-container label {
+
+  label {
     cursor: pointer;
   }
-  .filters-container label:hover {
+  .filters-container label:not([for="view-toggle"]):hover {
     background-color: #80808040;
   }
-  .filters-container label:active {
+  .filters-container label:not([for="view-toggle"]):active {
     background-color: #80808080;
   }
-  input[type="radio"]:checked + label {
+  input[type="radio"]:checked + label:not([for="view-toggle"]) {
     background-color: #80808080 !important;
   }
   .labels {
@@ -631,11 +634,11 @@
   p.organization-name::after {
     content: "/";
   }
-  input[type="radio"][data-ordering="reverse"] + label::after {
+  input[type="radio"][data-ordering="reverse"] + label:not([for="view-toggle"])::after {
     margin-left: 6px;
     content: "▲";
   }
-  input[type="radio"][data-ordering="normal"] + label::after {
+  input[type="radio"][data-ordering="normal"] + label:not([for="view-toggle"])::after {
     margin-left: 6px;
     content: "▼";
   }
@@ -710,3 +713,18 @@
     background-color: #808080;
   }
 }
+
+#view-toggle:checked::after {
+  content: "Proposals";
+}
+#view-toggle::after {
+  content: "Directory";
+  letter-spacing: 1.5px;
+  text-rendering: geometricprecision;
+  text-transform: uppercase;
+  font-size: 16px;
+}
+
+#view-toggle {
+  appearance: none;
+}