Add server unzipping (#3622)

* Initial unzipping feature

* Remove explicit backup provider naming from frontend

* CF placeholder

* Use regex for CF links

* Lint

* Add unzip warning for conflicting files, fix hydration error

* Adjust conflict modal ui

* Fix old queued ops sticking around, remove conflict warning

* Add vscode "editor.detectIndentation": true

packages/assets/external/curseforge.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>CurseForge</title><path fill="currentColor" d="M18.326 9.2145S23.2261 8.4418 24 6.1882h-7.5066V4.4H0l2.0318 2.3576V9.173s5.1267-.2665 7.1098 1.2372c2.7146 2.516-3.053 5.917-3.053 5.917L5.0995 19.6c1.5465-1.4726 4.494-3.3775 9.8983-3.2857-2.0565.65-4.1245 1.6651-5.7344 3.2857h10.9248l-1.0288-3.2726s-7.918-4.6688-.8336-7.1127z"/></svg>

packages/assets/icons/file-archive.svg

@@ -0,0 +1 @@
+<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-file-archive-icon lucide-file-archive"><path d="M10 12v-1"/><path d="M10 18v-2"/><path d="M10 7V6"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M15.5 22H18a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v16a2 2 0 0 0 .274 1.01"/><circle cx="10" cy="20" r="2"/></svg>

packages/assets/index.ts

@@ -15,6 +15,7 @@ import _SSOSteamIcon from './external/sso/steam.svg?component'
 import _AppleIcon from './external/apple.svg?component'
 import _BlueskyIcon from './external/bluesky.svg?component'
 import _BuyMeACoffeeIcon from './external/bmac.svg?component'
+import _CurseForgeIcon from './external/curseforge.svg?component'
 import _DiscordIcon from './external/discord.svg?component'
 import _GithubIcon from './external/github.svg?component'
 import _KoFiIcon from './external/kofi.svg?component'
@@ -74,6 +75,7 @@ import _ExternalIcon from './icons/external.svg?component'
 import _EyeIcon from './icons/eye.svg?component'
 import _EyeOffIcon from './icons/eye-off.svg?component'
 import _FileIcon from './icons/file.svg?component'
+import _FileArchiveIcon from './icons/file-archive.svg?component'
 import _FileTextIcon from './icons/file-text.svg?component'
 import _FilterIcon from './icons/filter.svg?component'
 import _FilterXIcon from './icons/filter-x.svg?component'
@@ -225,6 +227,7 @@ export const AppleIcon = _AppleIcon
 export const BlueskyIcon = _BlueskyIcon
 export const BuyMeACoffeeIcon = _BuyMeACoffeeIcon
 export const GithubIcon = _GithubIcon
+export const CurseForgeIcon = _CurseForgeIcon
 export const DiscordIcon = _DiscordIcon
 export const KoFiIcon = _KoFiIcon
 export const MastodonIcon = _MastodonIcon
@@ -281,6 +284,7 @@ export const ExternalIcon = _ExternalIcon
 export const EyeIcon = _EyeIcon
 export const EyeOffIcon = _EyeOffIcon
 export const FileIcon = _FileIcon
+export const FileArchiveIcon = _FileArchiveIcon
 export const FileTextIcon = _FileTextIcon
 export const FilterIcon = _FilterIcon
 export const FilterXIcon = _FilterXIcon

packages/ui/src/components/base/ButtonStyled.vue

@@ -4,7 +4,7 @@ import { computed } from 'vue'
 const props = withDefaults(
   defineProps<{
     color?: 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple'
-    size?: 'standard' | 'large'
+    size?: 'standard' | 'large' | 'small'
     circular?: boolean
     type?: 'standard' | 'outlined' | 'transparent' | 'highlight' | 'highlight-colored-text'
     colorFill?: 'auto' | 'background' | 'text' | 'none'
@@ -67,6 +67,8 @@ const colorVar = computed(() => {
 const height = computed(() => {
   if (props.size === 'large') {
     return '3rem'
+  } else if (props.size === 'small') {
+    return '1.5rem'
   }
   return '2.25rem'
 })
@@ -74,6 +76,8 @@ const height = computed(() => {
 const width = computed(() => {
   if (props.size === 'large') {
     return props.circular ? '3rem' : 'auto'
+  } else if (props.size === 'small') {
+    return props.circular ? '1.5rem' : 'auto'
   }
   return props.circular ? '2.25rem' : 'auto'
 })
@@ -82,6 +86,8 @@ const paddingX = computed(() => {
   let padding = props.circular ? '0.5rem' : '0.75rem'
   if (props.size === 'large') {
     padding = props.circular ? '0.75rem' : '1rem'
+  } else if (props.size === 'small') {
+    padding = props.circular ? '0.125rem' : '0.5rem'
   }
   return `calc(${padding} - 0.125rem)`
 })
@@ -96,6 +102,8 @@ const paddingY = computed(() => {
 const gap = computed(() => {
   if (props.size === 'large') {
     return '0.5rem'
+  } else if (props.size === 'small') {
+    return '0.25rem'
   }
   return '0.375rem'
 })
@@ -114,6 +122,8 @@ const radius = computed(() => {
 
   if (props.size === 'large') {
     return '1rem'
+  } else if (props.size === 'small') {
+    return '0.5rem'
   }
   return '0.75rem'
 })
@@ -121,6 +131,8 @@ const radius = computed(() => {
 const iconSize = computed(() => {
   if (props.size === 'large') {
     return '1.5rem'
+  } else if (props.size === 'small') {
+    return '1rem'
   }
   return '1.25rem'
 })
@@ -192,12 +204,19 @@ const colorVariables = computed(() => {
 
   return `--_bg: ${colors.bg}; --_text: ${colors.text}; --_hover-bg: ${hoverColors.bg}; --_hover-text: ${hoverColors.text};`
 })
+
+const fontSize = computed(() => {
+  if (props.size === 'small') {
+    return 'text-sm'
+  }
+  return 'text-base'
+})
 </script>
 
 <template>
   <div
     class="btn-wrapper"
-    :class="{ outline: type === 'outlined' }"
+    :class="[{ outline: type === 'outlined' }, fontSize]"
     :style="`${colorVariables}--_height:${height};--_width:${width};--_radius: ${radius};--_padding-x:${paddingX};--_padding-y:${paddingY};--_gap:${gap};--_font-weight:${fontWeight};--_icon-size:${iconSize};`"
   >
     <slot />

packages/ui/src/components/base/ProgressBar.vue

@@ -49,7 +49,10 @@ const colors = {
 const percent = computed(() => props.progress / props.max)
 </script>
 <template>
-  <div class="flex w-[15rem] h-1 rounded-full overflow-hidden" :class="colors[props.color].bg">
+  <div
+    class="flex w-full max-w-[15rem] h-1 rounded-full overflow-hidden"
+    :class="colors[props.color].bg"
+  >
     <div
       class="rounded-full progress-bar"
       :class="[colors[props.color].fg, { 'progress-bar--waiting': waiting }]"