From 204862c7a02ccc63e466245149a7b05cc05fc65b Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Sat, 31 May 2025 15:10:19 -0700
Subject: [PATCH] [fix] Fix user directory snippet import syntax and improve
 layout

Fixes broken snippet imports in appearance pages that were using deprecated <Snippet> syntax instead of proper import statements. Also improves the user directory snippet layout by organizing information into clear tabs by installation type (Desktop, Manual Install, Portable) for better user experience.

Fixes #135
---
 interface/appearance.mdx            |  4 ++-
 snippets/install/user-directory.mdx | 49 ++++++++++++++++++-----------
 zh-CN/interface/appearance.mdx      |  4 ++-
 3 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/interface/appearance.mdx b/interface/appearance.mdx
index 805ba2fa..f97d79f1 100644
--- a/interface/appearance.mdx
+++ b/interface/appearance.mdx
@@ -5,6 +5,8 @@ sidebarTitle: "Appearance"
 icon: "paintbrush"
 ---
 
+import UserDirectory from "/snippets/install/user-directory.mdx"
+
 ComfyUI offers flexible appearance customization options that allow you to personalize the interface to your preferences.
 
 ## Color Palette System
@@ -128,7 +130,7 @@ For cases where the color palette doesn't provide enough control, you can use cu
 
 ### User Directory Location
 
-<Snippet file="install/user-directory.mdx" />
+<UserDirectory/>
 
 ### CSS Specificity Note
 
diff --git a/snippets/install/user-directory.mdx b/snippets/install/user-directory.mdx
index fa9eb465..7a408ee8 100644
--- a/snippets/install/user-directory.mdx
+++ b/snippets/install/user-directory.mdx
@@ -1,22 +1,35 @@
-The ComfyUI user directory is where your personal settings, workflows, and customizations are stored. The location depends on whether you're using the desktop application or the standard installation:
-
-## Desktop Application
-
-### Windows
-- `C:\Users\<your username>\AppData\Roaming\ComfyUI`
-
-### macOS
-- `~/Library/Application Support/ComfyUI`
-
-### Linux
-- `~/.config/ComfyUI`
-
-## Standard Installation (Non-Desktop)
-
-The user directory is located in the main ComfyUI installation folder:
-
-- `<ComfyUI installation path>/user`
+The ComfyUI user directory is where your personal settings, workflows, and customizations are stored. The location depends on your installation type:
+
+<Tabs>
+<Tab title="Desktop - Windows">
+```
+C:\Users\<your username>\AppData\Roaming\ComfyUI
+```
+</Tab>
+<Tab title="Desktop - macOS">
+```
+~/Library/Application Support/ComfyUI
+```
+</Tab>
+<Tab title="Desktop - Linux">
+```
+~/.config/ComfyUI
+```
+</Tab>
+<Tab title="Manual Install">
+The user directory is located in your ComfyUI installation folder:
+```
+<ComfyUI installation path>/user
+```
 
 For example, if you cloned ComfyUI to `C:\ComfyUI`, your user directory would be `C:\ComfyUI\user`.
+</Tab>
+<Tab title="Portable">
+The user directory is located in your ComfyUI portable folder:
+```
+<ComfyUI_windows_portable>/ComfyUI/user
+```
+</Tab>
+</Tabs>
 
 This location contains your workflows, settings, and other user-specific files.
\ No newline at end of file
diff --git a/zh-CN/interface/appearance.mdx b/zh-CN/interface/appearance.mdx
index 51aa98c2..456bb5a1 100644
--- a/zh-CN/interface/appearance.mdx
+++ b/zh-CN/interface/appearance.mdx
@@ -5,6 +5,8 @@ sidebarTitle: "外观"
 icon: "paintbrush"
 ---
 
+import UserDirectory from "/snippets/install/user-directory.mdx"
+
 ComfyUI 提供灵活的外观自定义选项，允许您根据个人喜好来个性化界面。
 
 ## 调色板系统
@@ -128,7 +130,7 @@ ComfyUI 允许您为画布设置自定义背景图片，提供更加个性化的
 
 ### 用户目录位置
 
-<Snippet file="install/user-directory.mdx" />
+<UserDirectory/>
 
 ### CSS 特异性说明