Improvements to project creation

frontend-new/src/components/design/Button.vue

@@ -41,7 +41,10 @@ const classes = computed<string>(() => {
   const button = " button-" + props.buttonType;
   const loading = props.loading ? " !cursor-wait" : "";
   return (
-    "rounded-md font-semibold h-min inline-flex items-center justify-center text-white disabled:(bg-gray-300 cursor-not-allowed) disabled:dark:(text-gray-500 bg-gray-700) " +
+    "rounded-md font-semibold h-min inline-flex items-center justify-center " +
+    (props.buttonType !== "transparent"
+      ? "text-white disabled:(bg-gray-300 cursor-not-allowed) disabled:dark:(text-gray-500 bg-gray-700) "
+      : "text-black dark:text-white disabled:cursor-not-allowed disabled:text-gray-400 ") +
     paddingClass.value +
     button +
     loading

frontend-new/src/components/design/Tabs.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { computed } from "vue";
+import Button from "~/components/design/Button.vue";
 import Link from "~/components/design/Link.vue";
 
 const emit = defineEmits<{
@@ -38,23 +39,22 @@ function selectTab(tab: Tab) {
 <template>
   <div :class="{ 'flex flex-col <md:space-y-2 md:(flex-row space-x-2)': vertical, 'flex flex-row flex-wrap': !vertical }">
     <div :class="{ 'min-w-13ch': vertical, 'basis-full': !vertical }">
-      <ul :class="{ 'flex flex-row <md:space-x-2 md:(flex-col space-y-2)': vertical, 'flex flex-row gap-2 mb-2': !vertical }">
-        <li
-          v-for="tab in tabs"
-          :key="tab.value"
-          :class="'rounded p-2 ' + (internalValue === tab.value ? 'bg-gray-200 dark:(bg-black)' : 'bg-gray-300 dark:(bg-gray-600)')"
-        >
-          <Link
-            v-if="!tab.show || tab.show()"
-            :disabled="tab.disable && tab.disable()"
-            :class="internalValue === tab.value ? 'underline' : '!font-semibold'"
-            :href="'#' + tab.value"
-            @click.prevent="selectTab(tab)"
-          >
-            {{ tab.header }}
+      <ul :class="{ 'flex flex-row <md:space-x-2 md:(flex-col space-y-2)': vertical, 'flex flex-row gap-1': !vertical }">
+        <li v-for="tab in tabs" :key="tab.value">
+          <Link v-if="!tab.show || tab.show()" :disabled="tab.disable && tab.disable()" :href="'#' + tab.value" @click.prevent="selectTab(tab)">
+            <Button
+              v-if="!tab.show || tab.show()"
+              :disabled="tab.disable && tab.disable()"
+              :class="internalValue === tab.value ? 'underline' : '!font-semibold'"
+              size="medium"
+              button-type="transparent"
+            >
+              {{ tab.header }}
+            </Button>
           </Link>
         </li>
       </ul>
+      <hr class="mb-2" />
     </div>
     <div class="flex-grow">
       <template v-for="tab in tabs" :key="tab.value">

frontend-new/src/i18n/locales/en.json

@@ -185,13 +185,14 @@
     "new": {
       "step1": {
         "title": "User Agreement",
-        "text": "A project contains your downloads and the documentation for your plugin.<br>Before continuing, please review the <a href=\"#\">Hangar Submission Guidelines.</a>",
+        "text1": "A project contains your downloads and the documentation for your plugin.",
+        "text2": "Before continuing, please review the Hangar Submission Guideline.",
         "continue": "Agree",
         "back": "Abort"
       },
       "step2": {
         "title": "Basic Settings",
-        "description": "Please provide the basic settings for this project",
+        "description": "Provide the basic settings for this project.",
         "continue": "Continue",
         "back": "Back",
         "userSelect": "Create as...",
@@ -201,7 +202,7 @@
       },
       "step3": {
         "title": "Additional Settings",
-        "description": "You can provide these (optional) additional settings. You can change them in your project settings at any time.",
+        "description": "Optional: You can provide these additional settings, or change them in your project settings at any time after the project creation.",
         "continue": "Continue",
         "back": "Back",
         "optional": "Optional",
@@ -219,12 +220,13 @@
       },
       "step4": {
         "title": "Import from Spigot",
-        "description": "You can optionally use this step to convert your existing description for your project from spigot. If you safely skip this and design your description from scratch once you got your project created.",
+        "description": "Optional: You can convert an existing description for your project from the Spigot resource forums. You can safely skip this and design your description from scratch once you created the project.",
         "continue": "Create",
         "back": "Back",
         "optional": "Optional",
         "convert": "Convert",
         "saveAsHomePage": "Save as Home Page",
+        "saved": "Saved",
         "convertLabels": {
           "bbCode": "Paste your BBCode here",
           "output": "Markdown Output"
@@ -612,7 +614,7 @@
   },
   "visibility": {
     "notice": {
-      "new": "This project is new, and will not be shown to others until a version has been uploaded. If a version is not uploaded over a longer time the project will be deleted.",
+      "new": "This project will not be shown to others until a version has been uploaded. If no version is uploaded over a longer period of time, the project will be deleted.",
       "needsChanges": "This project requires changes",
       "needsApproval": "You have sent the project for review",
       "softDelete": "Project deleted by {0}"

frontend-new/src/pages/[user]/index.vue

@@ -24,6 +24,7 @@ import Tooltip from "~/components/design/Tooltip.vue";
 import IconMdiWrench from "~icons/mdi/wrench";
 import IconMdiKey from "~icons/mdi/key";
 import IconMdiCalendar from "~icons/mdi/calendar";
+import IconMdiEyeOffOutline from "~icons/mdi/eye-off-outline";
 import OrgVisibilityModal from "~/components/modals/OrgVisibilityModal.vue";
 import LockUserModal from "~/components/modals/LockUserModal.vue";
 
@@ -109,11 +110,12 @@ useHead(useSeo(props.user.name, props.user.tagline, route, avatarUrl(props.user.
           <ul>
             <li v-for="(orgRole, orgName) in organizations" :key="orgName">
               <router-link :to="'/' + orgName" class="flex items-center mb-2">
-                <UserAvatar :username="orgName" :avatar-url="avatarUrl(orgName)" size="xs" :disable-link="true" />
+                <UserAvatar :username="orgName" :avatar-url="avatarUrl(orgName)" size="xs" :disable-link="true" class="flex-shrink-0" />
                 &nbsp;
                 {{ orgName }}
                 &nbsp; ({{ orgRole.role.title }}) &nbsp;
-                <span v-if="organizationVisibility && organizationVisibility[orgName]"> Hidden </span>
+                <span class="flex-grow"></span>
+                <IconMdiEyeOffOutline v-if="organizationVisibility && organizationVisibility[orgName]"></IconMdiEyeOffOutline>
               </router-link>
             </li>
           </ul>

frontend-new/src/pages/new.vue

@@ -22,6 +22,7 @@ import InputTextarea from "~/components/ui/InputTextarea.vue";
 import { useVuelidate } from "@vuelidate/core";
 import { required, maxLength, validProjectName, pattern, url, requiredIf } from "~/composables/useValidationHelpers";
 import Spinner from "~/components/design/Spinner.vue";
+import Link from "~/components/design/Link.vue";
 
 interface NewProjectForm extends ProjectSettingsForm {
   ownerId: ProjectOwner["userId"];
@@ -64,7 +65,10 @@ const rules = {
 };
 const v = useVuelidate(rules, form);
 
-const isCustomLicense = computed(() => form.value.settings.license.type === "(custom)");
+const unspecifiedLicenseName = "Unspecified";
+form.value.settings.license.type = unspecifiedLicenseName;
+const isCustomLicense = computed(() => form.value.settings.license.type === "Other");
+const licenseUnset = computed(() => form.value.settings.license.type === unspecifiedLicenseName);
 
 const selectedStep = ref("tos");
 const steps: Step[] = [
@@ -88,6 +92,9 @@ const bbCodeTabs: Tab[] = [
   { value: "preview", header: i18n.t("project.new.step4.preview"), disable: () => !converter.value.markdown },
   { value: "tutorial", header: i18n.t("project.new.step4.tutorial") },
 ];
+function saveButtonDisabled() {
+  return form.value.pageContent === converter.value.markdown || (!form.value.pageContent && converter.value.markdown.length === 0);
+}
 
 useHead(useSeo("New Project", null, route, null));
 
@@ -135,7 +142,8 @@ function createProject() {
   <Steps v-model="selectedStep" :steps="steps" button-lang-key="project.new.step">
     <template #tos>
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <p v-html="i18n.t('project.new.step1.text')" />
+      <p v-html="i18n.t('project.new.step1.text1')" />
+      <Link to="/guidelines"><p v-html="i18n.t('project.new.step1.text2')" /></Link>
     </template>
     <template #basic>
       <div class="flex flex-wrap">
@@ -200,12 +208,13 @@ function createProject() {
             :values="backendData.licenseOptions"
             :label="i18n.t('project.new.step3.type')"
             :rules="[required()]"
+            :model-value="unspecifiedLicenseName"
           />
         </div>
         <div v-if="isCustomLicense" class="basis-full md:basis-8/12 mt-4">
           <InputText v-model.trim="form.settings.license.name" :label="i18n.t('project.new.step3.customName')" :rules="[requiredIf()(isCustomLicense)]" />
         </div>
-        <div class="basis-full mt-4" :md="isCustomLicense ? 'basis-full' : 'basis-6/12'">
+        <div v-if="!licenseUnset" class="basis-full mt-4" :md="isCustomLicense ? 'basis-full' : 'basis-6/12'">
           <InputText v-model.trim="form.settings.license.url" :label="i18n.t('project.new.step3.url')" :rules="[url()]" />
         </div>
       </div>
@@ -240,13 +249,32 @@ function createProject() {
             </div>
             <div class="basis-full"><InputTextarea v-model="converter.markdown" :rows="6" :label="i18n.t('project.new.step4.convertLabels.output')" /></div>
           </div>
+
+          <div class="inline-flex items-center gap-2">
+            <Button block class="my-2" :disabled="saveButtonDisabled()" @click="form.pageContent = converter.markdown">
+              <IconMdiContentSave />
+              {{ i18n.t("project.new.step4.saveAsHomePage") }}
+            </Button>
+            <Transition>
+              <span v-if="form.pageContent === converter.markdown" class="inline-flex items-center"
+                >{{ i18n.t("project.new.step4.saved") }} <IconMdiCheck
+              /></span>
+            </Transition>
+          </div>
         </template>
         <template #preview>
-          <Button block color="primary" class="my-2" :disabled="form.pageContent === converter.markdown" @click="form.pageContent = converter.markdown">
-            <IconMdiContentSave />
-            {{ i18n.t("project.new.step4.saveAsHomePage") }}
-          </Button>
           <Markdown :raw="converter.markdown" />
+          <div class="inline-flex items-center gap-2">
+            <Button block class="my-2" :disabled="saveButtonDisabled()" @click="form.pageContent = converter.markdown">
+              <IconMdiContentSave />
+              {{ i18n.t("project.new.step4.saveAsHomePage") }}
+            </Button>
+            <Transition>
+              <span v-if="form.pageContent === converter.markdown" class="inline-flex items-center"
+                >{{ i18n.t("project.new.step4.saved") }} <IconMdiCheck
+              /></span>
+            </Transition>
+          </div>
         </template>
         <template #tutorial>
           {{ i18n.t("project.new.step4.tutorialInstructions.line1") }}<br />
@@ -280,3 +308,14 @@ function createProject() {
 meta:
   requireLoggedIn: true
 </route>
+
+<style lang="scss" scoped>
+.v-enter-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>

src/main/resources/application.yml

@@ -62,11 +62,12 @@ hangar:
   ga-code: "UA-38006759-9"
 
   licenses:
+    - "Unspecified"
     - "MIT"
     - "Apache 2.0"
     - "GPL"
     - "LPGL"
-    - "(custom)"
+    - "Other"
 
   announcements:
       -