refactor: update styles and prompt selection logic (#103)

Author: Junyi-99

webapp/_webapp/src/index.css

@@ -459,7 +459,7 @@ video, canvas, audio, iframe, embed, object {
 }
 
 .pd-rnd.dragging {
-  box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 32px; /* horizontal, vertical, blur, spread */
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px; /* horizontal, vertical, blur, spread */
 }
 
 .pd-context-menu {

webapp/_webapp/src/views/chat/footer/index.tsx

@@ -121,7 +121,7 @@ export function PromptInput() {
   return (
     <div className="pd-app-tab-content-footer chat-prompt-input noselect rnd-cancel relative">
       {/* Only show one popup at a time - priority: prompts > actions > model selection */}
-      {prompts.length > 0 && <PromptSelection prompts={prompts} />}
+      {prompt.startsWith("/") && <PromptSelection prompts={prompts} />}
       {prompts.length === 0 && actions.length > 0 && <ActionSelection actions={actions} />}
       {prompts.length === 0 && actions.length === 0 && showModelSelection && (
         <ModelSelection onSelectModel={handleModelSelect} />

webapp/_webapp/src/views/chat/footer/toolbar/prompt-selection.tsx

@@ -35,5 +35,13 @@ export function PromptSelection({ prompts }: PromptSelectionProps) {
     inputRef.current?.focus();
   }, [setPrompt, inputRef]);
 
+  if (prompts.length === 0) {
+    return (
+      <div className="transition-all duration-100 absolute bottom-full left-0 right-0 mb-1 z-50 bg-white shadow-lg rounded-lg border border-gray-200 p-4">
+        <div className="text-gray-500 text-sm text-center">No prompts found</div>
+      </div>
+    );
+  }
+  
   return <Selection items={items} onSelect={onSelect} onClose={onClose} />;
 }

webapp/_webapp/src/views/settings/setting-item-input.tsx

@@ -21,7 +21,7 @@ export const SettingItemInput = ({
 }: SettingItemInputProps) => (
   <div className="flex flex-row gap-2 w-full bg-content2 rounded-medium p-2 items-center">
     <div className="flex flex-col gap-0 w-full pl-3 pt-1 pb-1">
-      <p className="text-sm">{label}</p>
+      <p className="text-xs">{label}</p>
       <div className="flex flex-row gap-2">
         <input
           className={cn(className, "w-full text-xs bg-transparent p-2 rnd-cancel border border-gray-200 rounded-md")}

webapp/_webapp/src/views/settings/setting-item-select.tsx

@@ -19,7 +19,7 @@ export const SettingItemSelect = ({
 }: SettingItemSelectProps) => (
   <div className="flex flex-row gap-2 w-full bg-content2 rounded-medium p-2 items-center">
     <div className="flex flex-col gap-0 w-full pl-3 pt-1 pb-1">
-      <p className="text-sm">{label}</p>
+      <p className="text-xs">{label}</p>
       <p className="text-xs text-gray-500">{description}</p>
     </div>
     <Select