Improve personal template editing flow

apps/desktop/src/shared/ui/resource-list/preview-header.tsx

@@ -9,13 +9,17 @@ export function ResourcePreviewHeader({
   category,
   targets,
   onClone,
+  actionLabel = "Clone",
+  actionIcon,
   children,
 }: {
   title: string;
   description?: string | null;
   category?: string | null;
   targets?: string[] | null;
   onClone: () => void;
+  actionLabel?: string;
+  actionIcon?: ReactNode;
   children?: ReactNode;
 }) {
   return (
@@ -30,8 +34,8 @@ export function ResourcePreviewHeader({
           )}
         </div>
         <Button onClick={onClone} size="sm" className="ml-4 shrink-0">
-          <Copy className="mr-2 h-4 w-4" />
-          Clone
+          {actionIcon ?? <Copy className="mr-2 h-4 w-4" />}
+          {actionLabel}
         </Button>
       </div>
       {category && (

apps/desktop/src/templates/components/details.tsx

@@ -1,3 +1,5 @@
+import { Pencil } from "lucide-react";
+
 import type { TemplateSection } from "@hypr/store";
 
 import { SectionsList } from "./sections-editor";
@@ -77,6 +79,8 @@ function WebTemplatePreview({
         description={template.description}
         category={template.category}
         targets={template.targets}
+        actionLabel="Edit"
+        actionIcon={<Pencil className="mr-2 h-4 w-4" />}
         onClone={() =>
           onClone({
             title: template.title ?? "",

apps/desktop/src/templates/index.tsx

@@ -109,7 +109,10 @@ function TemplateView({ tab }: { tab: Extract<Tab, { type: "templates" }> }) {
       description: string;
       sections: TemplateSection[];
     }) => {
-      const id = createTemplate(template);
+      const id = createTemplate({
+        ...template,
+        title: getTemplateCopyTitle(template.title),
+      });
       if (id) {
         setSelectedMineId(id);
       }
@@ -129,3 +132,12 @@ function TemplateView({ tab }: { tab: Extract<Tab, { type: "templates" }> }) {
     </div>
   );
 }
+
+function getTemplateCopyTitle(title: string) {
+  const value = title.trim();
+
+  if (!value) return "Untitled (Copy)";
+  if (value.endsWith("(Copy)")) return value;
+
+  return `${value} (Copy)`;
+}

apps/desktop/src/templates/sidebar-content.tsx

@@ -247,20 +247,6 @@ export function TemplatesSidebarContent({
       </div>
 
       <div className="scrollbar-hide flex-1 overflow-y-auto">
-        {isWebLoading && (
-          <div className="pt-3">
-            <ListSectionTitle>Provided by Char</ListSectionTitle>
-            <div className="flex flex-col gap-1">
-              {[0, 1, 2, 3].map((index) => (
-                <div key={index} className="animate-pulse rounded-lg px-3 py-2">
-                  <div className="h-4 w-3/4 rounded-xs bg-neutral-200" />
-                  <div className="mt-1.5 h-3 w-1/2 rounded-xs bg-neutral-100" />
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-
         {isEmpty ? (
           <div className="px-3 py-8 text-center text-neutral-500">
             <BookText size={32} className="mx-auto mb-2 text-neutral-300" />
@@ -272,12 +258,47 @@ export function TemplatesSidebarContent({
                 onClick={handleCreateTemplate}
                 className="mt-3 text-sm text-neutral-600 underline hover:text-neutral-800"
               >
-                Create your first template
+                Create my first template
               </button>
             )}
           </div>
         ) : (
           <>
+            {hasMineResults && (
+              <div className="pt-3">
+                <ListSectionTitle>My templates</ListSectionTitle>
+                {filteredMine.map((template) => (
+                  <TemplateListItem
+                    key={template.id}
+                    template={template}
+                    selected={
+                      !isWebMode && effectiveSelectedMineId === template.id
+                    }
+                    onSelect={setSelectedMineId}
+                    onDuplicate={handleDuplicateTemplate}
+                    onDelete={handleDeleteTemplate}
+                  />
+                ))}
+              </div>
+            )}
+
+            {isWebLoading && !hasWebResults && (
+              <div className="pt-3">
+                <ListSectionTitle>Provided by Char</ListSectionTitle>
+                <div className="flex flex-col gap-1">
+                  {[0, 1, 2, 3].map((index) => (
+                    <div
+                      key={index}
+                      className="animate-pulse rounded-lg px-3 py-2"
+                    >
+                      <div className="h-4 w-3/4 rounded-xs bg-neutral-200" />
+                      <div className="mt-1.5 h-3 w-1/2 rounded-xs bg-neutral-100" />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
             {hasWebResults && (
               <div className="pt-3">
                 <ListSectionTitle>Provided by Char</ListSectionTitle>
@@ -297,41 +318,13 @@ export function TemplatesSidebarContent({
                       <div className="min-w-0 flex-1">
                         <div className="truncate font-medium">
                           {template.title || "Untitled"}
-                          {template.category && (
-                            <span className="ml-1 font-mono text-xs text-stone-400">
-                              ({template.category})
-                            </span>
-                          )}
                         </div>
-                        {template.description && (
-                          <div className="truncate text-xs text-neutral-500">
-                            {template.description}
-                          </div>
-                        )}
                       </div>
                     </div>
                   </button>
                 ))}
               </div>
             )}
-
-            {hasMineResults && (
-              <div className="pt-3">
-                <ListSectionTitle>Your templates</ListSectionTitle>
-                {filteredMine.map((template) => (
-                  <TemplateListItem
-                    key={template.id}
-                    template={template}
-                    selected={
-                      !isWebMode && effectiveSelectedMineId === template.id
-                    }
-                    onSelect={setSelectedMineId}
-                    onDuplicate={handleDuplicateTemplate}
-                    onDelete={handleDeleteTemplate}
-                  />
-                ))}
-              </div>
-            )}
           </>
         )}
       </div>
@@ -395,11 +388,6 @@ function TemplateListItem({
           <div className="truncate font-medium">
             {template.title?.trim() || "Untitled"}
           </div>
-          {template.description && (
-            <div className="truncate text-xs text-neutral-500">
-              {template.description}
-            </div>
-          )}
         </div>
       </div>
     </button>