Fix admin interface and daily notes layout issues

- Fix admin landing page cards functionality by creating missing /api/admin/check-permissions endpoint
- Remove outdated testing tools card from admin interface
- Remove icons from Design System and Background Images cards in admin
- Fix daily notes carousel clipping issues with simplified layout structure
- Refactor Home container to prevent clipping (remove px-4 from main container)
- Simplify DailyNotesSection and DailyNotesCarousel with clear documentation
- Implement selected text as initial search query for insert link modal
- Add getSelectedText() function to SlateEditor to extract selected text
- Pass selectedText prop to LinkEditorModal and use as initialSearch in FilteredSearchResults
- Improve UX by pre-populating link search with user's selected text

Author: sirjamesgray

app/admin/page.tsx

@@ -41,7 +41,6 @@ export default function AdminPage() {
   // Removed user management state - users tab deleted
 
   // Testing tools state
-  const [statusCheckLoading, setStatusCheckLoading] = useState(false);
   const [showPWABanner, setShowPWABanner] = useState(false);
   const [showUnverifiedEmailBanner, setShowUnverifiedEmailBanner] = useState(false);
   const [noSubscriptionMode, setNoSubscriptionMode] = useState(false);
@@ -137,63 +136,6 @@ export default function AdminPage() {
     });
   };
 
-  // Testing tools handlers
-
-
-
-
-  const handleCheckPayoutStatus = async () => {
-    console.log('[Admin Testing] Starting payout status check...');
-    setStatusCheckLoading(true);
-    try {
-      console.log('[Admin Testing] Sending request to /api/admin/payout-status');
-
-      const response = await fetch('/api/admin/payout-status', {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json'}
-      });
-
-      console.log('[Admin Testing] Status check response status:', response.status);
-      console.log('[Admin Testing] Status check response headers:', Object.fromEntries(response.headers.entries()));
-
-      const result = await response.json();
-      console.log('[Admin Testing] Status check response body:', result);
-
-      if (result.success) {
-        console.log('[Admin Testing] System status check completed successfully');
-        console.log('[Admin Testing] Payout System Status:', result.data);
-        toast({
-          title: "System Status Check Complete",
-          description: "Check console for detailed status information"});
-      } else {
-        console.error('[Admin Testing] Status check failed:', result);
-        toast({
-          title: "Status Check Failed",
-          description: result.error || "An error occurred",
-          variant: "destructive"
-        });
-      }
-    } catch (error) {
-      console.error('[Admin Testing] Exception in status check:', error);
-      console.error('[Admin Testing] Error stack:', error instanceof Error ? error.stack : 'No stack trace');
-      toast({
-        title: "Error",
-        description: "Failed to check system status - check console for details",
-        variant: "destructive"
-      });
-    } finally {
-      console.log('[Admin Testing] Status check completed, setting loading to false');
-      setStatusCheckLoading(false);
-    }
-  };
-
-
-
-
-
-
-
   // Feature flags have been removed
 
   // Enhanced loading and error states
@@ -344,19 +286,6 @@ export default function AdminPage() {
                 />
               </div>
             </div>
-            {/* Testing Tools */}
-            <div className="wewrite-card flex flex-col hover:bg-muted/50 transition-colors">
-              <div className="flex items-center justify-between mb-2">
-                <h3 className="font-medium">Testing Tools</h3>
-              </div>
-              <span className="text-sm text-muted-foreground mb-3">
-                Test payout systems, token earnings, and subscription states
-              </span>
-              <div className="mt-2 space-y-4">
-                <p className="text-sm text-muted-foreground">Testing tools have been moved to the main admin dashboard.</p>
-              </div>
-            </div>
-
             {/* Landing Page Management */}
             <div className="wewrite-card flex flex-col hover:bg-muted/50 transition-colors">
               <div className="flex items-center justify-between mb-2">
@@ -382,7 +311,6 @@ export default function AdminPage() {
             <div className="wewrite-card flex flex-col hover:bg-muted/50 transition-colors">
               <div className="flex items-center justify-between mb-2">
                 <h3 className="font-medium">Design System</h3>
-                <Palette className="h-5 w-5 text-primary" />
               </div>
               <span className="text-sm text-muted-foreground mb-3">
                 Interactive showcase of all WeWrite components with their states and documentation
@@ -404,7 +332,6 @@ export default function AdminPage() {
             <div className="wewrite-card flex flex-col hover:bg-muted/50 transition-colors">
               <div className="flex items-center justify-between mb-2">
                 <h3 className="font-medium">Background Images</h3>
-                <ImageIcon className="h-5 w-5 text-primary" />
               </div>
               <span className="text-sm text-muted-foreground mb-3">
                 Manage default background images available to all users. Upload, delete, and reorder images.

app/api/admin/check-permissions/route.ts

@@ -0,0 +1,35 @@
+/**
+ * Admin Permissions Check API
+ * Provides a simple endpoint to check if the current user has admin permissions
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { checkAdminPermissions } from '../../admin-auth-helper';
+
+export async function GET(request: NextRequest) {
+  try {
+    // Check admin permissions
+    const adminCheck = await checkAdminPermissions(request);
+    
+    if (adminCheck.success) {
+      return NextResponse.json({
+        success: true,
+        isAdmin: true,
+        userEmail: adminCheck.userEmail
+      });
+    } else {
+      return NextResponse.json({
+        success: false,
+        isAdmin: false,
+        error: adminCheck.error
+      });
+    }
+  } catch (error) {
+    console.error('Error checking admin permissions:', error);
+    return NextResponse.json({
+      success: false,
+      isAdmin: false,
+      error: 'Failed to check admin permissions'
+    }, { status: 500 });
+  }
+}

app/components/daily-notes/DailyNotesCarousel.tsx

@@ -42,6 +42,12 @@ interface DailyNotesCarouselProps {
  * - Shows multiple notes per day in container format
  * - Groups pages by their creation date (createdAt field)
  * - Maintains scroll position when loading new dates
+ *
+ * LAYOUT STRUCTURE (simplified for easy debugging):
+ * - Single overflow-x-auto container with generous bottom padding
+ * - Inner flex container for horizontal layout
+ * - No nested clipping containers
+ * - Today pill has 3rem bottom padding space to prevent clipping
  */
 export default function DailyNotesCarousel({
   accentColor = '#1768FF',
@@ -519,13 +525,23 @@ export default function DailyNotesCarousel({
 
   if (loading) {
     return (
-      <div className="flex gap-4 overflow-x-auto pb-2 px-6 pt-2">
-        {Array.from({ length: 5 }).map((_, index) => (
-          <div
-            key={index}
-            className="flex-shrink-0 w-48 h-[200px] bg-muted/50 rounded-xl animate-pulse border-theme-light"
-          />
-        ))}
+      <div
+        className="w-full overflow-x-auto scrollbar-hide"
+        style={{
+          paddingLeft: '1rem',
+          paddingRight: '1rem',
+          paddingTop: '0.5rem',
+          paddingBottom: '3rem' // Extra space for Today pill
+        }}
+      >
+        <div className="flex gap-4">
+          {Array.from({ length: 5 }).map((_, index) => (
+            <div
+              key={index}
+              className="flex-shrink-0 w-48 h-[200px] bg-muted/50 rounded-xl animate-pulse border-theme-light"
+            />
+          ))}
+        </div>
       </div>
     );
   }
@@ -534,17 +550,19 @@ export default function DailyNotesCarousel({
     <div
       ref={carouselRef}
       id="daily-notes-carousel"
-      className={cn(
-        "flex overflow-x-auto pb-2 px-6 pt-2 scrollbar-hide",
-        isFullPage ? "gap-8" : "gap-4" // Larger gaps for full page
-      )}
+      className="w-full overflow-x-auto scrollbar-hide"
       style={{
         scrollbarWidth: 'none',
         msOverflowStyle: 'none',
-        WebkitOverflowScrolling: 'touch'
+        WebkitOverflowScrolling: 'touch',
+        paddingLeft: '1rem',
+        paddingRight: '1rem',
+        paddingTop: '0.5rem',
+        paddingBottom: '3rem' // Extra space for Today pill and any other elements
       }}
     >
-      {/* Load More Past Button */}
+      <div className={cn("flex", isFullPage ? "gap-8" : "gap-4")}>
+        {/* Load More Past Button */}
       <div className="flex-shrink-0 flex items-center justify-center min-w-48 h-[200px]">
         <Button
           variant="secondary"
@@ -617,6 +635,7 @@ export default function DailyNotesCarousel({
           )}
         </Button>
       </div>
+      </div>
     </div>
   );
 }

app/components/daily-notes/DailyNotesSection.tsx

@@ -20,6 +20,11 @@ interface DailyNotesSectionProps {
  * Uses YYYY-MM-DD format for all daily note titles.
  * Now uses the standardized sticky header pattern.
  * Uses accent color from context and respects pill style settings.
+ *
+ * LAYOUT STRUCTURE (simplified for easy debugging):
+ * - Header with horizontal padding (px-4)
+ * - Carousel with no padding wrapper (full width to prevent clipping)
+ * - Parent container has no horizontal padding to allow carousel overflow
  */
 export default function DailyNotesSection({}: DailyNotesSectionProps) {
   const { user, isAuthenticated } = useAuth();
@@ -61,26 +66,26 @@ export default function DailyNotesSection({}: DailyNotesSectionProps) {
 
   return (
     <div className="space-y-4">
-      {/* Static Section Header */}
-      <SectionTitle
-        icon={Calendar}
-        title="My Daily Notes"
-      >
-        <Button
-          variant="secondary"
-          size="sm"
-          onClick={scrollToToday}
-          className="rounded-2xl"
-          aria-label="Scroll to today's notes"
+      {/* Section Header - with horizontal padding */}
+      <div className="px-4">
+        <SectionTitle
+          icon={Calendar}
+          title="My Daily Notes"
         >
-          <Calendar className="h-4 w-4" />
-        </Button>
-      </SectionTitle>
-
-      {/* Content container with fade effect applied to scroll container */}
-      <div className="carousel-container-with-fade">
-        <DailyNotesCarousel accentColor={getAccentColorValue()} />
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={scrollToToday}
+            className="rounded-2xl"
+            aria-label="Scroll to today's notes"
+          >
+            <Calendar className="h-4 w-4" />
+          </Button>
+        </SectionTitle>
       </div>
+
+      {/* Carousel - full width, no clipping containers */}
+      <DailyNotesCarousel accentColor={getAccentColorValue()} />
     </div>
   );
 }

app/components/editor/LinkEditorModal.tsx

@@ -272,13 +272,14 @@ export default function LinkEditorModal({
               />
             </div>
 
-            {/* Search Results */}
+            {/* Search Results - uses selectedText as initial search query */}
             <div className="h-48 sm:h-64">
               <FilteredSearchResults
                 ref={searchInputRef}
                 onSelect={handlePageSelect}
                 userId={user?.uid}
                 placeholder="Search for pages..."
+                initialSearch={selectedText} // Pre-populate search with selected text
                 autoFocus={!selectedText}
                 className="h-full p-2 sm:p-3"
                 preventRedirect={true}