From 50dc0ef16f9b2ba5d66e1b7b3217fef77ca69cb5 Mon Sep 17 00:00:00 2001
From: Tim Disney <tim@disnetdev.com>
Date: Sun, 22 Feb 2026 19:00:34 -0800
Subject: [PATCH 1/2] cleaning up views

---
 src/lib/components/FilteredViewModal.svelte  | 195 ++++---------
 src/lib/components/feed/FilterToolbar.svelte | 292 +++++++------------
 src/lib/stores/feedView.svelte.ts            |  30 +-
 src/lib/types/index.ts                       |   1 +
 src/lib/utils/sourceKeys.ts                  |  18 ++
 5 files changed, 218 insertions(+), 318 deletions(-)

diff --git a/src/lib/components/FilteredViewModal.svelte b/src/lib/components/FilteredViewModal.svelte
index 6244182..a634dfc 100644
--- a/src/lib/components/FilteredViewModal.svelte
+++ b/src/lib/components/FilteredViewModal.svelte
@@ -1,18 +1,17 @@
 <script lang="ts">
   import { filteredViewsStore } from '$lib/stores/filteredViews.svelte';
   import { subscriptionsStore } from '$lib/stores/subscriptions.svelte';
-  import { profileService } from '$lib/services/profiles';
   import Modal from '$lib/components/common/Modal.svelte';
-  import type { BlueskyProfile } from '$lib/types';
-  import {
-    rssSourceKey,
-    sharesSourceKey,
-    documentsSourceKey,
-    ACCOUNT_SOURCE_KINDS,
-    migrateLegacyView,
-  } from '$lib/utils/sourceKeys';
+  import type { SubscriptionSourceType } from '$lib/types';
+  import { subscriptionSourceKey, migrateLegacyView } from '$lib/utils/sourceKeys';
   import { getFaviconUrl } from '$lib/utils/favicon';
 
+  const TYPE_OPTIONS: { value: SubscriptionSourceType; label: string }[] = [
+    { value: 'rss', label: 'Feeds' },
+    { value: 'atproto.shares', label: 'Shares' },
+    { value: 'atproto.documents', label: 'Documents' },
+  ];
+
   interface Props {
     open: boolean;
     editingViewId: number | null;
@@ -27,47 +26,12 @@
   let sourceKeys = $state<Set<string>>(new Set());
   let readFilter = $state<'all' | 'unread' | 'read'>('all');
   let sortOrder = $state<'newest' | 'oldest'>('newest');
+  let typeFilter = $state<Set<SubscriptionSourceType>>(new Set());
   let saving = $state(false);
   let error = $state<string | null>(null);
 
   // Search state for filtering source lists
   let feedSearch = $state('');
-  let accountSearch = $state('');
-
-  // Derive unique account DIDs from atproto subscriptions
-  let accountDids = $derived(() => {
-    const dids = new Set<string>();
-    for (const sub of subscriptionsStore.subscriptions) {
-      if (sub.sourceType?.startsWith('atproto.') && sub.subjectDid) {
-        dids.add(sub.subjectDid);
-      }
-    }
-    return [...dids];
-  });
-
-  // Account profiles for display
-  let accountProfiles = $state<Map<string, BlueskyProfile>>(new Map());
-
-  // Load profiles for account DIDs
-  $effect(() => {
-    if (!open) return;
-    const dids = accountDids();
-    for (const did of dids) {
-      if (!accountProfiles.has(did)) {
-        profileService.getProfile(did).then((p) => {
-          if (p) {
-            accountProfiles = new Map(accountProfiles).set(did, p);
-          }
-        });
-      }
-    }
-  });
-
-  function getModalAccountDisplayName(did: string): string {
-    const profile = accountProfiles.get(did);
-    if (profile) return profile.displayName || profile.handle;
-    return did;
-  }
 
   // Filtered subscriptions based on search
   let filteredSubscriptions = $derived(
@@ -82,16 +46,26 @@
       : subscriptionsStore.subscriptions
   );
 
-  // Filtered accounts based on search
-  let filteredAccounts = $derived(
-    accountSearch
-      ? accountDids().filter((did) => {
-          const term = accountSearch.toLowerCase();
-          const displayName = getModalAccountDisplayName(did).toLowerCase();
-          return displayName.includes(term) || did.toLowerCase().includes(term);
-        })
-      : accountDids()
-  );
+  function toggleTypeFilter(type: SubscriptionSourceType) {
+    const next = new Set(typeFilter);
+    if (next.has(type)) {
+      next.delete(type);
+    } else {
+      next.add(type);
+    }
+    typeFilter = next;
+  }
+
+  // Helper to get all account DIDs for legacy migration
+  function getAllFollowDids(): string[] {
+    const dids = new Set<string>();
+    for (const sub of subscriptionsStore.subscriptions) {
+      if (sub.sourceType?.startsWith('atproto.') && sub.subjectDid) {
+        dids.add(sub.subjectDid);
+      }
+    }
+    return [...dids];
+  }
 
   // Reset form when modal opens or editingViewId changes
   $effect(() => {
@@ -102,6 +76,7 @@
           name = view.name;
           readFilter = view.readFilter;
           sortOrder = view.sortOrder;
+          typeFilter = new Set(view.typeFilter ?? []);
 
           if (view.sourceMode != null) {
             // New format (coerce any stale 'exclude' to 'include')
@@ -112,7 +87,7 @@
             const allSubIds = subscriptionsStore.subscriptions
               .map((s) => s.id)
               .filter((id): id is number => id != null);
-            const allDids = accountDids();
+            const allDids = getAllFollowDids();
             const migrated = migrateLegacyView(
               {
                 showArticles: view.showArticles,
@@ -130,7 +105,6 @@
             sourceKeys = new Set(migrated.sourceKeys);
           }
           feedSearch = '';
-          accountSearch = '';
           return;
         }
       }
@@ -140,8 +114,8 @@
       sourceKeys = new Set();
       readFilter = 'all';
       sortOrder = 'newest';
+      typeFilter = new Set();
       feedSearch = '';
-      accountSearch = '';
     }
   });
 
@@ -177,6 +151,7 @@
         sourceKeys: Array.from(sourceKeys),
         readFilter,
         sortOrder,
+        typeFilter: typeFilter.size > 0 ? Array.from(typeFilter) : undefined,
       };
 
       if (editingViewId != null) {
@@ -223,19 +198,19 @@
       </div>
 
       {#if sourceMode === 'include'}
-        <!-- Feeds -->
+        <!-- Subscriptions -->
         {#if subscriptionsStore.subscriptions.length > 0}
-          <div class="source-group-header">Feeds</div>
+          <div class="source-group-header">Subscriptions</div>
           <input
             type="text"
-            placeholder="Search feeds..."
+            placeholder="Search subscriptions..."
             bind:value={feedSearch}
             class="search-input"
           />
           <div class="checklist">
             {#each filteredSubscriptions as sub (sub.id)}
-              {#if sub.id != null}
-                {@const key = rssSourceKey(sub.id)}
+              {@const key = subscriptionSourceKey(sub)}
+              {#if key}
                 {@const iconUrl =
                   sub.customIconUrl || getFaviconUrl(sub.siteUrl || sub.feedUrl || '')}
                 <label class="checklist-item">
@@ -252,55 +227,31 @@
               {/if}
             {/each}
             {#if feedSearch && filteredSubscriptions.length === 0}
-              <div class="no-results">No feeds match</div>
+              <div class="no-results">No subscriptions match</div>
             {/if}
           </div>
         {/if}
-
-        <!-- Account groups -->
-        {#if accountDids().length > 0}
-          <div class="source-group-header">Accounts</div>
-          <input
-            type="text"
-            placeholder="Search accounts..."
-            bind:value={accountSearch}
-            class="search-input"
-          />
-          {#each filteredAccounts as did (did)}
-            {@const profile = accountProfiles.get(did)}
-            <div class="source-group-header account-header">
-              {#if profile?.avatar}
-                <img src={profile.avatar} alt="" class="header-avatar" />
-              {:else}
-                <div class="header-avatar-placeholder"></div>
-              {/if}
-              {#if profile}
-                {profile.displayName || profile.handle}
-              {:else}
-                {did.slice(0, 20)}...
-              {/if}
-            </div>
-            <div class="checklist account-kind-checklist">
-              {#each ACCOUNT_SOURCE_KINDS as { kind, label, keyFn }}
-                {@const key = keyFn(did)}
-                <label class="checklist-item">
-                  <input
-                    type="checkbox"
-                    checked={sourceKeys.has(key)}
-                    onchange={() => toggleSourceKey(key)}
-                  />
-                  <span class="checklist-label">{label}</span>
-                </label>
-              {/each}
-            </div>
-          {/each}
-          {#if accountSearch && filteredAccounts.length === 0}
-            <div class="no-results">No accounts match</div>
-          {/if}
-        {/if}
       {/if}
     </div>
 
+    <!-- Type Filter -->
+    <div class="form-group">
+      <span class="form-label">Content Types</span>
+      <div class="checklist type-checklist">
+        {#each TYPE_OPTIONS as opt}
+          <label class="checklist-item">
+            <input
+              type="checkbox"
+              checked={typeFilter.has(opt.value)}
+              onchange={() => toggleTypeFilter(opt.value)}
+            />
+            <span class="checklist-label">{opt.label}</span>
+          </label>
+        {/each}
+      </div>
+      <span class="form-hint">Leave all unchecked to show all types</span>
+    </div>
+
     <!-- Read State -->
     <div class="form-group">
       <span class="form-label">Read State</span>
@@ -416,30 +367,6 @@
     margin-top: 0.5rem;
   }
 
-  .account-header {
-    display: flex;
-    align-items: center;
-    gap: 0.375rem;
-    text-transform: none;
-    letter-spacing: normal;
-  }
-
-  .header-avatar {
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-    border-radius: 50%;
-    object-fit: cover;
-  }
-
-  .header-avatar-placeholder {
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-    border-radius: 50%;
-    background: var(--color-border, #e0e0e0);
-  }
-
   .search-input {
     width: 100%;
     padding: 0.375rem 0.5rem;
@@ -480,9 +407,13 @@
     gap: 0.25rem;
   }
 
-  .account-kind-checklist {
+  .type-checklist {
     max-height: none;
-    padding-left: 1.5rem;
+  }
+
+  .form-hint {
+    font-size: 0.75rem;
+    color: var(--color-text-secondary);
   }
 
   .checklist-item {
diff --git a/src/lib/components/feed/FilterToolbar.svelte b/src/lib/components/feed/FilterToolbar.svelte
index 9976ea3..c58b46d 100644
--- a/src/lib/components/feed/FilterToolbar.svelte
+++ b/src/lib/components/feed/FilterToolbar.svelte
@@ -4,58 +4,17 @@
   import { feedViewStore } from '$lib/stores/feedView.svelte';
   import { filteredViewsStore } from '$lib/stores/filteredViews.svelte';
   import { subscriptionsStore } from '$lib/stores/subscriptions.svelte';
-  import { profileService } from '$lib/services/profiles';
   import { getFaviconUrl } from '$lib/utils/favicon';
   import { itemLabelsStore } from '$lib/stores/itemLabels.svelte';
   import { goto } from '$app/navigation';
-  import {
-    rssSourceKey,
-    sharesSourceKey,
-    documentsSourceKey,
-    isRssSource,
-    getRssSubscriptionId,
-    getSourceDid,
-    isSharesSource,
-    isDocumentsSource,
-    ACCOUNT_SOURCE_KINDS,
-  } from '$lib/utils/sourceKeys';
-  import type { BlueskyProfile } from '$lib/types';
-
-  // Derive unique account DIDs from atproto subscriptions
-  let accountDids = $derived(() => {
-    const dids = new Set<string>();
-    for (const sub of subscriptionsStore.subscriptions) {
-      if (sub.sourceType?.startsWith('atproto.') && sub.subjectDid) {
-        dids.add(sub.subjectDid);
-      }
-    }
-    return [...dids];
-  });
+  import { subscriptionSourceKey } from '$lib/utils/sourceKeys';
+  import type { SubscriptionSourceType } from '$lib/types';
 
-  // Resolved profiles for accounts that only have DIDs
-  let resolvedProfiles = $state<Map<string, BlueskyProfile>>(new Map());
-
-  // Resolve profiles when account DIDs change
-  $effect(() => {
-    const dids = accountDids();
-    const needsResolving = dids.filter((did) => !resolvedProfiles.has(did));
-    if (needsResolving.length > 0) {
-      profileService.getProfiles(needsResolving).then((profiles) => {
-        resolvedProfiles = profiles;
-      });
-    }
-  });
-
-  function getAccountDisplayName(did: string): string {
-    const resolved = resolvedProfiles.get(did);
-    if (resolved) return resolved.displayName || resolved.handle;
-    return did;
-  }
-
-  function getAccountAvatarUrl(did: string): string | undefined {
-    const resolved = resolvedProfiles.get(did);
-    return resolved?.avatar;
-  }
+  const TYPE_OPTIONS: { value: SubscriptionSourceType; label: string }[] = [
+    { value: 'rss', label: 'Feeds' },
+    { value: 'atproto.shares', label: 'Shares' },
+    { value: 'atproto.documents', label: 'Documents' },
+  ];
 
   interface Props {
     showSourceFilter: boolean;
@@ -74,13 +33,11 @@
 
   // Search state for filtering lists
   let feedSearch = $state('');
-  let accountSearch = $state('');
 
   // Clear search when popover closes
   $effect(() => {
     if (!sourcePopoverOpen) {
       feedSearch = '';
-      accountSearch = '';
     }
   });
 
@@ -97,16 +54,33 @@
       : subscriptionsStore.subscriptions
   );
 
-  // Filtered accounts based on search
-  let filteredAccounts = $derived(
-    accountSearch
-      ? accountDids().filter((did) => {
-          const term = accountSearch.toLowerCase();
-          const displayName = getAccountDisplayName(did).toLowerCase();
-          return displayName.includes(term) || did.toLowerCase().includes(term);
-        })
-      : accountDids()
-  );
+  // Type filter state
+  let typePopoverOpen = $state(false);
+  let typePopoverRef = $state<HTMLDivElement | null>(null);
+  let activeTypeFilter = $derived(feedViewStore.toolbarTypeFilter);
+  let activeTypeSet = $derived(new Set(activeTypeFilter));
+
+  let typeFilterLabel = $derived.by(() => {
+    if (activeTypeFilter.length === 0) return 'Type';
+    return `Type (${activeTypeFilter.length})`;
+  });
+
+  function toggleTypeFilter(type: SubscriptionSourceType) {
+    const newTypes = activeTypeSet.has(type)
+      ? activeTypeFilter.filter((t) => t !== type)
+      : [...activeTypeFilter, type];
+    feedViewStore.setToolbarTypeFilter(newTypes);
+  }
+
+  function clearTypeFilter() {
+    feedViewStore.setToolbarTypeFilter([]);
+  }
+
+  function handleTypeClickOutside(e: MouseEvent) {
+    if (typePopoverOpen && typePopoverRef && !typePopoverRef.contains(e.target as Node)) {
+      typePopoverOpen = false;
+    }
+  }
 
   // Tag filter state
   let tagPopoverOpen = $state(false);
@@ -148,46 +122,30 @@
     feedViewStore.setToolbarSourceFilter(ef.sourceMode, keys);
   }
 
-  // All possible feed keys
-  let allFeedKeys = $derived(
-    subscriptionsStore.subscriptions.filter((s) => s.id != null).map((s) => rssSourceKey(s.id!))
-  );
-
-  // All possible account keys
-  let allAccountKeys = $derived(
-    accountDids().flatMap((did) => ACCOUNT_SOURCE_KINDS.map(({ keyFn }) => keyFn(did)))
-  );
-
-  let allFeedsSelected = $derived(
-    allFeedKeys.length > 0 && allFeedKeys.every((k) => sourceKeySet.has(k))
-  );
-  let allAccountsSelected = $derived(
-    allAccountKeys.length > 0 && allAccountKeys.every((k) => sourceKeySet.has(k))
-  );
-
-  function selectAllFeeds() {
-    const newKeys = allFeedKeys.filter((k) => !sourceKeySet.has(k));
-    if (newKeys.length > 0) {
-      feedViewStore.setToolbarSourceFilter(ef.sourceMode, [...ef.sourceKeys, ...newKeys]);
+  // All possible source keys (deduplicated across all subscriptions)
+  let allSourceKeys = $derived(() => {
+    const keys = new Set<string>();
+    for (const sub of subscriptionsStore.subscriptions) {
+      const key = subscriptionSourceKey(sub);
+      if (key) keys.add(key);
     }
-  }
+    return [...keys];
+  });
 
-  function deselectAllFeeds() {
-    const feedKeySet = new Set(allFeedKeys);
-    const keys = ef.sourceKeys.filter((k) => !feedKeySet.has(k));
-    feedViewStore.setToolbarSourceFilter(ef.sourceMode, keys);
-  }
+  let allSourcesSelected = $derived(
+    allSourceKeys().length > 0 && allSourceKeys().every((k) => sourceKeySet.has(k))
+  );
 
-  function selectAllAccounts() {
-    const newKeys = allAccountKeys.filter((k) => !sourceKeySet.has(k));
+  function selectAllSources() {
+    const newKeys = allSourceKeys().filter((k) => !sourceKeySet.has(k));
     if (newKeys.length > 0) {
       feedViewStore.setToolbarSourceFilter(ef.sourceMode, [...ef.sourceKeys, ...newKeys]);
     }
   }
 
-  function deselectAllAccounts() {
-    const accountKeySet = new Set(allAccountKeys);
-    const keys = ef.sourceKeys.filter((k) => !accountKeySet.has(k));
+  function deselectAllSources() {
+    const allKeySet = new Set(allSourceKeys());
+    const keys = ef.sourceKeys.filter((k) => !allKeySet.has(k));
     feedViewStore.setToolbarSourceFilter(ef.sourceMode, keys);
   }
 
@@ -195,12 +153,14 @@
     if (sourcePopoverOpen && sourcePopoverRef && !sourcePopoverRef.contains(e.target as Node)) {
       feedViewStore.setSourcePopoverOpen(false);
     }
+    handleTypeClickOutside(e);
     handleTagClickOutside(e);
   }
 
   function handleKeydown(e: KeyboardEvent) {
     if (e.key === 'Escape') {
       feedViewStore.setSourcePopoverOpen(false);
+      typePopoverOpen = false;
       tagPopoverOpen = false;
     }
   }
@@ -255,6 +215,7 @@
         readFilter: feedViewStore.showOnlyUnread ? 'unread' : 'all',
         sortOrder: feedViewStore.currentSortOrder,
         tagFilter: activeTagFilter.length > 0 ? [...activeTagFilter] : undefined,
+        typeFilter: activeTypeFilter.length > 0 ? [...activeTypeFilter] : undefined,
       });
       showNameInput = false;
       newViewName = '';
@@ -426,29 +387,29 @@
             </div>
 
             {#if ef.sourceMode === 'include'}
-              <!-- Feeds group -->
+              <!-- Subscriptions list -->
               {#if subscriptionsStore.subscriptions.length > 0}
                 <div class="popover-group-header">
-                  <span>Feeds</span>
+                  <span>Subscriptions</span>
                   <button
                     class="select-all-btn"
-                    onclick={allFeedsSelected ? deselectAllFeeds : selectAllFeeds}
+                    onclick={allSourcesSelected ? deselectAllSources : selectAllSources}
                   >
-                    {allFeedsSelected ? 'Deselect all' : 'Select all'}
+                    {allSourcesSelected ? 'Deselect all' : 'Select all'}
                   </button>
                 </div>
                 <div class="popover-search">
                   <input
                     type="text"
-                    placeholder="Search feeds..."
+                    placeholder="Search subscriptions..."
                     bind:value={feedSearch}
                     class="search-input"
                   />
                 </div>
                 <div class="popover-list">
                   {#each filteredSubscriptions as sub}
-                    {#if sub.id != null}
-                      {@const key = rssSourceKey(sub.id)}
+                    {@const key = subscriptionSourceKey(sub)}
+                    {#if key}
                       {@const iconUrl =
                         sub.customIconUrl || getFaviconUrl(sub.siteUrl || sub.feedUrl || '')}
                       <label class="check-label">
@@ -465,58 +426,10 @@
                     {/if}
                   {/each}
                   {#if feedSearch && filteredSubscriptions.length === 0}
-                    <div class="no-results">No feeds match</div>
+                    <div class="no-results">No subscriptions match</div>
                   {/if}
                 </div>
               {/if}
-
-              <!-- Account groups -->
-              {#if accountDids().length > 0}
-                <div class="popover-group-header">
-                  <span>Accounts</span>
-                  <button
-                    class="select-all-btn"
-                    onclick={allAccountsSelected ? deselectAllAccounts : selectAllAccounts}
-                  >
-                    {allAccountsSelected ? 'Deselect all' : 'Select all'}
-                  </button>
-                </div>
-                <div class="popover-search">
-                  <input
-                    type="text"
-                    placeholder="Search accounts..."
-                    bind:value={accountSearch}
-                    class="search-input"
-                  />
-                </div>
-                {#each filteredAccounts as did}
-                  {@const avatarUrl = getAccountAvatarUrl(did)}
-                  <div class="popover-group-header account-group-header">
-                    {#if avatarUrl}
-                      <img src={avatarUrl} alt="" class="group-avatar" />
-                    {:else}
-                      <div class="group-avatar-placeholder"></div>
-                    {/if}
-                    {getAccountDisplayName(did)}
-                  </div>
-                  <div class="popover-list account-kind-list">
-                    {#each ACCOUNT_SOURCE_KINDS as { kind, label, keyFn }}
-                      {@const key = keyFn(did)}
-                      <label class="check-label">
-                        <input
-                          type="checkbox"
-                          checked={sourceKeySet.has(key)}
-                          onchange={() => toggleSourceKey(key)}
-                        />
-                        <span class="check-text">{label}</span>
-                      </label>
-                    {/each}
-                  </div>
-                {/each}
-                {#if accountSearch && filteredAccounts.length === 0}
-                  <div class="no-results">No accounts match</div>
-                {/if}
-              {/if}
             {/if}
           </div>
         {/if}
@@ -524,10 +437,54 @@
     </div>
   {/if}
 
+  <span class="toolbar-divider group-divider"></span>
+
+  <!-- Type filter dropdown -->
+  <div class="filter-group">
+    <div class="dropdown-wrapper" bind:this={typePopoverRef}>
+      <button
+        class="filter-btn"
+        class:has-filter={activeTypeFilter.length > 0}
+        onclick={(e) => {
+          e.stopPropagation();
+          typePopoverOpen = !typePopoverOpen;
+        }}
+      >
+        <Icon name="layers" size={16} />
+        <span class="filter-label">{typeFilterLabel}</span>
+        <Icon name="chevron-down" size={12} />
+      </button>
+
+      {#if typePopoverOpen}
+        <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+        <div class="popover" use:viewportAware onclick={(e) => e.stopPropagation()}>
+          <div class="popover-group-header">
+            <span>Types</span>
+            {#if activeTypeFilter.length > 0}
+              <button class="select-all-btn" onclick={clearTypeFilter}>Clear</button>
+            {/if}
+          </div>
+          <div class="popover-list">
+            {#each TYPE_OPTIONS as opt}
+              <label class="check-label">
+                <input
+                  type="checkbox"
+                  checked={activeTypeSet.has(opt.value)}
+                  onchange={() => toggleTypeFilter(opt.value)}
+                />
+                <span class="check-text">{opt.label}</span>
+              </label>
+            {/each}
+          </div>
+        </div>
+      {/if}
+    </div>
+  </div>
+
   {#if allTags.length > 0}
     <span class="toolbar-divider group-divider"></span>
 
-    <!-- Group 3: Tags dropdown -->
+    <!-- Tags dropdown -->
     <div class="filter-group">
       <div class="dropdown-wrapper" bind:this={tagPopoverRef}>
         <button
@@ -598,9 +555,11 @@
         class="filter-btn save-btn"
         class:has-changes={isEditingView
           ? feedViewStore.hasUnsavedChanges
-          : ef.sourceMode !== 'all'}
+          : ef.sourceMode !== 'all' || activeTypeFilter.length > 0}
         onclick={handleSave}
-        disabled={isEditingView ? !feedViewStore.hasUnsavedChanges : ef.sourceMode === 'all'}
+        disabled={isEditingView
+          ? !feedViewStore.hasUnsavedChanges
+          : ef.sourceMode === 'all' && activeTypeFilter.length === 0}
         title={isEditingView ? 'Update view' : 'Save as new view'}
       >
         <Icon name="save" size={16} />
@@ -756,32 +715,6 @@
     text-decoration: underline;
   }
 
-  .account-group-header {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 0.375rem;
-    text-transform: none;
-    font-size: 0.75rem;
-    letter-spacing: normal;
-  }
-
-  .group-avatar {
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-    border-radius: 50%;
-    object-fit: cover;
-  }
-
-  .group-avatar-placeholder {
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-    border-radius: 50%;
-    background: var(--color-border, #e0e0e0);
-  }
-
   .radio-label,
   .check-label {
     display: flex;
@@ -851,11 +784,6 @@
     gap: 0.125rem;
   }
 
-  .account-kind-list {
-    max-height: none;
-    padding: 0.25rem 0.375rem 0.25rem 1.5rem;
-  }
-
   /* Save button */
   .save-btn {
     color: var(--color-text-secondary);
diff --git a/src/lib/stores/feedView.svelte.ts b/src/lib/stores/feedView.svelte.ts
index 02f4fa1..e72a164 100644
--- a/src/lib/stores/feedView.svelte.ts
+++ b/src/lib/stores/feedView.svelte.ts
@@ -13,6 +13,7 @@ import type {
   CombinedFeedItem,
   UserShare,
   SavedItem,
+  SubscriptionSourceType,
 } from '$lib/types';
 import {
   isRssSource,
@@ -42,6 +43,7 @@ export interface EffectiveFilters {
   sourceKeys: string[];
   readFilter: 'all' | 'unread' | 'read';
   sortOrder: 'newest' | 'oldest';
+  typeFilter: SubscriptionSourceType[];
 }
 
 /**
@@ -125,6 +127,8 @@ function createFeedViewStore() {
   let toolbarSortOrder = $state<'newest' | 'oldest' | null>(null);
   // Tag filter (empty = no tag filter)
   let toolbarTagFilter = $state<string[]>([]);
+  // Type filter (empty = all types shown)
+  let toolbarTypeFilter = $state<SubscriptionSourceType[]>([]);
 
   // Bookmarks view sub-filter (inbox vs archive)
   let savedView = $state<'inbox' | 'archive'>('inbox');
@@ -169,13 +173,14 @@ function createFeedViewStore() {
       sourceKeys: toolbarSourceKeys,
       readFilter: showOnlyUnread ? 'unread' : 'all',
       sortOrder: toolbarSortOrder ?? preferences.sortOrder,
+      typeFilter: toolbarTypeFilter,
     };
   });
 
   // Derived: whether any toolbar filter differs from defaults
   let hasActiveFilters = $derived.by(() => {
     if (activeFilteredView) return true;
-    return toolbarSourceMode !== 'all';
+    return toolbarSourceMode !== 'all' || toolbarTypeFilter.length > 0;
   });
 
   // Derived: whether toolbar state differs from the persisted saved view
@@ -194,6 +199,11 @@ function createFeedViewStore() {
     for (const key of toolbarSourceKeys) {
       if (!savedKeys.has(key)) return true;
     }
+    const savedTypeFilter = new Set(view.typeFilter ?? []);
+    if (toolbarTypeFilter.length !== savedTypeFilter.size) return true;
+    for (const t of toolbarTypeFilter) {
+      if (!savedTypeFilter.has(t)) return true;
+    }
     return false;
   });
 
@@ -227,23 +237,26 @@ function createFeedViewStore() {
   let readShareUrisThisSession = $state<Set<string>>(new Set());
   let readDocumentUrisThisSession = $state<Set<string>>(new Set());
 
-  // Derived: whether articles are shown (any RSS source allowed)
+  // Derived: whether articles are shown (any RSS source allowed and type filter permits)
   let showArticles = $derived.by((): boolean => {
     const fv = effectiveFilters;
+    if (fv.typeFilter.length > 0 && !fv.typeFilter.includes('rss')) return false;
     if (fv.sourceMode === 'all') return true;
     return fv.sourceKeys.some(isRssSource);
   });
 
-  // Derived: whether shares are shown (any shares source allowed)
+  // Derived: whether shares are shown (any shares source allowed and type filter permits)
   let showShares = $derived.by((): boolean => {
     const fv = effectiveFilters;
+    if (fv.typeFilter.length > 0 && !fv.typeFilter.includes('atproto.shares')) return false;
     if (fv.sourceMode === 'all') return true;
     return fv.sourceKeys.some(isSharesSource);
   });
 
-  // Derived: whether documents are shown (any documents source allowed)
+  // Derived: whether documents are shown (any documents source allowed and type filter permits)
   let showDocuments = $derived.by((): boolean => {
     const fv = effectiveFilters;
+    if (fv.typeFilter.length > 0 && !fv.typeFilter.includes('atproto.documents')) return false;
     if (fv.sourceMode === 'all') return true;
     return fv.sourceKeys.some(isDocumentsSource);
   });
@@ -820,6 +833,7 @@ function createFeedViewStore() {
       readFilter: showOnlyUnread ? 'unread' : 'all',
       sortOrder: toolbarSortOrder ?? preferences.sortOrder,
       tagFilter: toolbarTagFilter.length > 0 ? [...toolbarTagFilter] : undefined,
+      typeFilter: toolbarTypeFilter.length > 0 ? [...toolbarTypeFilter] : undefined,
     });
   }
 
@@ -828,6 +842,7 @@ function createFeedViewStore() {
     toolbarSourceKeys = [];
     toolbarSortOrder = null;
     toolbarTagFilter = [];
+    toolbarTypeFilter = [];
   }
 
   function toggleUnreadFilter() {
@@ -943,6 +958,9 @@ function createFeedViewStore() {
     get toolbarTagFilter() {
       return toolbarTagFilter;
     },
+    get toolbarTypeFilter() {
+      return toolbarTypeFilter;
+    },
     get currentSortOrder() {
       return toolbarSortOrder ?? preferences.sortOrder;
     },
@@ -990,6 +1008,9 @@ function createFeedViewStore() {
     setToolbarTagFilter(tags: string[]) {
       toolbarTagFilter = tags;
     },
+    setToolbarTypeFilter(types: SubscriptionSourceType[]) {
+      toolbarTypeFilter = types;
+    },
     setToolbarSourceFilter(mode: 'all' | 'include', keys: string[]) {
       toolbarSourceMode = mode;
       toolbarSourceKeys = keys;
@@ -1062,6 +1083,7 @@ function createFeedViewStore() {
           showOnlyUnread = fv.readFilter === 'unread';
           toolbarSortOrder = fv.sortOrder;
           toolbarTagFilter = fv.tagFilter ? [...fv.tagFilter] : [];
+          toolbarTypeFilter = fv.typeFilter ? [...fv.typeFilter] : [];
           // Fire-and-forget legacy migration write-back
           if (fv.sourceMode == null && fv.id != null) {
             filteredViewsStore.update(fv.id, {
diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts
index fdc5435..baea07b 100644
--- a/src/lib/types/index.ts
+++ b/src/lib/types/index.ts
@@ -673,6 +673,7 @@ export interface FilteredView {
   readFilter: 'all' | 'unread' | 'read';
   sortOrder: 'newest' | 'oldest';
   tagFilter?: string[];
+  typeFilter?: SubscriptionSourceType[];
   createdAt: number;
   updatedAt: number;
   position: number;
diff --git a/src/lib/utils/sourceKeys.ts b/src/lib/utils/sourceKeys.ts
index 93605c8..3f8e50f 100644
--- a/src/lib/utils/sourceKeys.ts
+++ b/src/lib/utils/sourceKeys.ts
@@ -63,6 +63,24 @@ export function getSourceDid(key: string): string {
   return parseSourceKey(key).id;
 }
 
+// --- Subscription source key (derive from subscription type) ---
+
+import type { Subscription } from '$lib/types';
+
+export function subscriptionSourceKey(sub: Subscription): string | null {
+  if (sub.id == null) return null;
+  if (!sub.sourceType || sub.sourceType === 'rss') {
+    return rssSourceKey(sub.id);
+  }
+  if (sub.sourceType === 'atproto.shares' && sub.subjectDid) {
+    return sharesSourceKey(sub.subjectDid);
+  }
+  if (sub.sourceType === 'atproto.documents' && sub.subjectDid) {
+    return documentsSourceKey(sub.subjectDid);
+  }
+  return null;
+}
+
 // --- Account source kinds (for UI iteration) ---
 
 export const ACCOUNT_SOURCE_KINDS = [

From c6b0e9f4b04e598c2b367e274d5f8ea3d2192ecd Mon Sep 17 00:00:00 2001
From: Tim Disney <tim@disnetdev.com>
Date: Sun, 22 Feb 2026 19:08:34 -0800
Subject: [PATCH 2/2] cleanup view filters

---
 src/lib/components/FilteredViewModal.svelte  | 14 ++++++++++----
 src/lib/components/feed/FilterToolbar.svelte | 14 ++++++++++----
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/FilteredViewModal.svelte b/src/lib/components/FilteredViewModal.svelte
index a634dfc..bae6f1a 100644
--- a/src/lib/components/FilteredViewModal.svelte
+++ b/src/lib/components/FilteredViewModal.svelte
@@ -7,9 +7,9 @@
   import { getFaviconUrl } from '$lib/utils/favicon';
 
   const TYPE_OPTIONS: { value: SubscriptionSourceType; label: string }[] = [
-    { value: 'rss', label: 'Feeds' },
-    { value: 'atproto.shares', label: 'Shares' },
-    { value: 'atproto.documents', label: 'Documents' },
+    { value: 'rss', label: 'RSS Feeds' },
+    { value: 'atproto.shares', label: 'Skyreader Shares' },
+    { value: 'atproto.documents', label: 'Standard.site Documents' },
   ];
 
   interface Props {
@@ -211,8 +211,14 @@
             {#each filteredSubscriptions as sub (sub.id)}
               {@const key = subscriptionSourceKey(sub)}
               {#if key}
+                {@const isAtProto = sub.sourceType?.startsWith('atproto.') ?? false}
                 {@const iconUrl =
-                  sub.customIconUrl || getFaviconUrl(sub.siteUrl || sub.feedUrl || '')}
+                  sub.customIconUrl ||
+                  (isAtProto
+                    ? sub.siteUrl
+                      ? getFaviconUrl(sub.siteUrl)
+                      : '/icons/icon-192.svg'
+                    : getFaviconUrl(sub.siteUrl || sub.feedUrl || ''))}
                 <label class="checklist-item">
                   <input
                     type="checkbox"
diff --git a/src/lib/components/feed/FilterToolbar.svelte b/src/lib/components/feed/FilterToolbar.svelte
index c58b46d..5b1dacb 100644
--- a/src/lib/components/feed/FilterToolbar.svelte
+++ b/src/lib/components/feed/FilterToolbar.svelte
@@ -11,9 +11,9 @@
   import type { SubscriptionSourceType } from '$lib/types';
 
   const TYPE_OPTIONS: { value: SubscriptionSourceType; label: string }[] = [
-    { value: 'rss', label: 'Feeds' },
-    { value: 'atproto.shares', label: 'Shares' },
-    { value: 'atproto.documents', label: 'Documents' },
+    { value: 'rss', label: 'RSS Feeds' },
+    { value: 'atproto.shares', label: 'Skyreader Shares' },
+    { value: 'atproto.documents', label: 'Standard.site Documents' },
   ];
 
   interface Props {
@@ -410,8 +410,14 @@
                   {#each filteredSubscriptions as sub}
                     {@const key = subscriptionSourceKey(sub)}
                     {#if key}
+                      {@const isAtProto = sub.sourceType?.startsWith('atproto.') ?? false}
                       {@const iconUrl =
-                        sub.customIconUrl || getFaviconUrl(sub.siteUrl || sub.feedUrl || '')}
+                        sub.customIconUrl ||
+                        (isAtProto
+                          ? sub.siteUrl
+                            ? getFaviconUrl(sub.siteUrl)
+                            : '/icons/icon-192.svg'
+                          : getFaviconUrl(sub.siteUrl || sub.feedUrl || ''))}
                       <label class="check-label">
                         <input
                           type="checkbox"