chore(refactor): rename HistorySection to MountsSection and centralize types (#37)

drehelis · web-flow · commit e1bf94b98500 · 2026-03-22T00:10:59.000+02:00
diff --git a/src/App.vue b/src/App.vue
@@ -15,6 +15,7 @@ import EditorTabs from "./components/layout/EditorTabs.vue";
 import { useResponsive } from "./composables/useResponsive";
 import IndentationPicker from "./components/layout/IndentationPicker.vue";
 import PresetsGallery from "./components/presets/PresetsGallery.vue";
+import type { PresetApplyPayload, Section } from "./types";
 
 const {
   state,
@@ -45,11 +46,9 @@ const {
 const { isMobile } = useResponsive();
 const activeView = ref<"config" | "preview">("config");
 
-const activeSection = ref<
-  "general" | "features" | "ports" | "history" | "advanced" | "presets"
->("presets");
+const activeSection = ref<Section>("presets");
 
-function handleApplyPreset(payload: any) {
+function handleApplyPreset(payload: PresetApplyPayload) {
   state.value.orchestration = payload.orchestration;
   state.value.config = {
     ...state.value.config,
diff --git a/src/components/ConfigForm.vue b/src/components/ConfigForm.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import type { DevContainerConfig, OrchestrationType } from "../types";
+import type { DevContainerConfig, OrchestrationType, Section } from "../types";
 import GeneralSection from "./GeneralSection.vue";
 import FeaturesSection from "./FeaturesSection.vue";
 import PortsSection from "./PortsSection.vue";
-import HistorySection from "./HistorySection.vue";
+import MountsSection from "./MountsSection.vue";
 import AdvancedSection from "./AdvancedSection.vue";
 
 const props = defineProps<{
   modelValue: {
     orchestration: OrchestrationType;
     config: DevContainerConfig;
   };
-  activeSection: string;
+  activeSection: Section;
 }>();
 
 const emit = defineEmits(["update:modelValue"]);
@@ -62,10 +62,10 @@ function handleUpdateOrchestration(val: OrchestrationType) {
     </div>
 
     <div
-      v-if="activeSection === 'history'"
+      v-if="activeSection === 'mounts'"
       class="space-y-8 animate-in fade-in slide-in-from-left-2 duration-300"
     >
-      <HistorySection
+      <MountsSection
         :config="config"
         :orchestration="orchestration"
         @update:config="handleUpdateConfig"
diff --git a/src/components/FeatureSelector.vue b/src/components/FeatureSelector.vue
@@ -182,9 +182,10 @@ const manualFeatures = computed(() => {
           class="flex justify-between p-3 cursor-pointer select-none gap-3"
         >
           <div class="flex flex-col flex-1 min-w-0 gap-1.5">
-            <div class="flex flex-wrap items-center gap-2">
+            <div class="flex items-center gap-2 min-w-0">
               <span
-                class="text-[11px] font-black uppercase tracking-wider truncate shrink-0"
+                class="text-[11px] font-black uppercase tracking-wider truncate flex-1 min-w-0"
+                :title="feature.name"
                 :class="
                   selectedFeatures[feature.id]
                     ? 'text-ide-accent'
@@ -194,7 +195,7 @@ const manualFeatures = computed(() => {
                 {{ feature.name }}
               </span>
               <span
-                class="px-1.5 rounded-full text-[6px] font-black uppercase tracking-widest border whitespace-nowrap"
+                class="px-1.5 rounded-full text-[6px] font-black uppercase tracking-widest border whitespace-nowrap shrink-0"
                 style="padding-top: 0.125rem; padding-bottom: 0.125rem"
                 :class="
                   feature.id.startsWith('ghcr.io/devcontainers/features')
@@ -230,9 +231,11 @@ const manualFeatures = computed(() => {
                 </svg>
               </a>
             </div>
-            <span class="text-[8px] font-mono text-ide-text-muted truncate">{{
-              feature.id
-            }}</span>
+            <span
+              class="text-[8px] font-mono text-ide-text-muted truncate block"
+              :title="feature.id"
+              >{{ feature.id }}</span
+            >
           </div>
           <div
             class="w-4 h-4 border border-ide-border rounded flex items-center justify-center transition-colors"
@@ -405,7 +408,8 @@ const manualFeatures = computed(() => {
               >Manual Reference</span
             >
             <span
-              class="text-[8px] font-mono text-ide-text-muted truncate pr-4"
+              class="text-[8px] font-mono text-ide-text-muted truncate block pr-4"
+              :title="String(id)"
               >{{ id }}</span
             >
           </div>
diff --git a/src/components/MountsSection.vue b/src/components/MountsSection.vue
diff --git a/src/components/layout/ActivityBar.vue b/src/components/layout/ActivityBar.vue
@@ -1,11 +1,5 @@
 <script setup lang="ts">
-type Section =
-  | "general"
-  | "features"
-  | "ports"
-  | "history"
-  | "advanced"
-  | "presets";
+import type { Section } from "../../types";
 
 defineProps<{
   activeSection: Section;
@@ -128,15 +122,15 @@ defineEmits<{
       </svg>
     </div>
     <div
-      @click="$emit('update:activeSection', 'history')"
+      @click="$emit('update:activeSection', 'mounts')"
       class="activity-item group"
-      :class="{ active: activeSection === 'history' }"
+      :class="{ active: activeSection === 'mounts' }"
       title="Mounts"
     >
       <svg
         class="w-6 h-6"
         :class="
-          activeSection === 'history'
+          activeSection === 'mounts'
             ? 'text-ide-text-bright'
             : 'text-ide-text-muted group-hover:text-ide-text'
         "
diff --git a/src/components/layout/MobileSectionNav.vue b/src/components/layout/MobileSectionNav.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { CONFIG_SECTIONS, type Section } from "../../constants/ui";
+import { CONFIG_SECTIONS } from "../../constants/ui";
+import type { Section } from "../../types";
 
 defineProps<{
   activeSection: Section;
diff --git a/src/components/presets/PresetCard.vue b/src/components/presets/PresetCard.vue
@@ -58,6 +58,7 @@ const iconError = ref(false);
           <div class="flex items-center gap-2">
             <span
               class="text-[11px] font-black uppercase tracking-wider truncate"
+              :title="preset.name"
               :class="loading ? 'text-ide-accent' : 'text-ide-text-bright'"
             >
               {{ preset.name }}
@@ -67,9 +68,11 @@ const iconError = ref(false);
               class="w-2.5 h-2.5 border border-ide-accent border-t-transparent rounded-full animate-spin"
             ></span>
           </div>
-          <span class="text-[8px] font-mono text-ide-text-muted truncate">{{
-            preset.image
-          }}</span>
+          <span
+            class="text-[8px] font-mono text-ide-text-muted truncate"
+            :title="preset.image"
+            >{{ preset.image }}</span
+          >
         </div>
       </div>
 
diff --git a/src/components/presets/PresetsGallery.vue b/src/components/presets/PresetsGallery.vue
@@ -5,6 +5,7 @@ import type {
   OfficialTemplate,
   PresetConfigState,
   TemplateOption,
+  PresetApplyPayload,
 } from "../../types";
 import {
   usePresets,
@@ -15,15 +16,7 @@ import PresetConfigForm from "./PresetConfigForm.vue";
 import SectionHeader from "../SectionHeader.vue";
 
 const emit = defineEmits<{
-  (
-    e: "apply",
-    data: {
-      orchestration: OrchestrationType;
-      config: any;
-      dockerfile: string | null;
-      dockerCompose: string | null;
-    },
-  ): void;
+  (e: "apply", data: PresetApplyPayload): void;
 }>();
 
 const { templates, loading, error, refresh, fetchTemplateConfig } =
diff --git a/src/composables/useEditorActions.ts b/src/composables/useEditorActions.ts
@@ -1,8 +1,9 @@
 import { ref, type Ref } from "vue";
 import JSZip from "jszip";
+import type { EditorFile } from "../types";
 
 export function useEditorActions(
-  allFiles: Ref<Record<string, { content: string; language: string }>>,
+  allFiles: Ref<Record<string, EditorFile>>,
   activeFile: Ref<string>,
   reset: () => void,
   getShareUrl: () => string,
diff --git a/src/composables/useFeatures.ts b/src/composables/useFeatures.ts
@@ -1,22 +1,6 @@
 import { ref, onMounted } from "vue";
 import { DATA_URLS } from "../constants/urls";
-
-export interface FeatureOption {
-  type: "string" | "boolean";
-  description?: string;
-  default?: any;
-  proposals?: any[];
-  enum?: any[];
-}
-
-export interface FeatureMetadata {
-  id: string;
-  name: string;
-  description?: string;
-  options?: Record<string, FeatureOption>;
-  category?: string;
-  documentationURL?: string;
-}
+import type { FeatureMetadata } from "../types";
 
 export function useFeatures() {
   const features = ref<FeatureMetadata[]>([]);
diff --git a/src/composables/useGenerator.ts b/src/composables/useGenerator.ts
@@ -1,6 +1,6 @@
 import { ref, computed, watch } from "vue";
 import LZString from "lz-string";
-import type { DevContainerConfig, OrchestrationType } from "../types";
+import type { OrchestrationType, GeneratorState, EditorFile } from "../types";
 import { URLS } from "../constants/urls";
 import { DEFAULT_STATE } from "../constants/defaults";
 import { STORAGE_KEYS } from "../constants/storage";
@@ -35,11 +35,7 @@ export function useGenerator() {
     parsed = null;
   }
 
-  const state = ref<{
-    orchestration: OrchestrationType;
-    presetFiles: Record<string, string>;
-    config: DevContainerConfig;
-  }>(
+  const state = ref<GeneratorState>(
     JSON.parse(
       JSON.stringify(parsed?.state?.config ? parsed.state : DEFAULT_STATE),
     ),
@@ -380,7 +376,7 @@ export function useGenerator() {
   }
 
   const allFiles = computed(() => {
-    const files: Record<string, { content: string; language: string }> = {
+    const files: Record<string, EditorFile> = {
       "devcontainer.json": {
         content: generatedJson.value,
         language: "json",
diff --git a/src/composables/useSidebarResize.ts b/src/composables/useSidebarResize.ts
@@ -3,9 +3,14 @@ import { ref, onUnmounted } from "vue";
 const SIDEBAR_WIDTH_KEY = "devcontainer_sidebar_width";
 
 export function useSidebarResize(minWidth = 250, maxWidth = 800) {
-  const sidebarWidth = ref(
-    parseInt(localStorage.getItem(SIDEBAR_WIDTH_KEY) || "400"),
-  );
+  const getInitialWidth = () => {
+    const saved = localStorage.getItem(SIDEBAR_WIDTH_KEY);
+    if (!saved) return 500;
+    const parsed = parseInt(saved, 10);
+    return isNaN(parsed) ? 500 : Math.min(Math.max(parsed, minWidth), maxWidth);
+  };
+
+  const sidebarWidth = ref(getInitialWidth());
   const isResizing = ref(false);
 
   const startResizing = () => {
diff --git a/src/constants/themes.ts b/src/constants/themes.ts
@@ -1,8 +1,4 @@
-export interface Theme {
-  id: string;
-  name: string;
-  class: string;
-}
+import type { Theme } from "../types";
 
 export const THEMES: Theme[] = [
   { id: "midnight", name: "Midnight", class: "" },
diff --git a/src/constants/ui.ts b/src/constants/ui.ts
@@ -1,17 +1,11 @@
-export type Section =
-  | "presets"
-  | "general"
-  | "features"
-  | "ports"
-  | "history"
-  | "advanced";
+import type { Section } from "../types";
 
 export const CONFIG_SECTIONS: { id: Section; name: string }[] = [
   { id: "presets", name: "Presets" },
   { id: "general", name: "General" },
   { id: "features", name: "Features" },
   { id: "ports", name: "Network" },
-  { id: "history", name: "Mounts" },
+  { id: "mounts", name: "Mounts" },
   { id: "advanced", name: "Hooks" },
 ];
 
diff --git a/src/types.ts b/src/types.ts
@@ -1,3 +1,45 @@
+export interface Theme {
+  id: string;
+  name: string;
+  class: string;
+}
+
+export interface FeatureOption {
+  type: "string" | "boolean";
+  description?: string;
+  default?: any;
+  proposals?: any[];
+  enum?: any[];
+}
+
+export interface FeatureMetadata {
+  id: string;
+  name: string;
+  description?: string;
+  options?: Record<string, FeatureOption>;
+  category?: string;
+  documentationURL?: string;
+}
+
+export interface GeneratorState {
+  orchestration: OrchestrationType;
+  presetFiles: Record<string, string>;
+  config: DevContainerConfig;
+}
+
+export interface EditorFile {
+  content: string;
+  language: string;
+}
+
+export type Section =
+  | "presets"
+  | "general"
+  | "features"
+  | "ports"
+  | "mounts"
+  | "advanced";
+
 export interface DevContainerConfig {
   name: string;
   image?: string;
@@ -121,6 +163,13 @@ export interface OfficialTemplate {
   icon?: string;
 }
 
+export interface PresetApplyPayload {
+  orchestration: OrchestrationType;
+  config: DevContainerConfig;
+  dockerfile: string | null;
+  dockerCompose: string | null;
+}
+
 export interface PresetConfigState {
   config: DevContainerConfig;
   metadata: TemplateMetadata;
