Add package uploading feature

apps/cyberstorm-remix/app/commonComponents/Footer/Footer.tsx

@@ -103,26 +103,28 @@ export function Footer() {
                   </li>
                   <li>
                     <NewLink
-                      primitiveType="link"
-                      href="/package/create/docs/"
+                      // primitiveType="link"
+                      // href="/package/create/docs/"
+                      primitiveType="cyberstormLink"
+                      linkId="PackageFormatDocs"
                       csVariant="primary"
                     >
                       Package Format Docs
                     </NewLink>
                   </li>
                   <li>
                     <NewLink
-                      primitiveType="link"
-                      href="/tools/manifest-v1-validator/"
+                      primitiveType="cyberstormLink"
+                      linkId="ManifestValidator"
                       csVariant="primary"
                     >
                       Manifest Validator
                     </NewLink>
                   </li>
                   <li>
                     <NewLink
-                      primitiveType="link"
-                      href="/tools/markdown-preview/"
+                      primitiveType="cyberstormLink"
+                      linkId="MarkdownPreview"
                       csVariant="primary"
                     >
                       Markdown Preview

apps/cyberstorm-remix/app/commonComponents/Navigation/Navigation.tsx

@@ -101,27 +101,27 @@ export function Navigation(props: {
               </NewDropDownItem>
               <NewDropDownItem>
                 <NewLink
-                  primitiveType="link"
                   rootClasses={"dropdown__item"}
-                  href="/package/create/docs/"
+                  primitiveType="cyberstormLink"
+                  linkId="PackageFormatDocs"
                 >
                   Package Format Docs
                 </NewLink>
               </NewDropDownItem>
               <NewDropDownItem>
                 <NewLink
-                  primitiveType="link"
+                  primitiveType="cyberstormLink"
+                  linkId="ManifestValidator"
                   rootClasses={"dropdown__item"}
-                  href="/tools/manifest-v1-validator/"
                 >
                   Manifest Validator
                 </NewLink>
               </NewDropDownItem>
               <NewDropDownItem>
                 <NewLink
-                  primitiveType="link"
                   rootClasses={"dropdown__item"}
-                  href="/tools/markdown-preview/"
+                  primitiveType="cyberstormLink"
+                  linkId="MarkdownPreview"
                 >
                   Markdown Preview
                 </NewLink>
@@ -160,8 +160,8 @@ export function Navigation(props: {
           {currentUser?.username ? (
             <span className="navigation-header__profile-actions">
               <NewButton
-                primitiveType="link"
-                href={`${domain}/package/create/`}
+                primitiveType="cyberstormLink"
+                linkId="PackageUpload"
                 csVariant="secondary"
                 csModifiers={["ghost", "only-icon"]}
                 tooltipText="Upload"
@@ -466,22 +466,22 @@ export function MobileNavigationMenu({ domain }: { domain: string }) {
               GitHub
             </NewLink>
             <NewLink
-              primitiveType="link"
-              href="/package/create/docs/"
+              primitiveType="cyberstormLink"
+              linkId="PackageFormatDocs"
               rootClasses="mobile-navigation__popover-item mobile-navigation__popover--thick"
             >
               Package Format Docs
             </NewLink>
             <NewLink
-              primitiveType="link"
-              href="/tools/markdown-preview/"
+              primitiveType="cyberstormLink"
+              linkId="MarkdownPreview"
               rootClasses="mobile-navigation__popover-item mobile-navigation__popover--thick"
             >
               Markdown Preview
             </NewLink>
             <NewLink
-              primitiveType="link"
-              href="/tools/manifest-v1-validator/"
+              primitiveType="cyberstormLink"
+              linkId="ManifestValidator"
               rootClasses="mobile-navigation__popover-item mobile-navigation__popover--thick"
             >
               Manifest Validator

apps/cyberstorm-remix/app/upload/Upload.css

@@ -0,0 +1,235 @@
+@layer nimbus-layout {
+  .upload {
+    gap: var(--gap-xxxxxxxl);
+  }
+
+  .upload__row {
+    gap: 5rem;
+  }
+
+  .upload__meta {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-xs);
+    align-items: flex-start;
+    align-self: stretch;
+    width: 21rem;
+  }
+
+  .upload__title {
+    align-self: stretch;
+    color: var(--color-text-primary);
+    font-weight: var(--font-weight-bold);
+
+    font-size: var(--font-size-body-lg);
+    line-height: var(--line-height-md);
+  }
+
+  .upload__description {
+    align-self: stretch;
+    color: var(--color-text-tertiary);
+    font-weight: var(--font-weight-medium);
+
+    font-size: var(--font-size-body-md);
+    line-height: var(--line-height-md);
+  }
+
+  .upload__content {
+    display: flex;
+    flex: 1 1 0;
+    flex-direction: column;
+    gap: var(--gap-md);
+    align-items: flex-start;
+  }
+
+  .upload__divider {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    align-self: stretch;
+    justify-content: center;
+    height: 0.063rem;
+    background-color: var(--border-default);
+  }
+
+  .drag-n-drop {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
+    gap: 0.75rem;
+    align-items: center;
+    align-self: stretch;
+    justify-content: center;
+    padding: 1.5rem 2rem;
+    border: 2px dashed var(--color-surface-a9);
+
+    border-radius: var(--radius-md);
+    background: var(--color-surface-a4);
+
+    cursor: pointer;
+  }
+
+  .drag-n-drop__body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .drag-n-drop__icon {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    justify-content: center;
+    width: 2.25rem;
+    height: 2.25rem;
+  }
+
+  .drag-n-drop__main-text {
+    color: var(--color-text-primary);
+    font-weight: var(--font-weight-bold);
+
+    font-size: var(--font-size-body-lg);
+    text-align: center;
+  }
+
+  .drag-n-drop__sub-text {
+    color: var(--color-text-tertiary);
+    font-weight: var(--font-weight-medium);
+
+    font-size: var(--font-size-body-md);
+    text-align: center;
+  }
+
+  .upload__buttons {
+    display: flex;
+    flex-direction: row;
+    gap: var(--gap-md);
+  }
+
+  .upload__submit {
+    align-self: stretch;
+  }
+
+  /* Mobile breakpoint */
+  @media (width <= 475px) {
+    .upload__row {
+      flex-direction: column;
+      gap: var(--gap-xxxl);
+    }
+
+    .upload__content {
+      width: auto;
+    }
+  }
+
+  .upload-form {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    align-items: center;
+  }
+
+  .input-base,
+  .input-drag {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
+    gap: 0.75rem;
+    align-items: center;
+    justify-content: center;
+    padding: 1.5rem 2rem;
+    border: 2px dashed var(--color-surface-a9);
+
+    border-radius: var(--radius-md);
+    background: var(--color-surface-a4);
+  }
+
+  .input-base {
+    height: 40px;
+    cursor: pointer;
+  }
+
+  .input-drag {
+    height: 200px;
+    border: 4px solid #fff;
+  }
+
+  .upload__progress {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-md);
+    width: 100%;
+    margin-top: var(--gap-md);
+  }
+
+  .upload__progress-bar {
+    width: 100%;
+    height: 8px;
+    border-radius: 4px;
+    overflow: hidden;
+    background-color: var(--color-surface-a9);
+  }
+
+  .upload__progress-bars {
+    display: flex;
+    flex-direction: row;
+    gap: var(--gap-md);
+    width: 100%;
+  }
+
+  .upload__progress-bar-fill {
+    height: 100%;
+    background-color: var(--color-accent-green-6);
+    transition: width 0.3s ease;
+  }
+
+  .upload__progress-info {
+    display: flex;
+    flex-direction: row;
+    align-items: space-between;
+    justify-content: space-between;
+    color: var(--color-text-secondary);
+    font-size: var(--font-size-body-sm);
+  }
+
+  .upload__progress-speed {
+    display: inline-flex;
+    flex-direction: row;
+    gap: 0.5em;
+    align-items: flex-end;
+  }
+
+  .upload__error {
+    margin-top: 1rem;
+    padding: 1rem;
+    border: 1px solid #dee2e6;
+    border-radius: 4px;
+    color: #dc3545;
+    background-color: #f8f9fa;
+  }
+
+  .upload__error-field {
+    margin-bottom: 0.5rem;
+  }
+
+  .upload__error-field:last-child {
+    margin-bottom: 0;
+  }
+
+  .upload__error-field-name {
+    margin: 0;
+    margin-bottom: 0.25rem;
+    font-weight: 600;
+  }
+
+  .upload__error-message {
+    margin: 0;
+    padding-left: 1rem;
+  }
+
+  .upload__error .cs-button {
+    margin-top: 1rem;
+  }
+}