eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

feat: modrinth hosting - files tab refactor (#4912)

Browse Source 
* feat: api-client module for content v0

* feat: delete unused components + modules + setting

* feat: xhr uploading

* feat: fs module -> api-client

* feat: migrate files.vue to use tanstack

* fix: mem leak + other issues

* fix: build

* feat: switch to monaco

* fix: go back to using ace, but improve preloading + theme

* fix: styling + dead attrs

* feat: match figma

* fix: padding

* feat: files-new for ui page structure

* feat: finalize files.vue

* fix: lint

* fix: qa

* fix: dep

* fix: lint

* fix: lockfile merge

* feat: icons on navtab

* fix: surface alternating on table

* fix: hover surface color

---------

Signed-off-by: Calum H. <contact@cal.engineer>
Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>
This commit is contained in:
Calum H.
2026-01-06 00:35:51 +00:00
committed by GitHub
parent 61d4a34f0f
commit 099011a177
89 changed files with 5863 additions and 2091 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/assets/generated-icons.ts
View File

@@ -26,6 +26,7 @@ import _BookmarkIcon from './icons/bookmark.svg?component'
import _BotIcon from './icons/bot.svg?component'
import _BoxIcon from './icons/box.svg?component'
import _BoxImportIcon from './icons/box-import.svg?component'
import _BoxesIcon from './icons/boxes.svg?component'
import _BracesIcon from './icons/braces.svg?component'
import _BrushCleaningIcon from './icons/brush-cleaning.svg?component'
import _BugIcon from './icons/bug.svg?component'
@@ -39,6 +40,7 @@ import _CheckCircleIcon from './icons/check-circle.svg?component'
import _ChevronDownIcon from './icons/chevron-down.svg?component'
import _ChevronLeftIcon from './icons/chevron-left.svg?component'
import _ChevronRightIcon from './icons/chevron-right.svg?component'
import _ChevronUpIcon from './icons/chevron-up.svg?component'
import _CircleUserIcon from './icons/circle-user.svg?component'
import _ClearIcon from './icons/clear.svg?component'
import _ClientIcon from './icons/client.svg?component'
@@ -61,6 +63,7 @@ import _CubeIcon from './icons/cube.svg?component'
import _CurrencyIcon from './icons/currency.svg?component'
import _DashboardIcon from './icons/dashboard.svg?component'
import _DatabaseIcon from './icons/database.svg?component'
import _DatabaseBackupIcon from './icons/database-backup.svg?component'
import _DownloadIcon from './icons/download.svg?component'
import _DropdownIcon from './icons/dropdown.svg?component'
import _EditIcon from './icons/edit.svg?component'
@@ -78,6 +81,7 @@ import _FilterIcon from './icons/filter.svg?component'
import _FilterXIcon from './icons/filter-x.svg?component'
import _FolderIcon from './icons/folder.svg?component'
import _FolderArchiveIcon from './icons/folder-archive.svg?component'
import _FolderCogIcon from './icons/folder-cog.svg?component'
import _FolderOpenIcon from './icons/folder-open.svg?component'
import _FolderSearchIcon from './icons/folder-search.svg?component'
import _FolderUpIcon from './icons/folder-up.svg?component'
@@ -112,6 +116,7 @@ import _KeyIcon from './icons/key.svg?component'
import _KeyboardIcon from './icons/keyboard.svg?component'
import _LandmarkIcon from './icons/landmark.svg?component'
import _LanguagesIcon from './icons/languages.svg?component'
import _LayoutTemplateIcon from './icons/layout-template.svg?component'
import _LeftArrowIcon from './icons/left-arrow.svg?component'
import _LibraryIcon from './icons/library.svg?component'
import _LightBulbIcon from './icons/light-bulb.svg?component'
@@ -149,6 +154,7 @@ import _PackageIcon from './icons/package.svg?component'
import _PackageClosedIcon from './icons/package-closed.svg?component'
import _PackageOpenIcon from './icons/package-open.svg?component'
import _PaintbrushIcon from './icons/paintbrush.svg?component'
import _PaletteIcon from './icons/palette.svg?component'
import _PickaxeIcon from './icons/pickaxe.svg?component'
import _PlayIcon from './icons/play.svg?component'
import _PlugIcon from './icons/plug.svg?component'
@@ -252,6 +258,7 @@ export const BookmarkIcon = _BookmarkIcon
export const BotIcon = _BotIcon
export const BoxIcon = _BoxIcon
export const BoxImportIcon = _BoxImportIcon
export const BoxesIcon = _BoxesIcon
export const BracesIcon = _BracesIcon
export const BrushCleaningIcon = _BrushCleaningIcon
export const BugIcon = _BugIcon
@@ -265,6 +272,7 @@ export const CheckCircleIcon = _CheckCircleIcon
export const ChevronDownIcon = _ChevronDownIcon
export const ChevronLeftIcon = _ChevronLeftIcon
export const ChevronRightIcon = _ChevronRightIcon
export const ChevronUpIcon = _ChevronUpIcon
export const CircleUserIcon = _CircleUserIcon
export const ClearIcon = _ClearIcon
export const ClientIcon = _ClientIcon
@@ -287,6 +295,7 @@ export const CubeIcon = _CubeIcon
export const CurrencyIcon = _CurrencyIcon
export const DashboardIcon = _DashboardIcon
export const DatabaseIcon = _DatabaseIcon
export const DatabaseBackupIcon = _DatabaseBackupIcon
export const DownloadIcon = _DownloadIcon
export const DropdownIcon = _DropdownIcon
export const EditIcon = _EditIcon
@@ -304,6 +313,7 @@ export const FilterIcon = _FilterIcon
export const FilterXIcon = _FilterXIcon
export const FolderIcon = _FolderIcon
export const FolderArchiveIcon = _FolderArchiveIcon
export const FolderCogIcon = _FolderCogIcon
export const FolderOpenIcon = _FolderOpenIcon
export const FolderSearchIcon = _FolderSearchIcon
export const FolderUpIcon = _FolderUpIcon
@@ -338,6 +348,7 @@ export const KeyIcon = _KeyIcon
export const KeyboardIcon = _KeyboardIcon
export const LandmarkIcon = _LandmarkIcon
export const LanguagesIcon = _LanguagesIcon
export const LayoutTemplateIcon = _LayoutTemplateIcon
export const LeftArrowIcon = _LeftArrowIcon
export const LibraryIcon = _LibraryIcon
export const LightBulbIcon = _LightBulbIcon
@@ -375,6 +386,7 @@ export const PackageIcon = _PackageIcon
export const PackageClosedIcon = _PackageClosedIcon
export const PackageOpenIcon = _PackageOpenIcon
export const PaintbrushIcon = _PaintbrushIcon
export const PaletteIcon = _PaletteIcon
export const PickaxeIcon = _PickaxeIcon
export const PlayIcon = _PlayIcon
export const PlugIcon = _PlugIcon

26
packages/assets/icons/boxes.svg Normal file
View File

@@ -0,0 +1,26 @@
<!-- @license lucide-static v0.562.0 - ISC -->
<svg
class="lucide lucide-boxes"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z" />
<path d="m7 16.5-4.74-2.85" />
<path d="m7 16.5 5-3" />
<path d="M7 16.5v5.17" />
<path d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z" />
<path d="m17 16.5-5-3" />
<path d="m17 16.5 4.74-2.85" />
<path d="M17 16.5v5.17" />
<path d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z" />
<path d="M12 8 7.26 5.15" />
<path d="m12 8 4.74-2.85" />
<path d="M12 13.5V8" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 901 B

5
packages/assets/icons/chevron-up.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-chevron-up-icon lucide-chevron-up">
<path d="m18 15-6-6-6 6" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 276 B

20
packages/assets/icons/database-backup.svg Normal file
View File

@@ -0,0 +1,20 @@
<!-- @license lucide-static v0.562.0 - ISC -->
<svg
class="lucide lucide-database-backup"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<ellipse cx="12" cy="5" rx="9" ry="3" />
<path d="M3 12a9 3 0 0 0 5 2.69" />
<path d="M21 9.3V5" />
<path d="M3 5v14a9 3 0 0 0 6.47 2.88" />
<path d="M12 12v4h4" />
<path d="M13 20a5 5 0 0 0 9-3 4.5 4.5 0 0 0-4.5-4.5c-1.33 0-2.54.54-3.41 1.41L12 16" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 560 B

14
packages/assets/icons/folder-cog.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-folder-cog-icon lucide-folder-cog">
<path d="M10.3 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.98a2 2 0 0 1 1.69.9l.66 1.2A2 2 0 0 0 12 6h8a2 2 0 0 1 2 2v3.3" />
<path d="m14.305 19.53.923-.382" />
<path d="m15.228 16.852-.923-.383" />
<path d="m16.852 15.228-.383-.923" />
<path d="m16.852 20.772-.383.924" />
<path d="m19.148 15.228.383-.923" />
<path d="m19.53 21.696-.382-.924" />
<path d="m20.772 16.852.924-.383" />
<path d="m20.772 19.148.924.383" />
<circle cx="18" cy="18" r="3" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 705 B

17
packages/assets/icons/layout-template.svg Normal file
View File

@@ -0,0 +1,17 @@
<!-- @license lucide-static v0.562.0 - ISC -->
<svg
class="lucide lucide-layout-template"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="18" height="7" x="3" y="3" rx="1" />
<rect width="9" height="7" x="3" y="14" rx="1" />
<rect width="5" height="7" x="16" y="14" rx="1" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 452 B

1
packages/assets/icons/palette.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-palette" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 21a9 9 0 0 1 0 -18c4.97 0 9 3.582 9 8c0 1.06 -.474 2.078 -1.318 2.828c-.844 .75 -1.989 1.172 -3.182 1.172h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25" /><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 619 B

211
packages/assets/styles/ace.css Normal file
View File

@@ -0,0 +1,211 @@
.ace-modrinth .ace_gutter {
background: var(--surface-2);
color: var(--color-text-tertiary);
}
.ace-modrinth .ace_print-margin {
width: 1px;
background: var(--surface-5);
}
.ace-modrinth {
background-color: var(--surface-3);
color: var(--color-text-default);
}
.ace-modrinth .ace_cursor {
color: var(--color-brand);
}
.ace-modrinth .ace_marker-layer .ace_selection {
background: var(--color-brand-highlight);
}
.ace-modrinth.ace_multiselect .ace_selection.ace_start {
box-shadow: 0 0 3px 0 var(--surface-3);
}
.ace-modrinth .ace_marker-layer .ace_step {
background: var(--color-orange-highlight);
}
.ace-modrinth .ace_marker-layer .ace_bracket {
margin: -1px 0 0 -1px;
border: 1px solid var(--color-brand);
}
.ace-modrinth .ace_marker-layer .ace_active-line {
background: var(--surface-4);
}
.ace-modrinth .ace_gutter-active-line {
background-color: var(--surface-1);
}
.ace-modrinth .ace_marker-layer .ace_selected-word {
border: 1px solid var(--color-brand-highlight);
}
.ace-modrinth .ace_invisible {
color: var(--color-text-tertiary);
opacity: 0.5;
}
.ace-modrinth .ace_fold {
background-color: var(--color-blue);
border-color: var(--color-text-default);
}
/* Comments */
.ace-modrinth .ace_comment {
color: var(--color-gray);
font-style: italic;
}
/* Strings */
.ace-modrinth .ace_string {
color: var(--color-green);
}
.ace-modrinth .ace_string.ace_regexp {
color: var(--color-orange);
}
/* Constants */
.ace-modrinth .ace_constant.ace_numeric {
color: var(--color-purple);
}
.ace-modrinth .ace_constant.ace_language {
color: var(--color-orange);
}
.ace-modrinth .ace_constant.ace_character {
color: var(--color-orange);
}
.ace-modrinth .ace_constant.ace_other {
color: var(--color-purple);
}
/* Keywords */
.ace-modrinth .ace_keyword {
color: var(--color-red);
}
.ace-modrinth .ace_keyword.ace_operator {
color: var(--color-text-default);
}
/* Storage */
.ace-modrinth .ace_storage {
color: var(--color-red);
}
.ace-modrinth .ace_storage.ace_type {
color: var(--color-blue);
}
/* Entity names */
.ace-modrinth .ace_entity.ace_name.ace_function {
color: var(--color-blue);
}
.ace-modrinth .ace_entity.ace_name.ace_class {
color: var(--color-purple);
}
.ace-modrinth .ace_entity.ace_name.ace_tag {
color: var(--color-red);
}
.ace-modrinth .ace_entity.ace_other.ace_attribute-name {
color: var(--color-orange);
}
/* Variables */
.ace-modrinth .ace_variable {
color: var(--color-text-default);
}
.ace-modrinth .ace_variable.ace_parameter {
color: var(--color-text-default);
font-style: italic;
}
.ace-modrinth .ace_variable.ace_language {
color: var(--color-orange);
}
/* Support */
.ace-modrinth .ace_support.ace_function {
color: var(--color-blue);
}
.ace-modrinth .ace_support.ace_class {
color: var(--color-purple);
}
.ace-modrinth .ace_support.ace_type {
color: var(--color-blue);
}
.ace-modrinth .ace_support.ace_constant {
color: var(--color-purple);
}
/* Invalid */
.ace-modrinth .ace_invalid {
color: var(--color-text-primary);
background-color: var(--color-red-bg);
}
.ace-modrinth .ace_invalid.ace_deprecated {
color: var(--color-text-primary);
background-color: var(--color-orange-bg);
}
/* Punctuation */
.ace-modrinth .ace_punctuation {
color: var(--color-text-tertiary);
}
/* Meta */
.ace-modrinth .ace_meta.ace_tag {
color: var(--color-text-default);
}
/* Markup */
.ace-modrinth .ace_markup.ace_heading {
color: var(--color-red);
font-weight: bold;
}
.ace-modrinth .ace_markup.ace_list {
color: var(--color-orange);
}
.ace-modrinth .ace_markup.ace_bold {
font-weight: bold;
}
.ace-modrinth .ace_markup.ace_italic {
font-style: italic;
}
.ace-modrinth .ace_markup.ace_underline {
text-decoration: underline;
}
/* Indent guide */
.ace-modrinth .ace_indent-guide {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgYGBgYHB3d/8PAAOIAdULw8qMAAAAAElFTkSuQmCC)
right repeat-y;
opacity: 0.2;
}
.ace-modrinth .ace_indent-guide-active {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgYGBgYHB3d/8PAAOIAdULw8qMAAAAAElFTkSuQmCC)
right repeat-y;
opacity: 0.4;
}