add platform logos

frontend-new/src/components/logos/PaperLogo.vue

@@ -0,0 +1,9 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" version="1" width="72" height="72" fill="currentColor" viewBox="0 0 2000 2000">
+    <title>Paper</title>
+    <path
+      class="platform-logo"
+      d="M1625.4 316.8c16.8 12 24.8 31.2 21.6 51.1l-204.5 1227.2c-2.4 15.2-12 28-25.6 36-7.2 4-16 6.4-24.8 6.4-6.4 0-12.8-1.6-19.2-4L1011 1485.6l-193.3 235.7c-9.6 12-24 18.4-39.2 18.4-5.6 0-12-.8-17.6-3.2-20-7.2-33.6-26.4-33.6-47.9v-278.8l690.3-846.1-854.1 739L248 1173.2c-18.4-7.2-30.4-24-32-43.9-.8-19.2 8.8-37.6 25.6-47.1l1329.4-767c8-4.8 16.8-7.2 25.6-7.2 10.4 0 20.8 3.2 28.8 8.8z"
+    />
+  </svg>
+</template>

frontend-new/src/components/logos/PlatformLogo.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { Platform } from "~/types/enums";
+import PaperLogo from "~/components/logos/PaperLogo.vue";
+import VelocityLogo from "~/components/logos/VelocityLogo.vue";
+import WaterfallLogo from "~/components/logos/WaterfallLogo.vue";
+
+const props = withDefaults(
+  defineProps<{
+    platform: Platform;
+    size?: number;
+  }>(),
+  {
+    size: 72,
+  }
+);
+</script>
+<template>
+  <PaperLogo v-if="platform === Platform.PAPER" v-bind="$attrs" :width="size" :height="size" />
+  <VelocityLogo v-else-if="platform === Platform.VELOCITY" v-bind="$attrs" :width="size" :height="size" />
+  <WaterfallLogo v-else-if="platform === Platform.WATERFALL" v-bind="$attrs" :width="size" :height="size" />
+</template>

frontend-new/src/components/logos/VelocityLogo.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+    <title>Velocity</title>
+    <g class="platform-logo">
+      <path
+        d="M236.25 232.55l-54.08-73.79a11.86 11.86 0 00-11.91-4.62L84 171.57a11.88 11.88 0 00-8 5.88l-42.64 77.07a11.84 11.84 0 00.81 12.75l54.21 74a11.86 11.86 0 0011.91 4.62l86-17.37a11.85 11.85 0 008-5.89l42.78-77.3a11.86 11.86 0 00-.82-12.78zm-59.45 74.21a9.57 9.57 0 01-13.39-2.06l-31-42.24a16 16 0 00-16-6.21l-52.58 10.63a9.58 9.58 0 01-11.29-7.49A9.58 9.58 0 0160 248.1l57-11.52a16 16 0 0010.81-7.92L156.42 177a9.58 9.58 0 0113-3.75 9.58 9.58 0 013.75 13L146.81 234a16 16 0 001.09 17.16l31 42.23a9.58 9.58 0 01-2.1 13.37z"
+      />
+      <circle cx="416.44" cy="236.11" r="9.83" />
+      <path
+        d="M458.29 265.6H280.52a9.83 9.83 0 110-19.66h106.22a9.84 9.84 0 000-19.67h-70.2a9.83 9.83 0 110-19.66H422.9a9.84 9.84 0 000-19.67H202.83l33.42 45.61a11.86 11.86 0 01.81 12.75l-42.78 77.3a11.75 11.75 0 01-1.4 2h212.29a9.83 9.83 0 100-19.66h-53.53a9.84 9.84 0 110-19.67h106.65a9.84 9.84 0 100-19.67z"
+      />
+    </g>
+  </svg>
+</template>

frontend-new/src/components/logos/WaterfallLogo.vue

@@ -0,0 +1,28 @@
+<!-- TODO better waterfall svg?-->
+<template>
+  <svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    x="0px"
+    y="0px"
+    viewBox="0 0 1000 1000"
+    enable-background="new 0 0 1000 1000"
+    xml:space="preserve"
+    fill="currentColor"
+  >
+    <title>Waterfall</title>
+    <g class="platform-logo">
+      <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)">
+        <path
+          d="M3180.5,5009.8c-162.9-72.8-182-272.1-34.5-350.7c28.7-15.3,205-28.7,484.8-38.3c427.3-13.4,701.3-46,938.9-105.4c206.9-53.6,469.5-143.7,469.5-161c0-9.6-55.6-80.5-122.6-157.1c-900.6-1023.2-1456.3-2103.9-1783.9-3474c-61.3-251-174.4-833.5-185.9-956.2c-5.7-53.7-9.6-55.6-293.2-128.4c-866.1-218.4-1559.8-557.6-2017.7-984.9C101.2-1844.3-40.6-2447.9,243-3013.1c151.4-298.9,471.4-618.9,869.9-866.1c1030.9-643.8,2780.4-988.7,4487.7-887.2c1716.9,103.5,3146.3,599.8,3847.6,1333.6c216.5,229.9,316.2,387.1,404.3,651.5c86.2,258.7,49.8,651.5-84.3,917.9C9381.2-1102.7,8227.7-483.8,6715.8-225.1c-136,23-260.6,46-274,49.8c-24.9,7.7-26.8-7.6,26.8,505.9c145.6,1435.2,515.4,2812.9,963.8,3590.9c176.3,306.6,212.7,344.9,412,419.6c515.4,197.4,831.6,258.7,1458.2,279.8c243.4,9.6,465.6,26.8,494.4,38.3c65.2,24.9,116.9,136,99.6,212.7c-5.8,28.7-32.6,72.8-59.4,97.7c-47.9,46-53.7,46-425.4,44.1c-720.5-5.7-1124.8-78.6-1732.2-316.2c-274-109.2-298.9-128.4-500.1-438.8c-576.8-891-1000.2-2521.7-1155.4-4451.2c-30.7-400.5-59.4-1906.6-38.3-2050.3c21.1-132.2,82.4-195.5,191.6-195.5c69,0,97.7,11.5,139.9,53.7l53.6,53.7v314.3c0,174.4,5.8,316.2,13.4,316.2c44.1,0,492.5-161,615.1-220.4c249.1-120.7,383.2-270.2,341.1-377.5c-42.1-115-293.2-279.8-594-392.8c-251-93.9-768.4-216.5-1121-264.4c-51.7-7.7-231.8-23-400.5-36.4l-306.6-24.9l-57.5-63.2c-47.9-53.6-55.6-72.8-46-141.8c7.7-51.7,28.7-93.9,61.3-120.7c46-40.2,69-44.1,256.8-44.1c224.2,0,666.8,53.7,973.4,115c869.9,180.1,1406.5,444.6,1580.8,785.6c34.5,69,44.1,116.9,44.1,239.5c0,134.1-7.7,166.7-57.5,254.8c-153.3,279.8-576.8,513.5-1211,674.5l-82.4,21.1v151.4c0,84.3,5.8,153.3,15.3,153.3c7.7,0,130.3-28.8,272.1-65.2c643.8-164.8,1117.1-396.6,1410.3-689.8c184-185.8,247.2-316.2,245.3-509.7c0-118.8-9.6-162.9-57.5-258.7c-67.1-138-272.1-352.6-448.4-467.6c-492.5-321.9-1295.3-557.6-2165.3-636.1c-308.5-26.8-994.5-26.8-1303,0c-869.9,78.6-1672.8,314.2-2165.3,636.1c-176.3,115-381.3,329.6-448.4,467.6c-80.5,162.9-82.4,354.5-5.8,511.6c115,233.8,379.4,456,766.5,645.7c128.4,63.2,258.7,120.7,289.3,128.4c55.6,13.4,55.6,13.4,44.1-61.3c-7.7-40.3-13.4-101.6-13.4-136.1c0-55.6-11.5-67.1-147.5-141.8c-394.7-216.5-567.2-423.5-569.1-687.9c-3.8-389,415.8-718.6,965.7-760.7c216.5-15.3,306.6,40.3,306.6,193.5c0,111.1-61.3,162.9-220.4,185.8c-329.6,49.8-530.8,134.1-617,264.4c-70.9,105.4-59.4,166.7,49.8,272.1c51.7,49.8,120.7,105.4,153.3,120.7l57.5,30.6l-1.9-93.9c0-160.9,101.6-249.1,243.4-210.8c115,32.6,138,93.9,151.4,406.2c76.6,1632.6,346.8,2908.7,845,4000.9c279.8,615.1,707.1,1257,1237.8,1856.8c298.9,337.2,304.7,344.9,304.7,425.4c0,116.9-67.1,168.6-358.3,281.7c-291.3,111.1-607.4,199.3-868,239.5C4002.5,5011.7,3259.1,5044.3,3180.5,5009.8z M6700.5-617.9c1312.6-243.3,2322.4-753,2673-1352.8c105.4-178.2,136-298.9,126.5-509.7c-5.7-159-15.3-189.7-88.1-337.2c-321.9-649.6-1385.4-1195.7-2801.4-1439c-605.5-105.4-1293.4-147.5-1989-122.6c-1950.7,67.1-3610.1,710.9-4033.5,1563.6L507.5-2651v220.4v222.3l86.2,172.5c70.9,143.7,116.9,203.1,268.3,354.5c99.6,101.6,247.2,228,327.7,281.7c369.8,252.9,952.3,503.9,1477.4,638.1c80.5,21.1,161,44.1,178.2,49.8c24.9,9.6,30.7,3.8,24.9-30.6c-3.8-34.5-38.3-53.7-183.9-105.4c-701.3-251-1230.2-684.1-1366.2-1119C1180-2421,1390.8-2894.3,1889-3250.8c1469.7-1046.2,4754-1046.2,6223.7,0c823.9,588.3,812.4,1418-30.7,2015.8c-346.8,245.3-938.9,482.9-1490.8,597.8c-90.1,19.2-170.5,42.2-180.1,49.8C6382.4-562.4,6407.3-564.3,6700.5-617.9z"
+        />
+        <path
+          d="M6666,4578.7c-53.7-46-182-220.4-333.4-454.1c-908.3-1406.5-1303-2989.2-1446.7-5806c-9.6-205-19.2-473.3-19.2-595.9c0-195.4,5.7-228,38.3-272.1c86.2-109.2,283.6-76.6,323.8,51.7c11.5,32.6,28.7,279.8,40.3,548c126.5,3021.8,549.9,4685,1561.7,6108.7c124.6,174.4,143.7,212.7,143.7,283.6c0,67.1-9.6,90.1-59.4,130.3C6840.4,4636.2,6735,4640,6666,4578.7z"
+        />
+        <path
+          d="M5958.9,4534.6c-26.8-17.2-105.4-101.6-176.3-187.8C4933.8,3308.3,4381.9,2053.2,4073.4,455.1c-138-718.6-256.8-1820.3-266.3-2494.8c-3.8-281.7-1.9-291.3,42.2-339.2c67.1-70.9,157.1-82.4,237.6-32.6c93.9,57.5,88.1,30.7,128.4,749.2c76.6,1356.6,310.4,2623.2,661.1,3594.7c289.3,793.3,687.9,1521.4,1140.1,2077.1c214.6,262.5,229.9,287.4,229.9,367.9C6246.4,4526.9,6085.4,4613.2,5958.9,4534.6z"
+        />
+      </g>
+    </g>
+  </svg>
+</template>

frontend-new/src/components/projects/DownloadButton.vue

@@ -11,6 +11,7 @@ import DropdownItem from "~/components/design/DropdownItem.vue";
 import { useInternalApi } from "~/composables/useApi";
 import Modal from "~/components/modals/Modal.vue";
 import Alert from "~/components/design/Alert.vue";
+import PlatformLogo from "~/components/logos/PlatformLogo.vue";
 
 const i18n = useI18n();
 const backendData = useBackendDataStore();
@@ -126,14 +127,16 @@ async function requiresConfirmation() {
 <template>
   <!-- todo make this actually look nice -->
   <div class="flex">
-    <DropdownButton v-if="platformSelection && Object.keys(project.recommendedVersions).length !== 1" :button-size="small ? 'small' : 'large'">
+    <!--  && Object.keys(project.recommendedVersions).length !== 1 -->
+    <DropdownButton v-if="platformSelection" :button-size="small ? 'small' : 'large'">
       <template #button-label>
-        <span class="items-center inline-flex"
+        <span class="items-center inline-flex">
-          ><IconMdiDownloadOutline /> {{ external ? i18n.t("version.page.downloadExternal") : i18n.t("version.page.download") }}</span
+          <IconMdiDownloadOutline class="mr-1" />
-        ></template
+          {{ external ? i18n.t("version.page.downloadExternal") : i18n.t("version.page.download") }}
-      >
+        </span>
+      </template>
       <DropdownItem v-for="(pl, i) in Object.keys(project.recommendedVersions)" :key="i" class="flex items-center" @click="checkAndDownloadPlatform(pl)">
-        <IconMdiDownloadOutline class="mr-1" /><!-- todo platform icons -->
+        <PlatformLogo :platform="pl" :size="24" class="mr-1" />
         {{ backendData.platforms.get(pl).name }}
       </DropdownItem>
     </DropdownButton>
@@ -159,7 +162,10 @@ async function requiresConfirmation() {
       <template #content>
         <span>{{ i18n.t("version.page.downloadUrlCopied") }}</span>
       </template>
-      <Tooltip :content="i18n.t('version.page.downloadUrlHover')">
+      <Tooltip>
+        <template #content>
+          {{ i18n.t("version.page.downloadUrlHover") }}
+        </template>
         <Button :size="small ? 'small' : 'large'" class="ml-1" @click="copyDownloadUrl">
           <IconMdiContentCopy />
         </Button>

frontend-new/src/components/ui/InputCheckbox.vue

@@ -35,7 +35,9 @@ const { v, errors, hasError } = useValidation(props.label, props.rules, internal
       @blur="v.$touch()"
     />
     <icon-mdi-check-bold class="absolute h-4 w-4 opacity-0 text-white" />
+    <slot name="label">
       <template v-if="props.label">{{ props.label }}</template>
+    </slot>
   </label>
 </template>
 

frontend-new/src/pages/[user]/[project]/versions/[version]/[platform]/index.vue

@@ -28,6 +28,7 @@ import PlatformVersionEditModal from "~/components/modals/PlatformVersionEditMod
 import { AxiosError } from "axios";
 import Tooltip from "~/components/design/Tooltip.vue";
 import DownloadButton from "~/components/projects/DownloadButton.vue";
+import PlatformLogo from "~/components/logos/PlatformLogo.vue";
 
 const route = useRoute();
 const i18n = useI18n();
@@ -225,9 +226,11 @@ async function restoreVersion() {
           </div>
         </template>
 
-        <!-- todo platform icon -->
+        <div class="flex items-center">
+          <PlatformLogo :platform="platform.enumName" size="24" class="mr-1" />
           {{ platform?.name }}
           {{ platformTag?.data }}
+        </div>
       </Card>
 
       <Card>

frontend-new/src/pages/index.vue

@@ -18,6 +18,7 @@ import { PaginatedResult, Project } from "hangar-api";
 import Alert from "~/components/design/Alert.vue";
 import { Platform } from "~/types/enums";
 import { toNumber } from "lodash-es";
+import PlatformLogo from "~/components/logos/PlatformLogo.vue";
 
 const i18n = useI18n();
 const route = useRoute();
@@ -163,13 +164,12 @@ useHead(meta);
       <div class="platforms">
         <h3 class="font-bold mb-1">Platforms</h3>
         <div class="flex flex-col gap-1">
-          <InputCheckbox
+          <InputCheckbox v-for="platform in backendData.visiblePlatforms" :key="platform.enumName" v-model="filters.platforms" :value="platform.enumName">
-            v-for="platform in backendData.visiblePlatforms"
+            <template #label>
-            :key="platform.enumName"
+              <PlatformLogo :platform="platform.enumName" size="24" class="mr-1" />
-            v-model="filters.platforms"
+              {{ platform.name }}
-            :value="platform.enumName"
+            </template>
-            :label="platform.name"
+          </InputCheckbox>
-          />
         </div>
       </div>
       <div class="licenses">