♻️ Update command name, move styles to styles file, and improve file checking

src/ClipperCatalog.tsx

@@ -485,11 +485,19 @@ const ClipperCatalog: React.FC<ClipperCatalogProps> = ({ app, plugin }) => {
                     >
                       <path d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                     </svg>
-                    <ArticleTitle 
+                    {(() => {
-                      file={app.vault.getAbstractFileByPath(article.path) as TFile}
+                      const abstractFile = app.vault.getAbstractFileByPath(article.path);
-                      content={article.content || ''}
+                      if (abstractFile instanceof TFile) {
-                      title={article.title}
+                        return (
-                    />
+                          <ArticleTitle 
+                            file={abstractFile}
+                            content={article.content || ''}
+                            title={article.title}
+                          />
+                        );
+                      }
+                      return <span>{article.title}</span>;
+                    })()}
                   </span>
                 </td>
                 <td className="cc-px-4 cc-py-2 clipper-catalog-muted">
@@ -540,114 +548,6 @@ const ClipperCatalog: React.FC<ClipperCatalogProps> = ({ app, plugin }) => {
           </div>
         </div>
       )}
-
-      <style>{`
-        /* Container styles */
-        .clipper-catalog-advanced {
-          background-color: var(--background-secondary);
-          border: 1px solid var(--background-modifier-border);
-        }
-
-        .clipper-catalog-search {
-          background-color: var(--background-secondary);
-          border: 1px solid var(--background-modifier-border);
-        }
-
-        /* Button styles */
-        .clipper-catalog-button {
-          background-color: var(--interactive-accent) !important;
-          color: var(--text-on-accent) !important;
-          transition: opacity 0.2s ease;
-        }
-
-        .clipper-catalog-button:disabled {
-          opacity: 0.5;
-          cursor: not-allowed;
-        }
-
-        .clipper-catalog-button:hover:not(:disabled) {
-          opacity: 0.9;
-        }
-
-        /* Directory chip styles */
-        .cc-bg-chip {
-          background-color: var(--background-modifier-form-field);
-        }
-
-        .cc-bg-chip-hover {
-          background-color: var(--background-secondary-alt);
-        }
-
-        .cc-text-close-icon {
-          color: var(--background-secondary);
-        }
-        
-        /* For dark theme support */
-        .theme-dark .cc-text-close-icon {
-          color: var(--background-primary);
-        }
-
-        /* Table styles */
-        .clipper-catalog-header-row {
-          border-bottom: 1px solid var(--background-modifier-border);
-        }
-
-        .clipper-catalog-header-cell {
-          color: var(--text-normal);
-        }
-
-        .clipper-catalog-header-cell:hover {
-          background-color: var(--background-modifier-hover);
-        }
-
-        .clipper-catalog-row {
-          border-bottom: 1px solid var(--background-modifier-border);
-        }
-
-        .clipper-catalog-row:hover {
-          background-color: var(--background-modifier-hover);
-        }
-
-        /* Text and icon styles */
-        .clipper-catalog-input {
-          color: var(--text-normal);
-        }
-
-        .clipper-catalog-icon,
-        .clipper-catalog-clear-btn,
-        .clipper-catalog-refresh,
-        .clipper-catalog-muted {
-          color: var(--text-muted);
-        }
-
-        .clipper-catalog-title {
-          color: var(--text-normal);
-        }
-
-        /* Tag styles */
-        .clipper-catalog-tag {
-          background-color: var(--interactive-accent);
-          color: var(--text-on-accent);
-          transition: opacity 0.2s ease;
-        }
-
-        .clipper-catalog-tag:hover {
-          opacity: 0.8;
-        }
-
-        /* Link styles */
-        .clipper-catalog-link {
-          color: var(--text-accent);
-          font-size: 0.75rem;
-          padding: 0.25rem 0;
-          transition: opacity 0.2s ease;
-        }
-
-        .clipper-catalog-link:hover {
-          opacity: 0.8;
-          text-decoration: underline;
-        }
-      `}</style>
     </div>
   );
 };

src/main.tsx

@@ -48,8 +48,8 @@ export default class ObsidianClipperCatalog extends Plugin {
 
 
     this.addCommand({
-      id: 'open-clipper-catalog',
+      id: 'show-all-clippings',
-      name: 'Open Clipper Catalog',
+      name: 'Show All Clippings',
       callback: () => {
         // Get active leaf or create new one in center
         const leaf = this.app.workspace.getLeaf('tab');
@@ -108,10 +108,6 @@ class ClipperCatalogSettingTab extends PluginSettingTab {
       cls: 'advanced-settings-name'
     });
 
-    // Add some styling to the heading element
-    settingsHeader.style.padding = '10px 0';
-    settingsHeader.style.fontWeight = 'bold';
-
     new Setting(containerEl)
     .setName('Property Name')
     .setDesc('Specify which frontmatter property contains your clipped URLs (e.g., "source", "url", "link").')
@@ -121,14 +117,5 @@ class ClipperCatalogSettingTab extends PluginSettingTab {
         this.plugin.settings.sourcePropertyName = value;
         await this.plugin.saveSettings();
       }));
-
-    // Add CSS
-    containerEl.createEl('style', {
-      text: `
-          .text-sm{
-            font-size:.75rem;
-          }
-        `
-    });
   }
 }

src/styles.css

@@ -12,6 +12,11 @@
   }
 }
 
+/* Text utilities */
+.text-sm {
+  font-size: .75rem;
+}
+
 /* Scoped plugin styles */
 .clipper-catalog-plugin {
   /* Add minimal reset only for our plugin elements */
@@ -107,3 +112,109 @@
     }
   }
 }
+
+/* Container styles */
+.clipper-catalog-advanced {
+  background-color: var(--background-secondary);
+  border: 1px solid var(--background-modifier-border);
+}
+
+.clipper-catalog-search {
+  background-color: var(--background-secondary);
+  border: 1px solid var(--background-modifier-border);
+}
+
+/* Button styles */
+.clipper-catalog-button {
+  background-color: var(--interactive-accent) !important;
+  color: var(--text-on-accent) !important;
+  transition: opacity 0.2s ease;
+}
+
+.clipper-catalog-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.clipper-catalog-button:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+/* Directory chip styles */
+.cc-bg-chip {
+  background-color: var(--background-modifier-form-field);
+}
+
+.cc-bg-chip-hover {
+  background-color: var(--background-secondary-alt);
+}
+
+.cc-text-close-icon {
+  color: var(--background-secondary);
+}
+
+/* For dark theme support */
+.theme-dark .cc-text-close-icon {
+  color: var(--background-primary);
+}
+
+/* Table styles */
+.clipper-catalog-header-row {
+  border-bottom: 1px solid var(--background-modifier-border);
+}
+
+.clipper-catalog-header-cell {
+  color: var(--text-normal);
+}
+
+.clipper-catalog-header-cell:hover {
+  background-color: var(--background-modifier-hover);
+}
+
+.clipper-catalog-row {
+  border-bottom: 1px solid var(--background-modifier-border);
+}
+
+.clipper-catalog-row:hover {
+  background-color: var(--background-modifier-hover);
+}
+
+/* Text and icon styles */
+.clipper-catalog-input {
+  color: var(--text-normal);
+}
+
+.clipper-catalog-icon,
+.clipper-catalog-clear-btn,
+.clipper-catalog-refresh,
+.clipper-catalog-muted {
+  color: var(--text-muted);
+}
+
+.clipper-catalog-title {
+  color: var(--text-normal);
+}
+
+/* Tag styles */
+.clipper-catalog-tag {
+  background-color: var(--interactive-accent);
+  color: var(--text-on-accent);
+  transition: opacity 0.2s ease;
+}
+
+.clipper-catalog-tag:hover {
+  opacity: 0.8;
+}
+
+/* Link styles */
+.clipper-catalog-link {
+  color: var(--text-accent);
+  font-size: 0.75rem;
+  padding: 0.25rem 0;
+  transition: opacity 0.2s ease;
+}
+
+.clipper-catalog-link:hover {
+  opacity: 0.8;
+  text-decoration: underline;
+}

styles.css

@@ -383,6 +383,12 @@
   }
 }
 
+/* Text utilities */
+
+.text-sm {
+  font-size: .75rem;
+}
+
 /* Scoped plugin styles */
 
 .clipper-catalog-plugin {
@@ -468,6 +474,120 @@
   }
 }
 
+/* Container styles */
+
+.clipper-catalog-advanced {
+  background-color: var(--background-secondary);
+  border: 1px solid var(--background-modifier-border);
+}
+
+.clipper-catalog-search {
+  background-color: var(--background-secondary);
+  border: 1px solid var(--background-modifier-border);
+}
+
+/* Button styles */
+
+.clipper-catalog-button {
+  background-color: var(--interactive-accent) !important;
+  color: var(--text-on-accent) !important;
+  transition: opacity 0.2s ease;
+}
+
+.clipper-catalog-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.clipper-catalog-button:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+/* Directory chip styles */
+
+.cc-bg-chip {
+  background-color: var(--background-modifier-form-field);
+}
+
+.cc-bg-chip-hover {
+  background-color: var(--background-secondary-alt);
+}
+
+.cc-text-close-icon {
+  color: var(--background-secondary);
+}
+
+/* For dark theme support */
+
+.theme-dark .cc-text-close-icon {
+  color: var(--background-primary);
+}
+
+/* Table styles */
+
+.clipper-catalog-header-row {
+  border-bottom: 1px solid var(--background-modifier-border);
+}
+
+.clipper-catalog-header-cell {
+  color: var(--text-normal);
+}
+
+.clipper-catalog-header-cell:hover {
+  background-color: var(--background-modifier-hover);
+}
+
+.clipper-catalog-row {
+  border-bottom: 1px solid var(--background-modifier-border);
+}
+
+.clipper-catalog-row:hover {
+  background-color: var(--background-modifier-hover);
+}
+
+/* Text and icon styles */
+
+.clipper-catalog-input {
+  color: var(--text-normal);
+}
+
+.clipper-catalog-icon,
+.clipper-catalog-clear-btn,
+.clipper-catalog-refresh,
+.clipper-catalog-muted {
+  color: var(--text-muted);
+}
+
+.clipper-catalog-title {
+  color: var(--text-normal);
+}
+
+/* Tag styles */
+
+.clipper-catalog-tag {
+  background-color: var(--interactive-accent);
+  color: var(--text-on-accent);
+  transition: opacity 0.2s ease;
+}
+
+.clipper-catalog-tag:hover {
+  opacity: 0.8;
+}
+
+/* Link styles */
+
+.clipper-catalog-link {
+  color: var(--text-accent);
+  font-size: 0.75rem;
+  padding: 0.25rem 0;
+  transition: opacity 0.2s ease;
+}
+
+.clipper-catalog-link:hover {
+  opacity: 0.8;
+  text-decoration: underline;
+}
+
 .hover\:cc-bg-blue-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
@@ -555,4 +675,4 @@
 .dark\:hover\:cc-text-gray-300:hover:is(.cc-dark *) {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity, 1));
-}
+}